rename hole to pit

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>

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,

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;
+  onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
+}> = ({ 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;

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} />
                     )}

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",

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",

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",

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;