edited css and readme

src/App.js

@@ -16,12 +16,9 @@ function App() {
   useEffect(() => {
     axios.get('http://localhost:3000/player', {
       withCredentials:true,
-      mode: 'cors'
     })
-    .then( response => {
+    .then(response => {
       setPlayerData(response.data)
-      console.log(response.data);
-
       response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
     });
   },[]);
@@ -29,15 +26,13 @@ function App() {
   const handleExit = e => {
     e.preventDefault();
     window.addEventListener('unload', () => {
-      axios.post('http://localhost:3000/player/exit', {withCredentials:true, mode: 'cors'})
+      axios.post('http://localhost:3000/player/exit', {withCredentials:true, })
     });
     } 
   
   const idCallback = () => {
     axios.get('http://localhost:3000/player/', {
       withCredentials:true,
-      mode: 'cors',
-      headers: { "Content-Type": "application/json" },
     })
     .then(response => {
       setPlayerData(response.data);

src/components/Gameboard.jsx

@@ -20,7 +20,6 @@ const Gameboard = () => {
     const fetchData = () => {
         axios.get('http://localhost:3000/room/',{
             withCredentials:true,
-            mode: 'cors',
         }).then((response)=>{
             // Filling navbar with empty player nick container
             while(response.data.players.length !== 4){
@@ -36,6 +35,7 @@ const Gameboard = () => {
                     setNowMoving(false);
                 }
             }
+            checkWin();
             setPlayers(response.data.players);
             setPawns(response.data.pawns);
             setTime(response.data.nextMoveTime);
@@ -43,6 +43,7 @@ const Gameboard = () => {
         })
     }
     const checkWin = () => {
+        // Player wins when all pawns with same color are inside end base
         if(pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4){
             alert("Red Won")
         }else if(pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4){

src/components/Navbar.css

@@ -1,7 +0,0 @@
-.navbar-container{
-    display: flex;
-    flex-direction: row;
-}
-.navbar-container>div{
-    margin-right: 10px;
-}

src/components/Navbar.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import NameContainer from './navbar-components/NameContainer'
 import ReadyButton from './navbar-components/ReadyButton'
-import './Navbar.css';
+
 const Navbar = ({ players, started, time }) => {
     return(
         <div className = "navbar-container">

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

@@ -8,7 +8,7 @@ import five from '../../images/dice/5.png';
 import six from '../../images/dice/6.png';
 
 const Dice = ({ rolledNumberCallback, nowMoving }) => {
-    const [rolledNumber, setRolledNumber] = useState()
+    const [rolledNumber, setRolledNumber] = useState();
     const [images] = useState([one, two, three, four, five, six]);
     const handleRoll = () => {
         axios.get('http://localhost:3000/game/roll').then(response => {
@@ -19,8 +19,8 @@ const Dice = ({ rolledNumberCallback, nowMoving }) => {
         })
     }
     return(
-        <div>
-            {rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : nowMoving ? <button onClick={handleRoll}>Roll</button> : null  }
+        <div className="dice-container">
+            {rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : nowMoving ? <button onClick={handleRoll}> Roll </button> : null}
         </div>
     )
 }

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

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

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

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import { PlayerDataContext } from '../../App';
 import axios from 'axios';
 import positions from './positions';
-import './Map.css';
 
 const Map = ({ pawns, nowMoving, rolledNumber }) => {
     const context = useContext(PlayerDataContext);
@@ -44,8 +43,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
         }else{
             return false;
         }
-        
     }
+
     const handleCanvasClick = event => {
         // If hint pawn exist it means that pawn can move 
         if(hintPawn){
@@ -56,10 +55,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             y = event.clientY - rect.top;
             for(const pawn of pawns){
                 if (ctx.isPointInPath(pawn.circle, x, y)) {
-                    axios.post('http://localhost:3000/game/move', {pawnId: pawn._id, position: hintPawn.position},
-                    {
-                        withCredentials: true, 
-                    }).then(() => {
+                    axios.post('http://localhost:3000/game/move', {pawnId: pawn._id, position: hintPawn.position}, {withCredentials: true})
+                    .then(() => {
                         setHintPawn(null);
                     });
                     
@@ -125,7 +122,6 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                     return position + rolledNumber;
                 }
         }
-        
     };
     const handleMouseMove = event => {   
         if(nowMoving && rolledNumber){ 

src/components/navbar-components/NameContainer.css

@@ -1,21 +0,0 @@
-.name-container{
-    width: 100px;
-    height: 50px;
-    border-radius: 5px;
-    color: white;
-    font-weight: bold;
-    display: flex;
-    text-align: center;
-    justify-content: center;
-    align-items: center;
-}
-.timer{
-    background-color: darkblue;
-    color: white;
-    position: relative;
-    top: -20px;
-    left: 15px;
-    width: 30px;
-    height: 20px;
-    border-radius: 5px;
-}

src/components/navbar-components/NameContainer.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import './NameContainer.css';
+
 const NameContainer = ( {player, time} ) => {
     const getRemainingTime = () => {
         return Math.round((time - Date.now())/1000)+1;
@@ -11,7 +11,6 @@ const NameContainer = ( {player, time} ) => {
             {player.nowMoving ? <div className="timer"> {getRemainingTime()} </div> : null}
         </div>
     )
-
 }
 
 export default NameContainer;

src/index.css

@@ -3,4 +3,40 @@ body{
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+.canvas-container{
+    margin: 10px;
+}
+.dice-container{
+    position: absolute;
+    top: 30%;
+    left: 20%;
+}
+.navbar-container{
+    display: flex;
+    flex-direction: row;
+}
+.navbar-container>div{
+    margin-right: 10px;
+}
+.name-container{
+    width: 100px;
+    height: 50px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+}
+.timer{
+    background-color: darkblue;
+    color: white;
+    position: relative;
+    top: -20px;
+    left: 15px;
+    width: 30px;
+    height: 20px;
+    border-radius: 5px;
 }