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

added usecallback hooks and deleted warnings

Browse Source
This commit is contained in:
Wenszel 2021-04-30 13:44:00 +02:00
parent b56c343d83
commit 79ad7c151c
3 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Gameboard.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useContext } from 'react';
import React, { useState, useEffect, useContext, useCallback } from 'react';
import { PlayerDataContext } from '../App'
import axios from 'axios';
import Map from './game-board-components/Map'
@ -16,8 +16,21 @@ const Gameboard = () => {
const [time, setTime] = useState();
const [nowMoving, setNowMoving] = useState(false);
const [started, setStarted] = useState(false);
const checkWin = useCallback(() => {
// 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")
}
},[pawns]);
// Fetching game data
const fetchData = () => {
const fetchData = useCallback(() => {
axios.get('http://localhost:3000/room/',{
withCredentials:true,
}).then((response)=>{
@ -41,24 +54,13 @@ const Gameboard = () => {
setTime(response.data.nextMoveTime);
setStarted(response.data.started);
})
}
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")
}
}
},[checkWin, context.playerId]);
useEffect(() => {
//sending ajax every 1 sec
const interval = setInterval(fetchData, 1000);
return () => clearInterval(interval);
},[]);
},[fetchData]);
// Callback to handle dice rolling between dice and map component
const rolledNumberCallback = (number) => {
setRolledNumber(number);

2
src/components/game-board-components/Dice.jsx
View File

@ -20,7 +20,7 @@ const Dice = ({ rolledNumberCallback, nowMoving }) => {
}
return(
<div className="dice-container">
{rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : nowMoving ? <button onClick={handleRoll}> Roll </button> : null}
{rolledNumber ? <img src={images[rolledNumber - 1]} alt={rolledNumber} width="100" height="100"/> : nowMoving ? <button onClick={handleRoll}> Roll </button> : null}
</div>
)
}

18
src/components/game-board-components/Map.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState, useContext } from 'react';
import React, { useEffect, useRef, useState, useContext, useCallback } from 'react';
import { PlayerDataContext } from '../../App';
import axios from 'axios';
import positions from './positions';
@ -20,7 +20,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
const canvasRef = useRef(null);
// Return true when pawn can move
const checkIfPawnCanMove = pawn => {
const checkIfPawnCanMove = useCallback(pawn => {
// If is in base
if((rolledNumber === 1 || rolledNumber === 6) && pawn.position === pawn.basePos){
return true;
@ -39,11 +39,13 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
case 'yellow':
if(pawn.position + rolledNumber <= 91) return true;
break;
default:
return false;
}
}else{
return false;
}
}
},[rolledNumber]);
const handleCanvasClick = event => {
// If hint pawn exist it means that pawn can move
@ -121,6 +123,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
}else{
return position + rolledNumber;
}
default:
return position;
}
};
const handleMouseMove = event => {
@ -141,7 +145,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
3) if pawn can move
And then sets cursor to pointer and paints hint pawn - where will be pawn after click
*/
if (ctx.isPointInPath(pawn.circle, x, y) && context.color == pawn.color && checkIfPawnCanMove(pawn)) {
if (ctx.isPointInPath(pawn.circle, x, y) && context.color === pawn.color && checkIfPawnCanMove(pawn)) {
const pawnPosition = getHintPawnPosition(pawn);
setBlinking(false);
// Checks if pawn can make a move
@ -157,7 +161,7 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
}
}
};
const rerenderCanvas = () => {
const rerenderCanvas = useCallback(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const image = new Image();
@ -176,11 +180,11 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color);
}
}
}
},[blinking, checkIfPawnCanMove, context.color, hintPawn, nowMoving, pawns, rolledNumber]);
// Rerender canvas when pawns have changed
useEffect(() => {
rerenderCanvas();
}, [hintPawn, pawns]);
}, [hintPawn, pawns, rerenderCanvas]);
return(
<canvas