From 9fcb3e8e712bef8fe57b438ec489be8664443a9a Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 22:39:01 +0300
Subject: [PATCH 01/11] refactor: add HeaderBar

---
 src/Home.tsx                     | 188 +++++--------------------------
 src/components/FloatingPanel.tsx |  27 +++++
 src/components/HeaderBar.tsx     | 125 ++++++++++++++++++++
 src/components/PageContainer.tsx |  20 ++++
 4 files changed, 203 insertions(+), 157 deletions(-)
 create mode 100644 src/components/FloatingPanel.tsx
 create mode 100644 src/components/HeaderBar.tsx
 create mode 100644 src/components/PageContainer.tsx

diff --git a/src/Home.tsx b/src/Home.tsx
index c1e5f48..a43af49 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -11,18 +11,17 @@ import {
   channel_on_game_update,
   channel_on_game_user_leave,
 } from "./channel_names";
-import Button from "./components/Button";
 import InfoPanel from "./components/InfoPanel";
 import { CommonMancalaGame, MancalaGame, Pit } from "mancala.js";
 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 { getColorByBrightness } from "./util/ColorUtil";
 import { Theme } from "./theme/Theme";
+import HeaderBar from "./components/HeaderBar";
+import FloatingPanel from "./components/FloatingPanel";
+import PageContainer from "./components/PageContainer";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -113,6 +112,17 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     setBoardViewModel(boardViewModel);
   };
 
+  const resetGameState = () => {
+    setGame(undefined);
+    setCrashMessage(undefined);
+    setUserKeyWhoLeave(undefined);
+  };
+
+  const getBoardIndex = (index: number) => {
+    if (userKey === game.player2Id) return index + game.board.pits.length / 2;
+    return index;
+  };
+
   React.useEffect(() => {
     setTheme(context.themeManager.theme);
     const pitAnimator = new PitAnimator(context, updateBoardViewModel);
@@ -131,27 +141,16 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     };
   }, [boardViewModel]);
 
-  const resetGameState = () => {
-    setGame(undefined);
-    setCrashMessage(undefined);
-    setUserKeyWhoLeave(undefined);
-  };
-
-  const newGameClick = () => {
+  const onNewGameClick = () => {
     resetGameState();
     setSearchingOpponent(true);
     context.rtmt.sendMessage("new_game", {});
   };
 
-  const leaveGame = () => {
+  const onLeaveGameClick = () => {
     context.rtmt.sendMessage(channel_leave_game, {});
   };
 
-  const getBoardIndex = (index: number) => {
-    if (userKey === game.player2Id) return index + game.board.pits.length / 2;
-    return index;
-  };
-
   const onHoleSelect = (index: number, pit: Pit) => {
     //TODO : stoneCount comes from view model!
     if (pit.stoneCount === 0) {
@@ -178,149 +177,24 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     return map[connectionState];
   };
 
-  const renderNewGameButton = () => {
-    const newGame = (
-      <Button
-        context={context}
-        text={context.texts.NewGame}
-        color={context.themeManager.theme.holeColor}
-        onClick={newGameClick}
-      />
-    );
-    if (userKeyWhoLeave) {
-      return newGame;
-    }
-    if (crashMessage) {
-      return newGame;
-    }
-    if (!game) {
-      return newGame;
-    } else if (game.state == "ended") {
-      return newGame;
-    }
-    return <></>;
-  };
-  const menuTextColor = getColorByBrightness(
-    context.themeManager.theme.appBarBgColor,
+  const textColorOnBoard = getColorByBrightness(
+    context.themeManager.theme.boardColor,
     context.themeManager.theme.textColor,
     context.themeManager.theme.textLightColor
   );
+
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        background: theme?.background,
-        flex: "1",
-        minHeight: "400px"
-      }}
-    >
-      {showConnectionState && (
-        <div
-          style={{
-            position: "absolute",
-            bottom: "0px",
-            left: "0px",
-            padding: "15px ",
-            borderTopRightRadius: "1vw",
-            minWidth: "10vw",
-            minHeight: "1vw",
-            background: context.themeManager.theme.textColor,
-            color: context.themeManager.theme.textLightColor,
-          }}
-        >
-          {connectionStateText()}
-        </div>
-      )}
-      <div
-        style={{
-          padding: "0px 4vw",
-          background: context.themeManager.theme.appBarBgColor,
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-          alignSelf: "stretch",
-        }}
-      >
-        <h1 style={{ color: menuTextColor, margin: "10px 0px" }}>
-          {context.texts.Mancala}
-        </h1>
-        <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
-                  style={{ color: menuTextColor }}
-                  class="material-symbols-outlined"
-                >
-                  light_mode
-                </span>
-              }
-              transition
-              align="end"
-            >
-              {context.themeManager.themes.map((theme) => {
-                return (
-                  <MenuItem
-                    style={{
-                      color: menuTextColor,
-                    }}
-                    onMouseOver={(event) =>
-                      (event.target.style.background =
-                        context.themeManager.theme.background)
-                    }
-                    onMouseOut={(event) =>
-                      (event.target.style.background = "transparent")
-                    }
-                    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 &&
-            !crashMessage &&
-            (game?.state === "playing" || game?.state === "initial") && (
-              <Button
-                context={context}
-                color={context.themeManager.theme.holeColor}
-                text={context.texts.Leave}
-                onClick={leaveGame}
-              />
-            )}
-        </div>
-      </div>
+    <PageContainer theme={theme!}>
+      <FloatingPanel context={context} color={context.themeManager.theme.boardColor} visible={showConnectionState}>
+        <span style={{ color: textColorOnBoard }}>{connectionStateText()}</span>
+      </FloatingPanel>
+      <HeaderBar
+        context={context}
+        game={game}
+        userKeyWhoLeave={userKeyWhoLeave}
+        crashMessage={crashMessage}
+        onNewGameClick={onNewGameClick}
+        onLeaveGameClick={onLeaveGameClick} />
       <InfoPanel
         context={context}
         game={game}
@@ -339,7 +213,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
           onHoleSelect={onHoleSelect}
         />
       )}
-    </div>
+    </PageContainer>
   );
 };
 
diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx
new file mode 100644
index 0000000..979a129
--- /dev/null
+++ b/src/components/FloatingPanel.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Context } from "../context";
+
+const FloatingPanel: FunctionComponent<{
+  context: Context;
+  color: string;
+  visible: boolean;
+}> = (props) => {
+  if(!props.visible) return <></>
+  return (
+    <div style={{
+      position: "absolute",
+      bottom: "0px",
+      left: "0px",
+      padding: "15px",
+      borderTopRightRadius: "1vw",
+      minWidth: "10vw",
+      minHeight: "1vw",
+      backgroundColor: props.color,
+    }}>
+      {props.children}
+    </div>
+  )
+};
+
+export default FloatingPanel;
\ No newline at end of file
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
new file mode 100644
index 0000000..058d8f5
--- /dev/null
+++ b/src/components/HeaderBar.tsx
@@ -0,0 +1,125 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Menu, MenuItem } from "@szhsin/react-menu";
+import { MancalaGame } from "mancala.js";
+import { Context } from "../context";
+import { getColorByBrightness } from "../util/ColorUtil";
+import Button from "./Button";
+import "@szhsin/react-menu/dist/index.css";
+import "@szhsin/react-menu/dist/transitions/slide.css";
+
+function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick: () => void, userKeyWhoLeave: string, crashMessage: string): JSX.Element {
+    const newGame = (
+        <Button
+            context={context}
+            text={context.texts.NewGame}
+            color={context.themeManager.theme.holeColor}
+            onClick={onNewGameClick}
+        />
+    );
+    if (userKeyWhoLeave) {
+        return newGame;
+    }
+    if (crashMessage) {
+        return newGame;
+    }
+    if (!game) {
+        return newGame;
+    } else if (game.state == "ended") {
+        return newGame;
+    }
+    return <></>;
+};
+
+const HeaderBar: FunctionComponent<{
+    context: Context,
+    game: MancalaGame,
+    userKeyWhoLeave: string,
+    crashMessage: string,
+    onNewGameClick: () => void,
+    onLeaveGameClick: () => void
+}> = (props) => {
+    const { context, game, userKeyWhoLeave, crashMessage, onNewGameClick, onLeaveGameClick } = props;
+    const textColor = getColorByBrightness(
+        context.themeManager.theme.appBarBgColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+    return (
+        <div style={{
+            padding: "0px 4vw",
+            background: context.themeManager.theme.appBarBgColor,
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            alignSelf: "stretch",
+        }}>
+            <h1 style={{ color: textColor, margin: "10px 0px" }}>
+                {context.texts.Mancala}
+            </h1>
+            <div style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+            }} >
+                <div style={{
+                    marginRight: "1vw",
+                    display: "flex",
+                    alignItems: "center",
+                }}>
+                    <ThemeSwitchMenu context={context} textColor={textColor} />
+                </div>
+                {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
+                {game &&
+                    !userKeyWhoLeave &&
+                    !crashMessage &&
+                    (game?.state === "playing" || game?.state === "initial") && (
+                        <Button
+                            context={context}
+                            color={context.themeManager.theme.holeColor}
+                            text={context.texts.Leave}
+                            onClick={onLeaveGameClick} />
+                    )}
+            </div>
+        </div>)
+}
+export default HeaderBar;
+
+const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }> = (props) => {
+    const { context, textColor } = props;
+    const menuButton = <span
+        style={{ color: textColor }}
+        className="material-symbols-outlined">
+        light_mode
+    </span>;
+    const menuItems = context.themeManager.themes.map((theme, index) => {
+        return (<MenuItem
+            key={index}
+            style={{ color: textColor }}
+            onMouseOver={(event) => (event.target.style.background =
+                context.themeManager.theme.background)}
+            onMouseOut={(event) => (event.target.style.background = "transparent")}
+            onClick={() => (context.themeManager.theme = theme)}>
+            <div style={{
+                borderRadius: "5vw",
+                background: theme.boardColor,
+                width: "1vw",
+                height: "1vw",
+                marginRight: "1vw",
+            }} />
+            {theme.name}
+        </MenuItem>);
+    })
+    return (<Menu
+        menuStyle={{
+            background: context.themeManager.theme.appBarBgColor,
+        }}
+        menuButton={menuButton}
+        transition
+        align="end">
+        {menuItems}
+    </Menu>);
+}
+
diff --git a/src/components/PageContainer.tsx b/src/components/PageContainer.tsx
new file mode 100644
index 0000000..4bdac52
--- /dev/null
+++ b/src/components/PageContainer.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Theme } from "../theme/Theme";
+
+const PageContainer: FunctionComponent<{theme: Theme}> = (props) => {
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            background: props.theme?.background,
+            flex: "1",
+            minHeight: "400px"
+        }}>
+            {props.children}
+        </div>
+    );
+}
+
+export default PageContainer;
\ No newline at end of file

From 0c8704cf80c60a52cdf62b70c183ccc53d159589 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 22:39:24 +0300
Subject: [PATCH 02/11] add key for board list items

---
 src/components/BoardView.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index 024a7ac..aa94233 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -33,8 +33,8 @@ const HoleView: FunctionComponent<{
   pitViewModel: PitViewModel;
   onClick: () => void;
 }> = ({ pitViewModel, onClick }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={pitViewModel.stoneColor} />
+  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <BallView key={index} color={pitViewModel.stoneColor} />
   ));
 
   return (
@@ -65,8 +65,8 @@ const StoreView: FunctionComponent<{
   gridColumn: string;
   gridRow: string;
 }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={pitViewModel.stoneColor} />
+  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <BallView key={index} color={pitViewModel.stoneColor} />
   ));
   const textColor = getColorByBrightness(
     pitViewModel.pitColor,
@@ -114,24 +114,23 @@ const BoardView: FunctionComponent<{
   userKey: string;
   onHoleSelect: (index: number, hole: Pit) => void;
 }> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
-  const createPitView = (pitViewModel: PitViewModel, onClick: () => void) => {
-    return <HoleView pitViewModel={pitViewModel} onClick={onClick} />;
+  const createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
+    return <HoleView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
   };
-  const player1Pits = game?.board.player1Pits.map((pit) => {
+  const player1Pits = game?.board.player1Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(pitViewModel, () => {
+    return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player1Id)
         onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
     });
   });
-  const player2Pits = game!!.board.player2Pits.map((pit) => {
+  const player2Pits = game!!.board.player2Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(pitViewModel, () => {
+    return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player2Id)
         onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
     });
   });
-  const isUserTurn = game.checkIsPlayerTurn(userKey);
   const theme = context.themeManager.theme;
   const player1BankViewModel =
     boardViewModel.pits[game.board.player1BankIndex()];

