lfg2025/botfights
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: mobile human vs AI — multiple choice, two-row VS bar, responsive arena

Browse Source 
- Server-side choice generation for all 22 challenge types (factual + creative)
- Mobile: 3 multiple-choice buttons replace keyboard input (4s timer)
- Two-row VS bar on mobile (names row + HP bars row) in FightPage and FightViewer
- Battle log hidden on mobile to maximize canvas visibility
- Arena page responsive: stacking header, tighter fight cards, no name overflow
- Profile page two-column desktop layout with contained sprite display
- Human fighter sprites with baby growth system

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-07 19:42:49 +00:00
co-authored by Claude Opus 4.6
parent 1906821452
commit 4b46aaf643
9 changed files with 1115 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/BotProfilePage.vue
+117 -132
View File
@@ -279,28 +279,28 @@ const tierClass = (t: number) => `tier-${t}`
</div>
<template v-else>
<div class="lg:flex lg:gap-8 lg:items-start">
<div class="lg:flex lg:gap-6 lg:items-stretch" style="min-height: calc(100vh - 8rem);">
<!-- 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">
<!-- LEFT COLUMN: Character + Stats + Actions -->
<div class="lg:w-[380px] lg:shrink-0 flex flex-col">
<div class="border border-border bg-surface-raised/30 p-6 overflow-hidden">
<!-- Human player: just the human avatar, centered -->
<div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
<div v-if="stats.archetype === 'human'" class="flex justify-center mb-4">
<HumanPreview
:seed="stats.avatarSeed || stats.name"
archetype="human"
:size="220"
:size="200"
: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">
<div v-else class="flex items-end justify-center gap-0 mb-4 relative">
<HumanPreview
:seed="stats.avatarSeed || stats.name"
:archetype="stats.archetype || 'standard'"
:size="200"
:size="150"
: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"
@@ -318,13 +318,9 @@ const tierClass = (t: number) => `tier-${t}`
<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>
@@ -332,16 +328,16 @@ const tierClass = (t: number) => `tier-${t}`
:seed="stats.avatarSeed || stats.name"
:archetype="stats.archetype"
:tier="stats.tier"
:size="160"
:size="140"
:customization="stats.customization || undefined"
class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
class="drop-shadow-[0_0_20px_var(--glow)] relative z-10"
:style="{ '--glow': stats.tierColor + '80' } as any"
/>
</div>
<!-- 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">
<!-- Name & tier -->
<div class="text-center border-t border-border/50 pt-4">
<h2 class="font-display font-black text-2xl lg:text-3xl 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"
@@ -365,97 +361,8 @@ const tierClass = (t: number) => `tier-${t}`
</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>
<!-- RIGHT COLUMN: Stats, actions, fights -->
<div class="flex-1 min-w-0 flex flex-col min-h-0">
<!-- Stats -->
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="grid grid-cols-3 gap-2 mt-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>
@@ -477,8 +384,8 @@ const tierClass = (t: number) => `tier-${t}`
</div>
</div>
<!-- Streaks row -->
<div class="flex gap-2 mb-4">
<!-- Streaks -->
<div class="flex gap-2 mt-2">
<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'">
@@ -497,7 +404,7 @@ const tierClass = (t: number) => `tier-${t}`
</div>
<!-- Fight actions -->
<div class="flex gap-2 mb-4">
<div class="flex gap-2 mt-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
@@ -519,7 +426,7 @@ const tierClass = (t: number) => `tier-${t}`
</div>
<!-- Choose your fight panel -->
<div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
<div v-if="showChoose" class="mt-3 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>
@@ -540,28 +447,76 @@ const tierClass = (t: number) => `tier-${t}`
</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>
<!-- Customization panel (owner only) -->
<div v-if="showCustomize && isOwner" class="mt-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>
<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>
<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>
<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>
<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>
<!-- Sign out (only if owner) -->
@@ -575,6 +530,36 @@ const tierClass = (t: number) => `tier-${t}`
</div>
</div>
<!-- RIGHT COLUMN: Recent bouts (scrollable) -->
<div class="flex-1 min-w-0 flex flex-col min-h-0 mt-6 lg:mt-0">
<div class="border border-border bg-surface-raised/30 flex flex-col flex-1 min-h-0 overflow-hidden">
<div class="px-4 py-3 border-b border-border/50 flex-shrink-0">
<p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em]">
RECENT BOUTS
</p>
</div>
<div class="flex-1 overflow-y-auto p-3 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-8">
<p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
</div>
</div>
</div>
</div>
</div>
</template>
</div>