refactor BoardView and HomePage for PitAnimator
This commit is contained in:
parent
a8287cf800
commit
031e2b1af1
79
src/Home.tsx
79
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(() => {
|
||||
gameRef.current = game;
|
||||
});
|
||||
const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
|
||||
|
||||
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 {
|
||||
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));
|
||||
setGame(mancalaGame);
|
||||
pitAnimator.setUpdatedGame(mancalaGame);
|
||||
});
|
||||
|
||||
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>
|
||||
|
||||
@ -1,30 +1,9 @@
|
||||
import { Bank, MancalaGame, Pit } from "mancala.js";
|
||||
import * as React from "react";
|
||||
import { FunctionComponent, useState } from "react";
|
||||
|
||||
type Theme = {
|
||||
background: string;
|
||||
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",
|
||||
};
|
||||
import { Context } from "../context";
|
||||
import BoardViewModel from "../viewmodel/BoardViewModel";
|
||||
import PitViewModel from "../viewmodel/PitViewModel";
|
||||
|
||||
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;
|
||||
color: string;
|
||||
stoneColor: string;
|
||||
pitViewModel: PitViewModel;
|
||||
onClick: () => void;
|
||||
}> = ({ hole, color, stoneColor, onClick }) => {
|
||||
const balls = [...range(hole.stoneCount)].map((i) => (
|
||||
<BallView color={stoneColor} />
|
||||
}> = ({ pitViewModel, onClick }) => {
|
||||
const balls = [...range(pitViewModel.stoneCount)].map((i) => (
|
||||
<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;
|
||||
color: string;
|
||||
stoneColor: string;
|
||||
pitViewModel: PitViewModel;
|
||||
gridColumn: string;
|
||||
gridRow: string;
|
||||
}> = ({ store, color, stoneColor, gridColumn, gridRow }) => {
|
||||
const balls = [...range(store.stoneCount)].map((i) => (
|
||||
<BallView color={stoneColor} />
|
||||
}> = ({ pitViewModel, gridColumn, gridRow }) => {
|
||||
const balls = [...range(pitViewModel.stoneCount)].map((i) => (
|
||||
<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, userKey, onHoleSelect, animationPitIndex }) => {
|
||||
}> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
|
||||
const createPitView = (pitViewModel: PitViewModel, onClick: () => void) => {
|
||||
return <HoleView pitViewModel={pitViewModel} onClick={onClick} />;
|
||||
};
|
||||
const player1Pits = game?.board.player1Pits.map((pit) => {
|
||||
const isAnimating = pit.index === animationPitIndex;
|
||||
return (
|
||||
<PitContainer
|
||||
pit={pit}
|
||||
isAnimating={isAnimating}
|
||||
onClick={() => {
|
||||
if (game.turnPlayerId === game.player1Id)
|
||||
onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const pitViewModel = boardViewModel.pits[pit.index];
|
||||
return createPitView(pitViewModel, () => {
|
||||
if (game.turnPlayerId === game.player1Id)
|
||||
onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
|
||||
});
|
||||
});
|
||||
|
||||
const player2Pits = game!!.board.player2Pits.map((pit) => {
|
||||
const isAnimating = pit.index === animationPitIndex;
|
||||
return (
|
||||
<PitContainer
|
||||
pit={pit}
|
||||
isAnimating={isAnimating}
|
||||
onClick={() => {
|
||||
if (game.turnPlayerId === game.player2Id)
|
||||
onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
const pitViewModel = boardViewModel.pits[pit.index];
|
||||
return createPitView(pitViewModel, () => {
|
||||
if (game.turnPlayerId === game.player2Id)
|
||||
onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
|
||||
});
|
||||
});
|
||||
|
||||
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;
|
||||
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"
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -206,16 +146,12 @@ const BoardView: FunctionComponent<{
|
||||
{userKey === game.player2Id ? (
|
||||
<>
|
||||
<StoreView
|
||||
store={game!!.board.player1Bank}
|
||||
color={storeColorPlayer1}
|
||||
stoneColor={storeStoneColorPlayer1}
|
||||
pitViewModel={player1BankViewModel}
|
||||
gridColumn="1 / 2"
|
||||
gridRow="1 / 3"
|
||||
/>
|
||||
<StoreView
|
||||
store={game!!.board.player2Bank}
|
||||
color={storeColorPlayer2}
|
||||
stoneColor={storeStoneColorPlayer2}
|
||||
pitViewModel={player2BankViewModel}
|
||||
gridColumn="8 / 9"
|
||||
gridRow="1 / 3"
|
||||
/>
|
||||
@ -225,17 +161,13 @@ const BoardView: FunctionComponent<{
|
||||
) : (
|
||||
<>
|
||||
<StoreView
|
||||
store={game!!.board.player2Bank}
|
||||
color={storeColorPlayer2}
|
||||
stoneColor={storeStoneColorPlayer2}
|
||||
gridColumn="1 / 2"
|
||||
pitViewModel={player1BankViewModel}
|
||||
gridColumn="8 / 9"
|
||||
gridRow="1 / 3"
|
||||
/>
|
||||
<StoreView
|
||||
store={game!!.board.player1Bank}
|
||||
color={storeColorPlayer1}
|
||||
stoneColor={storeStoneColorPlayer1}
|
||||
gridColumn="8 / 9"
|
||||
pitViewModel={player2BankViewModel}
|
||||
gridColumn="1 / 2"
|
||||
gridRow="1 / 3"
|
||||
/>
|
||||
{player2Pits.reverse()}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user