From bfe3fb5374d1a153cb05e1c37a987c90a2278fac Mon Sep 17 00:00:00 2001
From: Mizanali Panjwani <mizanalip786@gmail.com>
Date: Mon, 22 Feb 2021 21:15:04 +0530
Subject: [PATCH] Added game code generator

---
 client/src/components/Game.js           | 7 +------
 client/src/components/Homepage.js       | 7 +++++--
 client/src/utils/randomCodeGenerator.js | 9 +++++++++
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 client/src/utils/randomCodeGenerator.js

diff --git a/client/src/components/Game.js b/client/src/components/Game.js
index 35cc0e1..b01cc7e 100644
--- a/client/src/components/Game.js
+++ b/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>}
 
diff --git a/client/src/components/Homepage.js b/client/src/components/Homepage.js
index f83605f..b93f920 100644
--- a/client/src/components/Homepage.js
+++ b/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>
-            <Link to={`/play?roomCode=${roomCode}`}><button>START GAME</button></Link>
+            <div><input type='text' placeholder='Game Code' onChange={(event) => setRoomCode(event.target.value)} /></div>
+            <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>
     )
 }
diff --git a/client/src/utils/randomCodeGenerator.js b/client/src/utils/randomCodeGenerator.js
new file mode 100644
index 0000000..3304fc3
--- /dev/null
+++ b/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;
+}
\ No newline at end of file