botfights/frontend/src/pages/LeaderboardPage.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router'

interface Bot {
  id: string
  name: string
  eloRating: number
  wins: number
  losses: number
  winStreak: number
  bestStreak: number
  tier: number
  isActive: boolean
}

const bots = ref<Bot[]>([])
const isLoading = ref(true)

onMounted(async () => {
  try {
    const res = await fetch('/api/bots')
    if (res.ok) {
      const data = await res.json()
      bots.value = data.sort((a: Bot, b: Bot) => b.eloRating - a.eloRating)
    }
  } catch { /* */ }
  isLoading.value = false
})

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>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
    <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>

      <!-- Table -->
      <div class="flex-1 min-h-0 overflow-y-auto border border-border rounded-lg bg-surface-raised/50 neon-border-purple">
        <table class="w-full">
          <thead class="sticky top-0 bg-surface-raised z-10">
            <tr class="border-b border-border text-text-muted font-display text-[10px] uppercase tracking-[0.15em]">
              <th class="text-center px-4 py-3 w-14">#</th>
              <th class="text-left px-4 py-3">Fighter</th>
              <th class="text-center px-4 py-3">Tier</th>
              <th class="text-right px-4 py-3">Elo</th>
              <th class="text-right px-4 py-3 hidden sm:table-cell">Record</th>
              <th class="text-right px-4 py-3 hidden sm:table-cell">Streak</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(bot, index) in bots"
              :key="bot.id"
              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 }}
              </td>
              <td class="px-4 py-3">
                <RouterLink :to="`/bot/${bot.name}`" class="hover:text-neon-cyan transition-colors">
                  <span class="font-display font-bold text-sm tracking-wide text-text-primary">
                    {{ bot.name }}
                  </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>
              </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) }}
              </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-text-muted"> - </span>
                <span class="text-neon-pink">{{ bot.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` : '-' }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>