Added game code generator

client/src/components/Game.js

@@ -701,6 +701,7 @@ const Game = (props) => {
     
     return (
         (!roomFull) ? <>
+        <h1>Game Code: {room}</h1>
 
         {users.length===2 ? <>
 
@@ -737,12 +738,6 @@ const Game = (props) => {
                 <button onClick={onCardDrawnHandler}>DRAW CARD</button>
             </div> }
             <hr />
-            <div>
-                <h1>Users in room:</h1>
-                {users.map(user => {
-                    return <h6>{user.name}</h6>
-                })}
-            </div>
             <a href='/'>Home</a>
         </div>}
 

client/src/components/Homepage.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
+import randomCodeGenerator from '../utils/randomCodeGenerator'
 
 const Homepage = () => {
     const [roomCode, setRoomCode] = useState('')
@@ -7,8 +8,10 @@ const Homepage = () => {
     return (
         <div className='Homepage'>
             <h1>UNO</h1>
-            <div><input type='text' placeholder='Room' onChange={(event) => setRoomCode(event.target.value)} /></div>
+            <div><input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} /></div>
-            <Link to={`/play?roomCode=${roomCode}`}><button>START GAME</button></Link>
+            <Link to={`/play?roomCode=${roomCode}`}><button>JOIN GAME</button></Link>
+            <h1>OR</h1>
+            <Link to={`/play?roomCode=${randomCodeGenerator(5)}`}><button>CREATE GAME</button></Link>
         </div>
     )
 }

client/src/utils/randomCodeGenerator.js

@@ -0,0 +1,9 @@
+export default function makeid(length) {
+    var result           = '';
+    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < length; i++ ) {
+       result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}