From e59652828f0addafb6660322a27c046d5bdcdd25 Mon Sep 17 00:00:00 2001 From: Wenszel Date: Sat, 20 Mar 2021 18:52:20 +0100 Subject: [PATCH] added map and unload listener --- backend/routes/player.js | 9 +-- backend/server.js | 2 +- package-lock.json | 65 +++++++++++++++++++ package.json | 1 + src/App.js | 26 +++++++- src/components/Gameboard.jsx | 15 +++++ src/components/Navbar.jsx | 12 +++- src/components/game-board-components/Map.css | 3 + src/components/game-board-components/Map.jsx | 20 ++++++ .../navbar-components/ReadyButton.jsx | 8 ++- src/index.css | 7 ++ 11 files changed, 151 insertions(+), 17 deletions(-) create mode 100644 src/components/game-board-components/Map.css diff --git a/backend/routes/player.js b/backend/routes/player.js index da7bd8f..bf9215f 100644 --- a/backend/routes/player.js +++ b/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; \ No newline at end of file diff --git a/backend/server.js b/backend/server.js index 4a45cf4..e70320d 100644 --- a/backend/server.js +++ b/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, diff --git a/package-lock.json b/package-lock.json index e8d20ad..17b3119 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index c681d99..9a103db 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index 804c8ad..ad206b9 100644 --- a/src/App.js +++ b/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 ( - {redirect ? : } + {redirect ? : } + + + - + + + + diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index e69de29..5f37ff1 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import Map from './game-board-components/Map' + +const Gameboard = () => { + + return ( + <> + + + ) + +} + +export default Gameboard; \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 1edd809..1c81d46 100644 --- a/src/components/Navbar.jsx +++ b/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(
- {players.map((player)=> - + {players.map( (player, index) => + )}
diff --git a/src/components/game-board-components/Map.css b/src/components/game-board-components/Map.css new file mode 100644 index 0000000..a9f9175 --- /dev/null +++ b/src/components/game-board-components/Map.css @@ -0,0 +1,3 @@ +.canvas-container{ + margin: 10px; +} \ No newline at end of file diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index e69de29..8bbd008 100644 --- a/src/components/game-board-components/Map.jsx +++ b/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( + + ) +} +export default Map \ No newline at end of file diff --git a/src/components/navbar-components/ReadyButton.jsx b/src/components/navbar-components/ReadyButton.jsx index 467fbd4..ed8c164 100644 --- a/src/components/navbar-components/ReadyButton.jsx +++ b/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( <> - + ) diff --git a/src/index.css b/src/index.css index e69de29..7c79683 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,7 @@ +body{ + background-color: antiquewhite; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} \ No newline at end of file