From ff0d614b1eb0b4b407da8aa0a54952d274af7fd4 Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Thu, 25 Sep 2025 03:11:18 +0900
Subject: [PATCH] Add game-list (#2087)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:
This PR adds the game-list component, which displays a player’s recent
games.
It provides basic functionality such as toggling details and viewing a
specific game, but does not yet include full UI integration.

In later PRs, this component will be shown together with the modal for
viewing player stats.

It should look like this:
<img width="443" height="393" alt="スクリーンショット 2025-09-23 10 04 19"
src="https://github.com/user-attachments/assets/0820acfc-ba61-4629-9c1b-5971458d4bb4"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

aotumuri
https://github.com/openfrontio/OpenFrontIO/pull/1758
---
 resources/lang/en.json                        |  13 ++
 .../baseComponents/stats/GameList.ts          | 150 ++++++++++++++++++
 2 files changed, 163 insertions(+)
 create mode 100644 src/client/components/baseComponents/stats/GameList.ts

diff --git a/resources/lang/en.json b/resources/lang/en.json
index ff4251dff..4f41c9347 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -647,5 +647,18 @@
   "radial_menu": {
     "delete_unit_title": "Delete Unit",
     "delete_unit_description": "Click to delete the nearest unit"
+  },
+  "game_list": {
+    "recent_games": "Recent Games",
+    "game_id": "Game ID",
+    "mode": "Mode",
+    "mode_ffa": "Free-for-All",
+    "mode_team": "Team",
+    "view": "View",
+    "details": "Details",
+    "started": "Started",
+    "map": "Map",
+    "difficulty": "Difficulty",
+    "type": "Type"
   }
 }
diff --git a/src/client/components/baseComponents/stats/GameList.ts b/src/client/components/baseComponents/stats/GameList.ts
new file mode 100644
index 000000000..83b50489b
--- /dev/null
+++ b/src/client/components/baseComponents/stats/GameList.ts
@@ -0,0 +1,150 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { PlayerGame } from "../../../../core/ApiSchemas";
+import { GameMode } from "../../../../core/game/Game";
+import { translateText } from "../../../Utils";
+
+@customElement("game-list")
+export class GameList extends LitElement {
+  static styles = css`
+    .section-title {
+      color: #888;
+      font-size: 1rem;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+    .card {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 0.5rem;
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0.5rem 1rem;
+    }
+    .title {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: white;
+    }
+    .subtle {
+      font-size: 0.75rem;
+      color: #9ca3af;
+    }
+    .btn {
+      font-size: 0.875rem;
+      color: #d1d5db;
+      background: #374151;
+      padding: 0.25rem 0.75rem;
+      border-radius: 0.25rem;
+    }
+    .btn.secondary {
+      background: #4b5563;
+    }
+    .details {
+      padding: 0 1rem 0.5rem 1rem;
+      font-size: 0.75rem;
+      color: #d1d5db;
+      transition: all 0.3s ease;
+    }
+  `;
+
+  @property({ type: Array }) games: PlayerGame[] = [];
+  @property({ attribute: false }) onViewGame?: (id: string) => void;
+
+  @state() private expandedGameId: string | null = null;
+
+  private toggle(gameId: string) {
+    this.expandedGameId = this.expandedGameId === gameId ? null : gameId;
+  }
+
+  render() {
+    return html` <div class="mt-4 w-full max-w-md">
+      <div class="text-sm text-gray-400 font-semibold mb-1">
+        <div class="section-title">
+          🎮 ${translateText("game_list.recent_games")}
+        </div>
+        <div class="flex flex-col gap-2">
+          ${this.games.map(
+            (game) => html`
+              <div class="card">
+                <div class="row">
+                  <div>
+                    <div class="title">
+                      ${translateText("game_list.game_id")}: ${game.gameId}
+                    </div>
+                    <div class="subtle">
+                      ${translateText("game_list.mode")}:
+                      ${game.mode === GameMode.FFA
+                        ? translateText("game_list.mode_ffa")
+                        : html`${translateText("game_list.mode_team")}`}
+                    </div>
+                  </div>
+                  <div class="flex gap-2">
+                    <button
+                      class="btn"
+                      @click=${() => this.onViewGame?.(game.gameId)}
+                    >
+                      ${translateText("game_list.view")}
+                    </button>
+                    <button
+                      class="btn secondary"
+                      @click=${() => this.toggle(game.gameId)}
+                    >
+                      ${translateText("game_list.details")}
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="details"
+                  style="max-height:${this.expandedGameId === game.gameId
+                    ? "200px"
+                    : "0"}; ${this.expandedGameId === game.gameId
+                    ? ""
+                    : "padding-top:0; padding-bottom:0;"}"
+                >
+                  <div>
+                    <span class="title" style="font-size:0.75rem;"
+                      >${translateText("game_list.started")}:</span
+                    >
+                    ${new Date(game.start).toLocaleString()}
+                  </div>
+                  <div>
+                    <span class="title" style="font-size:0.75rem;"
+                      >${translateText("game_list.mode")}:</span
+                    >
+                    ${game.mode === GameMode.FFA
+                      ? translateText("game_list.mode_ffa")
+                      : translateText("game_list.mode_team")}
+                  </div>
+                  <div>
+                    <span class="title" style="font-size:0.75rem;"
+                      >${translateText("game_list.map")}:</span
+                    >
+                    ${game.map}
+                  </div>
+                  <div>
+                    <span class="title" style="font-size:0.75rem;"
+                      >${translateText("game_list.difficulty")}:</span
+                    >
+                    ${game.difficulty}
+                  </div>
+                  <div>
+                    <span class="title" style="font-size:0.75rem;"
+                      >${translateText("game_list.type")}:</span
+                    >
+                    ${game.type}
+                  </div>
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+    </div>`;
+  }
+}