rajukottedi/ludo-web-multiplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added map and unload listener

Browse Source
This commit is contained in:
Wenszel 2021-03-20 18:52:20 +01:00
parent 0c5181ea62
commit e59652828f
11 changed files with 151 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
backend/routes/player.js
View File

@ -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;

2
backend/server.js
View File

@ -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,

65
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

26
src/App.js
View File

@ -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>

15
src/components/Gameboard.jsx
View File

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

12
src/components/Navbar.jsx
View File

@ -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>

3
src/components/game-board-components/Map.css Normal file
View File

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

20
src/components/game-board-components/Map.jsx
View File

@ -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

8
src/components/navbar-components/ReadyButton.jsx
View File

@ -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}/>
</>
)

7
src/index.css
View File

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