rajukottedi/ludo-web-multiplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated packages

Browse Source
This commit is contained in:
Wenszel 2023-12-09 12:28:59 +01:00
parent 9d2900ec6e
commit 8721737897
17 changed files with 8766 additions and 4328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12883
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -3,22 +3,24 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.3",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.20",
"@testing-library/jest-dom": "^6.1.5",
"@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-beforeunload": "^2.4.0",
"react-dom": "^17.0.1",
"react": "^18.2.0",
"react-beforeunload": "^2.6.0",
"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-client": "^4.5.1",
"web-vitals": "^1.1.0"
"socket.io": "^4.7.2",
"socket.io-client": "^4.7.2",
"web-vitals": "^3.5.0"
},
"scripts": {
"start": "react-scripts start",

68
src/App.js
View File

@ -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' />}
<Switch>
<Route exact path='/'>
LOADING...
</Route>
<Route path='/login'>
{playerSocket ? (
<LoginPage />
) : (
<ReactLoading type='spinningBubbles' color='white' height={667} width={375} />
)}
</Route>
<Route path='/game'>
{playerData ? (
<PlayerDataContext.Provider value={playerData}>
<Gameboard />
</PlayerDataContext.Provider>
) : null}
</Route>
</Switch>
<Routes>
<Route
exact
path='/'
Component={() => {
if (redirect) {
return <Navigate to='/game' />;
} else if (playerSocket) {
return <LoginPage />;
} else {
return <ReactLoading type='spinningBubbles' color='white' height={667} width={375} />;
}
}}
></Route>
<Route
path='/login'
Component={() => {
if (redirect) {
return <Navigate to='/game' />;
} 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>
);

2
src/components/Gameboard/Dice/Dice.jsx
View File

@ -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}`}>

14
src/components/Gameboard/Gameboard.jsx
View File

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

48
src/components/Gameboard/Map/Map.jsx
View File

@ -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 () {
context.drawImage(image, x - 17, y - 14, 35, 30);
};
// image.onload = function () {
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

3
src/components/Gameboard/Map/canPawnMove.js
View File

@ -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;

6
src/components/Gameboard/Map/getPositionAfterMove.js
View File

@ -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;

4
src/components/LoginPage/AddServer/AddServer.jsx
View File

@ -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();

1
src/components/LoginPage/LoginPage.jsx
View File

@ -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 (
<>

12
src/components/LoginPage/NameInput/NameInput.jsx
View File

@ -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'>

6
src/components/LoginPage/ServerList/ServerList.jsx
View File

@ -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>

2
src/components/Navbar/NameContainer/AnimatedOverlay/TimerAnimation.js
View File

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

4
src/components/Navbar/ReadyButton/ReadyButton.jsx
View File

@ -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';

4
src/constants/pawnImages.js
View File

@ -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;

BIN
src/images/readme1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 408 KiB

11
src/index.js
View File

@ -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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);