From 992d0a19c056bb786720802747a547ddc7602960 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 22:42:45 +0300
Subject: [PATCH 03/11] rename ball to stone

---
 src/components/BoardView.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index aa94233..a00f7a4 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -6,7 +6,7 @@ import { getColorByBrightness } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 import PitViewModel from "../viewmodel/PitViewModel";
 
-const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
+const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
   return (
     <div
       style={{
@@ -33,8 +33,8 @@ const HoleView: FunctionComponent<{
   pitViewModel: PitViewModel;
   onClick: () => void;
 }> = ({ pitViewModel, onClick }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <BallView key={index} color={pitViewModel.stoneColor} />
+  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
   ));
 
   return (
@@ -54,7 +54,7 @@ const HoleView: FunctionComponent<{
         flexWrap: "wrap",
       }}
     >
-      {balls}
+      {stones}
     </div>
   );
 };
@@ -65,8 +65,8 @@ const StoreView: FunctionComponent<{
   gridColumn: string;
   gridRow: string;
 }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <BallView key={index} color={pitViewModel.stoneColor} />
+  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
   ));
   const textColor = getColorByBrightness(
     pitViewModel.pitColor,
@@ -89,7 +89,7 @@ const StoreView: FunctionComponent<{
         position: "relative",
       }}
     >
-      {balls}
+      {stones}
       <span
         style={{
           position: "absolute",
@@ -100,7 +100,7 @@ const StoreView: FunctionComponent<{
           color: textColor,
         }}
       >
-        {balls.length}
+        {stones.length}
       </span>
     </div>
   );

From 50b84dd115b3aa7033a2da660ab1d51fcf329860 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 22:45:06 +0300
Subject: [PATCH 04/11] rename hole to pit

---
 src/Home.tsx                 |  4 ++--
 src/animation/PitAnimator.ts |  2 +-
 src/components/BoardView.tsx | 12 ++++++------
 src/components/HeaderBar.tsx |  4 ++--
 src/theme/DarkTheme.ts       |  2 +-
 src/theme/GreyTheme.ts       |  2 +-
 src/theme/LightTheme.ts      |  2 +-
 src/theme/Theme.ts           |  2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index a43af49..7017d9d 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -151,7 +151,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.rtmt.sendMessage(channel_leave_game, {});
   };
 
-  const onHoleSelect = (index: number, pit: Pit) => {
+  const onPitSelect = (index: number, pit: Pit) => {
     //TODO : stoneCount comes from view model!
     if (pit.stoneCount === 0) {
       //TODO : warn user
@@ -210,7 +210,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
           boardId={boardId}
           boardViewModel={boardViewModel}
           context={context}
-          onHoleSelect={onHoleSelect}
+          onPitSelect={onPitSelect}
         />
       )}
     </PageContainer>
diff --git a/src/animation/PitAnimator.ts b/src/animation/PitAnimator.ts
index 016f9c1..b6168b7 100644
--- a/src/animation/PitAnimator.ts
+++ b/src/animation/PitAnimator.ts
@@ -172,7 +172,7 @@ export default class PitAnimator {
       const theme = this.context.themeManager.theme;
       const stoneCount = pit.stoneCount;
       const stoneColor = theme.stoneColor;
-      const pitColor = theme.holeColor;
+      const pitColor = theme.pitColor;
       const id = pit.index.toString();
       return PitViewModelFactory.create({
         id,
diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index a00f7a4..7d51291 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -29,7 +29,7 @@ function range(size: number) {
   return ans;
 }
 
-const HoleView: FunctionComponent<{
+const PitView: FunctionComponent<{
   pitViewModel: PitViewModel;
   onClick: () => void;
 }> = ({ pitViewModel, onClick }) => {
@@ -112,23 +112,23 @@ const BoardView: FunctionComponent<{
   boardId: string;
   boardViewModel: BoardViewModel;
   userKey: string;
-  onHoleSelect: (index: number, hole: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
+  onPitSelect: (index: number, pit: Pit) => void;
+}> = ({ game, context, boardId, boardViewModel, userKey, onPitSelect: onPitSelect }) => {
   const createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
-    return <HoleView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
+    return <PitView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
   };
   const player1Pits = game?.board.player1Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
     return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player1Id)
-        onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
+        onPitSelect(game.board.player1Pits.indexOf(pit), pit);
     });
   });
   const player2Pits = game!!.board.player2Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
     return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player2Id)
-        onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
+        onPitSelect(game.board.player2Pits.indexOf(pit), pit);
     });
   });
   const theme = context.themeManager.theme;
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 058d8f5..253c51e 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -13,7 +13,7 @@ function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick
         <Button
             context={context}
             text={context.texts.NewGame}
-            color={context.themeManager.theme.holeColor}
+            color={context.themeManager.theme.pitColor}
             onClick={onNewGameClick}
         />
     );
@@ -78,7 +78,7 @@ const HeaderBar: FunctionComponent<{
                     (game?.state === "playing" || game?.state === "initial") && (
                         <Button
                             context={context}
-                            color={context.themeManager.theme.holeColor}
+                            color={context.themeManager.theme.pitColor}
                             text={context.texts.Leave}
                             onClick={onLeaveGameClick} />
                     )}
