feat(web): show profile picture avatar in game page header

Fetches /api/me with the stored fs_token and renders a 32px circular avatar in hud-right. Shows the profile photo when set, or the first letter of the username as initials otherwise. Hidden when not signed in. Clicking the avatar navigates to /account. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-15 17:37:57 -07:00
parent 8a145154db
commit f6be961419
3 changed files with 51 additions and 0 deletions
@@ -663,5 +663,31 @@ function onBoardDblClick(e) {
    if (!smartMove(hit.pileName, fromIndex)) flashIllegal([cards[fromIndex].id]);
 }

+// ── Avatar ────────────────────────────────────────────────────────────────────
+async function loadAvatar() {
+    const token = localStorage.getItem("fs_token");
+    if (!token) return;
+    try {
+        const res = await fetch("/api/me", {
+            headers: { Authorization: "Bearer " + token },
+        });
+        if (!res.ok) return;
+        const me = await res.json();
+        const link = document.getElementById("hud-avatar");
+        const img  = document.getElementById("hud-avatar-img");
+        const init = document.getElementById("hud-avatar-initials");
+        link.style.display = "flex";
+        if (me.avatar_url) {
+            img.src = me.avatar_url;
+            img.style.display = "block";
+            init.style.display = "none";
+        } else {
+            img.style.display = "none";
+            init.textContent = (me.username || "P")[0].toUpperCase();
+        }
+    } catch { /* not signed in — avatar stays hidden */ }
+}
+
 // ── Start ─────────────────────────────────────────────────────────────────────
 bootstrap().catch(console.error);
+loadAvatar();