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.
46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import * as React from "react";
|
|
import { FunctionComponent, useEffect, useState } from "react";
|
|
import { FinishedGameSummary } from "@mancala/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Context } from "../../context/context";
|
|
import { formatDate, getResultPillClass, getResultText, getViewerSeat } from "../../util/GameResultText";
|
|
import GameCard from "./GameCard";
|
|
import HomeSection from "./HomeSection";
|
|
|
|
const GAME_COUNT = 3;
|
|
|
|
// The user's last finished games, each shown from their side of the board.
|
|
const RecentGamesSection: FunctionComponent<{ context: Context, userId: string }> = ({ context, userId }) => {
|
|
const { t, i18n } = useTranslation();
|
|
const [games, setGames] = useState<FinishedGameSummary[] | undefined>(undefined);
|
|
|
|
useEffect(() => {
|
|
let disposed = false;
|
|
context.authService.getAccessToken()
|
|
.then((token) => context.gameStore.getMyRecentGames(token, GAME_COUNT))
|
|
.then((recent) => !disposed && setGames(recent))
|
|
.catch((error) => console.error("(Home) Could not load recent games", error));
|
|
return () => { disposed = true; };
|
|
}, [userId]);
|
|
|
|
if (!games) return <></>;
|
|
return (
|
|
<HomeSection title={t("MyRecentGames")} subtitle={t("YourGames")} emptyText={t("NoGamesYet")}>
|
|
{games.map((game) => (
|
|
<GameCard
|
|
key={game.id}
|
|
id={game.id}
|
|
player1={game.player1}
|
|
player2={game.player2}
|
|
board={game.board}
|
|
revert={getViewerSeat(game, userId) === "player2"}
|
|
status={getResultText(game, userId, t)}
|
|
statusKind={getResultPillClass(game, userId)}
|
|
details={formatDate(game.endedAt, i18n.language)} />
|
|
))}
|
|
</HomeSection>
|
|
);
|
|
};
|
|
|
|
export default RecentGamesSection;
|