added map and unload listener

src/App.js

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+
+import { Beforeunload } from 'react-beforeunload';
 import { BrowserRouter as Router , Route , Redirect, Switch } from 'react-router-dom';
 
+import Gameboard  from './components/Gameboard'
 import Navbar from './components/Navbar'
 import NameInput from './components/NameInput';
 
@@ -11,10 +14,21 @@ function App() {
       withCredentials:true,
       mode: 'cors'
     })
-    .then((response)=> response.id!=null ? setRedirect(true) : null);
+    .then( response => {
+      response.data.roomId!=null ? setRedirect(true) : setRedirect(false)
+    });
   })
+
   const [id, setId] = useState('')
   const [redirect, setRedirect] = useState(false)
+  
+  const handleExit = e => {
+    e.preventDefault();
+    window.addEventListener('unload', () => {
+      axios.post('http://localhost:3000/player/exit', {withCredentials:true, mode: 'cors'})
+    });
+    } 
+  
   const idCallback = (id)=>{
     setId(id);
     
@@ -27,10 +41,16 @@ function App() {
   }
   return (
     <Router>
-      {redirect ?  <Redirect to="/game"></Redirect> : <NameInput idCallback = {idCallback}/>}
+      {redirect ?  <Redirect to="/game"/> : <Redirect to="/"/>}
       <Switch>
+          <Route exact path="/">
+            <NameInput idCallback = {idCallback}/>
+          </Route>
           <Route path="/game">
-            <Navbar></Navbar>
+            <Beforeunload onBeforeunload={handleExit}>
+              <Navbar/>
+              <Gameboard/>
+            </Beforeunload>
           </Route>
         </Switch>
     </Router>

src/components/Gameboard.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Map from './game-board-components/Map'
+
+const Gameboard = () => {
+
+    return (
+        <>
+            <Map/>
+        </>
+    )
+
+}
+
+export default Gameboard;

src/components/Navbar.jsx

@@ -9,18 +9,24 @@ const Navbar = () => {
 
     useEffect(()=>{
         //fetching players data 
-        axios.get('http://localhost:3001/room/',{
+        axios.get('http://localhost:3000/room/',{
             withCredentials:true,
             mode: 'cors',
         }).then((response)=>{
+            while(response.data.players.length !== 4){
+                response.data.players.push({
+                    name: "...",
+                    color: "grey"
+                })
+            }
             setPlayers(response.data.players);
         })
     },[]);
 
     return(
         <div className="navbar-container">
-            {players.map((player)=>
-                <NameContainer key={player.name} player = {player}/>
+            {players.map( (player, index) =>
+                <NameContainer key={index} player = {player}/>
             )}
             <ReadyButton/>
         </div>

src/components/game-board-components/Map.css

@@ -0,0 +1,3 @@
+.canvas-container{
+    margin: 10px;
+}

src/components/game-board-components/Map.jsx

@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from 'react';
+import './Map.css';
+const Map = () => {
+
+    const canvasRef = useRef(null)
+    useEffect(() => {
+        const canvas = canvasRef.current
+        const context = canvas.getContext('2d')
+        var image = new Image();
+        image.src = 'https://img-9gag-fun.9cache.com/photo/a8GdpYZ_460s.jpg'
+        image.onload = function() {
+            context.drawImage(image, 0 , 0);
+        }
+      }, []);
+
+    return(
+        <canvas className="canvas-container" width={480} height={480} ref={canvasRef}></canvas>
+    )
+}
+export default Map

src/components/navbar-components/ReadyButton.jsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import axios from 'axios';
-const ReadyButton = () => {
+const ReadyButton = ( {ready} ) => {
+    const [checked, setChecked] = useState(ready);
 
     const handleCheckboxChange = () => {
         axios.post('http://localhost:3000/player/ready',{},{withCredentials: true});
+        setChecked(state => state = !checked);
     }
     
     return(
     <>
         <label>Ready: </label>
-        <input type="checkbox" onClick={handleCheckboxChange}/>
+        <input type="checkbox" onClick={handleCheckboxChange} checked={checked}/>
     </>
     )
 

src/index.css

@@ -0,0 +1,7 @@
+body{
+    background-color: antiquewhite;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}