changed theme

src/Home.tsx

@@ -76,13 +76,30 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   return <div style={{
     display: "flex",
     flexDirection: "column",
-    alignItems: "center"
+    alignItems: "center",
+    background: "#EEEEEE",
+    flex: "1",
   }}>
-    <h2>Mancala</h2>
+    <div style={{
+      padding: "0px 50px",
+      background : "rgb(228, 228, 228)",
+      display: 'flex',
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      alignSelf: "stretch"
+    }}>
+      <h1>Mancala</h1>
+      {game && <button onClick={leaveGame}>Leave</button>}
+    </div>
     {!game && <button onClick={newGameClick}>New Game</button>}
-    {game && <button onClick={leaveGame}>Leave</button>}
+
-    {game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
+    {game && (
-    {game && <h5>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h5>}
+      <>
+        <h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
+        <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
+      </>
+    )}
   </div>
 }
 

src/components/BoardView.tsx

@@ -2,14 +2,30 @@ import * as React from 'react';
 import { FunctionComponent, useState } from 'react';
 import { Hole, Store, Game } from '../mancala';
 
-const BallView: FunctionComponent = () => {
+type Theme = {
+    background : string,
+    boardColor: string
+    storeColor: string
+    holeColor: string
+    ballColor: string
+}
+
+const theme: Theme = {
+    background : "#EEEEEE",
+    boardColor: "#4D606E",
+    storeColor: "#3FBAC2",
+    holeColor: "#D3D4D8",
+    ballColor: "#393E46",
+}
+
+const BallView: FunctionComponent<{color : string}> = ({color}) => {
 
     return (<div style={{
-        background: "yellow",
+        background: color,
         margin: "1px",
-        width: "20px",
+        width: "1vw",
-        height: "20px",
+        height: "1vw",
-        borderRadius: "50px"
+        borderRadius: "10vw"
     }} >
     </div>)
 }
@@ -23,7 +39,7 @@ function range(size: number) {
 }
 
 const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
-    const balls = [...range(hole.ballCount)].map((i) => <BallView />)
+    const balls = [...range(hole.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
 
     return (<div
         onClick={onClick}
@@ -31,7 +47,7 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
             background: color,
             margin: "5px",
             padding: "5px",
-            borderRadius: "100px",
+            borderRadius: "10vw",
             display: 'flex',
             alignItems: 'center',
             alignContent: 'center',
@@ -45,17 +61,17 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
 
 const StoreView: FunctionComponent<
     { store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
-        const balls = [...range(store.ballCount)].map((i) => <BallView />)
+        const balls = [...range(store.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
         return (<div style={{
             gridColumn: gridColumn,
             gridRow: gridRow,
             background: color,
-            margin: "1px",
+            margin: "5px",
-            borderRadius: "100px",
+            borderRadius: "10vw",
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            alignContent : 'center',
+            alignContent: 'center',
             flexWrap: "wrap",
         }} >
             {balls}
@@ -66,13 +82,13 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
     game, userKey, onHoleSelect }) => {
 
     const player1Holes = game?.board.player1Holes.map((hole) => (
-        <HoleView hole={hole} color="red" onClick={() => {
+        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
             if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
         }} />
     ))
 
     const player2Holes = game!!.board.player2Holes.map((hole) => (
-        <HoleView hole={hole} color="blue" onClick={() => {
+        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
             if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
         }} />
     ))
@@ -82,23 +98,23 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
             margin: '10px',
             padding: '10px',
             display: 'grid',
-            gridTemplateColumns: 'repeat(8, 150px)',
+            gridTemplateColumns: 'repeat(8, 11vw)',
-            gridTemplateRows: '150px 150px',
+            gridTemplateRows: 'repeat(2, 11vw)',
-            border: "2px solid black",
+            borderRadius: "3vw",
-            borderRadius: "30px",
+            background: theme.boardColor
         }}>
             {
                 game.getPlayerNameByKey(userKey) == "player2" ? (
                     <>
-                        <StoreView store={game!!.board.player1Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
-                        <StoreView store={game!!.board.player2Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                         {player1Holes.reverse()}
                         {player2Holes}
                     </>
                 ) : (
                     <>
-                        <StoreView store={game!!.board.player2Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
-                        <StoreView store={game!!.board.player1Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                         {player2Holes.reverse()}
                         {player1Holes}
                     </>

src/index.html

@@ -6,8 +6,23 @@
   <title>Mancala</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body>
+<body style="margin: 0px;">
-  <div id="main"></div>
+  <div id="main" style="display: flex;"></div>
   <script src="./App.tsx"></script>
 </body>
+
+
+<style>
+  html{
+    height:  100%;
+  }
+
+  body{
+    height: 100%;
+  }
+
+  #main{
+    height: 100%;
+  }
+</style>
 </html>