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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
|
<div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-y-auto">
|
||||||
<div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">
|
<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">
|
<div v-if="isLoading" class="flex-1 flex items-center justify-center">
|
||||||
<p class="font-display text-text-muted animate-pulse">LOADING...</p>
|
<p class="font-display text-text-muted animate-pulse">LOADING...</p>
|
||||||
@@ -279,288 +279,302 @@ const tierClass = (t: number) => `tier-${t}`
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<!-- Header -->
|
<div class="lg:flex lg:gap-8 lg:items-start">
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Customization panel (owner only) -->
|
<!-- LEFT COLUMN: Character display -->
|
||||||
<div v-if="showCustomize && isOwner" class="mb-4 border border-neon-cyan/20 bg-surface-raised/60 p-4">
|
<div class="lg:w-[340px] lg:shrink-0 lg:sticky lg:top-6">
|
||||||
<p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
|
<div class="border border-border bg-surface-raised/30 p-4 mb-5 lg:mb-0">
|
||||||
CUSTOMIZE CHARACTER
|
<!-- Human player: just the human avatar, centered -->
|
||||||
</p>
|
<div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
|
||||||
|
<HumanPreview
|
||||||
<!-- Live preview -->
|
:seed="stats.avatarSeed || stats.name"
|
||||||
<div class="flex justify-center mb-3">
|
archetype="human"
|
||||||
<SpritePreview
|
:size="220"
|
||||||
:seed="stats.avatarSeed || stats.name"
|
:win-rate="(stats.winRate || 0) / 100"
|
||||||
:archetype="custForm.archetype || stats.archetype"
|
anim="idle"
|
||||||
:tier="stats.tier"
|
class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
|
||||||
: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>
|
</div>
|
||||||
</label>
|
<!-- Bot player: human controller + wire + bot sprite -->
|
||||||
<label class="flex-1">
|
<div v-else class="flex items-end justify-between mb-3 relative">
|
||||||
<span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
|
<HumanPreview
|
||||||
<div class="flex items-center gap-1 mt-0.5">
|
:seed="stats.avatarSeed || stats.name"
|
||||||
<input type="color" v-model="custForm.secondaryColor"
|
:archetype="stats.archetype || 'standard'"
|
||||||
class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
|
:size="200"
|
||||||
<span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
|
: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>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Accessories -->
|
<!-- RIGHT COLUMN: Stats, actions, fights -->
|
||||||
<p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
|
<div class="flex-1 min-w-0 flex flex-col min-h-0">
|
||||||
<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>
|
<!-- 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
|
<!-- Streaks row -->
|
||||||
class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
|
<div class="flex gap-2 mb-4">
|
||||||
font-display font-bold text-xs tracking-wider
|
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||||
hover:bg-neon-cyan/20 transition-all
|
<p class="font-display font-bold text-base"
|
||||||
disabled:opacity-30 disabled:cursor-not-allowed"
|
:class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
|
||||||
:disabled="isSaving"
|
{{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
|
||||||
@click="saveCustomization"
|
</p>
|
||||||
>
|
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
|
||||||
{{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
|
</div>
|
||||||
</button>
|
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
||||||
</div>
|
<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 -->
|
<!-- Fight actions -->
|
||||||
<div class="grid grid-cols-3 gap-2 mb-4">
|
<div class="flex gap-2 mb-4">
|
||||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
<button
|
||||||
<p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
|
class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
|
||||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
|
font-display font-black text-sm tracking-wider
|
||||||
</div>
|
hover:bg-neon-pink/20 transition-all neon-border-pink
|
||||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
disabled:opacity-30 disabled:cursor-not-allowed"
|
||||||
<p class="font-display font-black text-xl">
|
:disabled="isJoining"
|
||||||
<span class="text-neon-cyan">{{ stats.wins }}</span>
|
@click="instantFight"
|
||||||
<span class="text-text-muted text-sm">-</span>
|
>
|
||||||
<span class="text-neon-pink">{{ stats.losses }}</span>
|
{{ 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>
|
||||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
|
<div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
|
||||||
</div>
|
<RouterLink
|
||||||
<div class="border border-border bg-surface-raised/50 p-2.5 text-center">
|
v-for="fight in stats.recentFights"
|
||||||
<p class="font-display font-black text-xl"
|
:key="fight.id"
|
||||||
:class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
|
:to="`/arena/${fight.id}`"
|
||||||
{{ stats.winRate }}%
|
class="flex items-center justify-between px-3 py-2 border border-border
|
||||||
</p>
|
bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
|
||||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
|
>
|
||||||
</div>
|
<span class="font-display font-bold w-6"
|
||||||
</div>
|
: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 -->
|
<!-- Sign out (only if owner) -->
|
||||||
<div class="flex gap-2 mb-4">
|
<div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
|
||||||
<div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
|
<button
|
||||||
<p class="font-display font-bold text-base"
|
class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
|
||||||
:class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
|
@click="handleSignOut"
|
||||||
{{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
|
>
|
||||||
</p>
|
Sign out
|
||||||
<p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
|
</button>
|
||||||
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -64,6 +64,33 @@ const liveAnnouncement = ref('')
|
|||||||
const liveAnnouncementColor = ref('#ffffff')
|
const liveAnnouncementColor = ref('#ffffff')
|
||||||
const liveAnnouncementVisible = ref(false)
|
const liveAnnouncementVisible = ref(false)
|
||||||
const currentChallengeInfo = ref<{ type: string; label: string } | null>(null)
|
const currentChallengeInfo = ref<{ type: string; label: string } | null>(null)
|
||||||
|
const pendingChallengeData = ref<{ data: any; receivedAt: number } | null>(null)
|
||||||
|
|
||||||
|
// Map 'human' archetype to a human-like fighter archetype for the sprite system
|
||||||
|
const HUMAN_FIGHTER_ARCHETYPES = ['boxer', 'wrestler', 'gladiator', 'ninja', 'cowboy', 'pirate', 'samurai', 'viking', 'knight']
|
||||||
|
function humanFighterArchetype(seed: string): string {
|
||||||
|
let h = 0
|
||||||
|
for (let i = 0; i < seed.length; i++) h = ((h << 5) - h + seed.charCodeAt(i)) | 0
|
||||||
|
return HUMAN_FIGHTER_ARCHETYPES[Math.abs(h) % HUMAN_FIGHTER_ARCHETYPES.length]
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyChallenge(data: any, receivedAt?: number) {
|
||||||
|
const elapsed = receivedAt ? Date.now() - receivedAt : 0
|
||||||
|
const remaining = Math.max(1000, (data.timeoutMs || 8000) - elapsed)
|
||||||
|
humanChallenge.value = {
|
||||||
|
type: data.type,
|
||||||
|
label: data.label,
|
||||||
|
prompt: data.prompt,
|
||||||
|
roundNumber: data.round,
|
||||||
|
remainingMs: remaining,
|
||||||
|
scoring: data.scoring,
|
||||||
|
}
|
||||||
|
humanAnswer.value = ''
|
||||||
|
humanSubmitted.value = false
|
||||||
|
humanTimer.value = Math.ceil(remaining / 1000)
|
||||||
|
startTimer()
|
||||||
|
nextTick(() => answerInput.value?.focus())
|
||||||
|
}
|
||||||
|
|
||||||
const myBotId = computed(() => {
|
const myBotId = computed(() => {
|
||||||
if (!isLoggedIn.value || !myBot.value) return null
|
if (!isLoggedIn.value || !myBot.value) return null
|
||||||
@@ -222,10 +249,14 @@ async function initLiveScene() {
|
|||||||
liveCanvas.value = newCanvas
|
liveCanvas.value = newCanvas
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Map 'human' archetype to a fighter-looking archetype for the sprite system
|
||||||
|
const archA = data.botA.archetype === 'human' ? humanFighterArchetype(data.botA.avatarSeed || data.botA.name) : data.botA.archetype
|
||||||
|
const archB = data.botB.archetype === 'human' ? humanFighterArchetype(data.botB.avatarSeed || data.botB.name) : data.botB.archetype
|
||||||
|
|
||||||
liveScene = await createFightScene({
|
liveScene = await createFightScene({
|
||||||
canvas: liveCanvas.value,
|
canvas: liveCanvas.value,
|
||||||
botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: data.botA.archetype, customization: data.botA.customization },
|
botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: archA, customization: data.botA.customization },
|
||||||
botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: data.botB.archetype, customization: data.botB.customization },
|
botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: archB, customization: data.botB.customization },
|
||||||
arena: data.arena,
|
arena: data.arena,
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -256,6 +287,25 @@ function connectSSE() {
|
|||||||
try {
|
try {
|
||||||
const data = JSON.parse(e.data)
|
const data = JSON.parse(e.data)
|
||||||
currentChallengeInfo.value = { type: data.challenge.type, label: data.challenge.label }
|
currentChallengeInfo.value = { type: data.challenge.type, label: data.challenge.label }
|
||||||
|
// Show challenge question in battle log
|
||||||
|
liveLogItems.value.push({
|
||||||
|
type: 'challenge',
|
||||||
|
round: data.round,
|
||||||
|
text: `${data.challenge.label}: ${data.challenge.prompt}`,
|
||||||
|
color: 'neon-green',
|
||||||
|
})
|
||||||
|
scrollLiveLog()
|
||||||
|
} catch { /* */ }
|
||||||
|
})
|
||||||
|
|
||||||
|
eventSource.addEventListener('human_challenge', (e) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(e.data)
|
||||||
|
if (roundCooldown.value > 0) {
|
||||||
|
pendingChallengeData.value = { data, receivedAt: Date.now() }
|
||||||
|
} else {
|
||||||
|
applyChallenge(data)
|
||||||
|
}
|
||||||
} catch { /* */ }
|
} catch { /* */ }
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -370,6 +420,11 @@ async function handleRoundEnd(data: any) {
|
|||||||
roundCooldown.value--
|
roundCooldown.value--
|
||||||
if (roundCooldown.value <= 0) {
|
if (roundCooldown.value <= 0) {
|
||||||
if (cooldownHandle) { clearInterval(cooldownHandle); cooldownHandle = null }
|
if (cooldownHandle) { clearInterval(cooldownHandle); cooldownHandle = null }
|
||||||
|
// Apply any buffered challenge from SSE
|
||||||
|
if (pendingChallengeData.value) {
|
||||||
|
applyChallenge(pendingChallengeData.value.data, pendingChallengeData.value.receivedAt)
|
||||||
|
pendingChallengeData.value = null
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
@@ -467,6 +522,7 @@ async function fightAgain(botId: string) {
|
|||||||
replayDone.value = false
|
replayDone.value = false
|
||||||
humanChallenge.value = null
|
humanChallenge.value = null
|
||||||
humanSubmitted.value = false
|
humanSubmitted.value = false
|
||||||
|
pendingChallengeData.value = null
|
||||||
roundCooldown.value = 0
|
roundCooldown.value = 0
|
||||||
if (liveScene) { liveScene.destroy(); liveScene = null }
|
if (liveScene) { liveScene.destroy(); liveScene = null }
|
||||||
liveSceneReady.value = false
|
liveSceneReady.value = false
|
||||||
@@ -567,6 +623,9 @@ function stopAutoBattle() {
|
|||||||
<div v-for="(item, idx) in liveLogItems" :key="idx">
|
<div v-for="(item, idx) in liveLogItems" :key="idx">
|
||||||
<div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
|
<div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
|
||||||
<p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
|
<p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
|
||||||
|
<div v-else-if="item.type === 'challenge'" class="bg-neon-green/[0.06] border border-neon-green/20 rounded-md px-3 py-1.5 my-1">
|
||||||
|
<p class="text-neon-green text-xs font-mono leading-snug">{{ item.text }}</p>
|
||||||
|
</div>
|
||||||
<div v-else-if="item.type === 'responseA'" class="bg-neon-cyan/[0.04] border-l-2 border-neon-cyan/30 rounded-r-md px-3 py-1.5 my-1">
|
<div v-else-if="item.type === 'responseA'" class="bg-neon-cyan/[0.04] border-l-2 border-neon-cyan/30 rounded-r-md px-3 py-1.5 my-1">
|
||||||
<p class="text-neon-cyan text-sm leading-snug">{{ item.text }}</p>
|
<p class="text-neon-cyan text-sm leading-snug">{{ item.text }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -91,8 +91,11 @@ export async function joinQueue(botId: string): Promise<string> {
|
|||||||
const opponent = waitingQueue.shift()!
|
const opponent = waitingQueue.shift()!
|
||||||
clearTimeout(opponent.timeoutHandle)
|
clearTimeout(opponent.timeoutHandle)
|
||||||
|
|
||||||
// Start the fight
|
// Start the fight — ensure human players are always botA (left side)
|
||||||
const fightId = await startFight(opponent.botId, botId)
|
const isHumanJoiner = bot.webhookUrl === 'http://human.local/'
|
||||||
|
const fightId = isHumanJoiner
|
||||||
|
? await startFight(botId, opponent.botId)
|
||||||
|
: await startFight(opponent.botId, botId)
|
||||||
opponent.resolve(fightId)
|
opponent.resolve(fightId)
|
||||||
return fightId
|
return fightId
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user