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