DorianandClaude Opus 4.6
b0926db9ed
TournamentListPage with status filters, TournamentPage with CSS grid bracket display, lobby view for open tournaments, champion banner, live polling for active tournaments. Routes at /tournaments and /tournament/:id. NavBar link added. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
3.1 KiB
Vue
95 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
import PixelGlove from './PixelGlove.vue'
|
|
import { useNostr } from '../composables/useNostr'
|
|
|
|
const { bot, isLoggedIn } = useNostr()
|
|
const isMenuOpen = ref(false)
|
|
|
|
const links = [
|
|
{ to: '/join', label: 'FIGHT!' },
|
|
{ to: '/fight-card', label: 'FIGHT CARD' },
|
|
{ to: '/arena', label: 'WATCH' },
|
|
{ to: '/feed', label: 'FEED' },
|
|
{ to: '/tournaments', label: 'TOURNEYS' },
|
|
{ to: '/leaderboard', label: 'RANKINGS' },
|
|
{ to: '/docs', label: 'DOCS' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="border-b border-border bg-surface/90 backdrop-blur-md sticky top-0 z-50">
|
|
<div class="px-6 h-16 flex items-center justify-between">
|
|
<RouterLink to="/" class="flex items-center gap-2 group">
|
|
<span class="flex items-center gap-0.5" style="transform: rotate(-10deg)">
|
|
<PixelGlove :size="18" />
|
|
<PixelGlove :size="18" flip />
|
|
</span>
|
|
<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>
|
|
<RouterLink
|
|
v-if="isLoggedIn && bot"
|
|
:to="`/bot/${bot.name}`"
|
|
class="text-xs font-display font-bold text-neon-cyan tracking-wider
|
|
hover:text-neon-pink transition-colors duration-200"
|
|
>
|
|
{{ bot.name.toUpperCase() }}
|
|
</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>
|
|
<RouterLink
|
|
v-if="isLoggedIn && bot"
|
|
:to="`/bot/${bot.name}`"
|
|
class="block text-sm font-display font-bold text-neon-cyan tracking-wider"
|
|
@click="isMenuOpen = false"
|
|
>
|
|
{{ bot.name.toUpperCase() }}
|
|
</RouterLink>
|
|
</div>
|
|
</nav>
|
|
</template>
|