added losing move

src/components/Gameboard.jsx

@@ -13,7 +13,7 @@ const Gameboard = () => {
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
     // Game logic data
-    const [rolledNumber, setRolledNumber] = useState('');
+    const [rolledNumber, setRolledNumber] = useState(null);
     const [time, setTime] = useState();
     const [nowMoving, setNowMoving] = useState(false);
     const [started, setStarted] = useState(false);
@@ -28,10 +28,14 @@ const Gameboard = () => {
                 response.data.players.push({name: "...",});
             };
             // Checks if client is currently moving player by session ID
-            if(id===response.data.players.find(player => player.nowMoving === true)?._id){
-                setNowMoving(true);
-            }else{
-                setNowMoving(false);
+            const nowMovingPlayer = response.data.players.find(player => player.nowMoving === true)
+            if(nowMovingPlayer){
+                if(nowMovingPlayer._id === id){
+                    setNowMoving(true);
+                }else{
+                    setRolledNumber(null);
+                    setNowMoving(false);
+                }
             }
             setPlayers(response.data.players);
             setPawns(response.data.pawns);

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

@@ -7,11 +7,10 @@ import four from '../../images/dice/4.png';
 import five from '../../images/dice/5.png';
 import six from '../../images/dice/6.png';
 
-const Dice = ({rolledNumberCallback}) => {
+const Dice = ({ rolledNumberCallback, nowMoving }) => {
     const [rolledNumber, setRolledNumber] = useState()
     const [images] = useState([one, two, three, four, five, six]);
     const handleRoll = () => {
-        
         axios.get('http://localhost:3000/game/roll').then(response => {
             const utterance = new SpeechSynthesisUtterance(response.data.number);
             speechSynthesis.speak(utterance);
@@ -21,9 +20,7 @@ const Dice = ({rolledNumberCallback}) => {
     }
     return(
         <div>
-            {rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : 
-            <button onClick={handleRoll}>Roll</button> }
-            
+            {rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : nowMoving ? <button onClick={handleRoll}>Roll</button> : null  }
         </div>
     )
 }

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

@@ -71,7 +71,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
                 break;
         }
     };
-    const handleMouseMove = event => {
+    const handleMouseMove = event => {   
         if(nowMoving && rolledNumber){ 
             const canvas = canvasRef.current;
             const context = canvas.getContext('2d');

src/components/navbar-components/NameContainer.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './NameContainer.css';
 const NameContainer = ( {player, time} ) => {
     const getRemainingTime = () => {
-        return Math.floor((time - Date.now())/1000);
+        return Math.round((time - Date.now())/1000)+1;
     }
     return (
         <div className="name-container"