Merge pull request #5 from jhalitaksoy/feature/pit-selected-color

Feature/pit selected color

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": {

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);
   };
@@ -130,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);
   };

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);

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

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;