jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor GamePage and fix user connection issue

Browse Source
This commit is contained in:
Halit Aksoy 2022-08-01 22:27:55 +03:00
parent bad5d4fd3e
commit 418771e92e
1 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/routes/GamePage.tsx
View File

@ -1,4 +1,4 @@
import { CommonMancalaGame, MancalaGame, Pit } from 'mancala.js'; import { MancalaGame, Pit } from 'mancala.js';
import * as React from 'react'; import * as React from 'react';
import { FunctionComponent, useState } from 'react'; import { FunctionComponent, useState } from 'react';
import { useNavigate, useParams } from 'react-router'; import { useNavigate, useParams } from 'react-router';
@ -23,11 +23,11 @@ import useWindowDimensions from '../hooks/useWindowDimensions';
import { ConnectionState } from '../models/ConnectionState'; import { ConnectionState } from '../models/ConnectionState';
import { GameMove } from '../models/GameMove'; import { GameMove } from '../models/GameMove';
import { LoadingState } from '../models/LoadingState'; import { LoadingState } from '../models/LoadingState';
import { UserConnectionInfo } from '../models/UserConnectionInfo';
import { Theme } from '../theme/Theme'; import { Theme } from '../theme/Theme';
import { getColorByBrightness } from '../util/ColorUtil'; import { getColorByBrightness } from '../util/ColorUtil';
import BoardViewModel from '../viewmodel/BoardViewModel'; import BoardViewModel from '../viewmodel/BoardViewModel';
import Center from '../components/Center'; import Center from '../components/Center';
import { Game, GameUsersConnectionInfo } from '../models/Game';
const GamePage: FunctionComponent<{ const GamePage: FunctionComponent<{
context: Context, context: Context,
@ -37,7 +37,7 @@ const GamePage: FunctionComponent<{
}> = ({ context, userKey, theme, connectionState }) => { }> = ({ context, userKey, theme, connectionState }) => {
let params = useParams<{ gameId: string }>(); let params = useParams<{ gameId: string }>();
const [game, setGame] = useState<MancalaGame | undefined>(undefined); const [game, setGame] = useState<Game | undefined>(undefined);
const [crashMessage, setCrashMessage] = useState<string | undefined>(undefined); const [crashMessage, setCrashMessage] = useState<string | undefined>(undefined);
@ -53,20 +53,36 @@ const GamePage: FunctionComponent<{
// We have to block future actions if there is an ongoing action. // We have to block future actions if there is an ongoing action.
const [hasOngoingAction, setHasOngoingAction] = useState<boolean>(false); const [hasOngoingAction, setHasOngoingAction] = useState<boolean>(false);
const [isOpponentOnline, setIsOpponentOnline] = useState<boolean>(false); const [gameUsersConnectionInfo, setGameUsersConnectionInfo] = useState<GameUsersConnectionInfo | undefined>();
const { height, width } = useWindowDimensions(); const { height, width } = useWindowDimensions();
const navigate = useNavigate(); const navigate = useNavigate();
const [gameLoadingState, setLoadingStateGame] = useState<LoadingState<MancalaGame>>(LoadingState.Unset()); const [gameLoadingState, setLoadingStateGame] = useState<LoadingState<Game>>(LoadingState.Unset());
const onGameUpdate = (pitAnimator: PitAnimator, message: Object) => { const mancalaGame: MancalaGame | undefined = game?.mancalaGame;
const newGame: CommonMancalaGame = message as CommonMancalaGame;
const mancalaGame = MancalaGame.createFromMancalaGame(newGame); const onGameUpdate = (pitAnimator: PitAnimator, newGame: Game) => {
setGame(mancalaGame); setGame(newGame);
pitAnimator.setUpdatedGame(mancalaGame); pitAnimator.setUpdatedGame(newGame);
setHasOngoingAction(false); 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 onGameCrashed = (message: any) => {
const newCrashMessage = message as string; const newCrashMessage = message as string;
@ -80,13 +96,12 @@ const GamePage: FunctionComponent<{
setHasOngoingAction(false); setHasOngoingAction(false);
}; };
const onUserConnectionChange = (message: any) => { const onUserConnectionChange = (message: any) => {
const userConnectionInfo = message as UserConnectionInfo; const gameUsersConnectionInfo = message as GameUsersConnectionInfo;
//todo: change this when implementing watch the game feature setGameUsersConnectionInfo(gameUsersConnectionInfo);
setIsOpponentOnline(userConnectionInfo.isOnline);
}; };
const listenMessages = (pitAnimator: PitAnimator) : () => void => { const listenMessages = (pitAnimator: PitAnimator): () => void => {
const _onGameUpdate = (message: object) => onGameUpdate(pitAnimator, message); const _onGameUpdate = (message: object) => onGameUpdateEvent(pitAnimator, message);
context.rtmt.listenMessage(channel_on_game_update, _onGameUpdate); context.rtmt.listenMessage(channel_on_game_update, _onGameUpdate);
context.rtmt.listenMessage(channel_on_game_crashed, onGameCrashed); context.rtmt.listenMessage(channel_on_game_crashed, onGameCrashed);
context.rtmt.listenMessage(channel_on_game_user_leave, onGameUserLeave); context.rtmt.listenMessage(channel_on_game_user_leave, onGameUserLeave);
@ -106,12 +121,13 @@ const GamePage: FunctionComponent<{
}; };
const getBoardIndex = (index: number) => { const getBoardIndex = (index: number) => {
if (!game) return -1; if (!game || !mancalaGame) return -1;
if (userKey === game.player2Id) return index + game.board.pits.length / 2; const pitsLenght = mancalaGame.board.pits.length;
if (userKey === mancalaGame.player2Id) return index + pitsLenght / 2;
return index; return index;
}; };
const getOpponentId = () => game?.player1Id === userKey ? game?.player2Id : game?.player1Id; const getOpponentId = () => mancalaGame?.player1Id === userKey ? mancalaGame?.player2Id : mancalaGame?.player1Id;
const checkHasAnOngoingAction = () => hasOngoingAction; const checkHasAnOngoingAction = () => hasOngoingAction;
@ -143,15 +159,13 @@ const GamePage: FunctionComponent<{
React.useEffect(() => { React.useEffect(() => {
let pitAnimator: PitAnimator | undefined; let pitAnimator: PitAnimator | undefined;
let unlistenMessages: ()=>void; let unlistenMessages: () => void;
setLoadingStateGame(LoadingState.Loading()) setLoadingStateGame(LoadingState.Loading())
context.gameStore.get(params.gameId!!).then((game) => { context.gameStore.get(params.gameId!!).then((game) => {
if (game) { if (game) {
setGame(game);
setHasOngoingAction(false);
pitAnimator = new PitAnimator(context, updateBoardViewModel); pitAnimator = new PitAnimator(context, updateBoardViewModel);
pitAnimator.setNewGame(game);
setPitAnimator(pitAnimator); setPitAnimator(pitAnimator);
onGameUpdate(pitAnimator, game);
unlistenMessages = listenMessages(pitAnimator); unlistenMessages = listenMessages(pitAnimator);
setLoadingStateGame(LoadingState.Loaded({ value: game })) setLoadingStateGame(LoadingState.Loaded({ value: game }))
} else { } else {
@ -169,9 +183,10 @@ const GamePage: FunctionComponent<{
context.themeManager.theme.textColor, context.themeManager.theme.textColor,
context.themeManager.theme.textLightColor 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 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 user = { id: userKey || "1", name: "Anonymous", isOnline: connectionState === "connected", isAnonymous: true };
const isMobile = width < 600; const isMobile = width < 600;