feature: add channel listen_game_events

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

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<Game>>(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<{
             </BoardToolbar>
             {showBoardView && (
                 <BoardView
-                    userKey={userKey}
                     game={game}
                     boardId={boardId}
                     boardViewModel={boardViewModel}
                     context={context}
-                    onPitSelect={onPitSelect} />
+                    onPitSelect={onPitSelect}
+                    revert={isPlayer2} />
             )}
             <Center>
                 <LoadingComponent context={context} loadingState={gameLoadingState}></LoadingComponent>