refactor BoardView and HomePage for PitAnimator

src/Home.tsx

@@ -13,6 +13,8 @@ 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";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -25,19 +27,16 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false);
 
   const [game, setGame] = useState<CommonMancalaGame>(undefined);
-  const gameRef = React.useRef<CommonMancalaGame>(game);
 
   const [crashMessage, setCrashMessage] = useState<string>(undefined);
 
   const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined);
 
-  const [animationPitIndex, setAnimationPitIndex] = useState<number>(-1);
+  const [boardViewModel, setBoardViewModel] = useState<BoardViewModel>(null);
 
-  const [intervalId, setIntervalId] = useState<number>(-1);
+  const [boardId, setBoardId] = useState<string>();
 
-  useEffect(() => {
+  const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
-    gameRef.current = game;
-  });
 
   const onConnectionDone = () => {
     setConnetionState("connected");
@@ -69,41 +68,20 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     });
   };
 
-  const listenMessages = () => {
+  const listenMessages = (pitAnimator: PitAnimator) => {
+    context.rtmt.listenMessage("on_game_start", (message: Object) => {
+      const newGame: CommonMancalaGame = message as CommonMancalaGame;
+      const mancalaGame = MancalaGame.createFromMancalaGame(newGame);
+      setSearchingOpponent(false);
+      setGame(mancalaGame);
+      pitAnimator.setNewGame(mancalaGame);
+    });
+
     context.rtmt.listenMessage(channel_on_game_update, (message: Object) => {
       const newGame: CommonMancalaGame = message as CommonMancalaGame;
       const mancalaGame = MancalaGame.createFromMancalaGame(newGame);
-      if (gameRef.current && mancalaGame.history.length > 0) {
-        const lastHistoryItem =
-          mancalaGame.history[mancalaGame.history.length - 1];
-        if (lastHistoryItem.gameSteps.length > 0) {
-          let stepIndex = 0;
-          if (intervalId) {
-            clearInterval(intervalId);
-          }
-          const id = setInterval(() => {
-            if (stepIndex === lastHistoryItem.gameSteps.length) {
-              clearInterval(id);
-              setAnimationPitIndex(-1);
       setGame(mancalaGame);
-            } else {
+      pitAnimator.setUpdatedGame(mancalaGame);
-              const gameStep = lastHistoryItem.gameSteps[stepIndex];
-              const index = mancalaGame.board.getPitIndexCircularly(
-                gameStep.index
-              );
-              setAnimationPitIndex(index);
-            }
-            stepIndex++;
-          }, 250);
-          setIntervalId(intervalId);
-        }
-      }
-    });
-
-    context.rtmt.listenMessage("on_game_start", (message: Object) => {
-      const newGame: CommonMancalaGame = message as CommonMancalaGame;
-      setSearchingOpponent(false);
-      setGame(MancalaGame.createFromMancalaGame(newGame));
     });
 
     context.rtmt.listenMessage("on_game_crashed", (message: any) => {
@@ -119,9 +97,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     });
   };
 
+  const updateBoardViewModel = (boardViewModel: BoardViewModel) => {
+    setBoardId(boardViewModel.id);
+    setBoardViewModel(boardViewModel);
+  };
+
   React.useEffect(() => {
-    listenMessages();
+    const pitAnimator = new PitAnimator(context, updateBoardViewModel);
+    setPitAnimator(pitAnimator);
+    listenMessages(pitAnimator);
     connectToServer("connecting");
+    return () => {
+      pitAnimator.dispose();
+    };
   }, []);
 
   const resetGameState = () => {
@@ -140,7 +128,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.rtmt.sendMessage(channel_leave_game, {});
   };
 
-  const onHoleSelect = (index: number, hole: Pit) => {
+  const onHoleSelect = (index: number, pit: Pit) => {
+    //TODO : stoneCount comes from view model!
+    if (pit.stoneCount === 0) {
+      //TODO : warn user
+      return;
+    }
     const gameMove: GameMove = { index: index };
     context.rtmt.sendMessage(channel_game_move, gameMove);
   };
@@ -240,12 +233,14 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         userKeyWhoLeave={userKeyWhoLeave}
         searchingOpponent={searchingOpponent}
       />
-      {game && (
+      {game && boardViewModel && (
         <BoardView
           userKey={userKey}
           game={game}
+          boardId={boardId}
+          boardViewModel={boardViewModel}
+          context={context}
           onHoleSelect={onHoleSelect}
-          animationPitIndex={animationPitIndex}
         />
       )}
     </div>

src/components/BoardView.tsx

@@ -1,30 +1,9 @@
 import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent, useState } from "react";
-
+import { Context } from "../context";
-type Theme = {
+import BoardViewModel from "../viewmodel/BoardViewModel";
-  background: string;
+import PitViewModel from "../viewmodel/PitViewModel";
-  boardColor: string;
-  boardColorWhenPlayerTurn: string;
-  storeColor: string;
-  storeColorWhenPlayerTurn: string;
-  holeColor: string;
-  ballColor: string;
-  ballLightColor: string;
-  holeAnimateColor: string;
-};
-
-const theme: Theme = {
-  background: "#EEEEEE",
-  boardColor: "#4D606E",
-  boardColorWhenPlayerTurn: "#84b8a6",
-  storeColor: "#3FBAC2",
-  storeColorWhenPlayerTurn: "#6cab94",
-  holeColor: "#D3D4D8",
-  ballColor: "#393E46",
-  ballLightColor: "#393E46",
-  holeAnimateColor: "#afb3a4",
-};
 
 const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
   return (
@@ -48,41 +27,19 @@ function range(size: number) {
   return ans;
 }
 
-const PitContainer: FunctionComponent<{
-  pit: Pit;
-  isAnimating: boolean;
-  onClick: () => void;
-}> = ({ pit, isAnimating, onClick }) => {
-  if (isAnimating) {
-    pit.stoneCount += 1;
-  }
-  return (
-    <>
-      <HoleView
-        hole={pit}
-        color={isAnimating ? theme.holeAnimateColor : theme.holeColor}
-        stoneColor={isAnimating ? theme.ballLightColor : theme.ballColor}
-        onClick={onClick}
-      />
-    </>
-  );
-};
-
 const HoleView: FunctionComponent<{
-  hole: Pit;
+  pitViewModel: PitViewModel;
-  color: string;
-  stoneColor: string;
   onClick: () => void;
-}> = ({ hole, color, stoneColor, onClick }) => {
+}> = ({ pitViewModel, onClick }) => {
-  const balls = [...range(hole.stoneCount)].map((i) => (
+  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={stoneColor} />
+    <BallView color={pitViewModel.stoneColor} />
   ));
 
   return (
     <div
       onClick={onClick}
       style={{
-        background: color,
+        background: pitViewModel.pitColor,
         margin: "5px",
         padding: "5px",
         borderRadius: "10vw",
@@ -100,21 +57,19 @@ const HoleView: FunctionComponent<{
 };
 
 const StoreView: FunctionComponent<{
-  store: Bank;
+  pitViewModel: PitViewModel;
-  color: string;
-  stoneColor: string;
   gridColumn: string;
   gridRow: string;
-}> = ({ store, color, stoneColor, gridColumn, gridRow }) => {
+}> = ({ pitViewModel, gridColumn, gridRow }) => {
-  const balls = [...range(store.stoneCount)].map((i) => (
+  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={stoneColor} />
+    <BallView color={pitViewModel.stoneColor} />
   ));
   return (
     <div
       style={{
         gridColumn: gridColumn,
         gridRow: gridRow,
-        background: color,
+        background: pitViewModel.pitColor,
         margin: "5px",
         borderRadius: "10vw",
         display: "flex",
@@ -131,64 +86,49 @@ const StoreView: FunctionComponent<{
 
 const BoardView: FunctionComponent<{
   game?: MancalaGame;
+  context: Context;
+  boardId: string;
+  boardViewModel: BoardViewModel;
   userKey: string;
   onHoleSelect: (index: number, hole: Pit) => void;
-  animationPitIndex: number;
+}> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
-}> = ({ game, userKey, onHoleSelect, animationPitIndex }) => {
+  const createPitView = (pitViewModel: PitViewModel, onClick: () => void) => {
+    return <HoleView pitViewModel={pitViewModel} onClick={onClick} />;
+  };
   const player1Pits = game?.board.player1Pits.map((pit) => {
-    const isAnimating = pit.index === animationPitIndex;
+    const pitViewModel = boardViewModel.pits[pit.index];
-    return (
+    return createPitView(pitViewModel, () => {
-      <PitContainer
-        pit={pit}
-        isAnimating={isAnimating}
-        onClick={() => {
       if (game.turnPlayerId === game.player1Id)
         onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
-        }}
-      />
-    );
     });
-
+  });
   const player2Pits = game!!.board.player2Pits.map((pit) => {
-    const isAnimating = pit.index === animationPitIndex;
+    const pitViewModel = boardViewModel.pits[pit.index];
-    return (
+    return createPitView(pitViewModel, () => {
-      <PitContainer
-        pit={pit}
-        isAnimating={isAnimating}
-        onClick={() => {
       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()];
+  const player2BankViewModel =
+    boardViewModel.pits[game.board.player2BankIndex()];
+  const player1Bank = (
+    <StoreView
+      pitViewModel={player1BankViewModel}
+      gridColumn="1 / 2"
+      gridRow="1 / 3"
+    />
+  );
+  const player2Bank = (
+    <StoreView
+      pitViewModel={player2BankViewModel}
+      gridColumn="8 / 9"
+      gridRow="1 / 3"
     />
   );
-  });
-
-  const isUserTurn = game.checkIsPlayerTurn(userKey);
-
-  const animatingPlayer1Bank =
-    game.board.player1Bank.index === animationPitIndex;
-  const animatingPlayer2Bank =
-    game.board.player2Bank.index === animationPitIndex;
-
-  const storeColorPlayer1 = animatingPlayer1Bank
-    ? theme.holeAnimateColor
-    : isUserTurn
-    ? theme.storeColor
-    : theme.storeColorWhenPlayerTurn;
-
-  const storeStoneColorPlayer1 = animatingPlayer1Bank
-    ? theme.ballLightColor
-    : theme.ballColor;
-
-  const storeColorPlayer2 = animatingPlayer2Bank
-    ? theme.holeAnimateColor
-    : isUserTurn
-    ? theme.storeColor
-    : theme.storeColorWhenPlayerTurn;
-
-  const storeStoneColorPlayer2 = animatingPlayer2Bank
-    ? theme.ballLightColor
-    : theme.ballColor;
   return (
     <div
       style={{
@@ -206,16 +146,12 @@ const BoardView: FunctionComponent<{
       {userKey === game.player2Id ? (
         <>
           <StoreView
-            store={game!!.board.player1Bank}
+            pitViewModel={player1BankViewModel}
-            color={storeColorPlayer1}
-            stoneColor={storeStoneColorPlayer1}
             gridColumn="1 / 2"
             gridRow="1 / 3"
           />
           <StoreView
-            store={game!!.board.player2Bank}
+            pitViewModel={player2BankViewModel}
-            color={storeColorPlayer2}
-            stoneColor={storeStoneColorPlayer2}
             gridColumn="8 / 9"
             gridRow="1 / 3"
           />
@@ -225,17 +161,13 @@ const BoardView: FunctionComponent<{
       ) : (
         <>
           <StoreView
-            store={game!!.board.player2Bank}
+            pitViewModel={player1BankViewModel}
-            color={storeColorPlayer2}
+            gridColumn="8 / 9"
-            stoneColor={storeStoneColorPlayer2}
-            gridColumn="1 / 2"
             gridRow="1 / 3"
           />
           <StoreView
-            store={game!!.board.player1Bank}
+            pitViewModel={player2BankViewModel}
-            color={storeColorPlayer1}
+            gridColumn="1 / 2"
-            stoneColor={storeStoneColorPlayer1}
-            gridColumn="8 / 9"
             gridRow="1 / 3"
           />
           {player2Pits.reverse()}