added map and unload listener

backend/routes/player.js

@@ -26,14 +26,9 @@ router.post('/ready', function (req, res){
     });        
 });
 
-
-//adding users to exisiting room or creating new room if full
-router.post('/add', function (req, res) {
-
-});
 //deleting user in case he left before game started
-router.delete('/delete/{id}', function(req,res){
-    
+router.post('/exit', function(req,res){
+    console.log("wyszedł XD")
 });
 
 module.exports = router;

backend/server.js

@@ -54,7 +54,7 @@ const roomRoutes = require("./routes/room");
 const playerRoutes = require("./routes/player");
 
 app.get('/', (req,res)=>{
-  if(req.session.player){
+  if(req.session.name){
     res.send({
       name: req.session.name,
       roomId: req.session.roomId,

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/user-event": "^12.8.3",
         "axios": "^0.21.1",
         "react": "^17.0.1",
+        "react-beforeunload": "^2.4.0",
         "react-dom": "^17.0.1",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
@@ -15825,6 +15826,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-beforeunload": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.4.0.tgz",
+      "integrity": "sha512-62n4aInZeZ3uf4Gx1rKvUjv0OoIZpeGVgnHtuMLKxNbDZz+gpsC9VyW7uEPyLHPTWqbP2UebIZa1t0K/I6S9/Q==",
+      "dependencies": {
+        "prop-types": "^15.7.2",
+        "use-latest": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -19408,6 +19421,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "dependencies": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -33764,6 +33806,15 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-beforeunload": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-beforeunload/-/react-beforeunload-2.4.0.tgz",
+      "integrity": "sha512-62n4aInZeZ3uf4Gx1rKvUjv0OoIZpeGVgnHtuMLKxNbDZz+gpsC9VyW7uEPyLHPTWqbP2UebIZa1t0K/I6S9/Q==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "use-latest": "^1.2.0"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -36596,6 +36647,20 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==",
+      "requires": {}
+    },
+    "use-latest": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.0.tgz",
+      "integrity": "sha512-d2TEuG6nSLKQLAfW3By8mKr8HurOlTkul0sOpxbClIv4SQ4iOd7BYr7VIzdbktUCnv7dua/60xzd8igMU6jmyw==",
+      "requires": {
+        "use-isomorphic-layout-effect": "^1.0.0"
+      }
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
     "react": "^17.0.1",
+    "react-beforeunload": "^2.4.0",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

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;
+}