From 572f82a95454a890ee582352e26cbb1d7baccc0f Mon Sep 17 00:00:00 2001
From: Tronax <mail@tronax.dev>
Date: Mon, 17 Aug 2026 15:18:43 +0200
Subject: [PATCH] feat(ui): player stats modal and admin button for ADMIN_USERS
 accounts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The admin dashboard exposed account stats, but players had no way to see
their own. Both gaps are closed:

Player stats modal (src/components/PlayerStats.vue):
- New "📊 Statistik" chip in the profile bar, available to logged-in
  players AND guests (guest progress lives in the same profile shape)
- Shows crystals, rounds played, wins incl. win rate, kills, total score,
  best wave, and a research progress bar (owned vs. total upgrade levels)
- Guests get a hint that their progress is local-only and transfers into
  an account on first login

Admin shortcut:
- Logged-in users whose account is listed in ADMIN_USERS (server already
  sets publicUser.admin) now get a "🛡️ Admin" chip in the profile bar
  that links to /admin with the existing session
- UserMetaProfile type gains the optional admin flag

Verified in the browser: guest sees the stats button but no admin chip;
after logging in as an ADMIN_USERS account the admin chip appears and
navigates to the dashboard (data loads, 1 account). Build clean, 54/54
tests green.
---
 src/App.vue                       |   2 +
 src/components/PlayerStats.vue    | 171 ++++++++++++++++++++++++++++++
 src/components/UserProfileBar.vue |  17 +++
 src/game/store.ts                 |   1 +
 src/game/types.ts                 |   2 +
 5 files changed, 193 insertions(+)
 create mode 100644 src/components/PlayerStats.vue

diff --git a/src/App.vue b/src/App.vue
index 72b3aec..91ca46c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import MPBar from '@/components/MPBar.vue'
 import ObstaclePanel from '@/components/ObstaclePanel.vue'
 import PauseOverlay from '@/components/PauseOverlay.vue'
 import PiPCanvas from '@/components/PiPCanvas.vue'
+import PlayerStats from '@/components/PlayerStats.vue'
 import ResearchTree from '@/components/ResearchTree.vue'
 import StartScreen from '@/components/StartScreen.vue'
 import TowerPanel from '@/components/TowerPanel.vue'
