edited map event handlers

src/components/Gameboard/Map/Map.jsx

@@ -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,18 +14,19 @@ 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(),
@@ -33,15 +34,14 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             cursorY = event.clientY - rect.top;
         for (const pawn of pawns) {
             if (ctx.isPointInPath(pawn.touchableArea, cursorX, cursorY)) {
-                    socket.emit('game:move', pawn._id);
+                if (canPawnMove(pawn, rolledNumber)) socket.emit('game:move', pawn._id);
             }
         }
         setHintPawn(null);
-        }
     };
 
     const handleMouseMove = event => {
-        if (nowMoving && rolledNumber) {
+        if (!nowMoving || !rolledNumber) return;
         const canvas = canvasRef.current;
         const ctx = canvas.getContext('2d');
         const rect = canvas.getBoundingClientRect(),
@@ -49,7 +49,6 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
             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 &&
@@ -58,19 +57,13 @@ const Map = ({ pawns, nowMoving, 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' });
-                            break;
+                    return;
+                }
+            }
         }
-                    } else {
         setHintPawn(null);
-                    }
-                } else {
-                    setHintPawn(null);
-                }
-            }
-        } else {
-            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);
                 }
             };
         };

src/constants/positions.js

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