added drawing pawns on map

backend/schemas/room.js

@@ -11,7 +11,10 @@ var RoomSchema = new Schema({
         color: String,
         ready: Boolean,
     }],
-    positions: Map
+    positions: {
+        type: Map,
+        of: Array,
+    }
 });
 
 var RoomModel = mongoose.model('RoomModel', RoomSchema );

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

@@ -1,8 +1,26 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import './Map.css';
+import axios from 'axios'
 const Map = () => {
+    //map of positions <1,92> and their equivalent of pixels in canvas
+    const mapOfLocations = {
+    };
+    //obj schema: {color: [pos,pos,pos]}
+    const [pawnPositions, setPawnPositions] = useState({});
 
+    const paintPawn = (context, x, y, color) =>{
+        context.fillStyle = color
+        context.beginPath();
+        context.arc(x, y, 12, 0, 2 * Math.PI);
+        context.stroke();
+        context.fill();
+    }
+    const fetchData = () => {
+        axios.get('http://localhost:3000/game',{withCredentials: true})
+        .then(response => setPawnPositions(response.data.positions))
+    }
     const canvasRef = useRef(null)
+
     useEffect(() => {
         const canvas = canvasRef.current
         const context = canvas.getContext('2d')
@@ -10,7 +28,12 @@ const Map = () => {
         image.src = 'https://img-9gag-fun.9cache.com/photo/a8GdpYZ_460s.jpg'
         image.onload = function() {
             context.drawImage(image, 0 , 0);
+            /* pawnPositions.forEach( pawn => {
+                paintPawn(context, pawn.x,pawny,'#ffa1a1')
+            })
+            */ 
         }
+
       }, []);
 
     return(