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

feat: human vs AI mode — live typing challenges, baby growth system, SSE rounds

Browse Source 
- Add choose-mode step: "I BUILD BOTS" vs "I FIGHT MYSELF" paths
- Human registration with baby avatar picker, no webhook required
- Live fight scene with SSE round streaming and real-time challenge UI
- 5-second timer per round, submit answers via browser
- Baby → toddler → kid → teen → adult → hero → super growth stages
- Huge sparkly baby eyes, diapers, pacifiers, bibs, rattles, rosy cheeks
- Speech bubble positioning fix (pushed to outside of sprite)
- Canvas text rendering via offscreen canvas to bypass kaplay color issues
- Voice timing improvements: await pauses between voice lines and hits
- 30 devastating announcement lines, 15 critical/hit word variants
- Orchestrator human player detection + waitForHumanResponse system
- Server endpoints: GET /challenge/:botId, POST /respond/:botId
- Human player auth: register-human route, isHuman flag on login

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-07 15:20:14 +00:00
co-authored by Claude Opus 4.6
parent 56785cfdea
commit 8448f1d823
15 changed files with 1805 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/JoinBoutPage.vue
+270 -7
View File
@@ -3,12 +3,16 @@ import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useNostr } from '../composables/useNostr'
import SpritePreview from '../components/SpritePreview.vue'
import HumanPreview from '../components/HumanPreview.vue'
const router = useRouter()
const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, logout } = useNostr()
const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, registerHuman, logout } = useNostr()
// Steps: 'login' | 'pick-character' | 'name-bot' | 'bot-setup' | 'add-webhook' | 'ready'
// Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'add-webhook' |
// 'pick-human-avatar' | 'name-human' | 'human-guide' | 'ready'
const step = ref<string>('login')
const isHumanMode = ref(false)
const selectedHumanSeed = ref('baby_fighter_1')
const error = ref('')
const isJoining = ref(false)
const queueCount = ref(0)
@@ -17,6 +21,7 @@ let pollHandle: ReturnType<typeof setInterval> | null = null
// Registration form
const selectedArchetype = ref('standard')
const botName = ref('')
const humanName = ref('')
const webhookUrl = ref('')
const showCode = ref(false)
const codeCopied = ref(false)
@@ -104,9 +109,10 @@ async function handleLogin() {
try {
const result = await login()
if (result.bot) {
isHumanMode.value = !!result.bot.isHuman
step.value = 'ready'
} else {
step.value = 'pick-character'
step.value = 'choose-mode'
}
} catch (e) {
error.value = e instanceof Error ? e.message : 'Login failed.'
@@ -132,6 +138,68 @@ function confirmName() {
step.value = 'bot-setup'
}
function chooseBot() {
isHumanMode.value = false
step.value = 'pick-character'
}
function chooseHuman() {
isHumanMode.value = true
step.value = 'pick-human-avatar'
}
const humanAvatarList = [
{ seed: 'baby_brawler', label: 'BRAWLER' },
{ seed: 'tiny_thinker', label: 'THINKER' },
{ seed: 'lil_genius', label: 'GENIUS' },
{ seed: 'mini_champ', label: 'CHAMP' },
{ seed: 'small_fry', label: 'SMALL FRY' },
{ seed: 'baby_brain', label: 'BIG BRAIN' },
{ seed: 'little_legend', label: 'LEGEND' },
{ seed: 'tiny_terror', label: 'TERROR' },
{ seed: 'wee_warrior', label: 'WARRIOR' },
{ seed: 'micro_menace', label: 'MENACE' },
{ seed: 'baby_boss', label: 'BOSS' },
{ seed: 'pint_sized', label: 'PINT SIZE' },
{ seed: 'nugget_king', label: 'NUGGET' },
{ seed: 'half_pint', label: 'HALF PINT' },
{ seed: 'kiddo_smash', label: 'SMASHER' },
{ seed: 'tot_puncher', label: 'PUNCHER' },
{ seed: 'thumb_war', label: 'THUMB WAR' },
{ seed: 'ankle_biter', label: 'ANKLE BITER' },
{ seed: 'diaper_doom', label: 'DOOM BABY' },
{ seed: 'cradle_rage', label: 'RAGE' },
]
function pickHumanAvatar(seed: string) {
selectedHumanSeed.value = seed
step.value = 'name-human'
}
async function confirmHumanName() {
const name = humanName.value.trim()
if (!name || name.length < 2) {
error.value = 'Name must be at least 2 characters.'
return
}
if (!/^[a-zA-Z0-9_-]+$/.test(name)) {
error.value = 'Letters, numbers, hyphens, underscores only.'
return
}
error.value = ''
step.value = 'human-guide'
}
async function registerHumanFighter() {
error.value = ''
try {
await registerHuman(humanName.value.trim(), selectedHumanSeed.value)
step.value = 'ready'
} catch (e) {
error.value = e instanceof Error ? e.message : 'Registration failed.'
}
}
async function confirmWebhook() {
const url = webhookUrl.value.trim()
if (!url) {
@@ -206,10 +274,12 @@ function handleSignOut() {
class="w-full py-4 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
font-display font-black text-base tracking-widest
hover:bg-neon-purple/20 hover:border-neon-purple transition-all
disabled:opacity-30 disabled:cursor-not-allowed"
disabled:opacity-50 disabled:cursor-wait
flex items-center justify-center gap-3"
:disabled="isLoading"
@click="handleLogin"
>
<span v-if="isLoading" class="w-5 h-5 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
{{ isLoading ? 'CONNECTING...' : 'SIGN IN WITH NOSTR' }}
</button>
@@ -227,6 +297,48 @@ function handleSignOut() {
</div>
</template>
<!-- STEP: CHOOSE MODE -->
<template v-else-if="step === 'choose-mode'">
<div class="text-center mb-8">
<h2 class="font-display font-black text-3xl tracking-wider gradient-text mb-3">
HOW DO YOU FIGHT?
</h2>
<p class="font-mono text-text-muted text-xs">
Choose your path, warrior.
</p>
</div>
<div class="space-y-4">
<button
class="w-full py-5 px-4 bg-neon-cyan/5 border-2 border-neon-cyan/40 text-left
hover:bg-neon-cyan/10 hover:border-neon-cyan/70 transition-all group"
@click="chooseBot"
>
<span class="font-display font-black text-lg tracking-wider text-neon-cyan block mb-1">
I BUILD BOTS
</span>
<span class="font-mono text-[10px] text-text-muted leading-relaxed block">
Deploy an AI bot server. It answers challenges via webhook.
Your code fights for you 24/7.
</span>
</button>
<button
class="w-full py-5 px-4 bg-neon-pink/5 border-2 border-neon-pink/40 text-left
hover:bg-neon-pink/10 hover:border-neon-pink/70 transition-all group"
@click="chooseHuman"
>
<span class="font-display font-black text-lg tracking-wider text-neon-pink block mb-1">
I FIGHT MYSELF
</span>
<span class="font-mono text-[10px] text-text-muted leading-relaxed block">
Type your own answers in real-time. You vs the AIs, brain to brain.
No coding required.
</span>
</button>
</div>
</template>
<!-- STEP: PICK CHARACTER -->
<template v-else-if="step === 'pick-character'">
<div class="text-center mb-6">
@@ -481,6 +593,155 @@ function handleSignOut() {
</div>
</template>
<!-- STEP: PICK HUMAN AVATAR -->
<template v-else-if="step === 'pick-human-avatar'">
<div class="text-center mb-6">
<h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
PICK YOUR BABY
</h2>
<p class="font-mono text-text-muted text-xs">
Every human starts as a baby. Win fights to grow.
</p>
</div>
<div class="grid grid-cols-4 sm:grid-cols-5 gap-2 max-h-[55vh] overflow-y-auto pr-1">
<button
v-for="avatar in humanAvatarList"
:key="avatar.seed"
class="flex flex-col items-center p-1.5 sm:p-2 border-2 transition-all text-center
hover:border-neon-pink/40 hover:bg-neon-pink/5"
:class="selectedHumanSeed === avatar.seed
? 'border-neon-pink/70 bg-neon-pink/10'
: 'border-border bg-surface'"
@click="pickHumanAvatar(avatar.seed)"
>
<HumanPreview :seed="avatar.seed" :win-rate="0" :size="48" class="mb-1" />
<span class="font-display font-bold text-[8px] sm:text-[9px] tracking-wider text-text-primary">{{ avatar.label }}</span>
</button>
</div>
</template>
<!-- STEP: NAME HUMAN -->
<template v-else-if="step === 'name-human'">
<div class="text-center mb-6">
<h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
NAME YOUR FIGHTER
</h2>
<p class="font-mono text-text-muted text-xs">
You're entering as a human baby. Grow strong.
</p>
</div>
<div class="mb-5">
<input
v-model="humanName"
type="text"
required
maxlength="32"
placeholder="big_brain_gary"
class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
text-text-primary placeholder-text-muted
focus:outline-none focus:border-neon-pink/50 transition-colors"
@keyup.enter="confirmHumanName"
/>
<p class="font-mono text-[10px] text-text-muted mt-1.5">
Letters, numbers, hyphens, underscores. 2-32 chars.
</p>
</div>
<div class="flex gap-2">
<button
class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
hover:border-neon-purple/40 transition-all"
@click="step = 'pick-human-avatar'"
>
BACK
</button>
<button
class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
font-display font-bold text-sm tracking-wider
hover:bg-neon-pink/20 transition-all"
@click="confirmHumanName"
>
NEXT
</button>
</div>
</template>
<!-- STEP: HUMAN GUIDE -->
<template v-else-if="step === 'human-guide'">
<div class="text-center mb-5">
<h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
QUICK GUIDE
</h2>
<p class="font-mono text-text-muted text-xs">
Here's how human vs AI fights work.
</p>
</div>
<div class="space-y-2.5 mb-5">
<div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
<span class="font-display font-black text-neon-pink text-sm mt-0.5">1</span>
<div>
<p class="font-mono text-xs text-text-primary">You get a challenge each round</p>
<p class="font-mono text-[10px] text-text-muted mt-0.5">Trivia, wordplay, creative writing, coding puzzles, and more</p>
</div>
</div>
<div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
<span class="font-display font-black text-neon-pink text-sm mt-0.5">2</span>
<div>
<p class="font-mono text-xs text-text-primary">Type your answer fast — 5 seconds per round</p>
<p class="font-mono text-[10px] text-text-muted mt-0.5">Keep answers short and sharp. Speed is everything.</p>
</div>
</div>
<div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
<span class="font-display font-black text-neon-pink text-sm mt-0.5">3</span>
<div>
<p class="font-mono text-xs text-text-primary">Your answer is scored against the AI bot's answer</p>
<p class="font-mono text-[10px] text-text-muted mt-0.5">Better answer deals more damage. First to 0 HP loses.</p>
</div>
</div>
<div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
<span class="font-display font-black text-neon-pink text-sm mt-0.5">4</span>
<div>
<p class="font-mono text-xs text-text-primary">After the fight, watch the animated replay</p>
<p class="font-mono text-[10px] text-text-muted mt-0.5">See your answers come to life in pixel art combat</p>
</div>
</div>
</div>
<div class="p-3 border border-neon-pink/20 bg-neon-pink/5 mb-5">
<p class="font-display font-bold text-[10px] tracking-wider text-neon-pink mb-1.5">
TIPS FOR BEATING AIs
</p>
<ul class="font-mono text-[10px] text-text-muted space-y-1 leading-relaxed">
<li>Be <span class="text-text-secondary">creative</span> — boring answers score low</li>
<li>Be <span class="text-text-secondary">fast</span> — speed breaks ties</li>
<li>Add <span class="text-text-secondary">trash talk</span> — it doesn't affect scoring but it's fun</li>
<li>Factual challenges have <span class="text-text-secondary">right answers</span> — accuracy matters</li>
<li>Creative challenges are <span class="text-text-secondary">judged on quality</span> — go wild</li>
</ul>
</div>
<div class="flex gap-2">
<button
class="flex-1 py-3 border-2 border-border text-text-muted font-display font-bold text-sm tracking-wider
hover:border-neon-purple/40 transition-all"
@click="step = 'name-human'"
>
BACK
</button>
<button
class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
font-display font-bold text-sm tracking-wider
hover:bg-neon-pink/20 transition-all"
@click="registerHumanFighter"
>
LET'S GO
</button>
</div>
</template>
<!-- STEP: READY TO FIGHT -->
<template v-else-if="step === 'ready' && bot">
<div class="text-center mb-6">
@@ -494,7 +755,7 @@ function handleSignOut() {
{{ bot.name }}
</h2>
<p class="font-mono text-text-muted text-[10px]">
{{ bot.archetype?.toUpperCase() || 'FIGHTER' }} · {{ bot.wins }}W {{ bot.losses }}L · {{ Math.round(bot.eloRating) }} ELO
{{ (isHumanMode || bot.isHuman) ? 'HUMAN' : (bot.archetype?.toUpperCase() || 'FIGHTER') }} · {{ bot.wins }}W {{ bot.losses }}L · {{ Math.round(bot.eloRating) }} ELO
</p>
</div>
@@ -512,14 +773,16 @@ function handleSignOut() {
class="w-full py-5 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
font-display font-black text-2xl tracking-[0.2em]
hover:bg-neon-pink/20 transition-all neon-border-pink
disabled:opacity-30 disabled:cursor-not-allowed"
disabled:opacity-50 disabled:cursor-wait
flex items-center justify-center gap-3"
:disabled="isJoining"
@click="fight"
>
<span v-if="isJoining" class="w-5 h-5 border-2 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
{{ isJoining ? 'MATCHING...' : 'FIGHT' }}
</button>
<p class="font-mono text-[10px] text-text-muted text-center -mt-1">
Queue up against a real AI bot
{{ (isHumanMode || bot.isHuman) ? 'Type your answers live against an AI' : 'Queue up against a real AI bot' }}
</p>
</div>