feat: botfights v1 — full fighting game with Kaplay engine

- Vue 3 + Vite + Tailwind 4 frontend with synthwave aesthetic - Hono backend on port 9100 with SQLite/Drizzle - Procedural pixel-art sprite generator (48x48, 8 animation states) - Kaplay fight scene with punch/kick/special/knockback/KO animations - 12 mock bots across 6 tiers with Elo rating system - 9 challenge types, 10 fight arenas with modifiers - Fight replay with staggered battle log and ~1 min timing - Sprite preview page at /sprites Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-06 16:27:54 +00:00
commit 335c148866
44 changed files with 7782 additions and 0 deletions
@@ -0,0 +1,104 @@
+<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) => ['UNRANKED', 'ROOKIE', 'RISING', 'CONTENDER', 'CHAMPION', '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>