diff --git a/apps/frontend/src/components/Button.tsx b/apps/frontend/src/components/Button.tsx
deleted file mode 100644
index 105917e..0000000
--- a/apps/frontend/src/components/Button.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from "react";
-import { FunctionComponent } from "react";
-import { Context } from "../context/context";
-import { getColorByBrightness } from "@mancala/core";
-
-const Button: FunctionComponent<{
- context: Context;
- text: String;
- onClick: () => void;
- color: string;
-}> = ({ context, text, color, onClick }) => {
- const textColor = getColorByBrightness(
- color,
- context.themeManager.theme.textColor,
- context.themeManager.theme.textLightColor
- );
- return (
-
- );
-};
-
-export default Button;
diff --git a/apps/frontend/src/components/home/ActiveGameBanner.tsx b/apps/frontend/src/components/home/ActiveGameBanner.tsx
index e8d0b78..8b6219c 100644
--- a/apps/frontend/src/components/home/ActiveGameBanner.tsx
+++ b/apps/frontend/src/components/home/ActiveGameBanner.tsx
@@ -1,49 +1,39 @@
import * as React from "react";
import { FunctionComponent } from "react";
-import { getColorByBrightness, getPlayerDisplayName, LiveGameSummary } from "@mancala/core";
+import { getPlayerDisplayName, LiveGameSummary } from "@mancala/core";
import { useTranslation } from "react-i18next";
-import { Context } from "../../context/context";
-import Button from "../Button";
+import { Link } from "react-router-dom";
+import MiniBoard, { getStores } from "./MiniBoard";
// Shown at the top of the home page while the user has a game in progress.
const ActiveGameBanner: FunctionComponent<{
- context: Context,
game: LiveGameSummary,
userId: string,
onContinue: () => void,
-}> = ({ context, game, userId, onContinue }) => {
+}> = ({ game, userId, onContinue }) => {
const { t } = useTranslation();
- const theme = context.themeManager.theme;
- const textColor = getColorByBrightness(theme.boardColor, theme.textColor, theme.textLightColor);
const opponent = game.player1.userId === userId ? game.player2 : game.player1;
- const turn = game.turnPlayerId === userId ? t("YourTurn") : t("OpponentTurn");
+ const revert = game.player2.userId === userId;
+ const stores = getStores(game.board, revert);
+ const details = [
+ game.turnPlayerId === userId ? t("YourTurn") : t("OpponentTurn"),
+ t("MoveNumber", { number: game.moveCount }),
+ t("StoreScores", { mine: stores.bottom, theirs: stores.top }),
+ ].join(" · ");
return (
-
+
-
{t("GameInProgress")}
-
{`${t("Versus")} ${getPlayerDisplayName(opponent, t) ?? t("Anonymous")} · ${turn}`}
+
{t("GameInProgress")}
+
{t("GameWithOpponent", { name: getPlayerDisplayName(opponent, t) ?? t("Anonymous") })}
+
{details}
+
+
+
+ {name(topPlayer)}
+ {`${stores.top} – ${stores.bottom}`}
+ {name(bottomPlayer)}
+
+
+
+ {status}
+ {details}
+
+
+ );
+};
+
+export default GameCard;
diff --git a/apps/frontend/src/components/home/GamePreviewCard.tsx b/apps/frontend/src/components/home/GamePreviewCard.tsx
deleted file mode 100644
index 3708e03..0000000
--- a/apps/frontend/src/components/home/GamePreviewCard.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from "react";
-import { FunctionComponent, useMemo } from "react";
-import {
- BoardViewModelFactory,
- createGameFromBoard,
- getColorByBrightness,
- getPlayerDisplayName,
- PitViewModelFactory,
- PlayerSummary,
-} from "@mancala/core";
-import { useTranslation } from "react-i18next";
-import { Context } from "../../context/context";
-import BoardView from "../board/BoardView";
-
-export const PREVIEW_BOARD_WIDTH = 260;
-
-// A game as a card: the players, the real board at preview size, and a few lines of details.
-const GamePreviewCard: FunctionComponent<{
- context: Context,
- id: string,
- player1: PlayerSummary,
- player2: PlayerSummary,
- board: number[],
- // Highlighted as the player to move.
- turnPlayerId?: string,
- // Show player 2's side at the bottom.
- revert?: boolean,
- lines: string[],
- onClick: () => void,
-}> = ({ context, id, player1, player2, board, turnPlayerId, revert, lines, onClick }) => {
- const { t } = useTranslation();
- const theme = context.themeManager.theme;
- const textColor = getColorByBrightness(theme.appBarBgColor, theme.textColor, theme.textLightColor);
-
- const game = useMemo(() => createGameFromBoard({
- id, player1Id: player1.userId, player2Id: player2.userId, turnPlayerId: turnPlayerId ?? player1.userId, board,
- }), [id, player1.userId, player2.userId, turnPlayerId, board.join(",")]);
- const boardViewModel = BoardViewModelFactory.create(id, board.map((stoneCount, index) => PitViewModelFactory.create({
- id: String(index), stoneCount, stoneColor: theme.stoneColor, pitColor: theme.pitColor,
- })));
-
- const name = (player: PlayerSummary) => getPlayerDisplayName(player, t) ?? t("Anonymous");
- const nameStyle = (player: PlayerSummary): React.CSSProperties =>
- ({ fontWeight: player.userId === turnPlayerId ? "bold" : "normal" });
- const [bottomPlayer, topPlayer] = revert ? [player2, player1] : [player1, player2];
-
- return (
-
-
- {name(topPlayer)}
- {t("Versus")}
- {name(bottomPlayer)}
-
-
-
-
- {lines.map((line, index) =>
{line}
)}
-
-
{props.title}
- {isEmpty && props.emptyText ? {props.emptyText}
: {props.children}
}
-
-
+ <>
+ {props.title}
{props.subtitle}
+ {isEmpty && props.emptyText ? {props.emptyText}
: {props.children}
}
+
);
};
diff --git a/apps/frontend/src/components/home/LiveGamesSection.tsx b/apps/frontend/src/components/home/LiveGamesSection.tsx
index a52ffec..7d8ad65 100644
--- a/apps/frontend/src/components/home/LiveGamesSection.tsx
+++ b/apps/frontend/src/components/home/LiveGamesSection.tsx
@@ -7,80 +7,42 @@ import {
LiveGameSummary,
} from "@mancala/core";
import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
import { Context } from "../../context/context";
-import { PopularGames } from "../../store/GameStore";
-import { formatDate, getResultText, getScoreText } from "../../util/GameResultText";
-import GamePreviewCard from "./GamePreviewCard";
+import GameCard from "./GameCard";
import HomeSection from "./HomeSection";
-const GAME_COUNT = 5;
-
-// Live games, updated as they are played; when nothing is live, the most watched finished games.
+// Live games, updated as they are played; hidden while nothing is being played.
const LiveGamesSection: FunctionComponent<{ context: Context }> = ({ context }) => {
- const { t, i18n } = useTranslation();
- const navigate = useNavigate();
- const [popular, setPopular] = useState(undefined);
+ const { t } = useTranslation();
+ const [games, setGames] = useState([]);
useEffect(() => {
- let disposed = false;
- const loadPopular = () => context.gameStore.getPopularGames(GAME_COUNT)
- .then((games) => !disposed && setPopular(games))
- .catch((error) => console.error("(Home) Could not load popular games", error));
- const onLiveGames = (message: { games: LiveGameSummary[] }) => {
- if (message.games.length > 0) setPopular({ kind: "live", games: message.games });
- else loadPopular();
- };
+ const onLiveGames = (message: { games: LiveGameSummary[] }) => setGames(message.games);
// Subscribe whenever the connection is (re)established; the server forgets subscriptions of offline users.
const subscribe = () => context.rtmt.sendMessage(channel_subscribe_live_games, {});
context.rtmt.addMessageListener(channel_on_live_games, onLiveGames);
context.rtmt.on("open", subscribe);
if (context.rtmt.connectionState === "connected") subscribe();
- loadPopular();
return () => {
- disposed = true;
context.rtmt.off("open", subscribe);
context.rtmt.removeMessageListener(channel_on_live_games, onLiveGames);
if (context.rtmt.connectionState === "connected") context.rtmt.sendMessage(channel_unsubscribe_live_games, {});
};
}, []);
- if (!popular) return <>;
- const openGame = (id: string) => navigate(`/game/${id}`);
-
- if (popular.kind === "live") {
- return (
-
- {popular.games.map((game) => (
- openGame(game.id)} />
- ))}
-
- );
- }
+ if (games.length === 0) return <>;
return (
-
- {popular.games.map((game) => (
-
+ {games.map((game) => (
+ openGame(game.id)} />
+ status={t("Live")}
+ statusKind="live"
+ details={`${t("Watching", { count: game.spectatorCount })} · ${t("MoveNumber", { number: game.moveCount })}`} />
))}
);
diff --git a/apps/frontend/src/components/home/MiniBoard.tsx b/apps/frontend/src/components/home/MiniBoard.tsx
new file mode 100644
index 0000000..b6e1332
--- /dev/null
+++ b/apps/frontend/src/components/home/MiniBoard.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { FunctionComponent } from "react";
+
+const PLAYER1_PITS = [0, 1, 2, 3, 4, 5];
+const PLAYER2_PITS = [7, 8, 9, 10, 11, 12];
+const PLAYER1_STORE = 6;
+const PLAYER2_STORE = 13;
+
+// Stone counts on a small board, as the bottom player sees it. Empty pits show no number.
+const MiniBoard: FunctionComponent<{ board: number[], revert?: boolean, large?: boolean }> = ({ board, revert, large }) => {
+ const [topPits, topStore, bottomPits, bottomStore] = revert
+ ? [PLAYER1_PITS, PLAYER1_STORE, PLAYER2_PITS, PLAYER2_STORE]
+ : [PLAYER2_PITS, PLAYER2_STORE, PLAYER1_PITS, PLAYER1_STORE];
+ const pit = (index: number) => {board[index] || ""}
;
+ return (
+
+
{board[topStore]}
+ {[...topPits].reverse().map(pit)}
+
{board[bottomStore]}
+ {bottomPits.map(pit)}
+