DorianandClaude Opus 4.6
c98007e95c
All empty catch blocks across 8 Vue pages now log warnings. User-initiated actions (fight, matchmake) also surface errors in the UI via fightError/loadError refs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
107 lines
4.1 KiB
Vue
107 lines
4.1 KiB
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 (err) {
|
|
console.warn('[Leaderboard] load failed:', err)
|
|
}
|
|
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>
|