mancala/apps/frontend/src/components/home/ActiveGameBanner.tsx

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;