42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { Link } from "wouter";
|
|
import type { ServerGame } from "../../shared/game";
|
|
import { formatRelativeTime, formatTimeSpan } from "../../shared/time";
|
|
import { Button } from "./Button";
|
|
|
|
interface PastMatchProps {
|
|
game: ServerGame;
|
|
}
|
|
|
|
const PastMatch = ({ game }: PastMatchProps) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 items-center w-full @container">
|
|
<div className="w-full bg-white/10 border-white/20 border-1 rounded-md grid justify-center grid-cols-4 @max-xl:grid-cols-3 p-4">
|
|
<div className="flex-col flex">
|
|
<div className="text-white/90 text-lg">Endless</div>
|
|
<div className="text-white/50 text-lg">
|
|
{formatRelativeTime(game.finished)}
|
|
</div>
|
|
</div>
|
|
<div className="text-white/90 text-lg">
|
|
<div>Stage {game.stage}</div>
|
|
<div>
|
|
Mines Remaining:{" "}
|
|
{game.minesCount - game.isFlagged.flat().filter((f) => f).length}
|
|
</div>
|
|
</div>
|
|
<div className="text-white/80 text-lg @max-xl:hidden">
|
|
<div>Duration: {formatTimeSpan(game.finished - game.started)}</div>
|
|
</div>
|
|
<div className="flex justify-end">
|
|
{/* @ts-expect-error as is cheaply typed */}
|
|
<Button as={Link} href={`/play/${game.uuid}`} variant="outline">
|
|
Show Board
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PastMatch;
|