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.
43 lines
1.7 KiB
TypeScript
43 lines
1.7 KiB
TypeScript
import * as React from "react";
|
||
import { FunctionComponent } from "react";
|
||
import { getPlayerDisplayName, PlayerSummary } from "@mancala/core";
|
||
import { useTranslation } from "react-i18next";
|
||
import { Link } from "react-router-dom";
|
||
import MiniBoard, { getStores } from "./MiniBoard";
|
||
|
||
// A game as a card: the players with the score, a mini board, a status pill and details. Links to the game.
|
||
const GameCard: FunctionComponent<{
|
||
id: string,
|
||
player1: PlayerSummary,
|
||
player2: PlayerSummary,
|
||
board: number[],
|
||
// Show player 2's side at the bottom.
|
||
revert?: boolean,
|
||
status: string,
|
||
// Class of the status pill: "live", "win", "lose" or "".
|
||
statusKind: string,
|
||
details: string,
|
||
}> = ({ id, player1, player2, board, revert, status, statusKind, details }) => {
|
||
const { t } = useTranslation();
|
||
const name = (player: PlayerSummary) => getPlayerDisplayName(player, t) ?? t("Anonymous");
|
||
const [bottomPlayer, topPlayer] = revert ? [player2, player1] : [player1, player2];
|
||
const stores = getStores(board, revert);
|
||
return (
|
||
<Link className="card" to={`/game/${id}`}
|
||
aria-label={`${name(topPlayer)} ${stores.top} – ${stores.bottom} ${name(bottomPlayer)}, ${status}`}>
|
||
<div className="vs">
|
||
<span className="pn">{name(topPlayer)}</span>
|
||
<span className="score">{`${stores.top} – ${stores.bottom}`}</span>
|
||
<span className="pn r">{name(bottomPlayer)}</span>
|
||
</div>
|
||
<MiniBoard board={board} revert={revert} />
|
||
<div className="meta">
|
||
<span className={"pill " + statusKind}>{status}</span>
|
||
<span>{details}</span>
|
||
</div>
|
||
</Link>
|
||
);
|
||
};
|
||
|
||
export default GameCard;
|