feat: v2 — queue matchmaking, procedural audio, sprite archetypes, auth

- Add queue-based matchmaking with Elo-proximity and 10s timeout
- Procedural sound engine (SFX, voice announcer, 4-track music)
- Sprite system refactored into 6 archetypes (standard, lobster, sheep, cyborg, blob, tank)
- 42+ fight choreographies with themed/generic/wild card selection
- 4 KO finish styles, super-speed mode, hyperdetail close-ups
- Auth routes, JoinBout page, bot profile with stats
- 7-tier ranking system (Baby through Legend)
- Arena and challenge system expansions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/BotProfilePage.vue

@@ -1,148 +1,272 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRoute, RouterLink } from 'vue-router'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter, RouterLink } from 'vue-router'
+import { useNostr } from '../composables/useNostr'
 
-interface Bot {
+const route = useRoute()
+const router = useRouter()
+const { bot: nostrBot, isLoggedIn, logout } = useNostr()
+const botName = route.params.name as string
+
+interface BotStats {
   id: string
   name: string
   avatarSeed: string
+  profilePicUrl: string | null
   eloRating: number
   wins: number
   losses: number
   winStreak: number
   bestStreak: number
   tier: number
-  isActive: boolean
+  tierName: string
+  tierColor: string
+  winRate: number
+  totalFights: number
+  rank: number
+  totalBots: number
   createdAt: string
+  recentFights: {
+    id: string
+    opponent: string
+    result: string
+    rounds: number
+    arena: string
+    date: string
+  }[]
 }
 
-interface Fight {
-  id: string
-  botA: { name: string } | null
-  botB: { name: string } | null
-  winner: { name: string } | null
-  arenaInfo: { name: string } | null
-  totalRounds: number
-  status: string
+interface QueueEntry {
+  botId: string
+  botName: string
+  eloRating: number
 }
 
-const route = useRoute()
-const botName = route.params.name as string
-const bot = ref<Bot | null>(null)
-const fights = ref<Fight[]>([])
+const stats = ref<BotStats | null>(null)
 const isLoading = ref(true)
+const isJoining = ref(false)
+const showChoose = ref(false)
+const waitingFighters = ref<QueueEntry[]>([])
+let pollHandle: ReturnType<typeof setInterval> | null = null
+
+const isOwner = ref(false)
 
 onMounted(async () => {
   try {
-    const [botRes, fightsRes] = await Promise.all([
-      fetch(`/api/bots/${botName}`),
-      fetch('/api/fights'),
-    ])
-    if (botRes.ok) bot.value = await botRes.json()
-    if (fightsRes.ok) {
-      const allFights = await fightsRes.json()
-      fights.value = allFights.filter((f: Fight) =>
-        f.botA?.name === botName || f.botB?.name === botName
-      )
-    }
+    const res = await fetch(`/api/bots/${encodeURIComponent(botName)}/stats`)
+    if (res.ok) stats.value = await res.json()
   } catch { /* */ }
   isLoading.value = false
+
+  // Check ownership
+  isOwner.value = isLoggedIn.value && nostrBot.value?.name === botName
+
+  // Poll queue for "choose your fight"
+  pollQueue()
+  pollHandle = setInterval(pollQueue, 4000)
 })
 
-const tierName = (t: number) => ['UNRANKED', 'ROOKIE', 'RISING', 'CONTENDER', 'CHAMPION', 'LEGEND'][t] || '???'
-const tierClass = (t: number) => `tier-${t}`
-const winRate = (b: Bot) => {
-  const total = b.wins + b.losses
-  return total > 0 ? Math.round((b.wins / total) * 100) : 0
+onUnmounted(() => {
+  if (pollHandle) clearInterval(pollHandle)
+})
+
+async function pollQueue() {
+  try {
+    const res = await fetch('/api/queue/status')
+    if (res.ok) {
+      const data = await res.json()
+      waitingFighters.value = data.queue || []
+    }
+  } catch { /* */ }
 }
+
+async function instantFight() {
+  if (!stats.value || isJoining.value) return
+  isJoining.value = true
+  try {
+    const res = await fetch(`/api/queue/join/${stats.value.id}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    }
+  } catch { /* */ }
+  isJoining.value = false
+}
+
+async function fightSpecific(opponentBotId: string) {
+  if (!stats.value || isJoining.value) return
+  isJoining.value = true
+  try {
+    const res = await fetch(`/api/fights/matchmake/${stats.value.id}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    }
+  } catch { /* */ }
+  isJoining.value = false
+}
+
+function handleSignOut() {
+  logout()
+  router.push('/')
+}
+
+const tierClass = (t: number) => `tier-${t}`
 </script>
 
 <template>
   <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
-    <div class="max-w-3xl mx-auto w-full flex flex-col flex-1 min-h-0">
+    <div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <div v-if="isLoading" class="flex-1 flex items-center justify-center">
         <p class="font-display text-text-muted animate-pulse">LOADING...</p>
       </div>
 
-      <div v-else-if="!bot" class="flex-1 flex items-center justify-center">
+      <div v-else-if="!stats" class="flex-1 flex items-center justify-center">
         <p class="font-display text-text-muted">Bot not found.</p>
       </div>
 
       <template v-else>
-        <!-- Bot header -->
-        <div class="mb-6 text-center">
-          <p class="font-display text-[10px] font-bold tracking-[0.2em] mb-2"
-             :class="tierClass(bot.tier)">
-            {{ tierName(bot.tier) }}
+        <!-- Header -->
+        <div class="text-center mb-5">
+          <img
+            v-if="stats.profilePicUrl"
+            :src="stats.profilePicUrl"
+            alt=""
+            class="w-16 h-16 rounded-full mx-auto mb-2 border-2"
+            :style="{ borderColor: stats.tierColor }"
+          />
+          <p class="font-display text-xs font-bold tracking-[0.2em] mb-1"
+             :style="{ color: stats.tierColor }">
+            {{ stats.tierName }}
           </p>
-          <h2 class="font-display font-black text-3xl sm:text-5xl tracking-wider gradient-text mb-2">
-            {{ bot.name }}
+          <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
+            {{ stats.name }}
           </h2>
-          <p class="font-mono text-text-muted text-xs">
-            Fighting since {{ new Date(bot.createdAt).toLocaleDateString() }}
+          <p class="font-mono text-text-muted text-[10px] mt-1">
+            #{{ stats.rank }} of {{ stats.totalBots }}
           </p>
         </div>
 
-        <!-- Tale of the Tape -->
-        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
-          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center neon-border-cyan">
-            <p class="font-display font-black text-2xl text-neon-cyan">{{ Math.round(bot.eloRating) }}</p>
-            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">ELO</p>
+        <!-- Stats -->
+        <div class="grid grid-cols-3 gap-2 mb-4">
+          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
           </div>
-          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center">
-            <p class="font-display font-black text-2xl text-text-primary">
-              <span class="text-neon-cyan">{{ bot.wins }}</span>
-              <span class="text-text-muted text-lg mx-1">-</span>
-              <span class="text-neon-pink">{{ bot.losses }}</span>
+          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-black text-xl">
+              <span class="text-neon-cyan">{{ stats.wins }}</span>
+              <span class="text-text-muted text-sm">-</span>
+              <span class="text-neon-pink">{{ stats.losses }}</span>
             </p>
-            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">RECORD</p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
           </div>
-          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center">
-            <p class="font-display font-black text-2xl"
-               :class="winRate(bot) >= 60 ? 'text-neon-cyan' : winRate(bot) >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
-              {{ winRate(bot) }}%
+          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-black text-xl"
+               :class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
+              {{ stats.winRate }}%
             </p>
-            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">WIN RATE</p>
-          </div>
-          <div class="border border-border rounded-lg bg-surface-raised/50 p-3 text-center"
-               :class="bot.winStreak >= 3 ? 'neon-border-pink' : ''">
-            <p class="font-display font-black text-2xl"
-               :class="bot.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
-              {{ bot.bestStreak }}
-            </p>
-            <p class="font-display text-[9px] text-text-muted tracking-wider mt-1">BEST STREAK</p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
           </div>
         </div>
 
-        <!-- Fight history -->
-        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-3">
-          FIGHT HISTORY
+        <!-- Streaks row -->
+        <div class="flex gap-2 mb-4">
+          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-bold text-base"
+               :class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
+              {{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
+            </p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
+          </div>
+          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
+          </div>
+          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
+            <p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
+            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
+          </div>
+        </div>
+
+        <!-- Fight actions (only for owner or anyone for now) -->
+        <div class="flex gap-2 mb-4">
+          <button
+            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
+                   font-display font-black text-sm tracking-wider
+                   hover:bg-neon-pink/20 transition-all neon-border-pink
+                   disabled:opacity-30 disabled:cursor-not-allowed"
+            :disabled="isJoining"
+            @click="instantFight"
+          >
+            {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
+          </button>
+          <button
+            class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
+                   font-display font-bold text-sm tracking-wider
+                   hover:bg-neon-purple/10 transition-all"
+            @click="showChoose = !showChoose"
+          >
+            CHOOSE FIGHT
+          </button>
+        </div>
+
+        <!-- Choose your fight panel -->
+        <div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
+          <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
+            FIGHTERS WAITING
+          </p>
+          <div v-if="waitingFighters.length === 0" class="text-center py-3">
+            <p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
+          </div>
+          <button
+            v-for="fighter in waitingFighters"
+            :key="fighter.botId"
+            class="w-full flex items-center justify-between px-3 py-2 border border-border
+                   hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
+                   disabled:opacity-30"
+            :disabled="isJoining || fighter.botId === stats.id"
+            @click="fightSpecific(fighter.botId)"
+          >
+            <span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
+            <span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
+          </button>
+        </div>
+
+        <!-- Recent fights -->
+        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
+          RECENT BOUTS
         </p>
-        <div class="flex-1 min-h-0 overflow-y-auto space-y-2">
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
           <RouterLink
-            v-for="fight in fights"
+            v-for="fight in stats.recentFights"
             :key="fight.id"
             :to="`/arena/${fight.id}`"
-            class="flex items-center justify-between px-4 py-2.5 border border-border rounded-lg
-                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-sm"
+            class="flex items-center justify-between px-3 py-2 border border-border
+                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
           >
-            <span class="font-display font-bold text-xs tracking-wide">
-              <span :class="fight.winner?.name === botName ? 'text-neon-cyan' : 'text-neon-pink'">
-                {{ fight.winner?.name === botName ? 'W' : 'L' }}
-              </span>
-            </span>
-            <span class="font-mono text-text-secondary text-xs">
-              vs {{ fight.botA?.name === botName ? fight.botB?.name : fight.botA?.name }}
-            </span>
-            <span class="font-mono text-[10px] text-text-muted">
-              R{{ fight.totalRounds }} &middot; {{ fight.arenaInfo?.name }}
+            <span class="font-display font-bold w-6"
+                  :class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
+              {{ fight.result }}
             </span>
+            <span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
+            <span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
           </RouterLink>
-          <div v-if="fights.length === 0" class="text-center py-8">
-            <p class="font-display text-text-muted text-xs">No fights yet.</p>
+          <div v-if="stats.recentFights.length === 0" class="text-center py-4">
+            <p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
           </div>
         </div>
+
+        <!-- Sign out (only if owner) -->
+        <div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
+          <button
+            class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
+            @click="handleSignOut"
+          >
+            Sign out
+          </button>
+        </div>
       </template>
     </div>
   </div>