edited countdown

package-lock.json

@@ -12,6 +12,7 @@
         "@testing-library/react": "^11.2.5",
         "@testing-library/user-event": "^12.8.3",
         "axios": "^0.21.1",
+        "prop-types": "^15.8.1",
         "react": "^17.0.1",
         "react-beforeunload": "^2.4.0",
         "react-dom": "^17.0.1",
@@ -16043,13 +16044,13 @@
       }
     },
     "node_modules/prop-types": {
-      "version": "15.7.2",
+      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
+        "react-is": "^16.13.1"
       }
     },
     "node_modules/prop-types/node_modules/react-is": {
@@ -34536,13 +34537,13 @@
       }
     },
     "prop-types": {
-      "version": "15.7.2",
+      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
+        "react-is": "^16.13.1"
       },
       "dependencies": {
         "react-is": {

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
     "axios": "^0.21.1",
+    "prop-types": "^15.8.1",
     "react": "^17.0.1",
     "react-beforeunload": "^2.4.0",
     "react-dom": "^17.0.1",

src/components/Navbar.jsx

@@ -10,7 +10,7 @@ const Navbar = ({ players, started, time, isReady, rolledNumber, nowMoving, roll
         <div className='navbar-container'>
             {players.map((player, index) => (
                 <div className={`player-container ${colors[index]}`} key={index}>
-                    <NameContainer player={player} color={colors[index]} time={time} />
+                    <NameContainer player={player} time={time} containerColor={colors[index]} />
                     <Dice
                         movingPlayer={movingPlayer}
                         rolledNumber={rolledNumber}

src/components/navbar-components/NameContainer.jsx

@@ -1,27 +1,52 @@
 import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
 import { SocketContext } from '../../App';
-const NameContainer = ({ player, time, color }) => {
+
+/*
+    Component responsible for:
+    - displaying the player's name
+    - informing players about the readiness of other players by changing the color of container from gray to the player's color
+    - counting time to the end of the move 
+
+    Props: 
+    - player (object):
+        The player to whom the container belongs
+        Player's properties used in this component:
+            - ready (boolean):
+                is the player ready for the start of the game, if so, change color from gray to the player's color
+                when the game is started all players are ready not matter if they clicked ready button before
+            - nowMoving (boolean) is this player move now, if true display timer
+            - name (string)
+    - time (number) - time remaining until the move is made in milliseconds
+*/
+
+const NameContainer = ({ player, time }) => {
     const [remainingTime, setRemainingTime] = useState();
     const socket = useContext(SocketContext);
 
+    // Function responsible for counting down to the end of time every second
     const countdown = () => {
+        // If the time if over emit information to server
         if (remainingTime <= 0) {
-            socket.emit('game:skip');
+            return socket.emit('game:skip');
-        } else {
-            setRemainingTime(Math.ceil((time - Date.now()) / 1000));
         }
+        setRemainingTime(Math.ceil((time - Date.now()) / 1000));
     };
+
     useEffect(() => {
+        // Starts the countdown from the beginning if the server returned information about skipping the turn
         socket.on('game:skip', () => {
             setRemainingTime(15);
         });
+        setRemainingTime(Math.ceil((time - Date.now()) / 1000));
         const interval = setInterval(countdown, 1000);
         return () => clearInterval(interval);
     }, [countdown]);
+
     return (
         <div
-            className={`name-container`}
+            className='name-container'
-            style={player.ready ? { backgroundColor: color } : { backgroundColor: 'lightgrey' }}
+            style={player.ready ? { backgroundColor: player.color } : { backgroundColor: 'lightgrey' }}
         >
             <p>{player.name}</p>
             {player.nowMoving ? <div className='timer'> {remainingTime} </div> : null}
@@ -29,4 +54,9 @@ const NameContainer = ({ player, time, color }) => {
     );
 };
 
+NameContainer.propTypes = {
+    player: PropTypes.object,
+    time: PropTypes.number,
+};
+
 export default NameContainer;

src/components/navbar-components/ReadyButton.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect, useLayoutEffect } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { SocketContext } from '../../App';
 import Switch from '@material-ui/core/Switch';