From d3fb7544b86776432fa5dabb7a93b44c240f66af Mon Sep 17 00:00:00 2001
From: Aotumuri <aotumuri.yt@gmail.com>
Date: Fri, 26 Sep 2025 08:58:01 +0900
Subject: [PATCH] Add discord-user-header (#2084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:
This PR adds a component to display a Discord user’s avatar and name.
It will not be directly visible in this PR, but in other PRs it will be
shown together with the modal for viewing stats.

It should look like this:
<img width="145" height="67" alt="スクリーンショット 2025-09-23 9 48 04"
src="https://github.com/user-attachments/assets/dd1b3abe-66e5-4961-8e7a-66c1f968a9a6"
/>

## 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

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
---
 resources/lang/en.json                        |  3 +
 .../baseComponents/stats/DiscordUserHeader.ts | 78 +++++++++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/client/components/baseComponents/stats/DiscordUserHeader.ts

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 4120d972f..65d4bfb47 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -648,6 +648,9 @@
     "delete_unit_title": "Delete Unit",
     "delete_unit_description": "Click to delete the nearest unit"
   },
+  "discord_user_header": {
+    "avatar_alt": "Avatar"
+  },
   "player_stats_table": {
     "building_stats": "Building Statistics",
     "ship_arrivals": "Ship Arrivals",
diff --git a/src/client/components/baseComponents/stats/DiscordUserHeader.ts b/src/client/components/baseComponents/stats/DiscordUserHeader.ts
new file mode 100644
index 000000000..a50c60465
--- /dev/null
+++ b/src/client/components/baseComponents/stats/DiscordUserHeader.ts
@@ -0,0 +1,78 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import type { DiscordUser } from "../../../../core/ApiSchemas";
+import { translateText } from "../../../Utils";
+
+@customElement("discord-user-header")
+export class DiscordUserHeader extends LitElement {
+  static styles = css`
+    .wrap {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .avatarFrame {
+      padding: 3px;
+      border-radius: 9999px;
+      background: #6b7280; /* bg-gray-500 */
+    }
+    .avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 9999px;
+      display: block;
+    }
+    .name {
+      font-weight: 600;
+      color: white;
+    }
+  `;
+
+  @state() private _data: DiscordUser | null = null;
+
+  @property({ attribute: false })
+  get data(): DiscordUser | null {
+    return this._data;
+  }
+  set data(v: DiscordUser | null) {
+    this._data = v;
+    this.requestUpdate();
+  }
+
+  private get avatarUrl(): string | null {
+    const u = this._data;
+    if (!u) return null;
+    if (u.avatar) {
+      const ext = u.avatar.startsWith("a_") ? "gif" : "png";
+      return `https://cdn.discordapp.com/avatars/${u.id}/${u.avatar}.${ext}`;
+    }
+    if (u.discriminator !== undefined) {
+      const idx = Number(u.discriminator) % 5;
+      return `https://cdn.discordapp.com/embed/avatars/${idx}.png`;
+    }
+    return null;
+  }
+
+  private get discordDisplayName(): string {
+    return this._data?.username ?? "";
+  }
+
+  render() {
+    return html`
+      <div class="wrap">
+        ${this.avatarUrl
+          ? html`
+              <div class="avatarFrame">
+                <img
+                  class="avatar"
+                  src="${this.avatarUrl}"
+                  alt="${translateText("discord_user_header.avatar_alt")}"
+                />
+              </div>
+            `
+          : null}
+        <span class="name">${this.discordDisplayName}</span>
+      </div>
+    `;
+  }
+}