DorianandClaude Opus 4.6
335c148866
- 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>
69 lines
2.1 KiB
Vue
69 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
const isMenuOpen = ref(false)
|
|
|
|
const links = [
|
|
{ to: '/arena', label: 'ARENA' },
|
|
{ to: '/schedule', label: 'FIGHT CARD' },
|
|
{ to: '/leaderboard', label: 'RANKINGS' },
|
|
{ to: '/register', label: 'ENTER A BOT' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="border-b border-border bg-surface/90 backdrop-blur-md sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
<RouterLink to="/" class="flex items-center gap-3 group">
|
|
<span class="font-display font-black text-neon-pink text-lg tracking-widest glow-pink">
|
|
BOTFIGHTS
|
|
</span>
|
|
</RouterLink>
|
|
|
|
<div class="hidden md:flex items-center gap-6">
|
|
<RouterLink
|
|
v-for="link in links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="text-xs font-display font-bold text-text-secondary tracking-wider
|
|
hover:text-neon-cyan transition-colors duration-200"
|
|
>
|
|
{{ link.label }}
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<button
|
|
class="md:hidden text-text-secondary hover:text-neon-cyan transition-colors"
|
|
@click="isMenuOpen = !isMenuOpen"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
v-if="!isMenuOpen"
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
/>
|
|
<path
|
|
v-else
|
|
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="isMenuOpen" class="md:hidden border-t border-border px-6 py-4 space-y-4 bg-surface">
|
|
<RouterLink
|
|
v-for="link in links"
|
|
:key="link.to"
|
|
:to="link.to"
|
|
class="block text-sm font-display font-bold text-text-secondary tracking-wider
|
|
hover:text-neon-cyan transition-colors"
|
|
@click="isMenuOpen = false"
|
|
>
|
|
{{ link.label }}
|
|
</RouterLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|