added pawn mouseenter event

backend/routes/player.js

@@ -51,6 +51,7 @@ router.get('/', (req,res)=>{
     if(req.session.name){
       res.send({
         name: req.session.name,
+        color: req.session.color,
         playerId: req.session.playerId,
         roomId: req.session.roomId,
       })

backend/routes/room.js

@@ -39,6 +39,7 @@ router.post('/add', function (req, res) {
                 .then(function(){
                     req.session.roomId = newRoom._id;
                     req.session.playerId = newRoom.players[0]._id;
+                    req.session.color = newRoom.players[0].color;
                     req.session.name = req.body.name;
                     res.status(200).send(req.session.playerId); 
                 })
@@ -67,6 +68,7 @@ router.post('/add', function (req, res) {
                     req.session.roomId = results._id;
                     req.session.playerId = updateObj.players[updateObj.players.length-1]._id;
                     req.session.name = req.body.name;
+                    req.sessions.color = colors[players.length - 1];
                     res.status(200).send(req.session.playerId); 
                 });  
                  

src/App.js

@@ -9,8 +9,9 @@ import NameInput from './components/NameInput';
 
 function App() {
 
-  const [id, setId] = useState('')
-  const [redirect, setRedirect] = useState()
+  const [id, setId] = useState('');
+  const [color, setColor] = useState('');
+  const [redirect, setRedirect] = useState();
 
   useEffect(() => {
     axios.get('http://localhost:3000/player', {
@@ -19,6 +20,7 @@ function App() {
     })
     .then( response => {
       setId(response.data.playerId);
+      setColor(response.data.color);
       response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
     });
   },[id])
@@ -38,6 +40,7 @@ function App() {
     })
     .then(response => {
       setId(response.data.playerId);
+      setColor(response.data.color);
       setRedirect(true)
     })
   }
@@ -54,7 +57,7 @@ function App() {
           </Route>
           <Route path="/game">
             <Beforeunload onBeforeunload={handleExit}>
-              <Gameboard id={id}/>
+              <Gameboard id={id} color={color}/>
             </Beforeunload>
           </Route>
         </Switch>

src/components/Gameboard.jsx

@@ -4,7 +4,7 @@ import Map from './game-board-components/Map'
 import Dice from './game-board-components/Dice'
 import Navbar from './Navbar'
 
-const Gameboard = ({id}) => {
+const Gameboard = ({id, color}) => {
     const [pawns, setPawns] = useState([]);
     const [players, setPlayers] = useState([]);
     const [nowMoving, setNowMoving] = useState(false);
@@ -38,7 +38,7 @@ const Gameboard = ({id}) => {
         <>
             <Navbar players={players} started={started}/>
             {nowMoving ? <Dice nowMoving={nowMoving}/> : null}
-            <Map pawns={pawns}/>
+            <Map pawns={pawns} nowMoving={nowMoving} color={color}/>
         </>
     )
 

src/components/game-board-components/Dice.jsx

@@ -6,6 +6,7 @@ import three from '../../images/dice/3.png';
 import four from '../../images/dice/4.png';
 import five from '../../images/dice/5.png';
 import six from '../../images/dice/6.png';
+
 const Dice = () => {
     const [rolledNumber, setRolledNumber] = useState()
     const [images] = useState([one, two, three, four, five, six]);

src/components/game-board-components/Map.jsx

@@ -1,35 +1,55 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import positions from './positions';
 import './Map.css';
 
-const Map = ({ pawns }) => {
-    //let pawnsOnMap = [];
-    let paths = [];
-    const paintPawn = (context, x, y, color) =>{
+const Map = ({ pawns, nowMoving, color }) => {
+    const paintPawn = (context, x, y, color, id) =>{
         const circle = new Path2D();
         circle.arc(x, y, 12, 0, 2 * Math.PI);
         context.strokeStyle ='black';
         context.stroke(circle);
-        context.fillStyle = color
+        context.fillStyle = color;
         context.fill(circle);
-        paths.push(circle);
-       // pawnsOnMap.push(circle);
+        const currentPawnIndex = pawns.findIndex( pawn => pawn._id === id);
+        pawns[currentPawnIndex].circle = circle;
     }
 
-    const canvasRef = useRef(null)
+    const canvasRef = useRef(null);
+    
     const handleCanvasClick = event => {
+        if(!nowMoving){
             const canvas = canvasRef.current
             const context = canvas.getContext('2d')
-        var rect = canvas.getBoundingClientRect(),   // get abs. position of canvas
-        x = event.clientX - rect.left,             // adjust mouse-position
+            const rect = canvas.getBoundingClientRect(),
+            x = event.clientX - rect.left,
             y = event.clientY - rect.top;
-        paths.forEach((path) => {
-            if (context.isPointInPath(path, x, y)) {
-              alert("clicked")
+            for(const pawn of pawns){
+                if (context.isPointInPath(pawn.circle, x, y)) {
+                    alert(pawn._id);
+                }
+            }
+        }
+    }
+    const handleMouseMove = event => {
+        if(!nowMoving){ 
+            const canvas = canvasRef.current
+            const context = canvas.getContext('2d')
+            const rect = canvas.getBoundingClientRect(),
+            x = event.clientX - rect.left,
+            y = event.clientY - rect.top;
+            document.querySelector("body").style.cursor = "default";
+            for (const pawn of pawns){
+                if(pawn.circle){
+                    // Checks if current mouse location in above canvas pawn and if this pawn is same color as player
+                    if (context.isPointInPath(pawn.circle, x, y) && pawn.color === color) {
+                        document.querySelector("body").style.cursor = "pointer";
+                        break;
+                    }
+                }   
+            }
+        }
     }
 
-        });
-    }
     useEffect(() => {
         const canvas = canvasRef.current
         const context = canvas.getContext('2d')
@@ -38,12 +58,19 @@ const Map = ({ pawns }) => {
         image.onload = function() {
             context.drawImage(image, 0 , 0);
             pawns.forEach( pawn => {
-                paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
+                paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color, pawn._id);
             })
         }
       }, [pawns]);
     return(
-        <canvas className="canvas-container" width={480} height={480} ref={canvasRef} onClick={handleCanvasClick}></canvas>
+        <canvas 
+            className="canvas-container" 
+            width={480} 
+            height={480} 
+            ref={canvasRef} 
+            onClick={handleCanvasClick} 
+            onMouseMove={handleMouseMove}
+        />
     )
 }
 export default Map