diff --git a/src/theme/DarkTheme.ts b/src/theme/DarkTheme.ts
index b7ab619..1a081c9 100644
--- a/src/theme/DarkTheme.ts
+++ b/src/theme/DarkTheme.ts
@@ -19,7 +19,7 @@ const darkTheme: Theme = {
   textLightColor: "#AAAAAA",
   playerTurnColor: colors.tertiary,
   boardColor: colors.secondary,
-  holeColor: colors.tertiary,
+  pitColor: colors.tertiary,
   pitSelectedColor: colors.secondary,
   stoneColor: "#252525",
   stoneLightColor: "#252525",
diff --git a/src/theme/GreyTheme.ts b/src/theme/GreyTheme.ts
index 322b026..f8b4a80 100644
--- a/src/theme/GreyTheme.ts
+++ b/src/theme/GreyTheme.ts
@@ -9,7 +9,7 @@ const greyTheme: Theme = {
   textLightColor: "#EEEEEE",
   playerTurnColor: "#84b8a6",
   boardColor: "#4D606E",
-  holeColor: "#D3D4D8",
+  pitColor: "#D3D4D8",
   pitSelectedColor: "#8837fa",
   stoneColor: "#393E46",
   stoneLightColor: "#EEEEEE",
diff --git a/src/theme/LightTheme.ts b/src/theme/LightTheme.ts
index 89ddf9e..bdcbbdf 100644
--- a/src/theme/LightTheme.ts
+++ b/src/theme/LightTheme.ts
@@ -11,7 +11,7 @@ const lightTheme: Theme = {
   textLightColor: "#EBEBEB",
   playerTurnColor: "#6B6B6B",
   boardColor: "#9B9B9B",
-  holeColor: "#B8B8B8",
+  pitColor: "#B8B8B8",
   pitSelectedColor: "#9B9B9B",
   stoneColor: "#5B5B5B",
   stoneLightColor: "#3B3B3B",
diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts
index 26a3e0f..b4067e0 100644
--- a/src/theme/Theme.ts
+++ b/src/theme/Theme.ts
@@ -7,7 +7,7 @@ export type Theme = {
   appBarBgColor: string;
   playerTurnColor: string;
   boardColor: string;
-  holeColor: string;
+  pitColor: string;
   pitSelectedColor: string;
   stoneColor: string;
   stoneLightColor: string;

From 0d2b16c1fea767f1694fa3fbb078e89dbdb9c005 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 23:44:06 +0300
Subject: [PATCH 05/11] fix board pit select issue

---
 src/components/BoardView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index 7d51291..61fb7e2 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -120,14 +120,14 @@ const BoardView: FunctionComponent<{
   const player1Pits = game?.board.player1Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
     return createPitView(index, pitViewModel, () => {
-      if (game.turnPlayerId === game.player1Id)
+      if (game.turnPlayerId === game.player1Id && userKey === game.player1Id) 
         onPitSelect(game.board.player1Pits.indexOf(pit), pit);
     });
   });
-  const player2Pits = game!!.board.player2Pits.map((pit, index) => {
+  const player2Pits = game?.board.player2Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
     return createPitView(index, pitViewModel, () => {
-      if (game.turnPlayerId === game.player2Id)
+      if (game.turnPlayerId === game.player2Id && userKey === game.player2Id)
         onPitSelect(game.board.player2Pits.indexOf(pit), pit);
     });
   });

From f53617185cb0aba2a368d1fb9bd041c1a0ec6160 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 08:53:26 +0300
Subject: [PATCH 06/11] refactor BoardView

---
 src/Home.tsx                             |   2 +-
 src/components/{ => board}/BoardView.tsx | 115 ++---------------------
 src/components/board/PitView.tsx         |  38 ++++++++
 src/components/board/StoneView.tsx       |  19 ++++
 src/components/board/StoreView.tsx       |  56 +++++++++++
 src/util/Util.ts                         |  10 ++
 6 files changed, 132 insertions(+), 108 deletions(-)
 rename src/components/{ => board}/BoardView.tsx (53%)
 create mode 100644 src/components/board/PitView.tsx
 create mode 100644 src/components/board/StoneView.tsx
 create mode 100644 src/components/board/StoreView.tsx
 create mode 100644 src/util/Util.ts

diff --git a/src/Home.tsx b/src/Home.tsx
index 7017d9d..2148a47 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import BoardView from "./components/BoardView";
+import BoardView from "./components/board/BoardView";
 import { context } from "./context";
 import { RTMTWS } from "./rtmt/rtmt_websocket";
 import {
diff --git a/src/components/BoardView.tsx b/src/components/board/BoardView.tsx
similarity index 53%
rename from src/components/BoardView.tsx
rename to src/components/board/BoardView.tsx
index 61fb7e2..1d482f2 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -1,110 +1,11 @@
 import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent, useState } from "react";
-import { Context } from "../context";
-import { getColorByBrightness } from "../util/ColorUtil";
-import BoardViewModel from "../viewmodel/BoardViewModel";
-import PitViewModel from "../viewmodel/PitViewModel";
-
-const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
-  return (
-    <div
-      style={{
-        background: color,
-        margin: "1px",
-        width: "1vw",
-        height: "1vw",
-        borderRadius: "10vw",
-        transition: "background-color 0.5s",
-      }}
-    ></div>
-  );
-};
-
-function range(size: number) {
-  var ans = [];
-  for (let i = 0; i < size; i++) {
-    ans.push(i);
-  }
-  return ans;
-}
-
-const PitView: FunctionComponent<{
-  pitViewModel: PitViewModel;
-  onClick: () => void;
-}> = ({ pitViewModel, onClick }) => {
-  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={pitViewModel.stoneColor} />
-  ));
-
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        background: pitViewModel.pitColor,
-        margin: "5px",
-        padding: "5px",
-        borderRadius: "10vw",
-        transition: "background-color 0.5s",
-        display: "flex",
-        alignItems: "center",
-        alignContent: "center",
-        justifyContent: "center",
-        justifyItems: "center",
-        flexWrap: "wrap",
-      }}
-    >
-      {stones}
-    </div>
-  );
-};
-
-const StoreView: FunctionComponent<{
-  context: Context;
-  pitViewModel: PitViewModel;
-  gridColumn: string;
-  gridRow: string;
-}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-  const stones = [...range(pitViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={pitViewModel.stoneColor} />
-  ));
-  const textColor = getColorByBrightness(
-    pitViewModel.pitColor,
-    context.themeManager.theme.textColor,
-    context.themeManager.theme.textLightColor
-  );
-  return (
-    <div
-      style={{
-        gridColumn: gridColumn,
-        gridRow: gridRow,
-        background: pitViewModel.pitColor,
-        margin: "5px",
-        borderRadius: "10vw",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        alignContent: "center",
-        flexWrap: "wrap",
-        position: "relative",
-      }}
-    >
-      {stones}
-      <span
-        style={{
-          position: "absolute",
-          bottom: "2vw",
-          fontFamily: "monospace",
-          fontWeight: "bold",
-          fontSize: "2vw",
-          color: textColor,
-        }}
-      >
-        {stones.length}
-      </span>
-    </div>
-  );
-};
+import { Context } from "../../context";
+import BoardViewModel from "../../viewmodel/BoardViewModel";
+import PitViewModel from "../../viewmodel/PitViewModel";
+import PitView from "./PitView";
+import StoreView from "./StoreView";
 
 const BoardView: FunctionComponent<{
   game?: MancalaGame;
@@ -165,7 +66,7 @@ const BoardView: FunctionComponent<{
         background: theme.boardColor,
       }}
     >
