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

edited map event handlers

Browse Source
This commit is contained in:
Wenszel 2023-12-13 09:38:32 +01:00
parent aa11edca02
commit dd026fbc37
2 changed files with 40 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
import { PlayerDataContext, SocketContext } from '../../../App'; import { PlayerDataContext, SocketContext } from '../../../App';
import mapImage from '../../../images/map.jpg'; import mapImage from '../../../images/map.jpg';
import positions from '../positions'; import positionMapCoords from '../positions';
import pawnImages from '../../../constants/pawnImages'; import pawnImages from '../../../constants/pawnImages';
import canPawnMove from './canPawnMove'; import canPawnMove from './canPawnMove';
import getPositionAfterMove from './getPositionAfterMove'; import getPositionAfterMove from './getPositionAfterMove';
@ -14,63 +14,56 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
const [hintPawn, setHintPawn] = useState(); const [hintPawn, setHintPawn] = useState();
const paintPawn = (context, x, y, color) => { const paintPawn = (context, pawn) => {
const { x, y } = positionMapCoords[pawn.position];
const touchableArea = new Path2D(); const touchableArea = new Path2D();
touchableArea.arc(x, y, 12, 0, 2 * Math.PI); touchableArea.arc(x, y, 12, 0, 2 * Math.PI);
const image = new Image(); const image = new Image();
image.src = pawnImages[color]; image.src = pawnImages[pawn.color];
// image.onload = function () { image.onload = function () {
context.drawImage(image, x - 17, y - 14, 35, 30); context.drawImage(image, x - 17, y - 15, 35, 30);
};
return touchableArea; return touchableArea;
}; };
const handleCanvasClick = event => { const handleCanvasClick = event => {
if (hintPawn) { const canvas = canvasRef.current;
const canvas = canvasRef.current; const ctx = canvas.getContext('2d');
const ctx = canvas.getContext('2d'); const rect = canvas.getBoundingClientRect(),
const rect = canvas.getBoundingClientRect(), cursorX = event.clientX - rect.left,
cursorX = event.clientX - rect.left, cursorY = event.clientY - rect.top;
cursorY = event.clientY - rect.top; for (const pawn of pawns) {
for (const pawn of pawns) { if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) { if (canPawnMove(pawn, rolledNumber)) socket.emit('game:move', pawn._id);
socket.emit('game:move', pawn._id);
}
} }
setHintPawn(null);
} }
setHintPawn(null);
}; };
const handleMouseMove = event => { const handleMouseMove = event => {
if (nowMoving && rolledNumber) { if (!nowMoving || !rolledNumber) return;
const canvas = canvasRef.current; const canvas = canvasRef.current;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect(), const rect = canvas.getBoundingClientRect(),
x = event.clientX - rect.left, x = event.clientX - rect.left,
y = event.clientY - rect.top; y = event.clientY - rect.top;
canvas.style.cursor = 'default'; canvas.style.cursor = 'default';
for (const pawn of pawns) { for (const pawn of pawns) {
if (pawn.touchableArea) { if (
if ( ctx.isPointInPath(pawn.touchableArea, x, y) &&
ctx.isPointInPath(pawn.touchableArea, x, y) && player.color === pawn.color &&
player.color === pawn.color && canPawnMove(pawn, rolledNumber)
canPawnMove(pawn, rolledNumber) ) {
) { const pawnPosition = getPositionAfterMove(pawn, rolledNumber);
const pawnPosition = getPositionAfterMove(pawn, rolledNumber); if (pawnPosition) {
if (pawnPosition) { canvas.style.cursor = 'pointer';
canvas.style.cursor = 'pointer'; if (hintPawn && hintPawn.id === pawn._id) return;
setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' }); setHintPawn({ id: pawn._id, position: pawnPosition, color: 'grey' });
break; return;
}
} else {
setHintPawn(null);
}
} else {
setHintPawn(null);
} }
} }
} else {
setHintPawn(null);
} }
setHintPawn(null);
}; };
useEffect(() => { useEffect(() => {
@ -82,15 +75,10 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
image.onload = function () { image.onload = function () {
ctx.drawImage(image, 0, 0); ctx.drawImage(image, 0, 0);
pawns.forEach((pawn, index) => { pawns.forEach((pawn, index) => {
pawns[index].touchableArea = paintPawn( pawns[index].touchableArea = paintPawn(ctx, pawn);
ctx,
positions[pawn.position].x,
positions[pawn.position].y,
pawn.color
);
}); });
if (hintPawn) { if (hintPawn) {
paintPawn(ctx, positions[hintPawn.position].x, positions[hintPawn.position].y, hintPawn.color); paintPawn(ctx, hintPawn);
} }
}; };
}; };

4
src/constants/positions.js
View File

@ -1,4 +1,4 @@
const positions = [ const positionMapCoords = [
// Red base // Red base
{ x: 67, y: 67 }, // 0 { x: 67, y: 67 }, // 0
{ x: 67, y: 116 }, { x: 67, y: 116 },
@ -114,4 +114,4 @@ const positions = [
{ x: 230, y: 200 }, // 91 { x: 230, y: 200 }, // 91
]; ];
export default positions; export default positionMapCoords;