From 4c0a8877b6e0f38ef1220fecc1b3669e7a159506 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Fri, 2 Sep 2022 00:11:48 +0300 Subject: [PATCH] feature: add channel listen_game_events --- src/const/channel_names.ts | 4 +++- src/routes/GamePage.tsx | 33 ++++++++++++++++++++++++--------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/const/channel_names.ts b/src/const/channel_names.ts index 789d501..d088b0b 100644 --- a/src/const/channel_names.ts +++ b/src/const/channel_names.ts @@ -8,4 +8,6 @@ export const channel_on_game_crashed = "on_game_crashed" export const channel_on_game_user_leave = "on_game_user_leave" export const channel_ping = "ping" export const channel_pong = "pong" -export const channel_on_user_connection_change = "channel_on_user_connection_change" \ No newline at end of file +export const channel_on_user_connection_change = "channel_on_user_connection_change" +export const channel_listen_game_events = "channel_listen_game_events" +export const channel_unlisten_game_events = "channel_unlisten_game_events" \ No newline at end of file diff --git a/src/routes/GamePage.tsx b/src/routes/GamePage.tsx index f306eed..dd0c823 100644 --- a/src/routes/GamePage.tsx +++ b/src/routes/GamePage.tsx @@ -17,7 +17,7 @@ import LoadingComponent from '../components/LoadingComponent'; import PageContainer from '../components/PageContainer'; import Row from '../components/Row'; import UserStatus from '../components/UserStatus'; -import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move } from '../const/channel_names'; +import { channel_on_game_update, channel_on_game_crashed, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move, channel_listen_game_events, channel_unlisten_game_events } from '../const/channel_names'; import { Context } from '../context/context'; import useWindowDimensions from '../hooks/useWindowDimensions'; import { ConnectionState } from '../models/ConnectionState'; @@ -61,7 +61,12 @@ const GamePage: FunctionComponent<{ const [gameLoadingState, setLoadingStateGame] = useState>(LoadingState.Unset()); + + const checkIsSpectator = (game: Game) => userKey !== game.mancalaGame.player1Id && userKey !== game.mancalaGame.player2Id; + const mancalaGame: MancalaGame | undefined = game?.mancalaGame; + const isSpectator = game ? checkIsSpectator(game) : undefined; + const isPlayer2 = !isSpectator && userKey === mancalaGame?.player2Id; const onGameUpdate = (pitAnimator: PitAnimator, newGame: Game) => { setGame(newGame); @@ -100,13 +105,15 @@ const GamePage: FunctionComponent<{ setGameUsersConnectionInfo(gameUsersConnectionInfo); }; - const listenMessages = (pitAnimator: PitAnimator): () => void => { + const listenMessages = (game: Game, pitAnimator: PitAnimator): () => void => { const _onGameUpdate = (message: object) => onGameUpdateEvent(pitAnimator, message); context.rtmt.listenMessage(channel_on_game_update, _onGameUpdate); context.rtmt.listenMessage(channel_on_game_crashed, onGameCrashed); context.rtmt.listenMessage(channel_on_game_user_leave, onGameUserLeave); - context.rtmt.listenMessage(channel_on_user_connection_change, onUserConnectionChange) + context.rtmt.listenMessage(channel_on_user_connection_change, onUserConnectionChange); + checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_listen_game_events, game.id); return () => { + checkIsSpectator(game) && userKey && context.rtmt.sendMessage(channel_unlisten_game_events, game.id); context.rtmt.unlistenMessage(channel_on_game_update, _onGameUpdate); context.rtmt.unlistenMessage(channel_on_game_crashed, onGameCrashed); context.rtmt.unlistenMessage(channel_on_game_user_leave, onGameUserLeave); @@ -140,20 +147,28 @@ const GamePage: FunctionComponent<{ }; const onPitSelect = (index: number, pit: Pit) => { + if (!game || isSpectator || !userKey) { + return; + } + const pitIndexForUser = index % (game.mancalaGame.board.totalPitCount() / 2); + if (game.mancalaGame.getPlayerIdByIndex(index) !== userKey || + !game.mancalaGame.canPlayerMove(userKey, pitIndexForUser)) { + return; + } if (checkHasAnOngoingAction()) { return; } setHasOngoingAction(true); if (!boardViewModel) return; - //TODO : stoneCount comes from view model! + //TODO: this check should be in mancala.js if (pit.stoneCount === 0) { //TODO : warn user return; } - boardViewModel.pits[getBoardIndex(index)].pitColor = + boardViewModel.pits[getBoardIndex(pitIndexForUser)].pitColor = context.themeManager.theme.pitSelectedColor; updateBoardViewModel(boardViewModel); - const gameMove: GameMove = { index: index }; + const gameMove: GameMove = { index: pitIndexForUser }; context.rtmt.sendMessage(channel_game_move, gameMove); }; @@ -166,7 +181,7 @@ const GamePage: FunctionComponent<{ pitAnimator = new PitAnimator(context, updateBoardViewModel); setPitAnimator(pitAnimator); onGameUpdate(pitAnimator, game); - unlistenMessages = listenMessages(pitAnimator); + unlistenMessages = listenMessages(game, pitAnimator); setLoadingStateGame(LoadingState.Loaded({ value: game })) } else { setLoadingStateGame(LoadingState.Error({ errorMessage: context.texts.GameNotFound })) @@ -242,12 +257,12 @@ const GamePage: FunctionComponent<{ {showBoardView && ( + onPitSelect={onPitSelect} + revert={isPlayer2} /> )}