-      {userKey === game.player2Id ? (
+      {userKey === game?.player2Id ? (
         <>
           <StoreView
             context={context}
@@ -179,7 +80,7 @@ const BoardView: FunctionComponent<{
             gridColumn="8 / 9"
             gridRow="1 / 3"
           />
-          {player1Pits.reverse()}
+          {player1Pits?.reverse()}
           {player2Pits}
         </>
       ) : (
@@ -196,7 +97,7 @@ const BoardView: FunctionComponent<{
             gridColumn="1 / 2"
             gridRow="1 / 3"
           />
-          {player2Pits.reverse()}
+          {player2Pits?.reverse()}
           {player1Pits}
         </>
       )}
diff --git a/src/components/board/PitView.tsx b/src/components/board/PitView.tsx
new file mode 100644
index 0000000..5691042
--- /dev/null
+++ b/src/components/board/PitView.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+import Util from "../../util/Util";
+import PitViewModel from "../../viewmodel/PitViewModel";
+import StoneView from "./StoneView";
+
+
+const PitView: FunctionComponent<{
+    pitViewModel: PitViewModel;
+    onClick: () => void;
+}> = ({ pitViewModel, onClick }) => {
+    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+        <StoneView key={index} color={pitViewModel.stoneColor} />
+    ));
+
+    return (
+        <div
+            onClick={onClick}
+            style={{
+                background: pitViewModel.pitColor,
+                margin: "5px",
+                padding: "5px",
+                borderRadius: "10vw",
+                transition: "background-color 0.5s",
+                display: "flex",
+                alignItems: "center",
+                alignContent: "center",
+                justifyContent: "center",
+                justifyItems: "center",
+                flexWrap: "wrap",
+            }}
+        >
+            {stones}
+        </div>
+    );
+};
+
+export default PitView;
\ No newline at end of file
diff --git a/src/components/board/StoneView.tsx b/src/components/board/StoneView.tsx
new file mode 100644
index 0000000..2b5e16a
--- /dev/null
+++ b/src/components/board/StoneView.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+
+const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
+    return (
+      <div
+        style={{
+          background: color,
+          margin: "1px",
+          width: "1vw",
+          height: "1vw",
+          borderRadius: "10vw",
+          transition: "background-color 0.5s",
+        }}
+      ></div>
+    );
+  };
+
+  export default StoneView;
\ No newline at end of file
diff --git a/src/components/board/StoreView.tsx b/src/components/board/StoreView.tsx
new file mode 100644
index 0000000..375481f
--- /dev/null
+++ b/src/components/board/StoreView.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+import { Context } from "../../context";
+import { getColorByBrightness } from "../../util/ColorUtil";
+import Util from "../../util/Util";
+import PitViewModel from "../../viewmodel/PitViewModel";
+import StoneView from "./StoneView";
+
+const StoreView: FunctionComponent<{
+    context: Context;
+    pitViewModel: PitViewModel;
+    gridColumn: string;
+    gridRow: string;
+  }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
+    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+      <StoneView key={index} color={pitViewModel.stoneColor} />
+    ));
+    const textColor = getColorByBrightness(
+      pitViewModel.pitColor,
+      context.themeManager.theme.textColor,
+      context.themeManager.theme.textLightColor
+    );
+    return (
+      <div
+        style={{
+          gridColumn: gridColumn,
+          gridRow: gridRow,
+          background: pitViewModel.pitColor,
+          margin: "5px",
+          borderRadius: "10vw",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          alignContent: "center",
+          flexWrap: "wrap",
+          position: "relative",
+        }}
+      >
+        {stones}
+        <span
+          style={{
+            position: "absolute",
+            bottom: "2vw",
+            fontFamily: "monospace",
+            fontWeight: "bold",
+            fontSize: "2vw",
+            color: textColor,
+          }}
+        >
+          {stones.length}
+        </span>
+      </div>
+    );
+  };
+
+  export default StoreView;
\ No newline at end of file
diff --git a/src/util/Util.ts b/src/util/Util.ts
new file mode 100644
index 0000000..905b84d
--- /dev/null
+++ b/src/util/Util.ts
@@ -0,0 +1,10 @@
+
+export default class Util {
+    public static range(size: number) {
+        var ans = [];
+        for (let i = 0; i < size; i++) {
+            ans.push(i);
+        }
+        return ans;
+    }
+}

From 4e50dd9209cd998739f9ae019bb9bb6a8b15e7d8 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 09:04:10 +0300
Subject: [PATCH 07/11] fix warnings in PitAnimator

---
 src/animation/PitAnimator.ts | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/animation/PitAnimator.ts b/src/animation/PitAnimator.ts
