added painting pawns based on data from server

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 => {
-                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(
         <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;