updated packages

package.json

@@ -3,22 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
+    "@emotion/react": "^11.11.1",
-    "@testing-library/jest-dom": "^5.11.9",
+    "@emotion/styled": "^11.11.0",
-    "@testing-library/react": "^11.2.5",
+    "@mui/material": "^5.14.20",
-    "@testing-library/user-event": "^12.8.3",
+    "@testing-library/jest-dom": "^6.1.5",
-    "axios": "^0.21.1",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "axios": "^1.6.2",
     "prop-types": "^15.8.1",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
-    "react-beforeunload": "^2.4.0",
+    "react-beforeunload": "^2.6.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-loading": "^2.0.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "^5.0.1",
     "react-transition-group": "^4.4.5",
-    "socket.io": "^4.5.1",
+    "socket.io": "^4.7.2",
-    "socket.io-client": "^4.5.1",
+    "socket.io-client": "^4.7.2",
-    "web-vitals": "^1.1.0"
+    "web-vitals": "^3.5.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, createContext } from 'react';
 import { io } from 'socket.io-client';
-import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import ReactLoading from 'react-loading';
 import Gameboard from './components/Gameboard/Gameboard';
 import LoginPage from './components/LoginPage/LoginPage';
@@ -12,13 +12,14 @@ function App() {
     const [playerData, setPlayerData] = useState();
     const [playerSocket, setPlayerSocket] = useState();
     const [redirect, setRedirect] = useState();
-
     useEffect(() => {
         const socket = io('http://localhost:8080', { withCredentials: true });
         socket.on('player:data', data => {
             data = JSON.parse(data);
             setPlayerData(data);
-            data.roomId != null ? setRedirect(true) : setRedirect(false);
+            if (data.roomId != null) {
+                setRedirect(true);
+            }
         });
         setPlayerSocket(socket);
     }, []);
@@ -26,26 +27,47 @@ function App() {
     return (
         <SocketContext.Provider value={playerSocket}>
             <Router>
-                {redirect ? <Redirect to='/game' /> : <Redirect to='/login' />}
+                <Routes>
-                <Switch>
+                    <Route
-                    <Route exact path='/'>
+                        exact
-                        LOADING...
+                        path='/'
-                    </Route>
+                        Component={() => {
-                    <Route path='/login'>
+                            if (redirect) {
-                        {playerSocket ? (
+                                return <Navigate to='/game' />;
-                            <LoginPage />
+                            } else if (playerSocket) {
-                        ) : (
+                                return <LoginPage />;
-                            <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />
+                            } else {
-                        )}
+                                return <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />;
-                    </Route>
+                            }
-                    <Route path='/game'>
+                        }}
-                        {playerData ? (
+                    ></Route>
-                            <PlayerDataContext.Provider value={playerData}>
+                    <Route
-                                <Gameboard />
+                        path='/login'
-                            </PlayerDataContext.Provider>
+                        Component={() => {
-                        ) : null}
+                            if (redirect) {
-                    </Route>
+                                return <Navigate to='/game' />;
-                </Switch>
+                            } else if (playerSocket) {
+                                return <LoginPage />;
+                            } else {
+                                return <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />;
+                            }
+                        }}
+                    ></Route>
+                    <Route
+                        path='/game'
+                        Component={() => {
+                            if (playerData) {
+                                return (
+                                    <PlayerDataContext.Provider value={playerData}>
+                                        <Gameboard />
+                                    </PlayerDataContext.Provider>
+                                );
+                            } else {
+                                return <Navigate to='/login' />;
+                            }
+                        }}
+                    ></Route>
+                </Routes>
             </Router>
         </SocketContext.Provider>
     );

src/components/Gameboard/Dice/Dice.jsx

@@ -21,7 +21,7 @@ const Dice = ({ rolledNumberCallback, rolledNumber, nowMoving, color, movingPlay
         socket.on('game:roll', number => {
             rolledNumberCallback(number);
         });
-    }, []);
+    }, [socket, rolledNumberCallback]);
 
     return (
         <div className={`dice-container dice-${color}`}>

src/components/Gameboard/Gameboard.jsx

@@ -19,19 +19,6 @@ const Gameboard = () => {
 
     const [movingPlayer, setMovingPlayer] = useState('red');
 
-    const checkWin = () => {
-        // Player wins when all pawns with same color are inside end base
-        if (pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4) {
-            alert('Red Won');
-        } else if (pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4) {
-            alert('Blue Won');
-        } else if (pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4) {
-            alert('Green Won');
-        } else if (pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4) {
-            alert('Yellow Won');
-        }
-    };
-
     useEffect(() => {
         socket.emit('room:data', context.roomId);
         socket.on('room:data', data => {
@@ -52,7 +39,6 @@ const Gameboard = () => {
                 setMovingPlayer(nowMovingPlayer.color);
             }
             const currentPlayer = data.players.find(player => player._id === context.playerId);
-            checkWin();
             setIsReady(currentPlayer.ready);
             setRolledNumber(data.rolledNumber);
             setPlayers(data.players);

src/components/Gameboard/Map/Map.jsx

@@ -19,9 +19,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
         touchableArea.arc(x, y, 12, 0, 2 * Math.PI);
         const image = new Image();
         image.src = pawnImages[color];
-        image.onload = function () {
+        // image.onload = function () {
-            context.drawImage(image, x - 17, y - 14, 35, 30);
+        context.drawImage(image, x - 17, y - 14, 35, 30);
-        };
         return touchableArea;
     };
 
@@ -73,29 +72,30 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             setHintPawn(null);
         }
     };
-    const rerenderCanvas = () => {
+
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
-        const image = new Image();
-        image.src = mapImage;
-        image.onload = function () {
-            ctx.drawImage(image, 0, 0);
-            pawns.forEach((pawn, index) => {
-                pawns[index].touchableArea = paintPawn(
-                    ctx,
-                    positions[pawn.position].x,
-                    positions[pawn.position].y,
-                    pawn.color
-                );
-            });
-            if (hintPawn) {
-                paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
-            }
-        };
-    };
     useEffect(() => {
+        const rerenderCanvas = () => {
+            const canvas = canvasRef.current;
+            const ctx = canvas.getContext('2d');
+            const image = new Image();
+            image.src = mapImage;
+            image.onload = function () {
+                ctx.drawImage(image, 0, 0);
+                pawns.forEach((pawn, index) => {
+                    pawns[index].touchableArea = paintPawn(
+                        ctx,
+                        positions[pawn.position].x,
+                        positions[pawn.position].y,
+                        pawn.color
+                    );
+                });
+                if (hintPawn) {
+                    paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
+                }
+            };
+        };
         rerenderCanvas();
-    }, [hintPawn, pawns, rerenderCanvas]);
+    }, [hintPawn, pawns]);
 
     return (
         <canvas

src/components/Gameboard/Map/canPawnMove.js

@@ -1,4 +1,4 @@
-export default (pawn, rolledNumber) => {
+const canPawnMove = (pawn, rolledNumber) => {
     // If is in base
     if ((rolledNumber === 1 || rolledNumber === 6) && pawn.position === pawn.basePos) {
         return true;
@@ -24,3 +24,4 @@ export default (pawn, rolledNumber) => {
         return false;
     }
 };
+export default canPawnMove;

src/components/Gameboard/Map/getPositionAfterMove.js

@@ -1,4 +1,4 @@
-export default (pawn, rolledNumber) => {
+const getPositionAfterMove = (pawn, rolledNumber) => {
     const { position, color } = pawn;
     switch (color) {
         case 'red':
@@ -55,5 +55,9 @@ export default (pawn, rolledNumber) => {
             } else {
                 return position;
             }
+        default:
+            return position;
     }
 };
+
+export default getPositionAfterMove;

src/components/LoginPage/AddServer/AddServer.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react';
 import './AddServer.css';
-import Switch from '@material-ui/core/Switch';
+import Switch from '@mui/material/Switch';
 import { SocketContext } from '../../../App';
 const AddServer = () => {
     const socket = useContext(SocketContext);
@@ -12,7 +12,7 @@ const AddServer = () => {
         socket.on('room:created', () => {
             socket.emit('room:rooms');
         });
-    }, []);
+    }, [socket]);
 
     const handleButtonClick = e => {
         e.preventDefault();

src/components/LoginPage/LoginPage.jsx

@@ -1,7 +1,6 @@
 import './LoginPage.css';
 import AddServer from './AddServer/AddServer';
 import ServerList from './ServerList/ServerList';
-import NameInput from './NameInput/NameInput';
 const LoginPage = () => {
     return (
         <>

src/components/LoginPage/NameInput/NameInput.jsx

@@ -1,15 +1,19 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useCallback } from 'react';
 import { SocketContext } from '../../../App';
 import useInput from '../../../hooks/useInput';
 import './NameInput.css';
+import Overlay from '../../Overlay/Overlay';
+
 const NameInput = ({ isRoomPrivate, roomId }) => {
     const socket = useContext(SocketContext);
     const nickname = useInput('');
     const password = useInput('');
     const [isPasswordWrong, setIsPasswordWrong] = useState(false);
-    const handleButtonClick = () => {
+
+    const handleButtonClick = useCallback(() => {
         socket.emit('player:login', { name: nickname.value, password: password.value, roomId: roomId });
-    };
+    }, [socket, nickname.value, password.value, roomId]);
+
     useEffect(() => {
         socket.on('error:wrongPassword', () => {
             setIsPasswordWrong(true);
@@ -24,7 +28,7 @@ const NameInput = ({ isRoomPrivate, roomId }) => {
         return () => {
             document.removeEventListener('keydown', keyDownHandler);
         };
-    }, []);
+    }, [socket, handleButtonClick]);
 
     return (
         <div className='name-overlay'>

src/components/LoginPage/ServerList/ServerList.jsx

@@ -18,7 +18,7 @@ const ServerList = () => {
             data = JSON.parse(data);
             setRooms(data);
         });
-    }, []);
+    }, [socket]);
 
     const getRooms = () => {
         setRooms(null);
@@ -35,7 +35,7 @@ const ServerList = () => {
             <div className='title-container'>
                 <h1>Server List</h1>
                 <div className='refresh'>
-                    <img src={refresh} onClick={getRooms}></img>
+                    <img src={refresh} alt='refresh' onClick={getRooms}></img>
                 </div>
             </div>
             <div className='server-container content-container'>
@@ -53,7 +53,7 @@ const ServerList = () => {
                         <tbody>
                             {rooms.map((room, index) => (
                                 <tr key={index}>
-                                    <td>{room.private ? <img src={lock} /> : null}</td>
+                                    <td>{room.private ? <img src={lock} alt='private' /> : null}</td>
                                     <td className='room-name'>{room.name}</td>
                                     <td>{`${room.players.length}/4`}</td>
                                     <td>{room.isStarted ? 'started' : 'waiting'}</td>

src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js

@@ -53,7 +53,7 @@ function handle() {
     count++;
 }
 
-const animation = document.styleSheets[0].insertRule(
+document.styleSheets[0].insertRule(
     `
   @keyframes timerAnimation {
     ${keyframes.join('\n')}

src/components/Navbar/ReadyButton/ReadyButton.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import { SocketContext } from '../../../App';
-import Switch from '@material-ui/core/Switch';
+import Switch from '@mui/material/Switch';
 import '../Navbar.css';
 import '../NameContainer/AnimatedOverlay/TimerAnimation';
 

src/constants/pawnImages.js

@@ -4,10 +4,12 @@ import redPawn from '../images/pawns/red-pawn.png';
 import yellowPawn from '../images/pawns/yellow-pawn.png';
 import greyPawn from '../images/pawns/grey-pawn.png';
 
-export default {
+const pawnImages = {
     green: greenPawn,
     blue: bluePawn,
     red: redPawn,
     yellow: yellowPawn,
     grey: greyPawn,
 };
+
+export default pawnImages;

src/index.js

@@ -1,11 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(
+const container = document.getElementById('root');
-  <React.StrictMode>
+const root = ReactDOM.createRoot(container);
-    <App />
+root.render(<App />);
-  </React.StrictMode>,
-  document.getElementById('root')
-);