@@ -86,6 +87,7 @@ const badgeColor = computed(() => {
 
     <AuthModal />
     <ResearchTree />
+    <PlayerStats />
   </div>
 </template>
 
diff --git a/src/components/PlayerStats.vue b/src/components/PlayerStats.vue
new file mode 100644
index 0000000..8636830
--- /dev/null
+++ b/src/components/PlayerStats.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { META_UPGRADES } from '@/game/meta'
+import { isLoggedIn } from '@/game/auth'
+import { store } from '@/game/store'
+
+const user = computed(() => store.auth.user)
+const stats = computed(() => user.value?.stats)
+const winRate = computed(() => {
+  const s = stats.value
+  if (!s || s.gamesPlayed === 0) return '—'
+  return `${Math.round((s.gamesWon / s.gamesPlayed) * 100)} %`
+})
+
+/** research progress: owned levels vs. total available levels */
+const research = computed(() => {
+  const total = Object.values(META_UPGRADES).reduce((a, d) => a + d.maxLevel, 0)
+  const owned = user.value
+    ? Object.values(user.value.upgrades).reduce((a, lvl) => a + (lvl || 0), 0)
+    : 0
+  return { owned, total, pct: total ? Math.round((owned / total) * 100) : 0 }
+})
+
+const scoreLabel = computed(() => (stats.value?.totalScore ?? 0).toLocaleString('de-DE'))
+
+function close(): void {
+  store.auth.showStats = false
+}
+</script>
+
+<template>
+  <div v-if="store.auth.showStats" class="backdrop" @click.self="close">
+    <div class="card">
+      <button class="close" @click="close">✕</button>
+      <div class="head">
+        <h2>📊 Meine Statistik</h2>
+      </div>
+      <p class="identity">
+        <template v-if="user">👤 <b>{{ user.displayName }}</b> <span class="dim">@{{ user.username }}</span></template>
+        <template v-else>👤 Gast</template>
+      </p>
+
+      <div class="grid">
+        <div class="kpi"><span class="v gold">💎 {{ user?.crystals ?? 0 }}</span><span class="k">Kristalle</span></div>
+        <div class="kpi"><span class="v">{{ stats?.gamesPlayed ?? 0 }}</span><span class="k">Runden gespielt</span></div>
+        <div class="kpi"><span class="v">{{ stats?.gamesWon ?? 0 }}</span><span class="k">Siege ({{ winRate }})</span></div>
+        <div class="kpi"><span class="v">{{ stats?.totalKills ?? 0 }}</span><span class="k">Abschüsse</span></div>
+        <div class="kpi"><span class="v">{{ scoreLabel }}</span><span class="k">Punkte insgesamt</span></div>
+        <div class="kpi"><span class="v">🌊 {{ stats?.highestWave ?? 0 }}</span><span class="k">Beste Welle</span></div>
+      </div>
+
+      <div class="research">
+        <div class="r-head">
+          <span>🧪 Forschung</span>
+          <span class="dim">{{ research.owned }} / {{ research.total }} Stufen</span>
+        </div>
+        <div class="bar"><div class="fill" :style="{ width: research.pct + '%' }" /></div>
+      </div>
+
+      <p v-if="!isLoggedIn()" class="hint">
+        Als Gast wird dein Fortschritt nur lokal im Browser gespeichert.
+        Mit einem Konto liegt er auf dem Server – überall verfügbar.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 11, 15, 0.72);
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+.card {
+  position: relative;
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: 16px;
+  padding: 22px 26px;
+  width: 560px;
+  max-width: 94vw;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.close {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+}
+.head h2 {
+  margin: 0;
+  font-size: 20px;
+}
+.identity {
+  margin: 0;
+  font-size: 13.5px;
+}
+.dim {
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+.kpi {
+  background: var(--panel-inset);
+  border: 1px solid var(--panel-border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.kpi .v {
+  font-size: 18px;
+  font-weight: 800;
+}
+.kpi .v.gold {
+  color: #7fd8ff;
+}
+.kpi .k {
+  font-size: 11.5px;
+  color: var(--text-dim);
+}
+.research {
+  background: var(--panel-inset);
+  border: 1px solid var(--panel-border);
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.r-head {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  font-weight: 700;
+}
+.bar {
+  height: 8px;
+  border-radius: 6px;
+  background: var(--panel-border);
+  overflow: hidden;
+}
+.fill {
+  height: 100%;
+  background: linear-gradient(90deg, #f5c542, #e08a2e);
+  border-radius: 6px;
+  transition: width 0.3s ease;
+}
+.hint {
+  margin: 0;
+  color: var(--text-dim);
+  font-size: 11.5px;
+  text-align: center;
+}
+</style>
diff --git a/src/components/UserProfileBar.vue b/src/components/UserProfileBar.vue
index fa91e5b..b1d0aa1 100644
--- a/src/components/UserProfileBar.vue
+++ b/src/components/UserProfileBar.vue
@@ -5,13 +5,20 @@ import { store } from '@/game/store'
 
 const user = computed(() => store.auth.user)
 const loggedIn = computed(() => !!user.value && user.value.id !== 'guest')
+const isAdmin = computed(() => Boolean(user.value?.admin))
 
 function openResearch(): void {
   store.auth.showResearch = true
 }
+function openStats(): void {
+  store.auth.showStats = true
+}
 function openAuth(): void {
   store.auth.showAuth = true
 }
+function openAdmin(): void {
+  window.location.href = '/admin'
+}
 async function doLogout(): Promise<void> {
   await logout()
 }
@@ -24,11 +31,14 @@ async function doLogout(): Promise<void> {
     </div>
     <template v-if="loggedIn">
       <span class="name" :title="user?.username">👤 {{ user?.displayName }}</span>
+      <button class="chip stats" @click="openStats">📊 Statistik</button>
       <button class="chip research" @click="openResearch">🧪 Forschung</button>
+      <button v-if="isAdmin" class="chip admin" title="Admin-Dashboard öffnen" @click="openAdmin">🛡️ Admin</button>
       <button class="chip" @click="doLogout">Abmelden</button>
     </template>
     <template v-else>
       <span class="name">👤 Gast</span>
+      <button class="chip stats" @click="openStats">📊 Statistik</button>
       <button class="chip research" @click="openResearch">🧪 Forschung</button>
       <button class="chip login" @click="openAuth">Anmelden</button>
     </template>
@@ -75,6 +85,13 @@ async function doLogout(): Promise<void> {
 .chip.research {
   border-color: #3d6f9e;
 }
+.chip.stats {
+  border-color: #6e5a9e;
+}
+.chip.admin {
+  border-color: #9e503d;
+  color: #ffb0a0;
+}
 .chip.login {
   border-color: #3f8f37;
   color: #b8e6b0;
diff --git a/src/game/store.ts b/src/game/store.ts
index 6da64f2..45208a2 100644
--- a/src/game/store.ts
+++ b/src/game/store.ts
@@ -21,6 +21,7 @@ export const store = reactive({
     oidcLabel: 'Mit Single Sign-On anmelden',
     showAuth: false,
     showResearch: false,
+    showStats: false,
     authStatus: '',
   },
 
diff --git a/src/game/types.ts b/src/game/types.ts
index bca04b4..494ff1d 100644
--- a/src/game/types.ts
+++ b/src/game/types.ts
@@ -298,4 +298,6 @@ export interface UserMetaProfile {
   crystals: number
   upgrades: Partial<Record<MetaUpgradeId, number>>
   stats: UserStats
+  /** server-side flag: username is listed in ADMIN_USERS */
+  admin?: boolean
 }