added speech synthesis and dice rolling

backend/routes/game.js

@@ -9,9 +9,9 @@ router.post('/start', function (req, res){
     */
     
 });
-//returns positions 
-router.get('/', function (req, res){
-
+router.get('/roll', function (req, res){
+    res.send({number: Math.ceil(Math.random() * 6)});
 });
 
+
 module.exports = router;

backend/routes/room.js

@@ -49,7 +49,7 @@ router.post('/add', function (req, res) {
                 updateObj)
                 .then(()=>{
                     req.session.roomId = results._id;
-                    req.session.playerId = updateObj.players[(updateObj.players).lenght - 1]._id;
+                    req.session.playerId = updateObj.players[updateObj.players.lenght - 1]._id;
                     req.session.name = req.body.name;
                     res.status(200).send('Joined!'); 
                 });    

src/components/Gameboard.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
 import Map from './game-board-components/Map'
+import Dice from './game-board-components/Dice'
 
 const Gameboard = () => {
 
     return (
         <>
+            <Dice/>
             <Map/>
         </>
     )

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

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import one from '../../images/dice/1.png';
+import two from '../../images/dice/2.png';
+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]);
+    const handleRoll = () => {
+        
+        axios.get('http://localhost:3000/game/roll').then(response => {
+            const utterance = new SpeechSynthesisUtterance(response.data.number);
+            speechSynthesis.speak(utterance);
+            setRolledNumber(response.data.number);
+        })
+    }
+    return(
+        <div>
+            {rolledNumber ? <img src={images[rolledNumber - 1]} width="100" height="100"/> : null }
+            <button onClick={handleRoll}>Roll number</button>
+        </div>
+    )
+}
+export default Dice;

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

@@ -6,7 +6,9 @@ const Map = () => {
     const mapOfLocations = {
     };
     //obj schema: {color: [pos,pos,pos]}
-    const [pawnPositions, setPawnPositions] = useState({});
+    const [pawnPositions, setPawnPositions] = useState({
+        
+    });
 
     const paintPawn = (context, x, y, color) =>{
         context.fillStyle = color
@@ -22,6 +24,7 @@ const Map = () => {
     const canvasRef = useRef(null)
 
     useEffect(() => {
+        //fetchData();
         const canvas = canvasRef.current
         const context = canvas.getContext('2d')
         var image = new Image();
@@ -29,7 +32,7 @@ const Map = () => {
         image.onload = function() {
             context.drawImage(image, 0 , 0);
             /* pawnPositions.forEach( pawn => {
-                paintPawn(context, pawn.x,pawny,'#ffa1a1')
+                paintPawn(context, pawn.x,pawn.y,'#ffa1a1')
             })
             */ 
         }