Add PlayerInfoModal

src/client/AccountModal.ts

@@ -1,9 +1,23 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, query, state } from "lit/decorators.js";
-import { UserMeResponse } from "../core/ApiSchemas";
+import {
+  PlayerGame,
+  PlayerStatsTree,
+  UserMeResponse,
+} from "../core/ApiSchemas";
+import "./components/baseComponents/stats/DiscordUserHeader";
+import "./components/baseComponents/stats/GameList";
+import "./components/baseComponents/stats/PlayerStatsTable";
+import "./components/baseComponents/stats/PlayerStatsTree";
 import "./components/Difficulties";
 import "./components/PatternButton";
-import { discordLogin, getApiBase, getUserMe, logOut } from "./jwt";
+import {
+  discordLogin,
+  fetchPlayerById,
+  getApiBase,
+  getUserMe,
+  logOut,
+} from "./jwt";
 import { isInIframe, translateText } from "./Utils";
 
 @customElement("account-modal")
@@ -17,9 +31,30 @@ export class AccountModal extends LitElement {
 
   private loggedInEmail: string | null = null;
   private loggedInDiscord: string | null = null;
+  private userMeResponse: UserMeResponse | null = null;
+  private statsTree: PlayerStatsTree | null = null;
+  private recentGames: PlayerGame[] = [];
 
   constructor() {
     super();
+
+    document.addEventListener("userMeResponse", (event: Event) => {
+      const customEvent = event as CustomEvent;
+      if (customEvent.detail) {
+        this.userMeResponse = customEvent.detail as UserMeResponse;
+        const playerId = this.userMeResponse?.player?.publicId;
+        if (playerId) {
+          this.loadFromApi(playerId);
+        } else {
+          this.statsTree = null;
+          this.recentGames = [];
+        }
+      } else {
+        this.statsTree = null;
+        this.recentGames = [];
+        this.requestUpdate();
+      }
+    });
   }
 
   createRenderRoot() {
@@ -47,15 +82,39 @@ export class AccountModal extends LitElement {
     }
   }
 
+  private viewGame(gameId: string): void {
+    this.close();
+    const path = location.pathname;
+    const { search } = location;
+    const hash = `#join=${encodeURIComponent(gameId)}`;
+    const newUrl = `${path}${search}${hash}`;
+
+    history.pushState({ join: gameId }, "", newUrl);
+    window.dispatchEvent(new HashChangeEvent("hashchange"));
+  }
+
   private renderLoggedInDiscord() {
     return html`
       <div class="p-6">
-        <div class="mb-4">
-          <p class="text-white text-center mb-4">
+        <div class="mb-4 text-center">
+          <p class="text-white mb-4">
             Logged in with Discord as ${this.loggedInDiscord}
           </p>
+          ${this.logoutButton()}
+        </div>
+        <div class="flex flex-col items-center mt-2 mb-4">
+          <discord-user-header
+            .data=${this.userMeResponse?.user?.discord ?? null}
+          ></discord-user-header>
+          <player-stats-tree-view
+            .statsTree=${this.statsTree}
+          ></player-stats-tree-view>
+          <hr class="w-2/3 border-gray-600 my-2" />
+          <game-list
+            .games=${this.recentGames}
+            .onViewGame=${(id: string) => this.viewGame(id)}
+          ></game-list>
         </div>
-        ${this.logoutButton()}
       </div>
     `;
   }
@@ -228,6 +287,24 @@ export class AccountModal extends LitElement {
     // Refresh the page after logout to update the UI state
     window.location.reload();
   }
+
+  private async loadFromApi(playerId: string): Promise<void> {
+    try {
+      const data = await fetchPlayerById(playerId);
+      if (!data) {
+        this.requestUpdate();
+        return;
+      }
+
+      this.recentGames = data.games;
+      this.statsTree = data.stats;
+
+      this.requestUpdate();
+    } catch (err) {
+      console.warn("Failed to load player data:", err);
+      this.requestUpdate();
+    }
+  }
 }
 
 @customElement("account-button")