This commit is contained in:
Aotumuri
2025-09-04 15:23:28 +09:00
parent 1fa2685495
commit 0933175ce1
14 changed files with 1016 additions and 18 deletions
@@ -0,0 +1,80 @@
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 {
const u = this._data;
if (!u) return "";
return u.username ?? "";
}
render() {
return html`
<div class="wrap">
${this.avatarUrl
? html`
<div class="avatarFrame">
<img
class="avatar"
src="${this.avatarUrl}"
alt="${translateText("player_modal.avatar_alt")}"
/>
</div>
`
: null}
<span class="name">${this.discordDisplayName}</span>
</div>
`;
}
}
@@ -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("player_modal.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("player_modal.game_id")}: ${game.gameId}
</div>
<div class="subtle">
${translateText("player_modal.mode")}:
${game.mode === GameMode.FFA
? translateText("player_modal.mode_ffa")
: html`${translateText("player_modal.mode_team")}`}
</div>
</div>
<div class="flex gap-2">
<button
class="btn"
@click=${() => this.onViewGame?.(game.gameId)}
>
${translateText("player_modal.view")}
</button>
<button
class="btn secondary"
@click=${() => this.toggle(game.gameId)}
>
${translateText("player_modal.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("player_modal.started")}:</span
>
${new Date(game.start).toLocaleString()}
</div>
<div>
<span class="title" style="font-size:0.75rem;"
>${translateText("player_modal.mode")}:</span
>
${game.mode === GameMode.FFA
? translateText("player_modal.mode_ffa")
: translateText("player_modal.mode_team")}
</div>
<div>
<span class="title" style="font-size:0.75rem;"
>${translateText("player_modal.map")}:</span
>
${game.map}
</div>
<div>
<span class="title" style="font-size:0.75rem;"
>${translateText("player_modal.difficulty")}:</span
>
${game.difficulty}
</div>
<div>
<span class="title" style="font-size:0.75rem;"
>${translateText("player_modal.type")}:</span
>
${game.type}
</div>
</div>
</div>
`,
)}
</div>
</div>
</div>`;
}
}
@@ -0,0 +1,195 @@
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { PlayerStatsLeaf, PlayerStatsTree } from "../../../../core/ApiSchemas";
import { Difficulty, GameMode, GameType } from "../../../../core/game/Game";
import { PlayerStats } from "../../../../core/StatsSchemas";
import { renderNumber, translateText } from "../../../Utils";
import "./PlayerStatsGrid";
import "./PlayerStatsTable";
@customElement("player-stats-tree-view")
export class PlayerStatsTreeView extends LitElement {
@property({ type: Object }) statsTree?: PlayerStatsTree;
@state() selectedType: GameType = GameType.Public;
@state() selectedMode: GameMode = GameMode.FFA;
@state() selectedDifficulty: Difficulty = Difficulty.Medium;
private get availableTypes(): GameType[] {
if (!this.statsTree) return [];
return Object.keys(this.statsTree) as GameType[];
}
private get availableModes(): GameMode[] {
const typeNode = this.statsTree?.[this.selectedType];
if (!typeNode) return [];
return Object.keys(typeNode) as GameMode[];
}
private get availableDifficulties(): Difficulty[] {
const typeNode = this.statsTree?.[this.selectedType];
const modeNode = typeNode?.[this.selectedMode];
if (!modeNode) return [];
return Object.keys(modeNode) as Difficulty[];
}
private labelForMode(m: GameMode) {
return m === GameMode.FFA
? translateText("player_modal.mode_ffa")
: translateText("player_modal.mode_team");
}
createRenderRoot() {
return this;
}
private getSelectedLeaf(): PlayerStatsLeaf | null {
const typeNode = this.statsTree?.[this.selectedType];
if (!typeNode) return null;
const modeNode = typeNode[this.selectedMode];
if (!modeNode) return null;
const diffNode = modeNode[this.selectedDifficulty];
if (!diffNode) return null;
return diffNode;
}
private getDisplayedStats(): PlayerStats | null {
const leaf = this.getSelectedLeaf();
if (!leaf || !leaf.stats) return null;
return leaf.stats;
}
private setGameType(t: GameType) {
if (this.selectedType === t) return;
this.selectedType = t;
const modes = this.availableModes;
if (!modes.includes(this.selectedMode)) {
this.selectedMode = modes[0] ?? this.selectedMode;
}
const diffs = this.availableDifficulties;
if (!diffs.includes(this.selectedDifficulty)) {
this.selectedDifficulty = diffs[0] ?? this.selectedDifficulty;
}
this.requestUpdate();
}
private setMode(m: GameMode) {
if (this.selectedMode === m) return;
this.selectedMode = m;
const diffs = this.availableDifficulties;
if (!diffs.includes(this.selectedDifficulty)) {
this.selectedDifficulty = diffs[0] ?? this.selectedDifficulty;
}
this.requestUpdate();
}
private setDifficulty(d: Difficulty) {
if (this.selectedDifficulty === d) return;
this.selectedDifficulty = d;
this.requestUpdate();
}
render() {
const types = this.availableTypes;
if (types.length && !types.includes(this.selectedType)) {
this.selectedType = types[0];
}
const modes = this.availableModes;
if (modes.length && !modes.includes(this.selectedMode)) {
this.selectedMode = modes[0];
}
const diffs = this.availableDifficulties;
if (diffs.length && !diffs.includes(this.selectedDifficulty)) {
this.selectedDifficulty = diffs[0];
}
const leaf = this.getSelectedLeaf();
const wlr = leaf
? leaf.losses === 0n
? Number(leaf.wins)
: Number(leaf.wins) / Number(leaf.losses)
: 0;
return html`
<!-- Type selector -->
<div class="flex gap-2 mt-2 justify-center">
${types.map(
(t) => html`
<button
class="text-xs px-2 py-0.5 rounded border ${this.selectedType ===
t
? "border-white/60 text-white"
: "border-white/20 text-gray-300"}"
@click=${() => this.setGameType(t)}
>
${t === GameType.Public
? translateText("player_modal.public")
: t === GameType.Private
? translateText("player_modal.private")
: translateText("player_modal.singleplayer")}
</button>
`,
)}
</div>
<!-- Mode selector -->
${modes.length
? html`<div class="flex gap-2 mt-2 justify-center">
${modes.map(
(m) => html`
<button
class="text-xs px-2 py-0.5 rounded border ${this
.selectedMode === m
? "border-white/60 text-white"
: "border-white/20 text-gray-300"}"
@click=${() => this.setMode(m)}
title=${translateText("player_modal.mode")}
>
${this.labelForMode(m)}
</button>
`,
)}
</div>`
: html``}
<!-- Difficulty selector -->
${diffs.length
? html`<div class="flex gap-2 mt-2 justify-center">
${diffs.map(
(d) =>
html` <button
class="text-xs px-2 py-0.5 rounded border ${this
.selectedDifficulty === d
? "border-white/60 text-white"
: "border-white/20 text-gray-300"}"
@click=${() => this.setDifficulty(d)}
title=${translateText("player_modal.difficulty")}
>
${translateText(`difficulty.${d}`)}
</button>`,
)}
</div>`
: html``}
${leaf
? html`
<hr class="w-2/3 border-gray-600 my-2" />
<player-stats-grid
.titles=${[
translateText("player_modal.stats_wins"),
translateText("player_modal.stats_losses"),
translateText("player_modal.stats_wlr"),
translateText("player_modal.stats_games_played"),
]}
.values=${[
renderNumber(leaf.wins),
renderNumber(leaf.losses),
wlr.toFixed(2),
renderNumber(leaf.total),
]}
></player-stats-grid>
<hr class="w-2/3 border-gray-600 my-2" />
<player-stats-table
.stats=${this.getDisplayedStats()}
></player-stats-table>
`
: html``}
`;
}
}
@@ -0,0 +1,51 @@
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@customElement("player-stats-grid")
export class PlayerStatsGrid extends LitElement {
static styles = css`
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
.stat {
text-align: center;
color: white;
font-size: 1rem;
}
.stat-title {
color: #bbb;
font-size: 0.9rem;
}
.stat-value {
font-size: 1.25rem;
font-weight: bold;
}
`;
@property({ type: Array }) titles: string[] = [];
@property({ type: Array }) values: Array<string | number> = [];
render() {
return html`
<div class="grid mb-2">
${Array(4)
.fill(0)
.map(
(_, i) => html`
<div class="stat">
<div class="stat-value">${this.values[i] ?? ""}</div>
<div class="stat-title">${this.titles[i] ?? ""}</div>
</div>
`,
)}
</div>
`;
}
}
@@ -0,0 +1,196 @@
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import {
PlayerStats,
boatUnits,
bombUnits,
otherUnits,
} from "../../../../core/StatsSchemas";
import { renderNumber, translateText } from "../../../Utils";
@customElement("player-stats-table")
export class PlayerStatsTable extends LitElement {
static styles = css`
.table-container {
margin-top: 1rem;
width: 100%;
max-width: 28rem;
}
table {
width: 100%;
font-size: 0.95rem;
color: #ccc;
border-collapse: collapse;
}
th,
td {
padding: 0.25rem 0.5rem;
text-align: center;
}
th {
color: #bbb;
font-weight: 600;
}
.section-title {
color: #888;
font-size: 1rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
`;
@property({ type: Object }) stats: PlayerStats;
render() {
return html`
<div class="table-container">
<div class="section-title">
${translateText("player_stats_table.building_stats")}
</div>
<table>
<thead>
<tr>
<th class="text-left">
${translateText("player_stats_table.building")}
</th>
<th>${translateText("player_stats_table.built")}</th>
<th>${translateText("player_stats_table.destroyed")}</th>
<th>${translateText("player_stats_table.captured")}</th>
<th>${translateText("player_stats_table.lost")}</th>
</tr>
</thead>
<tbody>
${otherUnits.map((key) => {
const built = this.stats?.units?.[key]?.[0] ?? 0n;
const destroyed = this.stats?.units?.[key]?.[1] ?? 0n;
const captured = this.stats?.units?.[key]?.[2] ?? 0n;
const lost = this.stats?.units?.[key]?.[3] ?? 0n;
return html`
<tr>
<td>${translateText(`player_stats_table.unit.${key}`)}</td>
<td>${renderNumber(built)}</td>
<td>${renderNumber(destroyed)}</td>
<td>${renderNumber(captured)}</td>
<td>${renderNumber(lost)}</td>
</tr>
`;
})}
</tbody>
</table>
</div>
<div class="table-container">
<div class="section-title">
${translateText("player_stats_table.ship_arrivals")}
</div>
<table>
<thead>
<tr>
<th class="text-left">
${translateText("player_stats_table.ship_type")}
</th>
<th>${translateText("player_stats_table.sent")}</th>
<th>${translateText("player_stats_table.destroyed")}</th>
<th>${translateText("player_stats_table.arrived")}</th>
</tr>
</thead>
<tbody>
${boatUnits.map((key) => {
const sent = this.stats?.boats?.[key]?.[0] ?? 0n;
const arrived = this.stats?.boats?.[key]?.[1] ?? 0n;
const destroyed = this.stats?.boats?.[key]?.[3] ?? 0n;
return html`
<tr>
<td>${translateText(`player_stats_table.unit.${key}`)}</td>
<td>${renderNumber(sent)}</td>
<td>${renderNumber(destroyed)}</td>
<td>${renderNumber(arrived)}</td>
</tr>
`;
})}
</tbody>
</table>
</div>
<div class="table-container">
<div class="section-title">
${translateText("player_stats_table.nuke_stats")}
</div>
<table>
<thead>
<tr>
<th class="text-left" style="width:40%">
${translateText("player_stats_table.weapon")}
</th>
<th class="text-center" style="width:20%">
${translateText("player_stats_table.built")}
</th>
<th class="text-center" style="width:20%">
${translateText("player_stats_table.destroyed")}
</th>
<th class="text-center" style="width:20%">
${translateText("player_stats_table.hits")}
</th>
</tr>
</thead>
<tbody>
${bombUnits.map((bomb) => {
const launched = this.stats?.bombs?.[bomb]?.[0] ?? 0n;
const landed = this.stats?.bombs?.[bomb]?.[1] ?? 0n;
const intercepted = this.stats?.bombs?.[bomb]?.[2] ?? 0n;
return html`
<tr>
<td>${translateText(`player_stats_table.unit.${bomb}`)}</td>
<td class="text-center">${renderNumber(launched)}</td>
<td class="text-center">${renderNumber(landed)}</td>
<td class="text-center">${renderNumber(intercepted)}</td>
</tr>
`;
})}
</tbody>
</table>
</div>
<div class="table-container">
<div class="section-title">
${translateText("player_stats_table.player_metrics")}
</div>
<table>
<thead>
<tr>
<th>${translateText("player_stats_table.attack")}</th>
<th>${translateText("player_stats_table.sent")}</th>
<th>${translateText("player_stats_table.received")}</th>
<th>${translateText("player_stats_table.cancelled")}</th>
</tr>
</thead>
<tbody>
<tr>
<td>${translateText("player_stats_table.count")}</td>
<td>${renderNumber(this.stats?.attacks?.[0] ?? 0n)}</td>
<td>${renderNumber(this.stats?.attacks?.[1] ?? 0n)}</td>
<td>${renderNumber(this.stats?.attacks?.[2] ?? 0n)}</td>
</tr>
</tbody>
</table>
<table style="margin-top: 0.75rem;">
<thead>
<tr>
<th>${translateText("player_stats_table.gold")}</th>
<th>${translateText("player_stats_table.workers")}</th>
<th>${translateText("player_stats_table.war")}</th>
<th>${translateText("player_stats_table.trade")}</th>
<th>${translateText("player_stats_table.steal")}</th>
</tr>
</thead>
<tbody>
<tr>
<td>${translateText("player_stats_table.count")}</td>
<td>${renderNumber(this.stats?.gold?.[0] ?? 0n)}</td>
<td>${renderNumber(this.stats?.gold?.[1] ?? 0n)}</td>
<td>${renderNumber(this.stats?.gold?.[2] ?? 0n)}</td>
<td>${renderNumber(this.stats?.gold?.[3] ?? 0n)}</td>
</tr>
</tbody>
</table>
</div>
`;
}
}