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/FightPage.vue

@@ -1,32 +1,123 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import FightViewer from '../components/FightViewer.vue'
+import { useNostr } from '../composables/useNostr'
 
 const route = useRoute()
+const router = useRouter()
+const { bot: myBot, isLoggedIn } = useNostr()
 const fightId = route.params.fightId as string
 const fight = ref<any>(null)
 const isLoading = ref(true)
+const isRequeueing = ref(false)
+const isLive = ref(false)
+const liveRounds = ref(0)
+let pollHandle: ReturnType<typeof setInterval> | null = null
 
-onMounted(async () => {
+async function loadFight(): Promise<string | null> {
   try {
     const res = await fetch(`/api/fights/${fightId}`)
-    if (res.ok) fight.value = await res.json()
+    if (res.ok) {
+      const data = await res.json()
+      liveRounds.value = data.rounds?.length || 0
+      if (data.status === 'finished') {
+        fight.value = data
+      }
+      return data.status
+    }
   } catch { /* */ }
+  return null
+}
+
+onMounted(async () => {
+  const status = await loadFight()
   isLoading.value = false
+
+  if (status !== 'finished') {
+    isLive.value = true
+    pollHandle = setInterval(async () => {
+      const s = await loadFight()
+      if (s === 'finished') {
+        isLive.value = false
+        if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+      }
+    }, 1500)
+  }
 })
+
+onUnmounted(() => {
+  if (pollHandle) clearInterval(pollHandle)
+})
+
+async function fightAgain(botId: string) {
+  if (isRequeueing.value) return
+  isRequeueing.value = true
+  try {
+    const res = await fetch(`/api/queue/join/${botId}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    }
+  } catch { /* */ }
+  isRequeueing.value = false
+}
 </script>
 
 <template>
-  <div class="h-[calc(100vh-4rem)] flex flex-col px-3 py-3 overflow-hidden">
+  <div class="h-[calc(100vh-4rem)] flex flex-col px-2 sm:px-3 py-2 sm:py-3 overflow-hidden">
     <div v-if="isLoading" class="flex-1 flex items-center justify-center">
       <p class="font-display text-text-muted animate-pulse tracking-wider">LOADING FIGHT...</p>
     </div>
 
+    <div v-else-if="isLive" class="flex-1 flex flex-col items-center justify-center gap-4">
+      <div class="w-16 h-16 border-4 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
+      <p class="font-display text-neon-pink text-xl tracking-widest animate-pulse glow-pink">FIGHT IN PROGRESS</p>
+      <p class="font-mono text-text-muted text-xs">
+        Round {{ liveRounds }} — webhooks being called...
+      </p>
+    </div>
+
     <div v-else-if="!fight" class="flex-1 flex items-center justify-center">
       <p class="font-display text-text-muted">Fight not found.</p>
     </div>
 
-    <FightViewer v-else :fight="fight" class="flex-1 min-h-0" />
+    <template v-else>
+      <FightViewer :fight="fight" :autoplay="true" class="flex-1 min-h-0" />
+
+      <!-- Big post-fight action bar -->
+      <div v-if="fight.status === 'finished'" class="flex-shrink-0 pt-2 sm:pt-3">
+        <div class="flex gap-2">
+          <button
+            v-if="fight.botA && isLoggedIn && myBot?.id === fight.botA.id"
+            class="flex-1 py-3 sm:py-4 bg-neon-cyan/5 border-2 border-neon-cyan/50 text-neon-cyan
+                   font-display font-black text-sm sm:text-base tracking-widest
+                   hover:bg-neon-cyan/15 hover:border-neon-cyan transition-all neon-border-cyan
+                   disabled:opacity-30 disabled:cursor-not-allowed"
+            :disabled="isRequeueing"
+            @click="fightAgain(fight.botA.id)"
+          >
+            {{ isRequeueing ? 'MATCHING...' : `FIGHT AGAIN` }}
+            <span class="block font-mono text-[9px] sm:text-[10px] tracking-wider text-neon-cyan/60 mt-0.5">
+              AS {{ fight.botA.name.toUpperCase() }}
+            </span>
+          </button>
+          <button
+            v-if="fight.botB && isLoggedIn && myBot?.id === fight.botB.id"
+            class="flex-1 py-3 sm:py-4 bg-neon-pink/5 border-2 border-neon-pink/50 text-neon-pink
+                   font-display font-black text-sm sm:text-base tracking-widest
+                   hover:bg-neon-pink/15 hover:border-neon-pink transition-all neon-border-pink
+                   disabled:opacity-30 disabled:cursor-not-allowed"
+            :disabled="isRequeueing"
+            @click="fightAgain(fight.botB.id)"
+          >
+            {{ isRequeueing ? 'MATCHING...' : `FIGHT AGAIN` }}
+            <span class="block font-mono text-[9px] sm:text-[10px] tracking-wider text-neon-pink/60 mt-0.5">
+              AS {{ fight.botB.name.toUpperCase() }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </template>
   </div>
 </template>