fix: consolidate bot setup into single step with doc download + mode picker
Merged bot-setup and choose-connection into one actionable step. Users now see mode picker, download button for the correct guide (BOTFIGHTS-WEBHOOK.md or BOTFIGHTS-POLLING.md), and safety info all on one screen instead of two filler steps with no actions. 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
af50580aca
commit
017d0e3e4c
@@ -18,7 +18,7 @@ const nsecInput = ref('')
|
||||
const rememberKey = ref(false)
|
||||
const { isWalletConnected, payEntryFee, paymentStatus } = useWallet()
|
||||
|
||||
// Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'choose-connection' | 'add-webhook' |
|
||||
// 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)
|
||||
@@ -920,58 +920,92 @@ function handleSignOut() {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- STEP: BOT SETUP — easy setup messaging -->
|
||||
<!-- STEP: BOT SETUP — pick mode, download doc, get prompt -->
|
||||
<template v-else-if="step === 'bot-setup'">
|
||||
<div class="text-center mb-5">
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
|
||||
EASY SETUP
|
||||
SET UP {{ botName.toUpperCase() }}
|
||||
</h2>
|
||||
<p class="font-mono text-text-muted text-xs">
|
||||
Your AI sets everything up. You just tell it to.
|
||||
Pick a mode, download the guide, tell your AI.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- How it works steps -->
|
||||
<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-cyan text-sm mt-0.5">1</span>
|
||||
<div>
|
||||
<p class="font-mono text-xs text-text-primary">Pick your connection mode (next step)</p>
|
||||
<p class="font-mono text-[10px] text-text-muted mt-0.5">Webhook (fastest) or polling (easiest, no public URL)</p>
|
||||
<!-- Mode picker -->
|
||||
<div class="space-y-2 mb-4">
|
||||
<button
|
||||
class="w-full p-3 border-2 text-left transition-all"
|
||||
:class="connectionMode === 'webhook'
|
||||
? 'border-neon-cyan/60 bg-neon-cyan/10'
|
||||
: 'border-border bg-surface hover:border-neon-cyan/30'"
|
||||
@click="connectionMode = 'webhook'"
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-display font-black text-sm"
|
||||
:class="connectionMode === 'webhook' ? 'text-neon-cyan' : 'text-text-secondary'">
|
||||
WEBHOOK
|
||||
</span>
|
||||
<span class="font-mono text-[9px] px-1.5 py-0.5 border border-neon-cyan/30 text-neon-cyan">FASTEST</span>
|
||||
</div>
|
||||
<p class="font-mono text-[10px] text-text-muted leading-relaxed">
|
||||
We POST challenges to your server. Needs a public URL.
|
||||
</p>
|
||||
</button>
|
||||
<button
|
||||
class="w-full p-3 border-2 text-left transition-all"
|
||||
:class="connectionMode === 'polling'
|
||||
? 'border-neon-purple/60 bg-neon-purple/10'
|
||||
: 'border-border bg-surface hover:border-neon-purple/30'"
|
||||
@click="connectionMode = 'polling'"
|
||||
>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-display font-black text-sm"
|
||||
:class="connectionMode === 'polling' ? 'text-neon-purple' : 'text-text-secondary'">
|
||||
POLLING
|
||||
</span>
|
||||
<span class="font-mono text-[9px] px-1.5 py-0.5 border border-border text-text-muted">EASIEST</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3 p-2.5 border border-border bg-surface">
|
||||
<span class="font-display font-black text-neon-cyan text-sm mt-0.5">2</span>
|
||||
<div>
|
||||
<p class="font-mono text-xs text-text-primary">Download BOTFIGHTS.md into your workspace</p>
|
||||
<p class="font-mono text-[10px] text-text-muted mt-0.5">One file — your AI reads it and builds the bot</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-cyan text-sm mt-0.5">3</span>
|
||||
<div>
|
||||
<p class="font-mono text-xs text-text-primary">Copy the prompt we give you and paste it to your AI</p>
|
||||
<p class="font-mono text-[10px] text-text-muted mt-0.5">Includes your credentials. AI handles everything. Done.</p>
|
||||
</div>
|
||||
<p class="font-mono text-[10px] text-text-muted leading-relaxed">
|
||||
Your bot polls us. No public URL needed. Just keep it running.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Download guide -->
|
||||
<div class="mb-3">
|
||||
<button
|
||||
class="w-full py-2.5 border-2 font-display font-bold text-sm tracking-wider transition-all"
|
||||
:class="connectionMode === 'webhook'
|
||||
? 'border-neon-cyan/50 text-neon-cyan hover:bg-neon-cyan/10'
|
||||
: 'border-neon-purple/50 text-neon-purple hover:bg-neon-purple/10'"
|
||||
@click="downloadSetupGuide"
|
||||
>
|
||||
DOWNLOAD {{ setupDocName() }}
|
||||
</button>
|
||||
<p class="font-mono text-[10px] text-text-muted mt-1 text-center">
|
||||
Put this file in your workspace — your AI reads it to build the bot
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Safety callout -->
|
||||
<div class="p-3 border border-neon-cyan/20 bg-neon-cyan/5 mb-5">
|
||||
<p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1.5">
|
||||
<div class="p-2.5 border border-neon-cyan/20 bg-neon-cyan/5 mb-4">
|
||||
<p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1">
|
||||
SAFE & SIMPLE
|
||||
</p>
|
||||
<ul class="font-mono text-[10px] text-text-muted space-y-1 leading-relaxed">
|
||||
<li>Your <span class="text-text-secondary">API keys stay on your machine</span> — we never see them</li>
|
||||
<li>We only send <span class="text-text-secondary">fight questions</span> — nothing else</li>
|
||||
<li>Private IPs and internal URLs are <span class="text-text-secondary">blocked</span></li>
|
||||
<li>Small JSON payloads (<span class="text-text-secondary"><2KB</span>), responses capped at <span class="text-text-secondary">10KB</span></li>
|
||||
<li>Give the setup guide to your AI and it builds the bot for you</li>
|
||||
<ul class="font-mono text-[10px] text-text-muted space-y-0.5 leading-relaxed">
|
||||
<li v-if="connectionMode === 'webhook'">
|
||||
We only send <span class="text-text-secondary">POST</span> requests with fight questions
|
||||
</li>
|
||||
<li v-if="connectionMode === 'polling'">
|
||||
<span class="text-text-secondary">No incoming connections</span> — outbound only
|
||||
</li>
|
||||
<li>Your <span class="text-text-secondary">API keys stay on your machine</span></li>
|
||||
<li>Private IPs <span class="text-text-secondary">blocked</span>, payloads <span class="text-text-secondary"><2KB</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Tech details toggle for curious users -->
|
||||
<details class="mb-5 group">
|
||||
<!-- What's happening -->
|
||||
<details class="mb-4 group">
|
||||
<summary class="font-display font-bold text-[10px] tracking-wider text-text-secondary cursor-pointer
|
||||
hover:text-neon-purple transition-colors select-none">
|
||||
WHAT'S ACTUALLY HAPPENING?
|
||||
@@ -980,7 +1014,6 @@ function handleSignOut() {
|
||||
Your AI runs a small server that receives fight challenges from BOTFIGHTS.
|
||||
When a challenge comes in, it uses Claude to figure out the answer and fires it back.
|
||||
5-10 rounds per fight, scored on correctness and speed.
|
||||
You don't need to understand any of this — just tell your AI to set it up.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
@@ -992,101 +1025,6 @@ function handleSignOut() {
|
||||
>
|
||||
BACK
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
|
||||
font-display font-bold text-sm tracking-wider
|
||||
hover:bg-neon-cyan/20 transition-all"
|
||||
@click="step = 'choose-connection'"
|
||||
>
|
||||
GOT IT, NEXT
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- STEP: CHOOSE CONNECTION MODE -->
|
||||
<template v-else-if="step === 'choose-connection'">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="font-display font-black text-2xl tracking-wider gradient-text mb-2">
|
||||
CONNECTION MODE
|
||||
</h2>
|
||||
<p class="font-mono text-text-muted text-xs">
|
||||
How should we reach <span class="text-neon-cyan">{{ botName }}</span>?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3 mb-5">
|
||||
<!-- Webhook option -->
|
||||
<button
|
||||
class="w-full p-4 border-2 text-left transition-all"
|
||||
:class="connectionMode === 'webhook'
|
||||
? 'border-neon-cyan/60 bg-neon-cyan/10'
|
||||
: 'border-border bg-surface hover:border-neon-cyan/30'"
|
||||
@click="connectionMode = 'webhook'"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-1.5">
|
||||
<span class="font-display font-black text-sm"
|
||||
:class="connectionMode === 'webhook' ? 'text-neon-cyan' : 'text-text-secondary'">
|
||||
WEBHOOK
|
||||
</span>
|
||||
<span class="font-mono text-[9px] px-1.5 py-0.5 border border-neon-cyan/30 text-neon-cyan">RECOMMENDED</span>
|
||||
</div>
|
||||
<p class="font-mono text-[10px] text-text-muted leading-relaxed">
|
||||
We POST challenges to your server. Fastest response times.
|
||||
Requires a public URL (ngrok, cloudflared, VPS, etc.)
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<!-- Polling option -->
|
||||
<button
|
||||
class="w-full p-4 border-2 text-left transition-all"
|
||||
:class="connectionMode === 'polling'
|
||||
? 'border-neon-purple/60 bg-neon-purple/10'
|
||||
: 'border-border bg-surface hover:border-neon-purple/30'"
|
||||
@click="connectionMode = 'polling'"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-1.5">
|
||||
<span class="font-display font-black text-sm"
|
||||
:class="connectionMode === 'polling' ? 'text-neon-purple' : 'text-text-secondary'">
|
||||
POLLING
|
||||
</span>
|
||||
<span class="font-mono text-[9px] px-1.5 py-0.5 border border-border text-text-muted">EASIEST</span>
|
||||
</div>
|
||||
<p class="font-mono text-[10px] text-text-muted leading-relaxed">
|
||||
Your bot polls us for challenges. No public URL needed.
|
||||
Runs from any machine — just keep the script running.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Safety callout -->
|
||||
<div class="p-3 border border-neon-cyan/20 bg-neon-cyan/5 mb-5">
|
||||
<p class="font-display font-bold text-[10px] tracking-wider text-neon-cyan mb-1.5">
|
||||
SAFE & SIMPLE
|
||||
</p>
|
||||
<ul class="font-mono text-[10px] text-text-muted space-y-1 leading-relaxed">
|
||||
<li v-if="connectionMode === 'webhook'">
|
||||
We only send <span class="text-text-secondary">POST</span> requests with fight questions — nothing else
|
||||
</li>
|
||||
<li v-if="connectionMode === 'polling'">
|
||||
<span class="text-text-secondary">No incoming connections</span> — your bot only makes outbound requests
|
||||
</li>
|
||||
<li>Private IPs and internal URLs are <span class="text-text-secondary">blocked</span></li>
|
||||
<li>Payloads are small JSON (<span class="text-text-secondary"><2KB</span>)</li>
|
||||
<li>Your <span class="text-text-secondary">API keys stay on your machine</span> — we never see them</li>
|
||||
<li>
|
||||
<span class="text-text-secondary">Give the setup guide to your AI</span> and it builds the bot for you
|
||||
</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 = 'bot-setup'"
|
||||
>
|
||||
BACK
|
||||
</button>
|
||||
<button
|
||||
v-if="connectionMode === 'webhook'"
|
||||
class="flex-1 py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
|
||||
@@ -1094,7 +1032,7 @@ function handleSignOut() {
|
||||
hover:bg-neon-cyan/20 transition-all"
|
||||
@click="step = 'add-webhook'"
|
||||
>
|
||||
SET UP WEBHOOK
|
||||
NEXT
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
@@ -1148,7 +1086,7 @@ function handleSignOut() {
|
||||
<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 = 'choose-connection'"
|
||||
@click="step = 'bot-setup'"
|
||||
>
|
||||
BACK
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user