From 57398bd46ced5e4572e523be8a0cce075adec2a1 Mon Sep 17 00:00:00 2001
From: Wenszel <wiktor.smaga13@gmail.com>
Date: Wed, 1 Jun 2022 21:07:40 +0200
Subject: [PATCH] added timer

---
 backend/handlers/gameHandler.js               | 29 +++++++++++++++++--
 .../navbar-components/NameContainer.jsx       | 26 +++++++++++++----
 src/index.css                                 |  7 ++---
 3 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/backend/handlers/gameHandler.js b/backend/handlers/gameHandler.js
index a449bb4..823fd09 100644
--- a/backend/handlers/gameHandler.js
+++ b/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));
-                socket.emit('room:move');
+                io.to(req.session.roomId.toString()).emit('room:data', JSON.stringify(room));
+                socket.emit('game:move');
             });
         });
     };
 
     socket.on('game:roll', roll);
     socket.on('game:move', move);
+    socket.on('game:skip', skip);
 };
diff --git a/src/components/navbar-components/NameContainer.jsx b/src/components/navbar-components/NameContainer.jsx
index c14487c..47e345b 100644
--- a/src/components/navbar-components/NameContainer.jsx
+++ b/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 = () => {
-        return Math.round((time - Date.now()) / 1000) + 1;
+    const [remainingTime, setRemainingTime] = useState();
+    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}
-            {player.nowMoving ? <div className='timer'> {getRemainingTime()} </div> : null}
+            <p>{player.name}</p>
+            {player.nowMoving ? <div className='timer'> {remainingTime} </div> : null}
         </div>
     );
 };
diff --git a/src/index.css b/src/index.css
index f6f5e93..b385aeb 100644
--- a/src/index.css
+++ b/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;
-    left: 32px;
+    bottom: 60px;
+    left: 82px;
     border: 1px solid white;
     padding: 1px;
     width: 30px;