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>
This commit is contained in:
Dorian
@@ -0,0 +1,149 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, RouterLink } from 'vue-router'
|
||||
|
||||
interface Bot {
|
||||
id: string
|
||||
name: string
|
||||
avatarSeed: string
|
||||
eloRating: number
|
||||
wins: number
|
||||
losses: number
|
||||
winStreak: number
|
||||
bestStreak: number
|
||||
tier: number
|
||||
isActive: boolean
|
||||
createdAt: 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
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const botName = route.params.name as string
|
||||
const bot = ref<Bot | null>(null)
|
||||
const fights = ref<Fight[]>([])
|
||||
const isLoading = ref(true)
|
||||
|
||||
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
|
||||
)
|
||||
}
|
||||
} catch { /* */ }
|
||||
isLoading.value = false
|
||||
})
|
||||
|
||||
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
|
||||
}
|
||||
</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 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">
|
||||
<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) }}
|
||||
</p>
|
||||
<h2 class="font-display font-black text-3xl sm:text-5xl tracking-wider gradient-text mb-2">
|
||||
{{ bot.name }}
|
||||
</h2>
|
||||
<p class="font-mono text-text-muted text-xs">
|
||||
Fighting since {{ new Date(bot.createdAt).toLocaleDateString() }}
|
||||
</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>
|
||||
</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>
|
||||
</p>
|
||||
<p class="font-display text-[9px] text-text-muted tracking-wider mt-1">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) }}%
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fight history -->
|
||||
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-3">
|
||||
FIGHT HISTORY
|
||||
</p>
|
||||
<div class="flex-1 min-h-0 overflow-y-auto space-y-2">
|
||||
<RouterLink
|
||||
v-for="fight in fights"
|
||||
: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"
|
||||
>
|
||||
<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 }} · {{ fight.arenaInfo?.name }}
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user