added painting pawns based on data from server

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

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;

backend/routes/room.js

@@ -1,16 +1,27 @@
-var express = require('express');
+const express = require('express');
-var router = express.Router();
+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) { 
+        if (err) console.log(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

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,

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 (
         <>
-            <Navbar players={players}/>
+            <Navbar players={players} started={started}/>
             {nowMoving ? <Dice nowMoving={nowMoving}/> : null}
-            <Map/>
+            <Map pawns={pawns}/>
         </>
     )
 

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(
         <div className="navbar-container">
             {players.map( (player, index) =>
                 <NameContainer key={index} player = {player}/>
             )}
-            <ReadyButton/>
+            {started ?  null : <ReadyButton/>}
         </div>
     );
 }

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 => {
+            pawns.forEach( pawn => {
-                paintPawn(context, pawn.x,pawn.y,'#ffa1a1')
+                console.log("rysuje")
+                console.log(positions[pawn.position]);
+                paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
             })
-            */ 
         }
-
+      }, [pawns]);
-      }, []);
-
     return(
         <canvas className="canvas-container" width={480} height={480} ref={canvasRef}></canvas>
     )

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;