changed background

src/components/Navbar.css

@@ -0,0 +1,14 @@
+.yellow {
+    position: relative;
+    left: 38px;
+}
+.blue {
+    position: relative;
+    top: 538px;
+    right: 114px;
+}
+.green {
+    position: relative;
+    top: 538px;
+    left: 152px;
+}

src/components/Navbar.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import NameContainer from './navbar-components/NameContainer';
 import ReadyButton from './navbar-components/ReadyButton';
+import './Navbar.css';
 
 const Navbar = ({ players, started, time, isReady }) => {
+    const colors = ['red', 'blue', 'green', 'yellow'];
     return (
         <div className='navbar-container'>
             {players.map((player, index) => (
-                <NameContainer key={index} player={player} time={time} />
+                <NameContainer key={index} player={player} color={colors[index]} time={time} />
             ))}
             {started ? null : <ReadyButton isReady={isReady} />}
         </div>

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

@@ -208,8 +208,8 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
     return (
         <canvas
             className='canvas-container'
-            width={480}
-            height={480}
+            width={460}
+            height={460}
             ref={canvasRef}
             onClick={handleCanvasClick}
             onMouseMove={handleMouseMove}

src/components/navbar-components/NameContainer.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
 
-const NameContainer = ( {player, time} ) => {
+const NameContainer = ({ player, time, color }) => {
     const getRemainingTime = () => {
-        return Math.round((time - Date.now())/1000)+1;
-    }
+        return Math.round((time - Date.now()) / 1000) + 1;
+    };
     return (
-        <div className="name-container" 
-            style={ player.ready ? { backgroundColor: player.color} :  { backgroundColor: 'grey'} }>
-            {player.name} 
-            {player.nowMoving ? <div className="timer"> {getRemainingTime()} </div> : null}
+        <div
+            className={`name-container ${color}`}
+            style={player.ready ? { backgroundColor: color } : { backgroundColor: 'lightgrey' }}
+        >
+            {player.name}
+            {player.nowMoving ? <div className='timer'> {getRemainingTime()} </div> : null}
         </div>
-    )
-}
+    );
+};
 
-export default NameContainer;
+export default NameContainer;

src/index.css

@@ -1,27 +1,38 @@
-body{
-    background-color: antiquewhite;
+body {
+    background: radial-gradient(
+        circle,
+        rgba(0, 138, 255, 1) 0%,
+        rgba(0, 138, 255, 1) 9%,
+        rgba(0, 138, 255, 1) 16%,
+        rgba(9, 9, 121, 1) 81%
+    );
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-.canvas-container{
+.canvas-container {
     margin: 10px;
 }
-.dice-container{
+canvas {
+    border-radius: 15px;
+    border: 2px solid black;
+}
+.dice-container {
     position: absolute;
     top: 30%;
     left: 20%;
 }
-.navbar-container{
+.navbar-container {
     display: flex;
     flex-direction: row;
 }
-.navbar-container>div{
+.navbar-container > div {
     margin-right: 10px;
 }
-.name-container{
+.name-container {
     width: 100px;
     height: 50px;
+    border: 2px solid white;
     border-radius: 5px;
     color: white;
     font-weight: bold;
@@ -30,13 +41,15 @@ body{
     justify-content: center;
     align-items: center;
 }
-.timer{
+.timer {
     background-color: darkblue;
     color: white;
     position: relative;
-    top: -20px;
-    left: 15px;
+    top: -24px;
+    left: 32px;
+    border: 1px solid white;
+    padding: 1px;
     width: 30px;
     height: 20px;
     border-radius: 5px;
-}
+}