added timer

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>
     );
 };

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;