add theme chooser

src/Home.tsx

@@ -18,6 +18,10 @@ import { GameMove } from "./models/GameMove";
 import PitAnimator from "./animation/PitAnimator";
 import BoardViewModel from "./viewmodel/BoardViewModel";
 import { v4 } from "uuid";
+import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
+import "@szhsin/react-menu/dist/index.css";
+import "@szhsin/react-menu/dist/transitions/slide.css";
+import { getColorByLuminance } from "./util/ColorUtil";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -116,6 +120,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     };
   }, []);
 
+  React.useEffect(() => {
+    context.themeManager.onThemeChange = () => {
+      updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
+    };
+  }, [boardViewModel]);
+
   const resetGameState = () => {
     setGame(undefined);
     setCrashMessage(undefined);
@@ -185,7 +195,11 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     }
     return <></>;
   };
-
+  const menuTextColor = getColorByLuminance(
+    context.themeManager.theme.appBarBgColor,
+    context.themeManager.theme.primary,
+    context.themeManager.theme.primaryLight
+  );
   return (
     <div
       style={{
@@ -225,7 +239,54 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         }}
       >
         <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
-        <div>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          <div
+            style={{
+              marginRight: "1vw",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Menu
+              menuStyle={{
+                background: context.themeManager.theme.appBarBgColor,
+              }}
+              menuButton={
+                <span class="material-symbols-outlined">light_mode</span>
+              }
+              transition
+              align="end"
+            >
+              {context.themeManager.themes.map((theme) => {
+                return (
+                  <MenuItem
+                    style={{
+                      color: menuTextColor,
+                    }}
+                    onClick={() => (context.themeManager.theme = theme)}
+                  >
+                    <div
+                      style={{
+                        borderRadius: "5vw",
+                        background: theme.boardColor,
+                        width: "1vw",
+                        height: "1vw",
+                        marginRight: "1vw",
+                      }}
+                    ></div>
+                    {theme.name}
+                  </MenuItem>
+                );
+              })}
+            </Menu>
+          </div>
           {renderNewGameButton()}
           {game &&
             !userKeyWhoLeave &&

src/animation/PitAnimator.ts

@@ -162,7 +162,7 @@ export default class PitAnimator {
     }
   }
 
-  private getBoardViewModelFromGame(game: MancalaGame): BoardViewModel {
+  public getBoardViewModelFromGame(game: MancalaGame): BoardViewModel {
     const pitViewModels = this.createPitViewModelsFromGame(game);
     return BoardViewModelFactory.create(v4(), pitViewModels);
   }

src/index.html

@@ -11,6 +11,8 @@
   <script src="./App.tsx"></script>
 </body>
 
+<link rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
 
 <style>
   html{

src/theme/OldTheme.ts

@@ -4,7 +4,7 @@ const oldTheme: Theme = {
   id: "0",
   name: "Old Theme",
   background: "#EEEEEE",
-  appBarBgColor: "rgb(228, 228, 228)",
+  appBarBgColor: "#e4e4e4",
   primary: "#4D606E",
   primaryLight: "#EEEEEE",
   playerTurnColor: "#84b8a6",