From f2bb16e4e79a0113236e7cee711834cf7a02f48c Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sun, 22 May 2022 17:55:03 +0300
Subject: [PATCH 1/4] add new theme color: pitSelectedColor

---
 src/theme/DefaultTheme.ts | 1 +
 src/theme/Theme.ts        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/theme/DefaultTheme.ts b/src/theme/DefaultTheme.ts
index 57e7649..e6fe2ae 100644
--- a/src/theme/DefaultTheme.ts
+++ b/src/theme/DefaultTheme.ts
@@ -7,6 +7,7 @@ const defaultTheme: Theme = {
   storeColor: "#3FBAC2",
   storeColorWhenPlayerTurn: "#6cab94",
   holeColor: "#D3D4D8",
+  pitSelectedColor: "#8837fa",
   ballColor: "#393E46",
   ballLightColor: "#393E46",
   pitGameMoveAnimateColor: "#c9b43c",
diff --git a/src/theme/Theme.ts b/src/theme/Theme.ts
index 3434c11..8027648 100644
--- a/src/theme/Theme.ts
+++ b/src/theme/Theme.ts
@@ -5,6 +5,7 @@ export type Theme = {
   storeColor: string;
   storeColorWhenPlayerTurn: string;
   holeColor: string;
+  pitSelectedColor: string;
   ballColor: string;
   ballLightColor: string;
   pitGameMoveAnimateColor: string;

From 2a600d6357a1248273c9cbc8cc6632dd6b48c105 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sun, 22 May 2022 17:57:33 +0300
Subject: [PATCH 2/4] refactor : PitAnimator and Home

---
 src/Home.tsx                 |  2 ++
 src/animation/PitAnimator.ts | 15 ++++++---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index a4e225a..8d832b1 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -17,6 +17,7 @@ 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";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -100,6 +101,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const updateBoardViewModel = (boardViewModel: BoardViewModel) => {
+    boardViewModel.id = v4();
     setBoardId(boardViewModel.id);
     setBoardViewModel(boardViewModel);
   };
diff --git a/src/animation/PitAnimator.ts b/src/animation/PitAnimator.ts
index d9357d2..8182ed5 100644
--- a/src/animation/PitAnimator.ts
+++ b/src/animation/PitAnimator.ts
@@ -38,7 +38,7 @@ export default class PitAnimator {
   public setNewGame(game: MancalaGame) {
     this.reset();
     this.game = game;
-    this.updateBoardViewModel(this.getBoardViewModelFromGame(this.game));
+    this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
   }
 
   public setUpdatedGame(game: MancalaGame, forceClear = false) {
@@ -69,12 +69,12 @@ export default class PitAnimator {
   onAnimate() {
     if (this.animationIndex === this.currentHistoryItem.gameSteps.length) {
       this.clearCurrentInterval();
-      this.updateBoardViewModel(this.getBoardViewModelFromGame(this.game));
+      this.onBoardViewModelUpdate?.(this.getBoardViewModelFromGame(this.game));
     } else {
       const gameStep = this.currentHistoryItem.gameSteps[this.animationIndex];
       const index = this.game.board.getPitIndexCircularly(gameStep.index);
       this.animatePit(index, this.oldBoardViewModel, gameStep);
-      this.updateBoardViewModel(this.oldBoardViewModel);
+      this.onBoardViewModelUpdate?.(this.oldBoardViewModel);
     }
     this.animationIndex++;
   }
@@ -143,7 +143,9 @@ export default class PitAnimator {
   stopCurrentAnimation() {
     this.clearCurrentInterval();
     if (this.oldGame) {
-      this.updateBoardViewModel(this.getBoardViewModelFromGame(this.oldGame));
+      this.onBoardViewModelUpdate?.(
+        this.getBoardViewModelFromGame(this.oldGame)
+      );
     }
     this.resetAnimationState();
   }
@@ -154,11 +156,6 @@ export default class PitAnimator {
     }
   }
 
-  updateBoardViewModel(boardViewModel: BoardViewModel) {
-    boardViewModel.id = v4();
-    this.onBoardViewModelUpdate?.(boardViewModel);
-  }
-
   private getBoardViewModelFromGame(game: MancalaGame): BoardViewModel {
     const pitViewModels = this.createPitViewModelsFromGame(game);
     return BoardViewModelFactory.create(v4(), pitViewModels);

From 1fdb296442e3014cdad441d7dfa68e84495ef4aa Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sun, 22 May 2022 17:58:11 +0300
Subject: [PATCH 3/4] update pit color when onPitSelect

---
 src/Home.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/Home.tsx b/src/Home.tsx
index 8d832b1..f4b1156 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -132,12 +132,20 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     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) {
       //TODO : warn user
       return;
     }
+    boardViewModel.pits[getBoardIndex(index)].pitColor =
+      context.themeManager.theme.pitSelectedColor;
+    updateBoardViewModel(boardViewModel);
     const gameMove: GameMove = { index: index };
     context.rtmt.sendMessage(channel_game_move, gameMove);
   };

From bc0a00cd89b1c77327d151769471777325bd46f3 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Sun, 22 May 2022 17:58:44 +0300
Subject: [PATCH 4/4] v0.1.3-beta.5

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

diff --git a/package.json b/package.json
index 1e6e983..fcd1cd9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mancala-frontend",
-  "version": "0.1.3-beta.4",
+  "version": "0.1.3-beta.5",
   "description": "",
   "main": "index.js",
   "scripts": {