Halit Aksoy
9619825605
The game in progress comes first with a large mini board; live, popular and recent games are grids of cards with the score, a mini board and a status pill. Live and popular games are shown together; live games are hidden while nothing is being played.
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { getPlayerDisplayName, LiveGameSummary } from "@mancala/core";
|
|
import { useTranslation } from "react-i18next";
|
|
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<{
|
|
game: LiveGameSummary,
|
|
userId: string,
|
|
onContinue: () => void,
|
|
}> = ({ game, userId, onContinue }) => {
|
|
const { t } = useTranslation();
|
|
const opponent = game.player1.userId === userId ? game.player2 : game.player1;
|
|
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 (
|
|
<section className="hero" aria-label={t("GameInProgress")}>
|
|
<div>
|
|
<span className="pill live">{t("GameInProgress")}</span>
|
|
<h1>{t("GameWithOpponent", { name: getPlayerDisplayName(opponent, t) ?? t("Anonymous") })}</h1>
|
|
<p>{details}</p>
|
|
<div className="row">
|
|
<button className="btn pri" onClick={onContinue}>{t("Continue")}</button>
|
|
</div>
|
|
</div>
|
|
<Link className="hero-board" to={`/game/${game.id}`} aria-label={t("OpenGame")}>
|
|
<MiniBoard board={game.board} revert={revert} large />
|
|
</Link>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ActiveGameBanner;
|