heroku deploy and added moving pawns

src/App.js

@@ -57,11 +57,12 @@ function App() {
             <NameInput idCallback = {idCallback}/>
           </Route>
           <Route path="/game">
+            {playerData ? 
             <Beforeunload onBeforeunload={handleExit}>
               <PlayerDataContext.Provider value={playerData}>
                 <Gameboard/>
               </PlayerDataContext.Provider>
-            </Beforeunload>
+            </Beforeunload> : null}
           </Route>
         </Switch>
     </Router>

src/components/Gameboard.jsx

@@ -37,6 +37,7 @@ const Gameboard = () => {
                     setNowMoving(false);
                 }
             }
+            console.log(nowMoving);
             setPlayers(response.data.players);
             setPawns(response.data.pawns);
             setTime(response.data.nextMoveTime);

src/components/game-board-components/Map.jsx

@@ -34,7 +34,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                     axios.post('http://localhost:3000/game/move', {
                         withCredentials: true, 
                         mode: 'cors',
-                        data: {_id: pawn._id}
+                        data: {pawnId: pawn._id}
                     });
                     setHintPawn(null);
                 }
@@ -52,6 +52,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             case 'red': 
                 if(pawn.position >= 0 && pawn.position <= 3){
                     return 16;
+                }else if(pawn.position>15 && pawn.position<67){
+                    return pawn.position + rolledNumber
                 }
                 break;
             case 'blue': 
@@ -80,6 +82,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             x = event.clientX - rect.left,
             y = event.clientY - rect.top;
             canvas.style.cursor = "default";
+            console.log("Ruszam się")
             for (const pawn of pawns){
                 if(pawn.circle){
                     /*

src/components/game-board-components/positions.js

@@ -33,7 +33,7 @@ const positions = [
     {x: 200, y: 45},
     {x: 200, y: 14},
     // Top 
-    {x: 230, y: 14},
+    {x: 230, y: 14}, //25
     {x: 261, y: 14},
     {x: 261, y: 45},
     {x: 261, y: 76},
@@ -55,14 +55,14 @@ const positions = [
     {x: 383, y: 261},
     {x: 352, y: 261},
     {x: 321, y: 261},
-    {x: 291, y: 261},
+    {x: 291, y: 261}, //44
 
     {x: 261, y: 291},
     {x: 261, y: 322},
     {x: 261, y: 353},
     {x: 261, y: 384},
     {x: 261, y: 414},
-    {x: 261, y: 445},
+    {x: 261, y: 445}, 
     // Bottom
     {x: 230, y: 445},
 
@@ -74,42 +74,42 @@ const positions = [
     {x: 200, y: 291},
    
     {x: 169, y: 261},
-    {x: 138, y: 261},
+    {x: 138, y: 261}, //59
     {x: 107, y: 261},
     {x: 76, y: 261},
     {x: 45, y: 261},
  
     {x: 15, y: 261},
     // Left 
-    {x: 15, y: 231},
+    {x: 15, y: 231}, //64
     // One behind red base
-    {x: 15, y: 200},
+    {x: 15, y: 200}, //65
     // Red end
-    {x: 45, y: 231},
+    {x: 45, y: 231}, //66
     {x: 76, y: 231},
     {x: 107, y: 231},
     {x: 138, y: 231},
     {x: 169, y: 231},
     // Blue end
-    {x: 231, y: 445},
+    {x: 231, y: 445}, //71
     {x: 231, y: 414},
     {x: 231, y: 384},
-    {x: 231, y: 353},
+    {x: 231, y: 353}, //74
     {x: 231, y: 322},
     {x: 231, y: 291},    
     // Green end
-    {x: 414, y: 231},
+    {x: 414, y: 231}, // 77
     {x: 383, y: 231},
     {x: 352, y: 231},
     {x: 321, y: 231},
     {x: 290, y: 231},
     // Yellow base
-    {x: 230, y: 15},
+    {x: 230, y: 15}, //82
     {x: 230, y: 45},
     {x: 230, y: 76},
     {x: 230, y: 107},
     {x: 230, y: 138},
-    {x: 230, y: 169},
+    {x: 230, y: 169}, //87
 ];
 
 export default positions;