update info panel

src/Home.tsx

@@ -214,7 +214,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       )}
       <div
         style={{
-          padding: "0px 50px",
+          padding: "0px 4vw",
           background: "rgb(228, 228, 228)",
           display: "flex",
           flexDirection: "row",
@@ -239,6 +239,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         </div>
       </div>
       <InfoPanel
+        context={context}
         game={game}
         crashMessage={crashMessage}
         userKey={userKey}

src/components/BoardView.tsx

@@ -150,16 +150,14 @@ const BoardView: FunctionComponent<{
   return (
     <div
       style={{
-        margin: "10px",
-        padding: "20px",
+        margin: "1vw",
+        padding: "2vw",
         display: "grid",
         gridTemplateColumns: "repeat(8, 11vw)",
         gridTemplateRows: "repeat(2, 11vw)",
         borderRadius: "3vw",
         transition: "background-color 0.5s",
-        background: isUserTurn
-          ? theme.boardColor
-          : theme.boardColorWhenPlayerTurn,
+        background: theme.boardColor,
       }}
     >
       {userKey === game.player2Id ? (

src/components/Button.tsx

@@ -1,22 +1,26 @@
-import * as React from 'react';
-import { FunctionComponent } from "react"
+import * as React from "react";
+import { FunctionComponent } from "react";
 
-const Button: FunctionComponent<{ text: String,onClick: () => void,  color: string }> = ({ text, color, onClick }) => {
+const Button: FunctionComponent<{
+  text: String;
+  onClick: () => void;
+  color: string;
+}> = ({ text, color, onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        background: color,
+        color: "white",
+        margin: "5px",
+        padding: "10px",
+        border: "none",
+        borderRadius: "4vw",
+      }}
+    >
+      {text}
+    </button>
+  );
+};
 
-    return (
-        <button
-            onClick={onClick}
-            style={{
-                background: color,
-                color : "white",
-                margin: "5px",
-                padding: "10px",
-                border : "none",
-                borderRadius: "3vw",
-            }} >
-            {text}
-        </button>
-    )
-}
-
-export default Button
+export default Button;

src/components/InfoPanel.tsx

@@ -1,66 +1,107 @@
-import { MancalaGame } from 'mancala.js';
-import * as React from 'react';
-import { FunctionComponent } from "react"
-import { context } from '../context';
+import { MancalaGame } from "mancala.js";
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Context } from "../context";
+
+function getInfoPanelTextByGameState(params: {
+  context: Context;
+  game: MancalaGame;
+  crashMessage: string;
+  userKey: string;
+  userKeyWhoLeave: string;
+  searchingOpponent: boolean;
+}): string {
+  const {
+    context,
+    game,
+    crashMessage,
+    userKey,
+    userKeyWhoLeave,
+    searchingOpponent,
+  } = params;
+  if (searchingOpponent) {
+    return context.texts.SearchingOpponent + " " + context.texts.PleaseWait;
+  } else if (crashMessage) {
+    return context.texts.GameCrashed + " " + crashMessage;
+  } else if (userKeyWhoLeave) {
+    let message = context.texts.OpponentLeavesTheGame;
+    if (userKeyWhoLeave == userKey) {
+      message = context.texts.YouLeftTheGame;
+    }
+    return message;
+  } else if (game?.state == "ended") {
+    const wonPlayer = game.getWonPlayerId();
+    let whoWon =
+      game.getWonPlayerId() === userKey
+        ? context.texts.YouWon
+        : context.texts.YouLost;
+    if (!wonPlayer) {
+      whoWon = context.texts.GameDraw;
+    }
+    return context.texts.GameEnded + " " + whoWon;
+  } else {
+    return game?.checkIsPlayerTurn(userKey)
+      ? context.texts.YourTurn
+      : context.texts.OpponentTurn;
+  }
+  return undefined;
+}
+
+const InfoPanelContainer: FunctionComponent<{
+  context: Context;
+  color: string;
+}> = (props) => {
+  return (
+    <div
+      style={{
+        background: props.color,
+        padding: "1vw 2vw",
+        marginTop: "1vw",
+        borderRadius: "10vw",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
 
 const InfoPanel: FunctionComponent<{
-    game: MancalaGame,
-    crashMessage: string,
-    userKey: string,
-    userKeyWhoLeave: string,
-    searchingOpponent: boolean
+  context: Context;
+  game: MancalaGame;
+  crashMessage: string;
+  userKey: string;
+  userKeyWhoLeave: string;
+  searchingOpponent: boolean;
 }> = ({
-    game, crashMessage, userKey, userKeyWhoLeave, searchingOpponent }) => {
-        if (searchingOpponent) {
-            return (
-                <h4>{
-                    context.texts.SearchingOpponent + " " + context.texts.PleaseWait
-                }</h4>
-            )
-        }
+  context,
+  game,
+  crashMessage,
+  userKey,
+  userKeyWhoLeave,
+  searchingOpponent,
+}) => {
+  const isUserTurn = game?.checkIsPlayerTurn(userKey);
+  return (
+    <InfoPanelContainer
+      context={context}
+      color={
+        isUserTurn
+          ? context.themeManager.theme.playerTurnColor
+          : context.themeManager.theme.holeColor
+      }
+    >
+      <h4 style={{ margin: "0" }}>
+        {getInfoPanelTextByGameState({
+          context,
+          game,
+          crashMessage,
+          userKey,
+          userKeyWhoLeave,
+          searchingOpponent,
+        })}
+      </h4>
+    </InfoPanelContainer>
+  );
+};
 
-        if (crashMessage) {
-            return (
-                <h4>{
-                    context.texts.GameCrashed + " " + crashMessage
-                }</h4>
-            )
-        }
-
-        if (userKeyWhoLeave) {
-            let message = context.texts.OpponentLeavesTheGame
-
-            if (userKeyWhoLeave == userKey) {
-                message = context.texts.YouLeftTheGame
-            }
-            return (
-                <h4>
-                    {message}
-                </h4>
-            )
-        }
-        
-
-        if (game) {
-            if (game.state == "ended") {
-                const wonPlayer = game.getWonPlayerId();
-                let whoWon = game.getWonPlayerId() === userKey ? context.texts.YouWon : context.texts.YouLost
-                if(!wonPlayer){
-                    whoWon = context.texts.GameDraw
-                }
-                return (
-                    <h4>{
-                        context.texts.GameEnded + " " + whoWon
-                    }</h4>
-                )
-            } else {
-                return (
-                    <h4>{game.checkIsPlayerTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
-                )
-            }
-        }
-
-        return <h4></h4>
-    }
-
-export default InfoPanel
+export default InfoPanel;

src/theme/DefaultTheme.ts

@@ -3,7 +3,7 @@ import { Theme } from "./Theme";
 const defaultTheme: Theme = {
   background: "#EEEEEE",
   boardColor: "#4D606E",
-  boardColorWhenPlayerTurn: "#84b8a6",
+  playerTurnColor: "#84b8a6",
   storeColor: "#3FBAC2",
   storeColorWhenPlayerTurn: "#6cab94",
   holeColor: "#D3D4D8",

src/theme/Theme.ts

@@ -1,7 +1,7 @@
 export type Theme = {
   background: string;
   boardColor: string;
-  boardColorWhenPlayerTurn: string;
+  playerTurnColor: string;
   storeColor: string;
   storeColorWhenPlayerTurn: string;
   holeColor: string;