fix: human fight UX — SSE challenge input, fighter sprites, battle log questions, left-side positioning
- Add SSE human_challenge listener for instant input activation with auto-focus - Buffer challenges during 3s round cooldown, apply with correct remaining time - Map 'human' archetype to fighter-looking archetypes (boxer, ninja, etc.) in sprite system - Show challenge questions in battle log via round_start SSE events - Ensure human players are always botA (left side) in queue matchmaking Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
8448f1d823
commit
1906821452
@@ -267,8 +267,8 @@ const tierClass = (t: number) => `tier-${t}`
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
|
||||
<div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">
|
||||
<div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-y-auto">
|
||||
<div class="max-w-lg lg:max-w-4xl 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>
|
||||
@@ -279,288 +279,302 @@ const tierClass = (t: number) => `tier-${t}`
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-5">
|
||||
<!-- Human player: just the human avatar, centered -->
|
||||
<div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
|
||||
<HumanPreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
archetype="human"
|
||||
:size="220"
|
||||
:win-rate="(stats.winRate || 0) / 100"
|
||||
anim="idle"
|
||||
class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
|
||||
/>
|
||||
</div>
|
||||
<!-- Bot player: human controller + wire + bot sprite -->
|
||||
<div v-else class="flex items-end justify-between mb-3 relative">
|
||||
<HumanPreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="stats.archetype || 'standard'"
|
||||
:size="200"
|
||||
:win-rate="(stats.winRate || 0) / 100"
|
||||
anim="idle"
|
||||
class="drop-shadow-[0_0_12px_rgba(0,0,0,0.6)] shrink-0 relative z-10"
|
||||
/>
|
||||
<!-- Wire from gamepad to bot with electricity -->
|
||||
<svg class="absolute bottom-8 left-0 w-full h-24 z-0 pointer-events-none" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="wire-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#444455"/>
|
||||
<stop offset="50%" stop-color="#555566"/>
|
||||
<stop offset="100%" stop-color="#444455"/>
|
||||
</linearGradient>
|
||||
<filter id="elec-glow">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Main wire -->
|
||||
<path d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="url(#wire-grad)" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- Electricity pulse 1 -->
|
||||
<path class="elec-pulse-1" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="8 20" opacity="0.8"/>
|
||||
<!-- Electricity pulse 2 (reverse) -->
|
||||
<path class="elec-pulse-2" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#ff2d7b" stroke-width="1" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="5 25" opacity="0.6"/>
|
||||
<!-- Spark nodes -->
|
||||
<circle class="elec-spark-1" cx="45%" cy="55%" r="2" fill="#00f0ff" filter="url(#elec-glow)" opacity="0"/>
|
||||
<circle class="elec-spark-2" cx="62%" cy="45%" r="2" fill="#ff2d7b" filter="url(#elec-glow)" opacity="0"/>
|
||||
</svg>
|
||||
<SpritePreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="stats.archetype"
|
||||
:tier="stats.tier"
|
||||
:size="160"
|
||||
:customization="stats.customization || undefined"
|
||||
class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
|
||||
:style="{ '--glow': stats.tierColor + '80' } as any"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
|
||||
{{ stats.name }}
|
||||
</h2>
|
||||
<div class="inline-block px-3 py-0.5 border text-[9px] font-display font-black tracking-widest mt-1"
|
||||
:style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
|
||||
{{ stats.tierName }}
|
||||
</div>
|
||||
<p class="font-display text-sm font-bold tracking-widest mt-1"
|
||||
:style="{ color: stats.tierColor }">
|
||||
{{ getStatusTitle(stats) }}
|
||||
</p>
|
||||
<p class="font-mono text-text-muted text-[10px] mt-0.5">
|
||||
#{{ stats.rank }} of {{ stats.totalBots }}
|
||||
</p>
|
||||
<button
|
||||
v-if="isOwner && stats.archetype !== 'human'"
|
||||
class="mt-2 font-mono text-[10px] text-neon-cyan/60 hover:text-neon-cyan transition-colors"
|
||||
@click="showCustomize = !showCustomize; if (showCustomize) initCustForm()"
|
||||
>
|
||||
{{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="lg:flex lg:gap-8 lg:items-start">
|
||||
|
||||
<!-- Customization panel (owner only) -->
|
||||
<div v-if="showCustomize && isOwner" class="mb-4 border border-neon-cyan/20 bg-surface-raised/60 p-4">
|
||||
<p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
|
||||
CUSTOMIZE CHARACTER
|
||||
</p>
|
||||
|
||||
<!-- Live preview -->
|
||||
<div class="flex justify-center mb-3">
|
||||
<SpritePreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="custForm.archetype || stats.archetype"
|
||||
:tier="stats.tier"
|
||||
:size="120"
|
||||
:customization="previewCustomization"
|
||||
class="drop-shadow-[0_0_12px_rgba(0,255,255,0.3)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Archetype selector -->
|
||||
<label class="block mb-2">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">ARCHETYPE</span>
|
||||
<select
|
||||
v-model="custForm.archetype"
|
||||
class="mt-0.5 w-full bg-surface-base border border-border text-text-primary
|
||||
font-mono text-xs px-2 py-1.5 focus:border-neon-cyan/50 outline-none"
|
||||
>
|
||||
<option value="">Default (from seed)</option>
|
||||
<option v-for="a in ARCHETYPES" :key="a" :value="a">{{ a.replace(/_/g, ' ') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<!-- Colors -->
|
||||
<div class="flex gap-3 mb-2">
|
||||
<label class="flex-1">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">PRIMARY</span>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<input type="color" v-model="custForm.primaryColor"
|
||||
class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
|
||||
<span class="font-mono text-[10px] text-text-muted">{{ custForm.primaryColor }}</span>
|
||||
<!-- LEFT COLUMN: Character display -->
|
||||
<div class="lg:w-[340px] lg:shrink-0 lg:sticky lg:top-6">
|
||||
<div class="border border-border bg-surface-raised/30 p-4 mb-5 lg:mb-0">
|
||||
<!-- Human player: just the human avatar, centered -->
|
||||
<div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
|
||||
<HumanPreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
archetype="human"
|
||||
:size="220"
|
||||
:win-rate="(stats.winRate || 0) / 100"
|
||||
anim="idle"
|
||||
class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<input type="color" v-model="custForm.secondaryColor"
|
||||
class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
|
||||
<span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
|
||||
<!-- Bot player: human controller + wire + bot sprite -->
|
||||
<div v-else class="flex items-end justify-between mb-3 relative">
|
||||
<HumanPreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="stats.archetype || 'standard'"
|
||||
:size="200"
|
||||
:win-rate="(stats.winRate || 0) / 100"
|
||||
anim="idle"
|
||||
class="drop-shadow-[0_0_12px_rgba(0,0,0,0.6)] shrink-0 relative z-10"
|
||||
/>
|
||||
<!-- Wire from gamepad to bot with electricity -->
|
||||
<svg class="absolute bottom-8 left-0 w-full h-24 z-0 pointer-events-none" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="wire-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#444455"/>
|
||||
<stop offset="50%" stop-color="#555566"/>
|
||||
<stop offset="100%" stop-color="#444455"/>
|
||||
</linearGradient>
|
||||
<filter id="elec-glow">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Main wire -->
|
||||
<path d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="url(#wire-grad)" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- Electricity pulse 1 -->
|
||||
<path class="elec-pulse-1" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="8 20" opacity="0.8"/>
|
||||
<!-- Electricity pulse 2 (reverse) -->
|
||||
<path class="elec-pulse-2" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#ff2d7b" stroke-width="1" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="5 25" opacity="0.6"/>
|
||||
<!-- Spark nodes -->
|
||||
<circle class="elec-spark-1" cx="45%" cy="55%" r="2" fill="#00f0ff" filter="url(#elec-glow)" opacity="0"/>
|
||||
<circle class="elec-spark-2" cx="62%" cy="45%" r="2" fill="#ff2d7b" filter="url(#elec-glow)" opacity="0"/>
|
||||
</svg>
|
||||
<SpritePreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="stats.archetype"
|
||||
:tier="stats.tier"
|
||||
:size="160"
|
||||
:customization="stats.customization || undefined"
|
||||
class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
|
||||
:style="{ '--glow': stats.tierColor + '80' } as any"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<!-- Name & tier info below the sprite -->
|
||||
<div class="text-center">
|
||||
<h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
|
||||
{{ stats.name }}
|
||||
</h2>
|
||||
<div class="inline-block px-3 py-0.5 border text-[9px] font-display font-black tracking-widest mt-1"
|
||||
:style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
|
||||
{{ stats.tierName }}
|
||||
</div>
|
||||
<p class="font-display text-sm font-bold tracking-widest mt-1"
|
||||
:style="{ color: stats.tierColor }">
|
||||
{{ getStatusTitle(stats) }}
|
||||
</p>
|
||||
<p class="font-mono text-text-muted text-[10px] mt-0.5">
|
||||
#{{ stats.rank }} of {{ stats.totalBots }}
|
||||
</p>
|
||||
<button
|
||||
v-if="isOwner && stats.archetype !== 'human'"
|
||||
class="mt-2 font-mono text-[10px] text-neon-cyan/60 hover:text-neon-cyan transition-colors"
|
||||
@click="showCustomize = !showCustomize; if (showCustomize) initCustForm()"
|
||||
>
|
||||
{{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customization panel (owner only) — below sprite on left column -->
|
||||
<div v-if="showCustomize && isOwner" class="mt-4 border border-neon-cyan/20 bg-surface-raised/60 p-4 lg:mb-0 mb-4">
|
||||
<p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
|
||||
CUSTOMIZE CHARACTER
|
||||
</p>
|
||||
|
||||
<!-- Live preview -->
|
||||
<div class="flex justify-center mb-3">
|
||||
<SpritePreview
|
||||
:seed="stats.avatarSeed || stats.name"
|
||||
:archetype="custForm.archetype || stats.archetype"
|
||||
:tier="stats.tier"
|
||||
:size="120"
|
||||
:customization="previewCustomization"
|
||||
class="drop-shadow-[0_0_12px_rgba(0,255,255,0.3)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Archetype selector -->
|
||||
<label class="block mb-2">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">ARCHETYPE</span>
|
||||
<select
|
||||
v-model="custForm.archetype"
|
||||
class="mt-0.5 w-full bg-surface-base border border-border text-text-primary
|
||||
font-mono text-xs px-2 py-1.5 focus:border-neon-cyan/50 outline-none"
|
||||
>
|
||||
<option value="">Default (from seed)</option>
|
||||
<option v-for="a in ARCHETYPES" :key="a" :value="a">{{ a.replace(/_/g, ' ') }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<!-- Colors -->
|
||||
<div class="flex gap-3 mb-2">
|
||||
<label class="flex-1">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">PRIMARY</span>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<input type="color" v-model="custForm.primaryColor"
|
||||
class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
|
||||
<span class="font-mono text-[10px] text-text-muted">{{ custForm.primaryColor }}</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex-1">
|
||||
<span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
|
||||
<div class="flex items-center gap-1 mt-0.5">
|
||||
<input type="color" v-model="custForm.secondaryColor"
|
||||
class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
|
||||
<span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Accessories -->
|
||||
<p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceVisor"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Visor</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceMohawk"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Mohawk</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceHorns"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Horns</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p v-if="custError" class="font-mono text-[10px] text-neon-pink mb-2">{{ custError }}</p>
|
||||
|
||||
<button
|
||||
class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
|
||||
font-display font-bold text-xs tracking-wider
|
||||
hover:bg-neon-cyan/20 transition-all
|
||||
disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
:disabled="isSaving"
|
||||
@click="saveCustomization"
|
||||
>
|
||||
{{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accessories -->
|
||||
<p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
|
||||
<div class="flex gap-3 mb-3">
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceVisor"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Visor</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceMohawk"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Mohawk</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-1 cursor-pointer">
|
||||
<input type="checkbox" v-model="custForm.forceHorns"
|
||||
class="accent-neon-cyan" />
|
||||
<span class="font-mono text-[10px] text-text-secondary">Horns</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- RIGHT COLUMN: Stats, actions, fights -->
|
||||
<div class="flex-1 min-w-0 flex flex-col min-h-0">
|
||||
|
||||
<p v-if="custError" class="font-mono text-[10px] text-neon-pink mb-2">{{ custError }}</p>
|
||||
<!-- Stats -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
|
||||
</div>
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl">
|
||||
<span class="text-neon-cyan">{{ stats.wins }}</span>
|
||||
<span class="text-text-muted text-sm">-</span>
|
||||
<span class="text-neon-pink">{{ stats.losses }}</span>
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
|
||||
</div>
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl"
|
||||
:class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
|
||||
{{ stats.winRate }}%
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
|
||||
font-display font-bold text-xs tracking-wider
|
||||
hover:bg-neon-cyan/20 transition-all
|
||||
disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
:disabled="isSaving"
|
||||
@click="saveCustomization"
|
||||
>
|
||||
{{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Streaks row -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base"
|
||||
:class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
|
||||
{{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
|
||||
</div>
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
|
||||
</div>
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
|
||||
</div>
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl">
|
||||
<span class="text-neon-cyan">{{ stats.wins }}</span>
|
||||
<span class="text-text-muted text-sm">-</span>
|
||||
<span class="text-neon-pink">{{ stats.losses }}</span>
|
||||
<!-- Fight actions -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<button
|
||||
class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
|
||||
font-display font-black text-sm tracking-wider
|
||||
hover:bg-neon-pink/20 transition-all neon-border-pink
|
||||
disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
:disabled="isJoining"
|
||||
@click="instantFight"
|
||||
>
|
||||
{{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
|
||||
font-display font-bold text-sm tracking-wider
|
||||
hover:bg-neon-purple/10 transition-all"
|
||||
@click="showChoose = !showChoose"
|
||||
>
|
||||
CHOOSE FIGHT
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Choose your fight panel -->
|
||||
<div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
|
||||
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
|
||||
FIGHTERS WAITING
|
||||
</p>
|
||||
<div v-if="waitingFighters.length === 0" class="text-center py-3">
|
||||
<p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
|
||||
</div>
|
||||
<button
|
||||
v-for="fighter in waitingFighters"
|
||||
:key="fighter.botId"
|
||||
class="w-full flex items-center justify-between px-3 py-2 border border-border
|
||||
hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
|
||||
disabled:opacity-30"
|
||||
:disabled="isJoining || fighter.botId === stats.id"
|
||||
@click="fightSpecific(fighter.botId)"
|
||||
>
|
||||
<span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
|
||||
<span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Recent fights -->
|
||||
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
|
||||
RECENT BOUTS
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
|
||||
</div>
|
||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-black text-xl"
|
||||
:class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
|
||||
{{ stats.winRate }}%
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
|
||||
<RouterLink
|
||||
v-for="fight in stats.recentFights"
|
||||
:key="fight.id"
|
||||
:to="`/arena/${fight.id}`"
|
||||
class="flex items-center justify-between px-3 py-2 border border-border
|
||||
bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
|
||||
>
|
||||
<span class="font-display font-bold w-6"
|
||||
:class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
|
||||
{{ fight.result }}
|
||||
</span>
|
||||
<span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
|
||||
<span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
|
||||
</RouterLink>
|
||||
<div v-if="stats.recentFights.length === 0" class="text-center py-4">
|
||||
<p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Streaks row -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base"
|
||||
:class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
|
||||
{{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
|
||||
</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
|
||||
<!-- Sign out (only if owner) -->
|
||||
<div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
|
||||
<button
|
||||
class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
|
||||
@click="handleSignOut"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
|
||||
</div>
|
||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||
<p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
|
||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fight actions (only for owner or anyone for now) -->
|
||||
<div class="flex gap-2 mb-4">
|
||||
<button
|
||||
class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
|
||||
font-display font-black text-sm tracking-wider
|
||||
hover:bg-neon-pink/20 transition-all neon-border-pink
|
||||
disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
:disabled="isJoining"
|
||||
@click="instantFight"
|
||||
>
|
||||
{{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
|
||||
font-display font-bold text-sm tracking-wider
|
||||
hover:bg-neon-purple/10 transition-all"
|
||||
@click="showChoose = !showChoose"
|
||||
>
|
||||
CHOOSE FIGHT
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Choose your fight panel -->
|
||||
<div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
|
||||
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
|
||||
FIGHTERS WAITING
|
||||
</p>
|
||||
<div v-if="waitingFighters.length === 0" class="text-center py-3">
|
||||
<p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
|
||||
</div>
|
||||
<button
|
||||
v-for="fighter in waitingFighters"
|
||||
:key="fighter.botId"
|
||||
class="w-full flex items-center justify-between px-3 py-2 border border-border
|
||||
hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
|
||||
disabled:opacity-30"
|
||||
:disabled="isJoining || fighter.botId === stats.id"
|
||||
@click="fightSpecific(fighter.botId)"
|
||||
>
|
||||
<span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
|
||||
<span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Recent fights -->
|
||||
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
|
||||
RECENT BOUTS
|
||||
</p>
|
||||
<div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
|
||||
<RouterLink
|
||||
v-for="fight in stats.recentFights"
|
||||
:key="fight.id"
|
||||
:to="`/arena/${fight.id}`"
|
||||
class="flex items-center justify-between px-3 py-2 border border-border
|
||||
bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
|
||||
>
|
||||
<span class="font-display font-bold w-6"
|
||||
:class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
|
||||
{{ fight.result }}
|
||||
</span>
|
||||
<span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
|
||||
<span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
|
||||
</RouterLink>
|
||||
<div v-if="stats.recentFights.length === 0" class="text-center py-4">
|
||||
<p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sign out (only if owner) -->
|
||||
<div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
|
||||
<button
|
||||
class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
|
||||
@click="handleSignOut"
|
||||
>
|
||||
Sign out
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user