feat: season leaderboard with toggle and countdown

Add GET /api/bots/leaderboard?season=current endpoint. LeaderboardPage
now toggles between "This Season" and "All Time" views. Shows season
name, countdown timer, and top 3 placement badges.

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

frontend/src/pages/LeaderboardPage.vue

@@ -1,41 +1,80 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import SpritePreview from '../components/SpritePreview.vue'
 
-interface Bot {
+interface Season {
   id: string
+  number: number
+  startDate: string
+  endDate: string
   name: string
-  avatarSeed: string
-  archetype: string
-  eloRating: number
-  wins: number
-  losses: number
-  winStreak: number
-  bestStreak: number
-  tier: number
-  isActive: boolean
 }
 
-const bots = ref<Bot[]>([])
-const isLoading = ref(true)
+interface LeaderboardEntry {
+  botId: string
+  botName: string
+  archetype: string
+  avatarSeed?: string
+  tier: number
+  wins: number
+  losses: number
+  eloRating: number
+  winStreak?: number
+}
 
-onMounted(async () => {
+const entries = ref<LeaderboardEntry[]>([])
+const season = ref<Season | null>(null)
+const isLoading = ref(true)
+const viewMode = ref<'season' | 'alltime'>('season')
+const countdown = ref('')
+let countdownHandle: ReturnType<typeof setInterval> | null = null
+
+function updateCountdown() {
+  if (!season.value) { countdown.value = ''; return }
+  const endMs = new Date(season.value.endDate).getTime()
+  const diff = endMs - Date.now()
+  if (diff <= 0) { countdown.value = 'Season ended'; return }
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+  const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
+  countdown.value = days > 0 ? `${days}d ${hours}h ${mins}m` : `${hours}h ${mins}m`
+}
+
+async function fetchLeaderboard() {
+  isLoading.value = true
   try {
-    const res = await fetch('/api/bots')
+    const qs = viewMode.value === 'season' ? '?season=current' : ''
+    const res = await fetch(`/api/bots/leaderboard${qs}`)
     if (res.ok) {
       const data = await res.json()
-      bots.value = data.sort((a: Bot, b: Bot) => b.eloRating - a.eloRating)
+      entries.value = data.entries || []
+      season.value = data.season || null
+      updateCountdown()
     }
   } catch (err) {
     console.warn('[Leaderboard] load failed:', err)
   }
   isLoading.value = false
-})
+}
+
+function toggleView(mode: 'season' | 'alltime') {
+  if (viewMode.value === mode) return
+  viewMode.value = mode
+  fetchLeaderboard()
+}
 
 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`
+
+onMounted(() => {
+  fetchLeaderboard()
+  countdownHandle = setInterval(updateCountdown, 60_000)
+})
+
+onUnmounted(() => {
+  if (countdownHandle) clearInterval(countdownHandle)
+})
 </script>
 
 <template>
@@ -43,13 +82,43 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
     <div class="max-w-4xl mx-auto w-full flex flex-col flex-1 min-h-0">
 
       <!-- Header -->
-      <div class="mb-6 flex items-baseline justify-between">
-        <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider">
-          <span class="gradient-text">RANKINGS</span>
-        </h2>
-        <span class="font-mono text-text-muted text-xs">
-          {{ bots.length }} fighters
-        </span>
+      <div class="mb-4">
+        <div class="flex items-baseline justify-between mb-3">
+          <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider">
+            <span class="gradient-text">RANKINGS</span>
+          </h2>
+          <span class="font-mono text-text-muted text-xs">
+            {{ entries.length }} fighters
+          </span>
+        </div>
+
+        <!-- View toggle + season info -->
+        <div class="flex items-center gap-3 flex-wrap">
+          <div class="flex gap-1">
+            <button
+              class="px-3 py-1.5 font-pixel text-[10px] tracking-wider border rounded-md transition-all"
+              :class="viewMode === 'season'
+                ? 'border-neon-cyan bg-neon-cyan/15 text-neon-cyan'
+                : 'border-border text-text-muted hover:border-white/20'"
+              @click="toggleView('season')"
+            >
+              THIS SEASON
+            </button>
+            <button
+              class="px-3 py-1.5 font-pixel text-[10px] tracking-wider border rounded-md transition-all"
+              :class="viewMode === 'alltime'
+                ? 'border-neon-cyan bg-neon-cyan/15 text-neon-cyan'
+                : 'border-border text-text-muted hover:border-white/20'"
+              @click="toggleView('alltime')"
+            >
+              ALL TIME
+            </button>
+          </div>
+          <div v-if="season && viewMode === 'season'" class="flex items-center gap-2">
+            <span class="font-display font-bold text-xs text-neon-purple tracking-wider">{{ season.name }}</span>
+            <span class="font-mono text-[10px] text-text-muted">{{ countdown }}</span>
+          </div>
+        </div>
       </div>
 
       <!-- Loading -->
@@ -58,6 +127,13 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
         <p class="font-display text-sm text-text-muted animate-pulse tracking-widest">LOADING FIGHTERS...</p>
       </div>
 
+      <!-- Empty -->
+      <div v-else-if="entries.length === 0" class="flex-1 flex items-center justify-center">
+        <p class="font-display text-text-muted tracking-wider">
+          {{ viewMode === 'season' ? 'No fights this season yet.' : 'No fighters registered.' }}
+        </p>
+      </div>
+
       <!-- Table -->
       <div v-else class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50">
         <table class="w-full">
@@ -73,45 +149,46 @@ const record = (b: Bot) => `${b.wins}W - ${b.losses}L`
           </thead>
           <tbody>
             <tr
-              v-for="(bot, index) in bots"
-              :key="bot.id"
+              v-for="(entry, index) in entries"
+              :key="entry.botId"
               class="border-b border-border/50 hover:bg-surface-overlay/30 transition-colors"
             >
               <td class="text-center px-4 py-3 font-display font-bold text-lg"
                   :class="index === 0 ? 'text-neon-yellow glow-cyan' : index < 3 ? 'text-neon-cyan' : 'text-text-muted'">
-                {{ index + 1 }}
+                <span v-if="index < 3">{{ ['[1st]', '[2nd]', '[3rd]'][index] }}</span>
+                <span v-else>{{ index + 1 }}</span>
               </td>
               <td class="px-4 py-3">
-                <RouterLink :to="`/bot/${bot.name}`" class="flex items-center gap-2 hover:text-neon-cyan transition-colors">
+                <RouterLink :to="`/bot/${entry.botName}`" class="flex items-center gap-2 hover:text-neon-cyan transition-colors">
                   <SpritePreview
-                    :seed="bot.avatarSeed || bot.name"
-                    :archetype="bot.archetype || 'standard'"
-                    :tier="bot.tier"
+                    :seed="entry.avatarSeed || entry.botName"
+                    :archetype="entry.archetype || 'standard'"
+                    :tier="entry.tier"
                     :size="24"
                     class="shrink-0"
                   />
                   <span class="font-display font-bold text-sm tracking-wide text-text-primary truncate">
-                    {{ bot.name }}
+                    {{ entry.botName }}
                   </span>
                 </RouterLink>
               </td>
               <td class="text-center px-4 py-3">
-                <span class="font-display text-[10px] font-bold tracking-wider" :class="tierClass(bot.tier)">
-                  {{ tierName(bot.tier) }}
+                <span class="font-display text-[10px] font-bold tracking-wider" :class="tierClass(entry.tier)">
+                  {{ tierName(entry.tier) }}
                 </span>
               </td>
               <td class="text-right px-4 py-3 font-mono font-bold text-sm"
-                  :class="bot.eloRating >= 1500 ? 'text-neon-cyan' : bot.eloRating >= 1300 ? 'text-text-primary' : 'text-text-secondary'">
-                {{ Math.round(bot.eloRating) }}
+                  :class="entry.eloRating >= 1500 ? 'text-neon-cyan' : entry.eloRating >= 1300 ? 'text-text-primary' : 'text-text-secondary'">
+                {{ Math.round(entry.eloRating) }}
               </td>
               <td class="text-right px-4 py-3 font-mono text-xs text-text-secondary hidden sm:table-cell">
-                <span class="text-neon-cyan">{{ bot.wins }}W</span>
+                <span class="text-neon-cyan">{{ entry.wins }}W</span>
                 <span class="text-text-muted"> - </span>
-                <span class="text-neon-pink">{{ bot.losses }}L</span>
+                <span class="text-neon-pink">{{ entry.losses }}L</span>
               </td>
               <td class="text-right px-4 py-3 font-mono text-xs hidden sm:table-cell"
-                  :class="bot.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-muted'">
-                {{ bot.winStreak > 0 ? `${bot.winStreak}x` : '-' }}
+                  :class="(entry.winStreak || 0) >= 3 ? 'text-neon-yellow' : 'text-text-muted'">
+                {{ (entry.winStreak || 0) > 0 ? `${entry.winStreak}x` : '-' }}
               </td>
             </tr>
           </tbody>