From 79ad7c151cb89277af48aa362f18043131f07227 Mon Sep 17 00:00:00 2001 From: Wenszel Date: Fri, 30 Apr 2021 13:44:00 +0200 Subject: [PATCH] added usecallback hooks and deleted warnings --- src/components/Gameboard.jsx | 34 ++++++++++--------- src/components/game-board-components/Dice.jsx | 2 +- src/components/game-board-components/Map.jsx | 18 ++++++---- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 63c4965..d468f00 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -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); diff --git a/src/components/game-board-components/Dice.jsx b/src/components/game-board-components/Dice.jsx index 0f768b4..d0fe419 100644 --- a/src/components/game-board-components/Dice.jsx +++ b/src/components/game-board-components/Dice.jsx @@ -20,7 +20,7 @@ const Dice = ({ rolledNumberCallback, nowMoving }) => { } return(
- {rolledNumber ? : nowMoving ? : null} + {rolledNumber ? {rolledNumber} : nowMoving ? : null}
) } diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index 586427e..58133bf 100644 --- a/src/components/game-board-components/Map.jsx +++ b/src/components/game-board-components/Map.jsx @@ -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(