From c22ee282b9686bc97ab5288b9b8e462982106794 Mon Sep 17 00:00:00 2001
From: Wenszel <wiktor.smaga13@gmail.com>
Date: Tue, 31 May 2022 19:25:18 +0200
Subject: [PATCH] changed background

---
 src/components/Navbar.css                     | 14 ++++++++
 src/components/Navbar.jsx                     |  4 ++-
 src/components/game-board-components/Map.jsx  |  4 +--
 .../navbar-components/NameContainer.jsx       | 22 ++++++------
 src/index.css                                 | 35 +++++++++++++------
 5 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Navbar.css

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
new file mode 100644
index 0000000..79e823d
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 5f78dcc..4056aa0 100644
--- a/src/components/Navbar.jsx
+++ b/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>
diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx
index 07ca402..77e4250 100644
--- a/src/components/game-board-components/Map.jsx
+++ b/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}
diff --git a/src/components/navbar-components/NameContainer.jsx b/src/components/navbar-components/NameContainer.jsx
index 80f2415..c14487c 100644
--- a/src/components/navbar-components/NameContainer.jsx
+++ b/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;
\ No newline at end of file
+export default NameContainer;
diff --git a/src/index.css b/src/index.css
index 7725404..f6f5e93 100644
--- a/src/index.css
+++ b/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;
-}
\ No newline at end of file
+}