- void this.viewGame(id)}
- >
-
+ - 🎮 - ${translateText("game_list.recent_games")} -
-
-
`;
- }
-}
diff --git a/src/client/components/baseComponents/stats/GameTypeLabels.ts b/src/client/components/baseComponents/stats/GameTypeLabels.ts
new file mode 100644
index 000000000..97c604faf
--- /dev/null
+++ b/src/client/components/baseComponents/stats/GameTypeLabels.ts
@@ -0,0 +1,57 @@
+import { GameMode } from "../../../../core/game/Game";
+import { translateText } from "../../../Utils";
+
+// Shared game-type labelling for the paginated history lists (clan + player).
+// Both ClanGame and PublicPlayerGame satisfy this structural shape, so the
+// label logic lives in one place and can't drift between the two views.
+export type GameTypeFields = {
+ mode?: string;
+ playerTeams?: string | null;
+ rankedType?: string;
+};
+
+// FFA is "no team grouping". Match the server's `GameMode.FFA` enum literal
+// first, then fall back to an absent `playerTeams` ONLY when `mode` itself is
+// missing (older rows / server bug). Crucially we do NOT treat `playerTeams
+// === null` as FFA on its own: legacy Team games store `player_teams = NULL`
+// (the server buckets those into "team"), so a null-with-a-mode row is still a
+// Team game and must not be relabelled FFA.
+export function isFfa(game: GameTypeFields): boolean {
+ if (game.mode === GameMode.FFA) return true;
+ if (
+ game.mode === undefined &&
+ (game.playerTeams === null || game.playerTeams === undefined)
+ ) {
+ return true;
+ }
+ return false;
+}
+
+// FFA / Duos / 7 Teams / Humans vs Nations / Ranked 1v1 — derived from the same
+// fields the bucket filter uses, so the label always agrees with the active tab.
+export function formatGameType(game: GameTypeFields): string {
+ if (game.rankedType && game.rankedType !== "unranked") {
+ // `rankedType` (e.g. "1v1") is a server-authoritative token interpolated
+ // verbatim — there is only one value today and it reads identically in
+ // every locale. If more ranked variants appear, map them through keys.
+ return translateText("clan_modal.history_type_ranked", {
+ ranked: game.rankedType,
+ });
+ }
+ if (isFfa(game)) {
+ return translateText("clan_modal.history_type_ffa");
+ }
+ const pt = game.playerTeams;
+ if (pt === "Humans Vs Nations") {
+ return translateText("clan_modal.history_type_hvn");
+ }
+ if (pt === "Duos" || pt === "Trios" || pt === "Quads") {
+ return translateText(`clan_modal.history_type_${pt.toLowerCase()}`);
+ }
+ if (pt && /^\d+$/.test(pt)) {
+ return translateText("clan_modal.history_type_n_teams", {
+ count: Number(pt),
+ });
+ }
+ return translateText("clan_modal.history_type_team");
+}
diff --git a/src/client/components/baseComponents/stats/PlayerGameHistoryView.ts b/src/client/components/baseComponents/stats/PlayerGameHistoryView.ts
new file mode 100644
index 000000000..26ba36d87
--- /dev/null
+++ b/src/client/components/baseComponents/stats/PlayerGameHistoryView.ts
@@ -0,0 +1,541 @@
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+ type PlayerGameModeFilter,
+ type PlayerGameTypeFilter,
+ type PublicPlayerGame,
+} from "../../../../core/ApiSchemas";
+import { GameMapType } from "../../../../core/game/Game";
+import { fetchPublicPlayerGames } from "../../../Api";
+import { GameInfoModal } from "../../../GameInfoModal";
+import { terrainMapFileLoader } from "../../../TerrainMapFileLoader";
+import { getMapName, renderDuration, translateText } from "../../../Utils";
+import { renderLoadingSpinner } from "../../BaseModal";
+import "../../CopyButton";
+import {
+ formatAbsoluteTime,
+ formatDayHeader,
+ groupByDay,
+} from "./GameHistoryDates";
+import { formatGameType } from "./GameTypeLabels";
+
+type TypeKey = PlayerGameTypeFilter | "all";
+type ModeKey = PlayerGameModeFilter | "all";
+
+// Top row — game-type split (orthogonal to the mode row below). "All" reuses
+// the clan filter label; the rest are account-modal-specific.
+const TYPE_TABS: { key: TypeKey; labelKey: string }[] = [
+ { key: "all", labelKey: "clan_modal.history_filter_all" },
+ { key: "public", labelKey: "account_modal.games_type_public" },
+ { key: "private", labelKey: "account_modal.games_type_private" },
+ { key: "singleplayer", labelKey: "account_modal.games_type_singleplayer" },
+];
+
+// Bottom row — mode buckets. Mirrors the clan history filter exactly (FFA and
+// Team reuse the type-label keys; HvN/Ranked have shorter filter labels).
+const MODE_TABS: { key: ModeKey; labelKey: string }[] = [
+ { key: "all", labelKey: "clan_modal.history_filter_all" },
+ { key: "ffa", labelKey: "clan_modal.history_type_ffa" },
+ { key: "team", labelKey: "clan_modal.history_type_team" },
+ { key: "hvn", labelKey: "clan_modal.history_filter_hvn" },
+ { key: "ranked", labelKey: "clan_modal.history_filter_ranked" },
+];
+
+// Cache survives a tab switch within the modal: keep the full accumulated list
+// plus the cursor + both active filters so re-entering the Games tab restores
+// the scroll position the user had built up.
+export type PlayerGameHistoryCache = {
+ publicId: string;
+ typeFilter: TypeKey;
+ modeFilter: ModeKey;
+ games: PublicPlayerGame[];
+ nextCursor: string | null;
+};
+
+@customElement("player-game-history-view")
+export class PlayerGameHistoryView extends LitElement {
+ createRenderRoot() {
+ return this;
+ }
+
+ @property() publicId = "";
+ @property({ type: Object }) cachedState: PlayerGameHistoryCache | null = null;
+
+ @state() private games: PublicPlayerGame[] = [];
+ @state() private nextCursor: string | null = null;
+ @state() private loading = false;
+ // Distinct from `loading` because it controls the inline footer spinner
+ // rather than replacing the whole list with a centred spinner.
+ @state() private loadingMore = false;
+ @state() private loadState: "ok" | "failed" = "ok";
+ @state() private appendFailed = false;
+ @state() private typeFilter: TypeKey = "all";
+ @state() private modeFilter: ModeKey = "all";
+ private asyncGeneration = 0;
+ private sentinel: HTMLElement | null = null;
+ private observer: IntersectionObserver | null = null;
+ // Memoise grouping against the current `games` reference so re-renders
+ // triggered by unrelated state (e.g. `loadingMore` flipping) don't re-walk
+ // the accumulated list each time.
+ private groupedFor: PublicPlayerGame[] | null = null;
+ private grouped: ReturnType
- ${this.games.map(
- (game) => html`
-
-
-
- `,
- )}
-
-
-
-
-
-
-
-
-
-
- ${new Date(game.start).toLocaleDateString()}
-
-
- ${translateText("game_list.mode")}:
- ${game.mode === GameMode.FFA
- ? translateText("game_mode.ffa")
- : html`${translateText("game_mode.teams")}`}
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${translateText("game_list.game_id")}
-
-
-
-
- ${translateText("game_list.map")}
-
- ${game.map}
-
-
-
- ${translateText("game_list.difficulty")}
-
- ${game.difficulty}
-
-
-
- ${translateText("game_list.type")}
-
- ${game.type}
-
+ ${this.renderFilters()}${this.renderBody()}
+
`;
+ }
+
+ private renderFilters(): TemplateResult {
+ return html`
+
+ ${this.renderFilterRow(TYPE_TABS, this.typeFilter, (k) =>
+ this.setTypeFilter(k as TypeKey),
+ )}
+ ${this.renderFilterRow(MODE_TABS, this.modeFilter, (k) =>
+ this.setModeFilter(k as ModeKey),
+ )}
+
+ `;
+ }
+
+ private renderFilterRow(
+ tabs: { key: string; labelKey: string }[],
+ active: string,
+ onSelect: (key: string) => void,
+ ): TemplateResult {
+ return html`
+
+ ${tabs.map((tab) => {
+ const isActive = active === tab.key;
+ // "All" gets a full row on mobile (basis-full) and normal sizing on
+ // sm+. The others use basis-20 so longer labels stay comfortable and
+ // flex-wrap drops them to a second line when needed.
+ const basis =
+ tab.key === "all" ? "basis-full sm:basis-20" : "basis-20";
+ return html`
+
+ `;
+ })}
+
+ `;
+ }
+
+ private renderBody(): TemplateResult {
+ if (this.loading && this.games.length === 0) {
+ return renderLoadingSpinner();
+ }
+ if (this.loadState === "failed") {
+ return html`
+
+
+ `;
+ }
+ if (this.games.length === 0) {
+ return html`
+ + ${translateText("clan_modal.history_unavailable")} +
+ +
+
+ `;
+ }
+
+ // Group consecutive games by their start day. Cached against the `games`
+ // reference; `load()` always assigns a fresh array, so identity comparison
+ // is safe.
+ if (this.groupedFor !== this.games) {
+ this.grouped = groupByDay(this.games);
+ this.groupedFor = this.games;
+ }
+ const groups = this.grouped;
+ return html`
+ + ${translateText("clan_modal.history_empty")} +
+
+ ${groups.map(
+ (group) => html`
+
+ `;
+ }
+
+ private renderScrollFooter(): TemplateResult {
+ if (this.nextCursor === null) {
+ return html`
+
+
+ `,
+ )}
+ ${this.renderScrollFooter()}
+
+
+
+ + ${formatDayHeader(group.day)} +
+ +
+ ${group.items.map((game) => this.renderGameRow(game))}
+
+
+ ${translateText("clan_modal.history_end_of_history")}
+
+ `;
+ }
+ if (this.appendFailed) {
+ return html`
+
+
+ `;
+ }
+ // Sentinel drives auto-load; the spinner sits adjacent to it (not *as* it)
+ // so the sentinel node identity stays stable across pages — otherwise every
+ // fetch tears down and recreates the IntersectionObserver.
+ return html`
+ + ${translateText("clan_modal.history_load_more_failed")} +
+ +
+
+ ${this.loadingMore ? renderLoadingSpinner() : ""}
+
+ `;
+ }
+
+ private renderGameRow(game: PublicPlayerGame): TemplateResult {
+ // getMapData() throws for unknown map values — guard so an unmapped server
+ // response doesn't tank the whole history view.
+ let mapWebpPath: string | null = null;
+ if (game.map) {
+ try {
+ mapWebpPath = terrainMapFileLoader.getMapData(
+ game.map as GameMapType,
+ ).webpPath;
+ } catch {
+ mapWebpPath = null;
+ }
+ }
+ const mapDisplayName = game.map ? (getMapName(game.map) ?? game.map) : null;
+
+ return html`
+
+ ${mapWebpPath
+ ? html`
+ `;
+ }
+
+ private renderField(label: string, value: string): TemplateResult {
+ return html`
+
+ 
+
+ ${mapDisplayName
+ ? html`
`
+ : ""}
+
+ ${mapDisplayName}
+
`
+ : ""}
+
+ ${this.renderResultBadge(game)}
+
+
+ ${formatAbsoluteTime(game.start)}
+
+
+
+
+ ${translateText("clan_modal.history_game_id")}:
+
+
+
+
+
+
+ ${this.renderField(
+ translateText("account_modal.games_clan_tag"),
+ game.clanTag ?? "—",
+ )}
+ ${this.renderField(
+ translateText("account_modal.games_username"),
+ game.username,
+ )}
+
+
+ ${this.renderField(
+ translateText("clan_modal.history_game_type"),
+ formatGameType(game),
+ )}
+ ${mapWebpPath
+ ? ""
+ : this.renderField(
+ translateText("clan_modal.history_map"),
+ mapDisplayName ?? "—",
+ )}
+ ${this.renderField(
+ translateText("clan_modal.history_players"),
+ game.totalPlayers === null ? "—" : `${game.totalPlayers}`,
+ )}
+ ${this.renderField(
+ translateText("clan_modal.history_duration"),
+ renderDuration(game.durationSeconds),
+ )}
+
+
+
+ `;
+ }
+
+ // The player's own outcome. "incomplete" (no recorded winner) gets a neutral
+ // badge rather than collapsing into Defeat, so an unfinished game isn't
+ // mislabelled as a loss in a personal history.
+ private renderResultBadge(game: PublicPlayerGame): TemplateResult {
+ let label: string;
+ let tint: string;
+ if (game.result === "victory") {
+ label = translateText("clan_modal.history_result_victory");
+ tint = "text-white bg-green-600 border-green-500";
+ } else if (game.result === "defeat") {
+ label = translateText("clan_modal.history_result_defeat");
+ tint = "text-white bg-red-600 border-red-500";
+ } else {
+ label = translateText("account_modal.games_result_incomplete");
+ tint = "text-white bg-gray-500 border-gray-400";
+ }
+ return html`${label}`;
+ }
+}
diff --git a/src/client/components/clan/ClanGameHistoryView.ts b/src/client/components/clan/ClanGameHistoryView.ts
index 657e0c826..cc501f300 100644
--- a/src/client/components/clan/ClanGameHistoryView.ts
+++ b/src/client/components/clan/ClanGameHistoryView.ts
@@ -1,6 +1,6 @@
import { html, LitElement, type TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators.js";
-import { GameMapType, GameMode } from "../../../core/game/Game";
+import { GameMapType } from "../../../core/game/Game";
import {
type ClanGame,
type ClanGameFilter,
@@ -10,6 +10,12 @@ import { ClientEnv } from "../../ClientEnv";
import { terrainMapFileLoader } from "../../TerrainMapFileLoader";
import { getMapName, renderDuration, translateText } from "../../Utils";
import "../CopyButton";
+import {
+ formatAbsoluteTime,
+ formatDayHeader,
+ groupByDay,
+} from "../baseComponents/stats/GameHistoryDates";
+import { formatGameType, isFfa } from "../baseComponents/stats/GameTypeLabels";
import { renderLoadingSpinner, showToast } from "./ClanShared";
type FilterKey = ClanGameFilter | "all";
@@ -60,7 +66,7 @@ export class ClanGameHistoryView extends LitElement {
// triggered by unrelated state (e.g. `loadingMore` flipping) don't
// re-walk the accumulated list each time.
private groupedFor: ClanGame[] | null = null;
- private grouped: DayGroup[] = [];
+ private grouped: ReturnType
+ ${label}
+
+ ${value}
+
- ${group.games.map((game) => this.renderGameRow(game))}
+ ${group.items.map((game) => this.renderGameRow(game))}
`,
@@ -430,7 +436,7 @@ export class ClanGameHistoryView extends LitElement {
>
${this.renderField(
translateText("clan_modal.history_game_type"),
- this.formatGameType(game),
+ formatGameType(game),
)}
${mapWebpPath
? ""
@@ -585,132 +591,4 @@ export class ClanGameHistoryView extends LitElement {
}),
);
}
-
- // FFA / Duos / 7 Teams / Humans vs Nations / Ranked 1v1 — derived from
- // the same fields the bucket filter uses, so the label always agrees
- // with the active tab.
- private formatGameType(game: ClanGame): string {
- if (game.rankedType && game.rankedType !== "unranked") {
- return translateText("clan_modal.history_type_ranked", {
- ranked: game.rankedType,
- });
- }
- if (isFfa(game)) {
- return translateText("clan_modal.history_type_ffa");
- }
- const pt = game.playerTeams;
- if (pt === "Humans Vs Nations") {
- return translateText("clan_modal.history_type_hvn");
- }
- if (pt === "Duos" || pt === "Trios" || pt === "Quads") {
- return translateText(`clan_modal.history_type_${pt.toLowerCase()}`);
- }
- if (pt && /^\d+$/.test(pt)) {
- return translateText("clan_modal.history_type_n_teams", {
- count: Number(pt),
- });
- }
- return translateText("clan_modal.history_type_team");
- }
-}
-
-// FFA is "no team grouping". Match the server's `GameMode.FFA` enum
-// literal first, but fall back to absent `playerTeams` so a row that
-// arrives without the mode field (older row, server bug) still labels
-// as FFA instead of silently degrading to "Team" — which would
-// disagree with the FFA filter bucket that already routed it here.
-function isFfa(game: ClanGame): boolean {
- if (game.mode === GameMode.FFA) return true;
- if (
- game.mode === undefined &&
- (game.playerTeams === null || game.playerTeams === undefined)
- ) {
- return true;
- }
- return false;
-}
-
-function formatAbsoluteTime(iso: string): string {
- const date = new Date(iso);
- if (!Number.isFinite(date.getTime())) return iso;
- const now = new Date();
- const time = date.toLocaleTimeString(undefined, {
- hour: "2-digit",
- minute: "2-digit",
- });
- const sameDay =
- date.getFullYear() === now.getFullYear() &&
- date.getMonth() === now.getMonth() &&
- date.getDate() === now.getDate();
- if (sameDay) {
- return translateText("clan_modal.history_today_at", { time });
- }
- return `${date.toLocaleDateString()} ${time}`;
-}
-
-type DayGroup = { day: string; games: ClanGame[] };
-
-// Groups games by local-day key while preserving server order. Server
-// ordering is already newest-first, so within a group we just keep the
-// arrival order.
-function groupGamesByDay(games: ClanGame[]): DayGroup[] {
- const groups: DayGroup[] = [];
- for (const g of games) {
- const day = dayKey(g.start);
- const last = groups[groups.length - 1];
- if (last && last.day === day) {
- last.games.push(g);
- } else {
- groups.push({ day, games: [g] });
- }
- }
- return groups;
-}
-
-function dayKey(iso: string): string {
- const d = new Date(iso);
- if (!Number.isFinite(d.getTime())) return iso;
- // Use local-time YYYY-MM-DD so headers line up with the user's clock,
- // not UTC midnight (which would split late-night games into a "next
- // day" group for most timezones).
- const y = d.getFullYear();
- const m = String(d.getMonth() + 1).padStart(2, "0");
- const day = String(d.getDate()).padStart(2, "0");
- return `${y}-${m}-${day}`;
-}
-
-// Indexed by Date.getMonth() (0–11). Kept as a const list rather than
-// a switch so the translation pipeline picks up every key from a single
-// place.
-const MONTH_KEYS = [
- "common.month_jan",
- "common.month_feb",
- "common.month_mar",
- "common.month_apr",
- "common.month_may",
- "common.month_jun",
- "common.month_jul",
- "common.month_aug",
- "common.month_sep",
- "common.month_oct",
- "common.month_nov",
- "common.month_dec",
-] as const;
-
-function formatDayHeader(day: string): string {
- const d = new Date(`${day}T00:00:00`);
- if (!Number.isFinite(d.getTime())) return day;
- const now = new Date();
- const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
- const dayStart = new Date(d.getFullYear(), d.getMonth(), d.getDate());
- const diffDays = Math.round(
- (today.getTime() - dayStart.getTime()) / (24 * 60 * 60 * 1000),
- );
- if (diffDays === 0) return translateText("clan_modal.history_today");
- if (diffDays === 1) return translateText("clan_modal.history_yesterday");
- // "17 May 2026" — weekday dropped (no translation coverage) and the
- // month rendered through our own translation keys instead of
- // toLocaleDateString so other locales can swap it cleanly.
- const month = translateText(MONTH_KEYS[d.getMonth()]);
- return `${d.getDate()} ${month} ${d.getFullYear()}`;
}
diff --git a/src/core/ApiSchemas.ts b/src/core/ApiSchemas.ts
index 828306b2c..bb8dad117 100644
--- a/src/core/ApiSchemas.ts
+++ b/src/core/ApiSchemas.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
import { base64urlToUuid } from "./Base64";
import { ClanTagSchema } from "./Schemas";
import { BigIntStringSchema, PlayerStatsSchema } from "./StatsSchemas";
-import { Difficulty, GameMode, GameType, RankedType } from "./game/Game";
+import { Difficulty, GameMode, RankedType } from "./game/Game";
function stripClanTagFromUsername(username: string): string {
return username.replace(/^\s*\[[a-zA-Z0-9]{2,5}\]\s*/u, "").trim();
@@ -154,25 +154,64 @@ export const PlayerStatsTreeSchema = z.object({
});
export type PlayerStatsTree = z.infer