From f2b016d29ccacea8965dbb8356c54cf84313b3f2 Mon Sep 17 00:00:00 2001
From: Mason Zarns <mason@zarns.net>
Date: Sat, 16 Nov 2024 14:07:36 -0600
Subject: [PATCH] Bugfix/mcts (#296)

---
 ui/src/components/RightDrawer.scss |  2 +-
 ui/src/pages/HomePage.js           | 52 +++++++++++++++++-------------
 ui/src/pages/HomePage.scss         |  9 +++---
 3 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/ui/src/components/RightDrawer.scss b/ui/src/components/RightDrawer.scss
index 45fbdcd2..05004e0e 100644
--- a/ui/src/components/RightDrawer.scss
+++ b/ui/src/components/RightDrawer.scss
@@ -48,7 +48,7 @@ $dark-divider: rgb(0 0 0 / 80%);
     
         &.red { color: $red; }
         &.blue { color: $blue; }
-        &.white { color: $blue; }
+        &.white { color: $white; }
         &.orange { color: $orange; }
     
         .player-color {
diff --git a/ui/src/pages/HomePage.js b/ui/src/pages/HomePage.js
index b898562f..f82bba95 100644
--- a/ui/src/pages/HomePage.js
+++ b/ui/src/pages/HomePage.js
@@ -6,14 +6,38 @@ import { createGame } from "../utils/apiClient";
 
 import "./HomePage.scss";
 
+// Enum of Type of Game Mode
+const GameMode = Object.freeze({
+  HUMAN_VS_CATANATRON: "HUMAN_VS_CATANATRON",
+  RANDOM_BOTS: "RANDOM_BOTS",
+  CATANATRON_BOTS: "CATANATRON_BOTS",
+});
+
+function getPlayers(gameMode, numPlayers) {
+  switch (gameMode) {
+    case GameMode.HUMAN_VS_CATANATRON:
+      const players = ["HUMAN"];
+      for (let i = 1; i < numPlayers; i++) {
+        players.push("CATANATRON");
+      }
+      return players;
+    case GameMode.RANDOM_BOTS:
+      return Array(numPlayers).fill("RANDOM");
+    case GameMode.CATANATRON_BOTS:
+      return Array(numPlayers).fill("CATANATRON");
+    default:
+      throw new Error("Invalid Game Mode");
+  }
+}
+
 export default function HomePage() {
   const [loading, setLoading] = useState(false);
   const [numPlayers, setNumPlayers] = useState(2);
   const history = useHistory();
 
-  const handleCreateGame = async (getPlayers) => {
+  const handleCreateGame = async (gameMode) => {
     setLoading(true);
-    const players = getPlayers(numPlayers);
+    const players = getPlayers(gameMode, numPlayers);
     const gameId = await createGame(players);
     setLoading(false);
     history.push("/games/" + gameId);
@@ -50,39 +74,21 @@ export default function HomePage() {
             <Button
               variant="contained"
               color="primary"
-              onClick={() => {
-                handleCreateGame((numPlayers) => {
-                  const players = ["HUMAN"];
-                  for (let i = 1; i < numPlayers; i++) {
-                    players.push("CATANATRON");
-                  }
-                  return players;
-                });
-              }}
+              onClick={() => handleCreateGame(GameMode.HUMAN_VS_CATANATRON)}
             >
               Play against Catanatron
             </Button>
             <Button
               variant="contained"
               color="secondary"
-              onClick={() => {
-                handleCreateGame((numPlayers) => {
-                  const players = Array(numPlayers).fill("RANDOM");
-                  return players;
-                });
-              }}
+              onClick={() => handleCreateGame(GameMode.RANDOM_BOTS)}
             >
               Watch Random Bots
             </Button>
             <Button
               variant="contained"
               color="secondary"
-              onClick={() => {
-                handleCreateGame((numPlayers) => {
-                  const players = Array(numPlayers).fill("CATANATRON");
-                  return players;
-                });
-              }}
+              onClick={() => handleCreateGame(GameMode.CATANATRON_BOTS)}
             >
               Watch Catanatron
             </Button>
diff --git a/ui/src/pages/HomePage.scss b/ui/src/pages/HomePage.scss
index a68fde11..b0860080 100644
--- a/ui/src/pages/HomePage.scss
+++ b/ui/src/pages/HomePage.scss
@@ -38,28 +38,27 @@
 
     .player-count-buttons {
       .player-count-button {
-        width: 116px;
+        width: 130px;
         height: 35px;
         font-size: 1rem;
         color: white !important;
         margin: 0 4px;
         transition: background-color 0.3s;
         background-color: $dark-gray !important;
-    
+
         &:hover {
           background-color: darken($dark-gray, 10%) !important;
         }
-    
+
         &.selected {
           background-color: #0d47a1 !important;
           color: white !important;
-    
+
           &:hover {
             background-color: darken(#0d47a1, 1%) !important;
           }
         }
       }
     }
-    
   }
 }