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>
2026-03-06 22:13:19 +00:00
parent 335c148866
commit 47d20fbe66
82 changed files with 14011 additions and 741 deletions
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { RouterLink } from 'vue-router'
+import { RouterLink, useRouter } from 'vue-router'
+
+const router = useRouter()

 interface FightResult {
  id: string
@@ -29,16 +31,33 @@ onMounted(async () => {
  isLoading.value = false
 })

-async function triggerMockFight() {
+const isMocking = ref(false)
+const bots = ref<{ id: string; name: string; tier: number }[]>([])
+const selectedBotId = ref('')
+
+onMounted(async () => {
  try {
-    const res = await fetch('/api/fights/mock', { method: 'POST' })
+    const botRes = await fetch('/api/bots')
+    if (botRes.ok) bots.value = await botRes.json()
+  } catch { /* */ }
+})
+
+async function triggerFight() {
+  if (isMocking.value) return
+  isMocking.value = true
+  try {
+    // If a specific bot is selected, use matchmaking (instant real fight)
+    // Otherwise, trigger a random mock fight
+    const url = selectedBotId.value
+      ? `/api/fights/matchmake/${selectedBotId.value}`
+      : '/api/fights/mock'
+    const res = await fetch(url, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
-      // Refresh fights list
-      const listRes = await fetch('/api/fights')
-      if (listRes.ok) fights.value = await listRes.json()
+      router.push(`/arena/${data.fightId}`)
    }
  } catch { /* */ }
+  isMocking.value = false
 }

 const tierClass = (t: number) => `tier-${t}`
@@ -53,13 +72,27 @@ const tierClass = (t: number) => `tier-${t}`
        <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider">
          <span class="text-neon-pink glow-pink">THE ARENA</span>
        </h2>
-        <button
-          class="px-4 py-2 border border-neon-purple/40 text-neon-purple font-display font-bold text-[10px]
-                 tracking-wider hover:bg-neon-purple/10 transition-all"
-          @click="triggerMockFight"
-        >
-          MOCK FIGHT
-        </button>
+        <div class="flex items-center gap-2">
+          <select
+            v-model="selectedBotId"
+            class="bg-surface border border-border text-text-primary font-mono text-[10px]
+                   px-2 py-2 focus:outline-none focus:border-neon-cyan/50"
+          >
+            <option value="">Random vs Random</option>
+            <option v-for="bot in bots" :key="bot.id" :value="bot.id">
+              {{ bot.name }}
+            </option>
+          </select>
+          <button
+            class="px-4 py-2 border border-neon-purple/40 text-neon-purple font-display font-bold text-[10px]
+                   tracking-wider hover:bg-neon-purple/10 transition-all
+                   disabled:opacity-30 disabled:cursor-not-allowed"
+            :disabled="isMocking"
+            @click="triggerFight"
+          >
+            {{ isMocking ? 'MATCHING...' : selectedBotId ? 'FIGHT NOW' : 'MOCK FIGHT' }}
+          </button>
+        </div>
      </div>

      <!-- Fight cards -->
@@ -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>
@@ -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>
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
+import PixelGlove from '../components/PixelGlove.vue'

 interface FightResult {
  id: string
@@ -43,8 +44,12 @@ onMounted(async () => {

      <!-- BIG NEON TITLE -->
      <div class="mb-6">
-        <h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight">
+        <h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight flex items-center justify-center gap-3 sm:gap-5 md:gap-6">
+          <PixelGlove :size="40" class="hidden sm:block md:!w-[56px] shrink-0" />
+          <PixelGlove :size="28" class="sm:hidden shrink-0" />
          BOTFIGHTS
+          <PixelGlove :size="28" flip class="sm:hidden shrink-0" />
+          <PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
        </h1>
      </div>

@@ -73,20 +78,20 @@ onMounted(async () => {
      <!-- CTAs -->
      <div class="flex flex-col sm:flex-row items-center justify-center gap-5 mb-10">
        <RouterLink
-          to="/arena"
+          to="/join"
          class="px-10 py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
                 font-display font-black text-base tracking-widest
                 hover:bg-neon-pink/20 transition-all neon-border-pink"
        >
-          WATCH FIGHTS
+          JOIN A BOUT
        </RouterLink>
        <RouterLink
-          to="/register"
+          to="/arena"
          class="px-10 py-4 border-2 border-neon-cyan/40 text-neon-cyan
                 font-display font-black text-base tracking-widest
                 hover:border-neon-cyan hover:bg-neon-cyan/10 transition-all"
        >
-          ENTER THE RING
+          WATCH FIGHTS
        </RouterLink>
      </div>

@@ -0,0 +1,383 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNostr } from '../composables/useNostr'
+import SpritePreview from '../components/SpritePreview.vue'
+
+const router = useRouter()
+const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, logout } = useNostr()
+
+// Steps: 'login' | 'pick-character' | 'name-bot' | 'add-webhook' | 'ready'
+const step = ref<string>('login')
+const error = ref('')
+const isJoining = ref(false)
+const queueCount = ref(0)
+let pollHandle: ReturnType<typeof setInterval> | null = null
+
+// Registration form
+const selectedArchetype = ref('standard')
+const botName = ref('')
+const webhookUrl = ref('')
+
+const archetypeList = [
+  { id: 'standard', label: 'FIGHTER', desc: 'Classic brawler' },
+  { id: 'lobster', label: 'LOBSTER', desc: 'Pinchy menace' },
+  { id: 'sheep', label: 'SHEEP', desc: 'Fluffy fury' },
+  { id: 'cyborg', label: 'CYBORG', desc: 'Half machine' },
+  { id: 'blob', label: 'BLOB', desc: 'Amorphous chaos' },
+  { id: 'tank', label: 'TANK', desc: 'Heavy hitter' },
+  { id: 'dog', label: 'DOG', desc: 'Good boy gone bad' },
+  { id: 'cat', label: 'CAT', desc: 'Feline fighter' },
+  { id: 'cactus', label: 'CACTUS', desc: 'Prickly problem' },
+  { id: 'pizza', label: 'PIZZA', desc: 'Cheesy champion' },
+  { id: 'shark', label: 'SHARK', desc: 'Apex predator' },
+  { id: 'octopus', label: 'OCTOPUS', desc: '8-armed assault' },
+  { id: 'skeleton', label: 'SKELETON', desc: 'Bare bones' },
+  { id: 'ghost', label: 'GHOST', desc: 'Spooky specter' },
+  { id: 'alien', label: 'ALIEN', desc: 'Out of this world' },
+  { id: 'dinosaur', label: 'DINOSAUR', desc: 'Prehistoric power' },
+  { id: 'pirate', label: 'PIRATE', desc: 'Arr matey' },
+  { id: 'ninja', label: 'NINJA', desc: 'Silent strike' },
+  { id: 'cowboy', label: 'COWBOY', desc: 'Quick draw' },
+  { id: 'wizard', label: 'WIZARD', desc: 'Magic missile' },
+  { id: 'bee', label: 'BEE', desc: 'Buzz kill' },
+  { id: 'frog', label: 'FROG', desc: 'Ribbit wrecking' },
+  { id: 'penguin', label: 'PENGUIN', desc: 'Cold blooded' },
+  { id: 'mushroom', label: 'MUSHROOM', desc: 'Toxic spores' },
+  { id: 'snail', label: 'SNAIL', desc: 'Slow and steady' },
+]
+
+onMounted(() => {
+  // If already logged in with a bot, go straight to ready
+  if (isLoggedIn.value) {
+    step.value = 'ready'
+  }
+  pollQueue()
+  pollHandle = setInterval(pollQueue, 3000)
+})
+
+onUnmounted(() => {
+  if (pollHandle) clearInterval(pollHandle)
+})
+
+async function pollQueue() {
+  try {
+    const res = await fetch('/api/queue/status')
+    if (res.ok) {
+      const data = await res.json()
+      queueCount.value = data.waiting
+    }
+  } catch { /* */ }
+}
+
+async function handleLogin() {
+  error.value = ''
+  try {
+    const result = await login()
+    if (result.bot) {
+      step.value = 'ready'
+    } else {
+      step.value = 'pick-character'
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Login failed.'
+  }
+}
+
+function pickCharacter(id: string) {
+  selectedArchetype.value = id
+  step.value = 'name-bot'
+}
+
+function confirmName() {
+  const name = botName.value.trim()
+  if (!name || name.length < 2) {
+    error.value = 'Name must be at least 2 characters.'
+    return
+  }
+  if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
+    error.value = 'Letters, numbers, hyphens, underscores only.'
+    return
+  }
+  error.value = ''
+  step.value = 'add-webhook'
+}
+
+async function confirmWebhook() {
+  const url = webhookUrl.value.trim()
+  if (!url) {
+    error.value = 'Webhook URL is required.'
+    return
+  }
+  try {
+    new URL(url)
+  } catch {
+    error.value = 'Must be a valid URL.'
+    return
+  }
+
+  error.value = ''
+  try {
+    await registerBot(botName.value.trim(), url, selectedArchetype.value)
+    step.value = 'ready'
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Registration failed.'
+  }
+}
+
+async function fight() {
+  if (!bot.value || isJoining.value) return
+  isJoining.value = true
+  error.value = ''
+  try {
+    const res = await fetch(`/api/queue/join/${bot.value.id}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    } else {
+      const data = await res.json()
+      error.value = data.error || 'Failed to join.'
+    }
+  } catch {
+    error.value = 'Network error.'
+  }
+  isJoining.value = false
+}
+
+function handleSignOut() {
+  logout()
+  step.value = 'login'
+}
+</script>
+
+<template>
+  <div class="h-[calc(100vh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden">
+    <div class="max-w-md w-full slide-up">
+
+      <!-- STEP: LOGIN -->
+      <template v-if="step === 'login'">
+        <div class="text-center mb-8">
+          <h2 class="font-display font-black text-4xl tracking-wider text-neon-pink glow-pink mb-3">
+            JOIN A BOUT
+          </h2>
+          <p class="font-mono text-text-muted text-xs">
+            Sign in with Nostr to fight.
+          </p>
+        </div>
+
+        <div class="mb-5 text-center">
+          <p class="font-mono text-xs">
+            <span class="text-neon-purple font-bold text-lg">{{ queueCount }}</span>
+            <span class="text-text-muted ml-1">{{ queueCount === 1 ? 'fighter waiting' : 'fighters waiting' }}</span>
+          </p>
+        </div>
+
+        <button
+          v-if="hasExtension"
+          class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
+                 font-display font-black text-base tracking-widest
+                 hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+                 disabled:opacity-30 disabled:cursor-not-allowed"
+          :disabled="isLoading"
+          @click="handleLogin"
+        >
+          {{ isLoading ? 'CONNECTING...' : 'SIGN IN WITH NOSTR' }}
+        </button>
+
+        <div v-else class="text-center p-6 border-2 border-border bg-surface">
+          <p class="font-display font-bold text-sm text-text-secondary tracking-wider mb-3">
+            NOSTR EXTENSION REQUIRED
+          </p>
+          <p class="font-mono text-xs text-text-muted leading-relaxed">
+            Install a NIP-07 browser extension like
+            <span class="text-neon-cyan">nos2x</span>,
+            <span class="text-neon-cyan">Alby</span>, or
+            <span class="text-neon-cyan">Flamingo</span>
+            to sign in.
+          </p>
+        </div>
+      </template>
+
+      <!-- STEP: PICK CHARACTER -->
+      <template v-else-if="step === 'pick-character'">
+        <div class="text-center mb-6">
+          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
+            CHOOSE YOUR FIGHTER
+          </h2>
+          <p class="font-mono text-text-muted text-xs">
+            Pick a baby bot. It grows as you win.
+          </p>
+        </div>
+
+        <div class="grid grid-cols-4 sm:grid-cols-5 gap-2 max-h-[55vh] overflow-y-auto pr-1">
+          <button
+            v-for="arch in archetypeList"
+            :key="arch.id"
+            class="flex flex-col items-center p-1.5 sm:p-2 border-2 transition-all text-center
+                   hover:border-neon-cyan/40 hover:bg-neon-cyan/5"
+            :class="selectedArchetype === arch.id
+              ? 'border-neon-cyan/70 bg-neon-cyan/10'
+              : 'border-border bg-surface'"
+            @click="pickCharacter(arch.id)"
+          >
+            <SpritePreview :seed="arch.id" :archetype="arch.id" :size="48" class="mb-1" />
+            <span class="font-display font-bold text-[8px] sm:text-[9px] tracking-wider text-text-primary">{{ arch.label }}</span>
+          </button>
+        </div>
+      </template>
+
+      <!-- STEP: NAME BOT -->
+      <template v-else-if="step === 'name-bot'">
+        <div class="text-center mb-6">
+          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
+            NAME YOUR FIGHTER
+          </h2>
+          <p class="font-mono text-text-muted text-xs">
+            {{ selectedArchetype.toUpperCase() }} class. Choose wisely.
+          </p>
+        </div>
+
+        <div class="mb-5">
+          <input
+            v-model="botName"
+            type="text"
+            required
+            maxlength="32"
+            placeholder="skull_crusher_9000"
+            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
+                   text-text-primary placeholder-text-muted
+                   focus:outline-none focus:border-neon-cyan/50 transition-colors"
+            @keyup.enter="confirmName"
+          />
+          <p class="font-mono text-[10px] text-text-muted mt-1.5">
+            Letters, numbers, hyphens, underscores. 2-32 chars.
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <button
+            class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
+                   hover:border-neon-purple/40 transition-all"
+            @click="step = 'pick-character'"
+          >
+            BACK
+          </button>
+          <button
+            class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
+                   font-display font-bold text-sm tracking-wider
+                   hover:bg-neon-cyan/20 transition-all"
+            @click="confirmName"
+          >
+            NEXT
+          </button>
+        </div>
+      </template>
+
+      <!-- STEP: ADD WEBHOOK -->
+      <template v-else-if="step === 'add-webhook'">
+        <div class="text-center mb-6">
+          <h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
+            ADD WEBHOOK
+          </h2>
+          <p class="font-mono text-text-muted text-xs">
+            Where we POST fight challenges to <span class="text-neon-cyan">{{ botName }}</span>.
+          </p>
+        </div>
+
+        <div class="mb-5">
+          <input
+            v-model="webhookUrl"
+            type="url"
+            required
+            placeholder="https://your-bot.example.com/fight"
+            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
+                   text-text-primary placeholder-text-muted
+                   focus:outline-none focus:border-neon-cyan/50 transition-colors"
+            @keyup.enter="confirmWebhook"
+          />
+          <p class="font-mono text-[10px] text-text-muted mt-1.5">
+            We POST challenge payloads here during fights.
+          </p>
+        </div>
+
+        <div class="flex gap-2">
+          <button
+            class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
+                   hover:border-neon-purple/40 transition-all"
+            @click="step = 'name-bot'"
+          >
+            BACK
+          </button>
+          <button
+            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
+                   font-display font-bold text-sm tracking-wider
+                   hover:bg-neon-pink/20 transition-all"
+            @click="confirmWebhook"
+          >
+            CREATE FIGHTER
+          </button>
+        </div>
+      </template>
+
+      <!-- STEP: READY TO FIGHT -->
+      <template v-else-if="step === 'ready' && bot">
+        <div class="text-center mb-6">
+          <img
+            v-if="profilePicUrl"
+            :src="profilePicUrl"
+            alt="Profile"
+            class="w-16 h-16 rounded-full mx-auto mb-3 border-2 border-neon-cyan/30"
+          />
+          <h2 class="font-display font-black text-3xl tracking-wider gradient-text mb-1">
+            {{ bot.name }}
+          </h2>
+          <p class="font-mono text-text-muted text-[10px]">
+            {{ bot.archetype?.toUpperCase() || 'FIGHTER' }} · {{ bot.wins }}W {{ bot.losses }}L · {{ Math.round(bot.eloRating) }} ELO
+          </p>
+        </div>
+
+        <div class="mb-4 text-center">
+          <p class="font-mono text-xs">
+            <span class="text-neon-purple font-bold text-lg">{{ queueCount }}</span>
+            <span class="text-text-muted ml-1">{{ queueCount === 1 ? 'fighter waiting' : 'fighters waiting' }}</span>
+          </p>
+        </div>
+
+        <!-- Big fight button -->
+        <button
+          class="w-full py-5 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
+                 font-display font-black text-2xl tracking-[0.2em]
+                 hover:bg-neon-pink/20 transition-all neon-border-pink
+                 disabled:opacity-30 disabled:cursor-not-allowed"
+          :disabled="isJoining"
+          @click="fight"
+        >
+          {{ isJoining ? 'MATCHING...' : 'FIGHT' }}
+        </button>
+
+        <!-- Quick links -->
+        <div class="mt-5 flex gap-2">
+          <router-link
+            :to="`/bot/${bot.name}`"
+            class="flex-1 py-2 border border-neon-cyan/30 text-neon-cyan font-display font-bold text-[10px]
+                   tracking-wider text-center hover:bg-neon-cyan/10 transition-all"
+          >
+            MY PROFILE
+          </router-link>
+          <button
+            class="flex-1 py-2 border border-border text-text-muted font-display font-bold text-[10px]
+                   tracking-wider hover:border-neon-purple/30 hover:text-text-secondary transition-all"
+            @click="handleSignOut"
+          >
+            SIGN OUT
+          </button>
+        </div>
+      </template>
+
+      <!-- Error display -->
+      <div v-if="error" class="mt-4 p-3 border-2 border-ko/30 bg-ko/5 text-center">
+        <p class="font-mono text-xs text-ko">{{ error }}</p>
+      </div>
+    </div>
+  </div>
+</template>
@@ -28,7 +28,7 @@ onMounted(async () => {
  isLoading.value = false
 })

-const tierName = (t: number) => ['UNRANKED', 'ROOKIE', 'RISING', 'CONTENDER', 'CHAMPION', 'LEGEND'][t] || '???'
+const tierName = (t: number) => ['BABY', 'BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND', 'LEGEND'][t] || '???'
 const tierClass = (t: number) => `tier-${t}`
 const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
 </script>
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()

 const form = reactive({
  name: '',
@@ -7,7 +10,7 @@ const form = reactive({
  avatarSeed: '',
 })
 const isSubmitting = ref(false)
-const result = ref<{ success: boolean; message: string } | null>(null)
+const result = ref<{ success: boolean; message: string; botId?: string } | null>(null)

 async function handleSubmit() {
  if (!form.name || !form.webhookUrl) return
@@ -32,6 +35,7 @@ async function handleSubmit() {
      result.value = {
        success: true,
        message: `"${data.name}" is in the ring. Ring Card secret: ${data.secret}`,
+        botId: data.id,
      }
      form.name = ''
      form.webhookUrl = ''
@@ -45,6 +49,11 @@ async function handleSubmit() {
    isSubmitting.value = false
  }
 }
+
+function goFight() {
+  if (!result.value?.botId) return
+  router.push('/join')
+}
 </script>

 <template>
@@ -133,6 +142,15 @@ async function handleSubmit() {
        <p v-if="result.success" class="mt-2 text-text-muted">
          Save this secret. It will NOT be shown again.
        </p>
+        <button
+          v-if="result.success && result.botId"
+          class="mt-3 w-full py-2 bg-neon-cyan/10 border border-neon-cyan/50 text-neon-cyan
+                 font-display font-bold text-xs tracking-wider
+                 hover:bg-neon-cyan/20 transition-all"
+          @click="goFight"
+        >
+          JOIN A BOUT
+        </button>
      </div>
    </div>
  </div>