index b6168b7..b657833 100644
--- a/src/animation/PitAnimator.ts
+++ b/src/animation/PitAnimator.ts
@@ -19,14 +19,14 @@ const animationUpdateInterval = 300;
 
 export default class PitAnimator {
   context: Context;
-  game: MancalaGame;
-  oldGame: MancalaGame;
+  game: MancalaGame | undefined;
+  oldGame: MancalaGame | undefined;
   currentIntervalID: number;
   onBoardViewModelUpdate: (boardViewModel: BoardViewModel) => void;
-  boardViewModel: BoardViewModel;
-  oldBoardViewModel: BoardViewModel;
+  boardViewModel: BoardViewModel | undefined;
+  oldBoardViewModel: BoardViewModel | undefined;
   animationIndex: number = 0;
-  currentHistoryItem: HistoryItem;
+  currentHistoryItem: HistoryItem | undefined;
 
   constructor(
     context: Context,
@@ -55,7 +55,7 @@ export default class PitAnimator {
 
   onGameMoveAnimationStart() {
     this.stopCurrentAnimation();
-    if (this.game.history.length > 0) {
+    if (this.game && this.oldGame && this.game.history.length > 0) {
       const lastHistoryItem = this.game.history[this.game.history.length - 1];
       if (lastHistoryItem.gameSteps.length > 0) {
         this.animationIndex = 0;
@@ -68,6 +68,7 @@ export default class PitAnimator {
   }
 
   onAnimate() {
+    if(!this.currentHistoryItem || !this.game || !this.oldBoardViewModel) return;
     if (this.animationIndex === this.currentHistoryItem.gameSteps.length) {
       this.clearCurrentInterval();
       this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
@@ -91,9 +92,10 @@ export default class PitAnimator {
     boardViewModel: BoardViewModel,
     gameStep: GameStep
   ) {
+    if(!this.currentHistoryItem || !this.game) return;
     const pitViewModel = boardViewModel.pits[index];
     if (this.animationIndex === 0) {
-      //This one stone move case, TODO : beautify it later
+      //This is one stone move case, TODO: beautify it later
       if (this.getGameMoveStepCount(this.currentHistoryItem) === 1) {
         const previousPitIndex = gameStep.index - 1;
         if (previousPitIndex > 0) {
@@ -185,15 +187,15 @@ export default class PitAnimator {
 
   public resetAnimationState() {
     this.animationIndex = -1;
-    this.currentHistoryItem = null;
-    this.boardViewModel = null;
-    this.oldBoardViewModel = null;
+    this.currentHistoryItem = undefined;
+    this.boardViewModel = undefined;
+    this.oldBoardViewModel = undefined;
   }
 
   public reset() {
     this.resetAnimationState();
-    this.game = null;
-    this.oldGame = null;
+    this.game = undefined;
+    this.oldGame = undefined;
   }
 
   public dispose() {

From ae278b86291b7639b76487f316b9fbef1811fca0 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 09:05:24 +0300
Subject: [PATCH 08/11] fix warning in InfoPanel

---
 src/components/InfoPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index f38ef0a..ca6951b 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -11,7 +11,7 @@ function getInfoPanelTextByGameState(params: {
   userKey: string;
   userKeyWhoLeave: string;
   searchingOpponent: boolean;
-}): string {
+}): string | undefined {
   const {
     context,
     game,

From ef523056ece6becd9423196b2a7d6bf45aca937e Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 13:23:15 +0300
Subject: [PATCH 09/11] fix warnings

---
 src/Home.tsx                       | 26 +++++------
 src/components/HeaderBar.tsx       | 15 ++++--
 src/components/InfoPanel.tsx       | 22 ++++-----
 src/components/board/BoardView.tsx | 74 ++++++++----------------------
 src/components/board/StoneView.tsx |  2 +-
 src/util/Util.ts                   |  2 +-
 6 files changed, 56 insertions(+), 85 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 2148a47..d05ecb4 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -26,24 +26,24 @@ import PageContainer from "./components/PageContainer";
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
 const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
-  const [userKey, setUserKey] = useState(undefined);
+  const [userKey, setUserKey] = useState<string | undefined>(undefined);
 
   const [connectionState, setConnetionState] =
     useState<ConnectionState>("connecting");
 
   const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false);
 
-  const [game, setGame] = useState<CommonMancalaGame>(undefined);
+  const [game, setGame] = useState<CommonMancalaGame | undefined>(undefined);
 
-  const [crashMessage, setCrashMessage] = useState<string>(undefined);
+  const [crashMessage, setCrashMessage] = useState<string | undefined>(undefined);
 
-  const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined);
+  const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string | undefined>(undefined);
 
-  const [boardViewModel, setBoardViewModel] = useState<BoardViewModel>(null);
+  const [boardViewModel, setBoardViewModel] = useState<BoardViewModel | undefined>(undefined);
 
-  const [boardId, setBoardId] = useState<string>();
+  const [boardId, setBoardId] = useState<string>("-1");
 
-  const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
+  const [pitAnimator, setPitAnimator] = useState<PitAnimator | undefined>(undefined);
 
   const [theme, setTheme] = useState<Theme | undefined>(undefined);
 
@@ -119,6 +119,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const getBoardIndex = (index: number) => {
+    if(!game) return -1;
     if (userKey === game.player2Id) return index + game.board.pits.length / 2;
     return index;
   };
@@ -137,7 +138,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   React.useEffect(() => {
     context.themeManager.onThemeChange = (theme) => {
       setTheme(theme);
-      pitAnimator && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
+      pitAnimator && game && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
     };
   }, [boardViewModel]);
 
@@ -152,6 +153,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const onPitSelect = (index: number, pit: Pit) => {
+    if(!boardViewModel) return;
     //TODO : stoneCount comes from view model!
     if (pit.stoneCount === 0) {
       //TODO : warn user
@@ -201,17 +203,15 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         crashMessage={crashMessage}
         userKey={userKey}
         userKeyWhoLeave={userKeyWhoLeave}
-        searchingOpponent={searchingOpponent}
-      />
-      {game && boardViewModel && (
+        searchingOpponent={searchingOpponent} />
+      {game && boardViewModel && userKey && (
         <BoardView
           userKey={userKey}
           game={game}
           boardId={boardId}
           boardViewModel={boardViewModel}
           context={context}
-          onPitSelect={onPitSelect}
-        />
+          onPitSelect={onPitSelect} />
       )}
     </PageContainer>
   );
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 253c51e..78d8c98 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -8,7 +8,12 @@ import Button from "./Button";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 
-function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick: () => void, userKeyWhoLeave: string, crashMessage: string): JSX.Element {
+function renderNewGameButton(
+    context: Context, game:
+        MancalaGame | undefined,
+    onNewGameClick: () => void,
+    userKeyWhoLeave: string | undefined,
+    crashMessage: string | undefined): JSX.Element {
     const newGame = (
         <Button
             context={context}
@@ -33,9 +38,9 @@ function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick
 
 const HeaderBar: FunctionComponent<{
     context: Context,
-    game: MancalaGame,
-    userKeyWhoLeave: string,
-    crashMessage: string,
+    game?: MancalaGame,
+    userKeyWhoLeave?: string,
+    crashMessage?: string,
     onNewGameClick: () => void,
     onLeaveGameClick: () => void
 }> = (props) => {
@@ -98,8 +103,10 @@ const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }
         return (<MenuItem
             key={index}
             style={{ color: textColor }}
+            //@ts-ignore
             onMouseOver={(event) => (event.target.style.background =
                 context.themeManager.theme.background)}
+            //@ts-ignore
             onMouseOut={(event) => (event.target.style.background = "transparent")}
             onClick={() => (context.themeManager.theme = theme)}>
             <div style={{
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index ca6951b..1462ca9 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -6,10 +6,10 @@ import { getColorByBrightness } from "../util/ColorUtil";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
-  game: MancalaGame;
-  crashMessage: string;
-  userKey: string;
-  userKeyWhoLeave: string;
+  game?: MancalaGame;
+  crashMessage?: string;
+  userKey?: string;
+  userKeyWhoLeave?: string;
   searchingOpponent: boolean;
 }): string | undefined {
   const {
@@ -42,9 +42,9 @@ function getInfoPanelTextByGameState(params: {
     return context.texts.GameEnded + " " + whoWon;
   } else {
     if (game) {
-      return game.checkIsPlayerTurn(userKey)
+      return userKey ? game.checkIsPlayerTurn(userKey)
         ? context.texts.YourTurn
-        : context.texts.OpponentTurn;
+        : context.texts.OpponentTurn : undefined;
     }
   }
   return undefined;
@@ -70,10 +70,10 @@ const InfoPanelContainer: FunctionComponent<{
 
 const InfoPanel: FunctionComponent<{
   context: Context;
-  game: MancalaGame;
-  crashMessage: string;
-  userKey: string;
-  userKeyWhoLeave: string;
+  game?: MancalaGame;
+  crashMessage?: string;
+  userKey?: string;
+  userKeyWhoLeave?: string;
   searchingOpponent: boolean;
 }> = ({
   context,
@@ -83,7 +83,7 @@ const InfoPanel: FunctionComponent<{
   userKeyWhoLeave,
   searchingOpponent,
 }) => {
-    const isUserTurn = game?.checkIsPlayerTurn(userKey);
+    const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false;
     const containerColor = isUserTurn
       ? context.themeManager.theme.playerTurnColor
       : context.themeManager.theme.boardColor;
diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index 1d482f2..673e28e 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -1,6 +1,6 @@
-import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
-import { FunctionComponent, useState } from "react";
+import { MancalaGame, Pit } from "mancala.js";
+import { FunctionComponent } from "react";
 import { Context } from "../../context";
 import BoardViewModel from "../../viewmodel/BoardViewModel";
 import PitViewModel from "../../viewmodel/PitViewModel";
@@ -8,7 +8,7 @@ import PitView from "./PitView";
 import StoreView from "./StoreView";
 
 const BoardView: FunctionComponent<{
-  game?: MancalaGame;
+  game: MancalaGame;
   context: Context;
   boardId: string;
   boardViewModel: BoardViewModel;
@@ -21,7 +21,7 @@ const BoardView: FunctionComponent<{
   const player1Pits = game?.board.player1Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
     return createPitView(index, pitViewModel, () => {
-      if (game.turnPlayerId === game.player1Id && userKey === game.player1Id) 
+      if (game.turnPlayerId === game.player1Id && userKey === game.player1Id)
         onPitSelect(game.board.player1Pits.indexOf(pit), pit);
     });
   });
@@ -37,22 +37,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player1BankIndex()];
   const player2BankViewModel =
     boardViewModel.pits[game.board.player2BankIndex()];
-  const player1Bank = (
-    <StoreView
-      context={context}
-      pitViewModel={player1BankViewModel}
-      gridColumn="1 / 2"
-      gridRow="1 / 3"
-    />
-  );
-  const player2Bank = (
-    <StoreView
-      context={context}
-      pitViewModel={player2BankViewModel}
-      gridColumn="8 / 9"
-      gridRow="1 / 3"
-    />
-  );
+  const isPlayer2 = userKey === game?.player2Id;
   return (
     <div
       style={{
@@ -66,41 +51,20 @@ const BoardView: FunctionComponent<{
         background: theme.boardColor,
       }}
     >
-      {userKey === game?.player2Id ? (
-        <>
-          <StoreView
-            context={context}
-            pitViewModel={player1BankViewModel}
-            gridColumn="1 / 2"
-            gridRow="1 / 3"
-          />
-          <StoreView
-            context={context}
-            pitViewModel={player2BankViewModel}
-            gridColumn="8 / 9"
-            gridRow="1 / 3"
-          />
-          {player1Pits?.reverse()}
-          {player2Pits}
-        </>
-      ) : (
-        <>
-          <StoreView
-            context={context}
-            pitViewModel={player1BankViewModel}
-            gridColumn="8 / 9"
-            gridRow="1 / 3"
-          />
-          <StoreView
-            context={context}
-            pitViewModel={player2BankViewModel}
-            gridColumn="1 / 2"
-            gridRow="1 / 3"
-          />
-          {player2Pits?.reverse()}
-          {player1Pits}
-        </>
-      )}
+      <StoreView
+        context={context}
+        pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
+        gridColumn="8 / 9"
+        gridRow="1 / 3"
+      />
+      <StoreView
+        context={context}
+        pitViewModel={isPlayer2 ? player1BankViewModel : player2BankViewModel}
+        gridColumn="1 / 2"
+        gridRow="1 / 3"
+      />
+      {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
+      {isPlayer2 ? player2Pits : player1Pits}
     </div>
   );
 };
diff --git a/src/components/board/StoneView.tsx b/src/components/board/StoneView.tsx
index 2b5e16a..fdae813 100644
--- a/src/components/board/StoneView.tsx
+++ b/src/components/board/StoneView.tsx
@@ -12,7 +12,7 @@ const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
           borderRadius: "10vw",
           transition: "background-color 0.5s",
         }}
-      ></div>
+      />
     );
   };
 
diff --git a/src/util/Util.ts b/src/util/Util.ts
index 905b84d..5898bbf 100644
--- a/src/util/Util.ts
+++ b/src/util/Util.ts
@@ -1,7 +1,7 @@
 
 export default class Util {
     public static range(size: number) {
-        var ans = [];
+        var ans : number[] = [];
         for (let i = 0; i < size; i++) {
             ans.push(i);
         }

From 688e19e2f1cf3a1e825944ba514d1ce06cc53989 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 13:38:00 +0300
Subject: [PATCH 10/11] reorder some files

---
 src/App.tsx                        |  4 ++--
 src/animation/PitAnimator.ts       |  2 +-
 src/components/Button.tsx          |  2 +-
 src/components/FloatingPanel.tsx   |  2 +-
 src/components/HeaderBar.tsx       |  2 +-
 src/components/InfoPanel.tsx       |  2 +-
 src/components/board/BoardView.tsx |  2 +-
 src/components/board/StoreView.tsx |  2 +-
 src/{ => const}/channel_names.ts   |  0
 src/{ => context}/context.tsx      | 10 +++++-----
 src/{ => routes}/Home.tsx          | 26 +++++++++++++-------------
 11 files changed, 27 insertions(+), 27 deletions(-)
 rename src/{ => const}/channel_names.ts (100%)
 rename src/{ => context}/context.tsx (63%)
 rename src/{ => routes}/Home.tsx (90%)

diff --git a/src/App.tsx b/src/App.tsx
index a89acdd..4879b0c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { render } from 'react-dom';
-import { initContext } from './context';
+import { initContext } from './context/context';
 
-import Home from './Home';
+import Home from './routes/Home';
 
 initContext();
 
diff --git a/src/animation/PitAnimator.ts b/src/animation/PitAnimator.ts
index b657833..38cf540 100644
--- a/src/animation/PitAnimator.ts
+++ b/src/animation/PitAnimator.ts
@@ -9,7 +9,7 @@ import {
   GAME_STEP_DOUBLE_STONE_IN_PIT,
 } from "mancala.js";
 import { v4 } from "uuid";
-import { Context } from "../context";
+import { Context } from "../context/context";
 import BoardViewModelFactory from "../factory/BoardViewModelFactory";
 import { PitViewModelFactory } from "../factory/PitViewModelFactory";
 import { getColorByBrightness } from "../util/ColorUtil";
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index f1c3a30..1d43a30 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { Context } from "../context";
+import { Context } from "../context/context";
 import { getColorByBrightness } from "../util/ColorUtil";
 
 const Button: FunctionComponent<{
diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx
index 979a129..540bced 100644
--- a/src/components/FloatingPanel.tsx
+++ b/src/components/FloatingPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { Context } from "../context";
+import { Context } from "../context/context";
 
 const FloatingPanel: FunctionComponent<{
   context: Context;
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 78d8c98..202d479 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import { MancalaGame } from "mancala.js";
-import { Context } from "../context";
+import { Context } from "../context/context";
 import { getColorByBrightness } from "../util/ColorUtil";
 import Button from "./Button";
 import "@szhsin/react-menu/dist/index.css";
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
index 1462ca9..b219a01 100644
--- a/src/components/InfoPanel.tsx
+++ b/src/components/InfoPanel.tsx
@@ -1,7 +1,7 @@
 import { MancalaGame } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { Context } from "../context";
+import { Context } from "../context/context";
 import { getColorByBrightness } from "../util/ColorUtil";
 
 function getInfoPanelTextByGameState(params: {
diff --git a/src/components/board/BoardView.tsx b/src/components/board/BoardView.tsx
index 673e28e..922ef91 100644
--- a/src/components/board/BoardView.tsx
+++ b/src/components/board/BoardView.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { MancalaGame, Pit } from "mancala.js";
 import { FunctionComponent } from "react";
-import { Context } from "../../context";
+import { Context } from "../../context/context";
 import BoardViewModel from "../../viewmodel/BoardViewModel";
 import PitViewModel from "../../viewmodel/PitViewModel";
 import PitView from "./PitView";
diff --git a/src/components/board/StoreView.tsx b/src/components/board/StoreView.tsx
index 375481f..f149d30 100644
--- a/src/components/board/StoreView.tsx
+++ b/src/components/board/StoreView.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { Context } from "../../context";
+import { Context } from "../../context/context";
 import { getColorByBrightness } from "../../util/ColorUtil";
 import Util from "../../util/Util";
 import PitViewModel from "../../viewmodel/PitViewModel";
diff --git a/src/channel_names.ts b/src/const/channel_names.ts
similarity index 100%
rename from src/channel_names.ts
rename to src/const/channel_names.ts
diff --git a/src/context.tsx b/src/context/context.tsx
similarity index 63%
rename from src/context.tsx
rename to src/context/context.tsx
index 0fd4cc5..28d2485 100644
--- a/src/context.tsx
+++ b/src/context/context.tsx
@@ -1,8 +1,8 @@
-import { Texts, TrTr } from "./const/texts";
-import { RTMT } from "./rtmt/rtmt";
-import { RTMTWS } from "./rtmt/rtmt_websocket";
-import { UserKeyStore, UserKeyStoreImpl } from "./store/key_store";
-import ThemeManager from "./theme/ThemeManager";
+import { Texts, TrTr } from "../const/texts";
+import { RTMT } from "../rtmt/rtmt";
+import { RTMTWS } from "../rtmt/rtmt_websocket";
+import { UserKeyStore, UserKeyStoreImpl } from "../store/key_store";
+import ThemeManager from "../theme/ThemeManager";
 
 export type Context = {
   rtmt: RTMT;
diff --git a/src/Home.tsx b/src/routes/Home.tsx
similarity index 90%
rename from src/Home.tsx
rename to src/routes/Home.tsx
index d05ecb4..1ffb2f4 100644
--- a/src/Home.tsx
+++ b/src/routes/Home.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { FunctionComponent, useEffect, useState } from "react";
-import BoardView from "./components/board/BoardView";
-import { context } from "./context";
-import { RTMTWS } from "./rtmt/rtmt_websocket";
+import BoardView from "../components/board/BoardView";
+import { context } from "../context/context";
+import { RTMTWS } from "../rtmt/rtmt_websocket";
 import {
   channel_game_move,
   channel_leave_game,
@@ -10,18 +10,18 @@ import {
   channel_on_game_start,
   channel_on_game_update,
   channel_on_game_user_leave,
-} from "./channel_names";
-import InfoPanel from "./components/InfoPanel";
+} from "../const/channel_names";
+import InfoPanel from "../components/InfoPanel";
 import { CommonMancalaGame, MancalaGame, Pit } from "mancala.js";
-import { GameMove } from "./models/GameMove";
-import PitAnimator from "./animation/PitAnimator";
-import BoardViewModel from "./viewmodel/BoardViewModel";
+import { GameMove } from "../models/GameMove";
+import PitAnimator from "../animation/PitAnimator";
+import BoardViewModel from "../viewmodel/BoardViewModel";
 import { v4 } from "uuid";
-import { getColorByBrightness } from "./util/ColorUtil";
-import { Theme } from "./theme/Theme";
-import HeaderBar from "./components/HeaderBar";
-import FloatingPanel from "./components/FloatingPanel";
-import PageContainer from "./components/PageContainer";
+import { getColorByBrightness } from "../util/ColorUtil";
+import { Theme } from "../theme/Theme";
+import HeaderBar from "../components/HeaderBar";
+import FloatingPanel from "../components/FloatingPanel";
+import PageContainer from "../components/PageContainer";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 

From 7ef4a22fadbf79d2b46fc8875ed48a0da6086858 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 13:39:24 +0300
Subject: [PATCH 11/11] update package description

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5a0f6ba..cf26239 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mancala-frontend",
   "version": "0.1.3-beta.12",
-  "description": "",
+  "description": "Mancala Game Frontend",
   "main": "index.js",
   "scripts": {
     "dev": "parcel src/index.html",