+
- {`⟲ ${t("ViewingMove", { number: moveNumber })}`}
+ {t("ViewingMove", { number: moveNumber })}
{isYourTurn && {` · ${t("YourTurn")}`}}
-
-
+
);
};
diff --git a/apps/frontend/src/hooks/useWindowDimensions.ts b/apps/frontend/src/hooks/useWindowDimensions.ts
deleted file mode 100644
index 21daa13..0000000
--- a/apps/frontend/src/hooks/useWindowDimensions.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useState, useEffect } from 'react';
-
-//https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
-
-function getWindowDimensions() {
- const { innerWidth: width, innerHeight: height } = window;
- return {
- width,
- height
- };
-}
-
-export default function useWindowDimensions() {
- const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
-
- useEffect(() => {
- function handleResize() {
- setWindowDimensions(getWindowDimensions());
- }
-
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, []);
-
- return windowDimensions;
-}
diff --git a/apps/frontend/src/routes/GamePage.tsx b/apps/frontend/src/routes/GamePage.tsx
index efebe38..7f33d2e 100644
--- a/apps/frontend/src/routes/GamePage.tsx
+++ b/apps/frontend/src/routes/GamePage.tsx
@@ -4,22 +4,16 @@ import { FunctionComponent, useState } from 'react';
import { useNavigate, useParams } from 'react-router';
import { v4 } from 'uuid';
import { PitAnimator } from '@mancala/core';
-import BoardToolbar from '../components/board/BoardToolbar';
import BoardView from '../components/board/BoardView';
-import InfoPanel from '../components/InfoPanel';
import LoadingComponent from '../components/LoadingComponent';
import PageContainer from '../components/PageContainer';
import AppHeader from '../components/headerbar/AppHeader';
import { LeaveIcon, PlusIcon } from '../components/Icons';
-import UserStatus from '../components/UserStatus';
import { GameRecord, channel_on_game_update, channel_on_game_crashed, channel_on_game_end, channel_on_game_user_leave, channel_on_user_connection_change, channel_leave_game, channel_game_move, channel_listen_game_events, channel_unlisten_game_events, FinishedGameSummary, GameEndMessage, getBoardAfterMove, getSeat, PlayedMove } from '@mancala/core';
import { Context } from '../context/context';
-import useWindowDimensions from '../hooks/useWindowDimensions';
import { GameMove, LoadingState, Game, GameUsersConnectionInfo } from "@mancala/core";
-import { Theme } from '@mancala/core';
-import { getColorByBrightness, getPlayerDisplayName } from "@mancala/core";
+import { Theme, getPlayerDisplayName } from '@mancala/core';
import { BoardViewModel } from "@mancala/core";
-import Center from '../components/Center';
import notyf from '../util/Notyf';
import swal from 'sweetalert';
import Util from '../util/Util';
@@ -32,6 +26,9 @@ import { getResultText } from '../util/GameResultText';
import ReplayView from '../components/history/ReplayView';
import GameClockView from '../components/GameClockView';
import useGameClock from '../hooks/useGameClock';
+import PlayerCard from '../components/game/PlayerCard';
+import GameOverCard from '../components/game/GameOverCard';
+import '../styles/game.css';
const GamePage: FunctionComponent<{
context: Context,
@@ -65,7 +62,8 @@ const GamePage: FunctionComponent<{
// Set when the server says the game ended, for whatever reason.
const [gameEnd, setGameEnd] = useState
(undefined);
- const { height, width } = useWindowDimensions();
+ // Set when the player closes the game over card to look at the board.
+ const [gameOverClosed, setGameOverClosed] = useState(false);
const navigate = useNavigate();
@@ -265,13 +263,6 @@ const GamePage: FunctionComponent<{
};
}, []);
- const textColorOnAppBar = getColorByBrightness(
- context.themeManager.theme.appBarBgColor,
- context.themeManager.theme.textColor,
- context.themeManager.theme.textLightColor
- );
- const isMobile = width < 600;
-
const renderNewGameBtn = isSpectator || (userKeyWhoLeave || gameEnd || !game || (game && game.mancalaGame.state == "ended"));
const moves = (mancalaGame?.history ?? []) as unknown as PlayedMove[];
@@ -292,86 +283,133 @@ const GamePage: FunctionComponent<{
.find((connectionInfo) => connectionInfo?.userId === userId);
return { userId, name: info?.name, isGuest: info?.isGuest ?? true };
};
- // A game that ended by a timeout or inactivity is not over by the rules, so say why it ended.
- const endText = gameEnd && (gameEnd.endReason === "timeout" || gameEnd.endReason === "inactive") && mancalaGame
- ? `${t("GameEnded")} · ${getResultText({
- result: gameEnd.result, endReason: gameEnd.endReason,
- player1: playerInfo(mancalaGame.player1Id),
- player2: playerInfo(mancalaGame.player2Id),
- } as FinishedGameSummary, isSpectator ? undefined : userKey, t)}`
- : undefined;
+
+ // How the game ended, as a saved game would say it; from the server's message when it sent one.
+ const getEndSummary = (): FinishedGameSummary | undefined => {
+ if (!mancalaGame || !isGameOver) return undefined;
+ const player1 = playerInfo(mancalaGame.player1Id), player2 = playerInfo(mancalaGame.player2Id);
+ const seatOf = (playerId: string) => playerId === mancalaGame.player1Id ? "player1" : "player2";
+ if (gameEnd) return { result: gameEnd.result, endReason: gameEnd.endReason, player1, player2 } as FinishedGameSummary;
+ if (userKeyWhoLeave) {
+ const winner = userKeyWhoLeave === mancalaGame.player1Id ? "player2" : "player1";
+ return { result: winner, endReason: "left", leftUserId: userKeyWhoLeave, player1, player2 } as FinishedGameSummary;
+ }
+ const winnerId = mancalaGame.getWonPlayerId();
+ return { result: winnerId ? seatOf(winnerId) : "draw", endReason: "completed", player1, player2 } as FinishedGameSummary;
+ };
+ const endSummary = getEndSummary();
+ // "You won · Opponent left" becomes the title "You won" and the reason "Opponent left".
+ const [resultTitle, ...resultReasons] = endSummary
+ ? getResultText(endSummary, isSpectator ? undefined : userKey, t).split(" · ")
+ : [];
+ const leftUserId = userKeyWhoLeave ?? gameEnd?.leftUserId;
+ const resultReason = resultReasons.join(" · ")
+ || (isSpectator && leftUserId ? `${getPlayerName(leftUserId) ?? t("Anonymous")} ${t("UserLeftTheGame")}` : undefined);
const clockTimes = useGameClock(game, gameEnd);
const renderClock = (playerId: string) => {
const seat = mancalaGame && getSeat(mancalaGame, playerId);
if (!clockTimes || !seat) return undefined;
const timeMs = seat === "player1" ? clockTimes.player1Ms : clockTimes.player2Ms;
- return ;
+ return ;
};
const showBoardView = game && boardViewModel && userKey && true;
const topLocatedUserId = (isSpectator ? mancalaGame?.player2Id : getOpponentId()) || "0";
const bottomLocatedUserId = (isSpectator ? mancalaGame?.player1Id : userKey) || "1";
- const topLocatedUserName = getPlayerName(topLocatedUserId);
- const bottomLocatedUserName = getPlayerName(bottomLocatedUserId);
const topLocatedUser = {
id: topLocatedUserId,
- name: topLocatedUserName ?? "Anonymous",
+ name: getPlayerName(topLocatedUserId) ?? t("Anonymous"),
+ isGuest: playerInfo(topLocatedUserId).isGuest,
isOnline: isUserOnline(topLocatedUserId),
- isAnonymous: !topLocatedUserName
};
const bottomLocatedUser = {
id: bottomLocatedUserId,
- name: bottomLocatedUserName ?? "Anonymous",
+ name: getPlayerName(bottomLocatedUserId) ?? t("Anonymous"),
+ isGuest: playerInfo(bottomLocatedUserId).isGuest,
isOnline: isSpectator ? isUserOnline(bottomLocatedUserId) : context.rtmt.connectionState === "connected",
- isAnonymous: !bottomLocatedUserName
};
- const currentUser = isSpectator ? {
- id: "2",
- name: "Anonymous",
- isOnline: context.rtmt.connectionState === "connected",
- isAnonymous: true
- } : bottomLocatedUser;
- const leftPlayer = userKeyWhoLeave ? (userKeyWhoLeave === topLocatedUser.id ? topLocatedUser : bottomLocatedUser) : undefined;
if (replayRecord) {
return ;
}
+ const getTurnText = () => {
+ if (isGameOver) return resultTitle ? `${t("GameEnded")} · ${resultTitle}` : t("GameEnded");
+ if (isSpectator) return `${getPlayerName(mancalaGame!.turnPlayerId) ?? t("Anonymous")} ${t("Playing")}`;
+ return isYourTurn ? t("YourTurn") : t("OpponentTurn");
+ };
+
+ const renderGame = () => {
+ const board = mancalaGame!.board;
+ const [topStore, bottomStore] = isPlayer2
+ ? [board.player1BankIndex(), board.player2BankIndex()]
+ : [board.player2BankIndex(), board.player1BankIndex()];
+ const shownStones = (index: number) => shownBoardViewModel!.pits[index].stoneCount;
+ const playerCard = (user: typeof topLocatedUser, storeIndex: number, role: string, alignRight: boolean) => (
+
+ );
+ return (
+
+
{playerCard(topLocatedUser, topStore, isSpectator ? "" : t("Opponent"), false)}
+
+
+ {!isGameOver && }
+ {getTurnText()}
+
+
+
{playerCard(bottomLocatedUser, bottomStore, isSpectator ? "" : t("You"), true)}
+
+ {isReviewing && (
+ setViewedMove(undefined)} />
+ )}
+
+ {isGameOver && !gameOverClosed && (
+ setGameOverClosed(true)} />
+ )}
+
+
+ getPlayerName(playerId) ?? t("Anonymous")}
+ accentPlayerId={bottomLocatedUserId}
+ newestFirst />
+
+