added pawns onclick event

src/App.js

@@ -5,7 +5,6 @@ import { Beforeunload } from 'react-beforeunload';
 import { BrowserRouter as Router , Route , Redirect, Switch } from 'react-router-dom';
 
 import Gameboard  from './components/Gameboard'
-import Navbar from './components/Navbar'
 import NameInput from './components/NameInput';
 
 function App() {
@@ -14,13 +13,11 @@ function App() {
   const [redirect, setRedirect] = useState()
 
   useEffect(() => {
-    console.log("id", id);
     axios.get('http://localhost:3000/player', {
       withCredentials:true,
       mode: 'cors'
     })
     .then( response => {
-      console.log(response);
       setId(response.data.playerId);
       response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
     });
@@ -34,8 +31,6 @@ function App() {
     } 
   
   const idCallback = (id)=>{
-    console.log(id);
-    
     axios.get('http://localhost:3000/player/', {
       withCredentials:true,
       mode: 'cors',

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

@@ -3,17 +3,33 @@ import positions from './positions';
 import './Map.css';
 
 const Map = ({ pawns }) => {
+    //let pawnsOnMap = [];
+    let paths = [];
     const paintPawn = (context, x, y, color) =>{
-        console.log(x,y,color);
+        const circle = new Path2D();
+        circle.arc(x, y, 12, 0, 2 * Math.PI);
+        context.strokeStyle ='black';
+        context.stroke(circle);
         context.fillStyle = color
-        context.beginPath();
+        context.fill(circle);
-        context.arc(x, y, 12, 0, 2 * Math.PI);
+        paths.push(circle);
-        context.stroke();
+       // pawnsOnMap.push(circle);
-        context.fill();
     }
 
     const canvasRef = useRef(null)
+    const handleCanvasClick = event =>{
+        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
+        y = event.clientY - rect.top;
+        paths.forEach((path) => {
+            if (context.isPointInPath(path, x, y)) {
+              alert("clicked")
+            }
 
+        });
+    }
     useEffect(() => {
         const canvas = canvasRef.current
         const context = canvas.getContext('2d')
@@ -22,14 +38,12 @@ const Map = ({ pawns }) => {
         image.onload = function() {
             context.drawImage(image, 0 , 0);
             pawns.forEach( pawn => {
-                console.log("rysuje")
-                console.log(positions[pawn.position]);
                 paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
             })
         }
       }, [pawns]);
     return(
-        <canvas className="canvas-container" width={480} height={480} ref={canvasRef}></canvas>
+        <canvas className="canvas-container" width={480} height={480} ref={canvasRef} onClick={handleCanvasClick}></canvas>
     )
 }
 export default Map