From 418771e92e880384e0ee2142569177942c4c968b Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Mon, 1 Aug 2022 22:27:55 +0300 Subject: [PATCH] refactor GamePage and fix user connection issue --- src/routes/GamePage.tsx | 63 +++++++++++++++++++++++++---------------- 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/src/routes/GamePage.tsx b/src/routes/GamePage.tsx index 36df155..f306eed 100644 --- a/src/routes/GamePage.tsx +++ b/src/routes/GamePage.tsx @@ -1,4 +1,4 @@ -import { CommonMancalaGame, MancalaGame, Pit } from 'mancala.js'; +import { MancalaGame, Pit } from 'mancala.js'; import * as React from 'react'; import { FunctionComponent, useState } from 'react'; import { useNavigate, useParams } from 'react-router'; @@ -23,11 +23,11 @@ import useWindowDimensions from '../hooks/useWindowDimensions'; import { ConnectionState } from '../models/ConnectionState'; import { GameMove } from '../models/GameMove'; import { LoadingState } from '../models/LoadingState'; -import { UserConnectionInfo } from '../models/UserConnectionInfo'; import { Theme } from '../theme/Theme'; import { getColorByBrightness } from '../util/ColorUtil'; import BoardViewModel from '../viewmodel/BoardViewModel'; import Center from '../components/Center'; +import { Game, GameUsersConnectionInfo } from '../models/Game'; const GamePage: FunctionComponent<{ context: Context, @@ -37,7 +37,7 @@ const GamePage: FunctionComponent<{ }> = ({ context, userKey, theme, connectionState }) => { let params = useParams<{ gameId: string }>(); - const [game, setGame] = useState(undefined); + const [game, setGame] = useState(undefined); const [crashMessage, setCrashMessage] = useState(undefined); @@ -53,20 +53,36 @@ const GamePage: FunctionComponent<{ // We have to block future actions if there is an ongoing action. const [hasOngoingAction, setHasOngoingAction] = useState(false); - const [isOpponentOnline, setIsOpponentOnline] = useState(false); + const [gameUsersConnectionInfo, setGameUsersConnectionInfo] = useState(); const { height, width } = useWindowDimensions(); const navigate = useNavigate(); - const [gameLoadingState, setLoadingStateGame] = useState>(LoadingState.Unset()); + const [gameLoadingState, setLoadingStateGame] = useState>(LoadingState.Unset()); - const onGameUpdate = (pitAnimator: PitAnimator, message: Object) => { - const newGame: CommonMancalaGame = message as CommonMancalaGame; - const mancalaGame = MancalaGame.createFromMancalaGame(newGame); - setGame(mancalaGame); - pitAnimator.setUpdatedGame(mancalaGame); + const mancalaGame: MancalaGame | undefined = game?.mancalaGame; + + const onGameUpdate = (pitAnimator: PitAnimator, newGame: Game) => { + setGame(newGame); + pitAnimator.setUpdatedGame(newGame); setHasOngoingAction(false); + setGameUsersConnectionInfo(newGame.gameUsersConnectionInfo); + } + + const isUserOnline = (userId: string) => { + if (!gameUsersConnectionInfo) return false; + const user1ConnectionInfo = gameUsersConnectionInfo.user1ConnectionInfo; + const user2ConnectionInfo = gameUsersConnectionInfo.user2ConnectionInfo; + if (user1ConnectionInfo.userId === userId) return user1ConnectionInfo.isOnline; + if (user2ConnectionInfo.userId === userId) return user2ConnectionInfo.isOnline; + return false; + } + + const onGameUpdateEvent = (pitAnimator: PitAnimator, message: Object) => { + const newGame: Game = message as Game; + newGame.mancalaGame = MancalaGame.createFromMancalaGame(newGame.mancalaGame); + onGameUpdate(pitAnimator, newGame); } const onGameCrashed = (message: any) => { const newCrashMessage = message as string; @@ -80,13 +96,12 @@ const GamePage: FunctionComponent<{ setHasOngoingAction(false); }; const onUserConnectionChange = (message: any) => { - const userConnectionInfo = message as UserConnectionInfo; - //todo: change this when implementing watch the game feature - setIsOpponentOnline(userConnectionInfo.isOnline); + const gameUsersConnectionInfo = message as GameUsersConnectionInfo; + setGameUsersConnectionInfo(gameUsersConnectionInfo); }; - const listenMessages = (pitAnimator: PitAnimator) : () => void => { - const _onGameUpdate = (message: object) => onGameUpdate(pitAnimator, message); + const listenMessages = (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); @@ -106,12 +121,13 @@ const GamePage: FunctionComponent<{ }; const getBoardIndex = (index: number) => { - if (!game) return -1; - if (userKey === game.player2Id) return index + game.board.pits.length / 2; + if (!game || !mancalaGame) return -1; + const pitsLenght = mancalaGame.board.pits.length; + if (userKey === mancalaGame.player2Id) return index + pitsLenght / 2; return index; }; - const getOpponentId = () => game?.player1Id === userKey ? game?.player2Id : game?.player1Id; + const getOpponentId = () => mancalaGame?.player1Id === userKey ? mancalaGame?.player2Id : mancalaGame?.player1Id; const checkHasAnOngoingAction = () => hasOngoingAction; @@ -143,15 +159,13 @@ const GamePage: FunctionComponent<{ React.useEffect(() => { let pitAnimator: PitAnimator | undefined; - let unlistenMessages: ()=>void; + let unlistenMessages: () => void; setLoadingStateGame(LoadingState.Loading()) context.gameStore.get(params.gameId!!).then((game) => { if (game) { - setGame(game); - setHasOngoingAction(false); pitAnimator = new PitAnimator(context, updateBoardViewModel); - pitAnimator.setNewGame(game); setPitAnimator(pitAnimator); + onGameUpdate(pitAnimator, game); unlistenMessages = listenMessages(pitAnimator); setLoadingStateGame(LoadingState.Loaded({ value: game })) } else { @@ -169,9 +183,10 @@ const GamePage: FunctionComponent<{ context.themeManager.theme.textColor, context.themeManager.theme.textLightColor ); - const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.state == "ended"); + const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.mancalaGame.state == "ended"); const showBoardView = game && boardViewModel && userKey && true; - const opponentUser = { id: getOpponentId() || "0", name: "Anonymous", isOnline: isOpponentOnline, isAnonymous: true }; + const opponentId = getOpponentId(); + const opponentUser = { id: getOpponentId() || "0", name: "Anonymous", isOnline: opponentId ? isUserOnline(opponentId) : false, isAnonymous: true }; const user = { id: userKey || "1", name: "Anonymous", isOnline: connectionState === "connected", isAnonymous: true }; const isMobile = width < 600;