added timer

backend/handlers/gameHandler.js

@@ -18,7 +18,29 @@ module.exports = (io, socket) => {
             socket.emit('game:roll', rolledNumber);
         });
     };
-
+    const skip = () => {
+        RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
+            if (room.nextMoveTime >= Date.now()) return err;
+            // Updating moving player
+            const playerIndex = room.players.findIndex(player => player.nowMoving === true);
+            const roomSize = room.players.length;
+            room.players[playerIndex].nowMoving = false;
+            if (playerIndex + 1 === roomSize) {
+                room.players[0].nowMoving = true;
+            } else {
+                room.players[playerIndex + 1].nowMoving = true;
+            }
+            // Updating timer
+            room.nextMoveTime = Date.now() + 15000;
+            // Pushing above data to database
+            RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, err => {
+                if (err) return err;
+                io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
+                socket.emit('game:move');
+                socket.emit('game:skip');
+            });
+        });
+    };
     const move = ({ pawnId }) => {
         RoomModel.findOne({ _id: req.session.roomId }, function (err, room) {
             if (!room) return err;
@@ -45,12 +67,13 @@ module.exports = (io, socket) => {
             // Pushing above data to database
             RoomModel.findOneAndUpdate({ _id: req.session.roomId }, room, (err, updatedRoom) => {
                 if (!updatedRoom) return err;
-                io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(updatedRoom));
+                io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
-                socket.emit('room:move');
+                socket.emit('game:move');
             });
         });
     };
 
     socket.on('game:roll', roll);
     socket.on('game:move', move);
+    socket.on('game:skip', skip);
 };

src/components/navbar-components/NameContainer.jsx

@@ -1,16 +1,30 @@
-import React from 'react';
+import React, { useState, useEffect, useContext } from 'react';
-
+import { SocketContext } from '../../App';
 const NameContainer = ({ player, time, color }) => {
-    const getRemainingTime = () => {
+    const [remainingTime, setRemainingTime] = useState();
-        return Math.round((time - Date.now()) / 1000) + 1;
+    const socket = useContext(SocketContext);
+
+    const countdown = () => {
+        if (remainingTime <= 0) {
+            socket.emit('game:skip');
+        } else {
+            setRemainingTime(Math.ceil((time - Date.now()) / 1000));
+        }
     };
+    useEffect(() => {
+        socket.on('game:skip', () => {
+            setRemainingTime(15);
+        });
+        const interval = setInterval(countdown, 1000);
+        return () => clearInterval(interval);
+    }, [countdown]);
     return (
         <div
             className={`name-container ${color}`}
             style={player.ready ? { backgroundColor: color } : { backgroundColor: 'lightgrey' }}
         >
-            {player.name}
+            <p>{player.name}</p>
-            {player.nowMoving ? <div className='timer'> {getRemainingTime()} </div> : null}
+            {player.nowMoving ? <div className='timer'> {remainingTime} </div> : null}
         </div>
     );
 };

src/index.css

@@ -36,17 +36,14 @@ canvas {
     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: -24px;
+    bottom: 60px;
-    left: 32px;
+    left: 82px;
     border: 1px solid white;
     padding: 1px;
     width: 30px;