From c1db9e4bb8dbf9aa8ea76a52b073a366e905ba6a Mon Sep 17 00:00:00 2001 From: Wenszel Date: Sat, 24 Apr 2021 16:13:39 +0200 Subject: [PATCH] added painting pawns based on data from server --- backend/routes/game.js | 18 ++++++++++++ backend/routes/player.js | 3 -- backend/routes/room.js | 29 ++++++++++++++----- backend/schemas/room.js | 1 + src/components/Gameboard.jsx | 11 ++++--- src/components/Navbar.jsx | 4 +-- src/components/game-board-components/Map.jsx | 29 ++++++------------- .../game-board-components/positions.js | 24 +++++++++++++++ 8 files changed, 82 insertions(+), 37 deletions(-) create mode 100644 src/components/game-board-components/positions.js diff --git a/backend/routes/game.js b/backend/routes/game.js index 3eef770..0a0b5f5 100644 --- a/backend/routes/game.js +++ b/backend/routes/game.js @@ -1,6 +1,24 @@ var express = require('express'); var router = express.Router(); +function setNextPlayer(req, res){ + RoomModel.findOne({_id: req.session.roomId}, function (err, doc){ + if (err) { + res.status(500).send(err) + } else { + const index = doc.players.findIndex( player => player.nowMoving === true); + const roomSize = doc.player.length; + doc.players[index].nowMoving = false; + if(index++ === roomSize){ + doc.players[0].nowMoving = true; + }else{ + doc.players[index].nowMoving = true; + } + RoomModel.findOneAndUpdate({_id: req.session.roomId}, doc); + } + }); +} + router.get('/roll', function (req, res){ res.send({number: Math.ceil(Math.random() * 6)}); }); diff --git a/backend/routes/player.js b/backend/routes/player.js index b9092ed..5d0d132 100644 --- a/backend/routes/player.js +++ b/backend/routes/player.js @@ -1,7 +1,6 @@ var express = require('express'); var router = express.Router(); var RoomModel = require('../schemas/room'); - var changeReadyState = (req, res, exit) =>{ RoomModel.findOne({_id: req.session.roomId}, function (err, doc){ if (err) { @@ -12,13 +11,11 @@ var changeReadyState = (req, res, exit) =>{ let index = updatedPlayers.findIndex( player => (player._id).toString() == (req.session.playerId).toString() ); - console.log(doc, updatedPlayers, index); if(!exit) updatedPlayers[index].ready = !updatedPlayers[index].ready; else updatedPlayers[index].ready = false; const updatedDoc = { players: updatedPlayers } - console.log(updatedPlayers.filter(player => player.ready).length); if(updatedPlayers.filter(player => player.ready).length >= 2){ updatedDoc.started = true; updatedDoc.players[0].nowMoving = true; diff --git a/backend/routes/room.js b/backend/routes/room.js index c7beeec..48f2b8a 100644 --- a/backend/routes/room.js +++ b/backend/routes/room.js @@ -1,16 +1,27 @@ -var express = require('express'); -var router = express.Router(); +const express = require('express'); +const router = express.Router(); +const RoomModel = require('../schemas/room'); -var RoomModel = require('../schemas/room'); +const colors = ['red','blue','green','yellow']; -var colors = ['red','blue','green','yellow']; +function getStartPositions(){ + const startPositions = []; + for( let i = 0; i < 16; i++){ + let pawn = {}; + pawn.position = i; + if(i < 4) pawn.color = colors[0]; + else if(i < 8) pawn.color = colors[1]; + else if(i < 12) pawn.color = colors[2]; + else if (i < 16) pawn.color = colors[3] + startPositions.push(pawn); + } + return startPositions; +} //creating new room in db router.post('/add', function (req, res) { RoomModel.findOne( { full: false, started: false }, function (err, results) { - if (err) { - console.log(err); - } + if (err) console.log(err); if (!results) { let newRoom = new RoomModel({ createDate: new Date, @@ -22,6 +33,7 @@ router.post('/add', function (req, res) { ready: false, color: colors[0] }], + pawns: getStartPositions(), }); newRoom.save() .then(function(){ @@ -46,6 +58,7 @@ router.post('/add', function (req, res) { updateObj.full = true; // Room is full updateObj.started = true; // Game started updateObj.players[0].nowMoving = true; //First joined player moving + updateObj.pawns = startPositions } RoomModel.findOneAndUpdate( { _id: results._id }, //find room by id @@ -77,4 +90,4 @@ router.get('/', function(req,res){ ) }); -module.exports = router; \ No newline at end of file +module.exports = router; diff --git a/backend/schemas/room.js b/backend/schemas/room.js index c452363..f7082f7 100644 --- a/backend/schemas/room.js +++ b/backend/schemas/room.js @@ -6,6 +6,7 @@ var RoomSchema = new Schema({ createDate: Date, started: Boolean, full: Boolean, + timer: Number, players: [{ name: String, color: String, diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 51e44eb..341ac94 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -5,9 +5,10 @@ import Dice from './game-board-components/Dice' import Navbar from './Navbar' const Gameboard = ({id}) => { - + const [pawns, setPawns] = useState([]); const [players, setPlayers] = useState([]); const [nowMoving, setNowMoving] = useState(false); + const [started, setStarted] = useState(false); //fetching players data to display them in navbar const fetchData = () => { axios.get('http://localhost:3000/room/',{ @@ -19,12 +20,14 @@ const Gameboard = ({id}) => { name: "...", }) } - setPlayers(response.data.players); if(id===response.data.players.find(player => player.nowMoving === true)?._id){ setNowMoving(true); }else{ setNowMoving(false); } + setPlayers(response.data.players); + setPawns(response.data.pawns); + setStarted(response.data.started); }) } useEffect(()=>{ @@ -33,9 +36,9 @@ const Gameboard = ({id}) => { },[]); return ( <> - + {nowMoving ? : null} - + ) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 75328f1..9506425 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -2,13 +2,13 @@ import React from 'react'; import NameContainer from './navbar-components/NameContainer' import ReadyButton from './navbar-components/ReadyButton' import './Navbar.css'; -const Navbar = ( { players }) => { +const Navbar = ( { players, started }) => { return(
{players.map( (player, index) => )} - + {started ? null : }
); } diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index 932f3e9..0a273f5 100644 --- a/src/components/game-board-components/Map.jsx +++ b/src/components/game-board-components/Map.jsx @@ -1,44 +1,33 @@ import React, { useEffect, useState, useRef } from 'react'; +import positions from './positions'; import './Map.css'; -import axios from 'axios' -const Map = () => { - //map of positions <1,92> and their equivalent of pixels in canvas - const mapOfLocations = { - }; - //obj schema: {color: [pos,pos,pos]} - const [pawnPositions, setPawnPositions] = useState({ - - }); +const Map = ({ pawns }) => { const paintPawn = (context, x, y, color) =>{ + console.log(x,y,color); context.fillStyle = color context.beginPath(); context.arc(x, y, 12, 0, 2 * Math.PI); context.stroke(); context.fill(); } - const fetchData = () => { - axios.get('http://localhost:3000/game',{withCredentials: true}) - .then(response => setPawnPositions(response.data.positions)) - } + const canvasRef = useRef(null) useEffect(() => { - //fetchData(); 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); - /* pawnPositions.forEach( pawn => { - paintPawn(context, pawn.x,pawn.y,'#ffa1a1') + pawns.forEach( pawn => { + console.log("rysuje") + console.log(positions[pawn.position]); + paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color); }) - */ } - - }, []); - + }, [pawns]); return( ) diff --git a/src/components/game-board-components/positions.js b/src/components/game-board-components/positions.js new file mode 100644 index 0000000..5eb7831 --- /dev/null +++ b/src/components/game-board-components/positions.js @@ -0,0 +1,24 @@ +const positions = [ + // Red base + {x: 67, y: 67}, + {x: 67, y: 116}, + {x: 117, y: 67}, + {x: 117, y: 116}, + // Blue base + {x: 67, y: 343}, + {x: 67, y: 392}, + {x: 117, y: 343}, + {x: 117, y: 392}, + // Green base + {x: 343, y: 343}, + {x: 392, y: 392}, + {x: 392, y: 343}, + {x: 343, y: 392}, + // Yellow base + {x: 343, y: 67}, + {x: 392, y: 116}, + {x: 392, y: 67}, + {x: 343, y: 116}, +]; + +export default positions; \ No newline at end of file