feat: production deployment — Dockerfile, docker-compose, SPA serving, classic bot fights

- Add Dockerfile (multi-stage: build frontend + server, serve from single container) - Add docker-compose.yml for Portainer stack deployment - Server serves frontend SPA in production (static assets + SPA fallback) - Auto-run migrations and seed mock bots on server startup - DB path configurable via DB_PATH env var - Add "Fight a Classic Bot" button for instant mock bot matches - FIGHT button queues for real AI opponents Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 10:42:18 +00:00
parent 120250c01a
commit 6bf9fe27b3
17 changed files with 2321 additions and 298 deletions
@@ -3,6 +3,7 @@ import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useNostr } from '../composables/useNostr'
 import SpritePreview from '../components/SpritePreview.vue'
+import HumanPreview from '../components/HumanPreview.vue'
 import type { SpriteCustomization } from '../game/sprites'

 const route = useRoute()
@@ -278,25 +279,34 @@ const tierClass = (t: number) => `tier-${t}`
      </div>

      <template v-else>
-        <!-- Header with large character -->
+        <!-- Header with human + bot character -->
        <div class="text-center mb-5">
-          <div class="relative inline-block mb-3">
+          <div class="flex items-end justify-center gap-2 mb-3">
+            <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)]"
+            />
            <SpritePreview
              :seed="stats.avatarSeed || stats.name"
              :archetype="stats.archetype"
              :tier="stats.tier"
              :size="160"
-              class="mx-auto drop-shadow-[0_0_20px_var(--glow)]"
+              :customization="stats.customization || undefined"
+              class="drop-shadow-[0_0_20px_var(--glow)]"
              :style="{ '--glow': stats.tierColor + '80' } as any"
            />
-            <div class="absolute -bottom-1 left-1/2 -translate-x-1/2 px-3 py-0.5 border text-[9px] font-display font-black tracking-widest whitespace-nowrap"
-                 :style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
-              {{ stats.tierName }}
-            </div>
          </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) }}
@@ -304,6 +314,98 @@ const tierClass = (t: number) => `tier-${t}`
          <p class="font-mono text-text-muted text-[10px] mt-0.5">
            #{{ stats.rank }} of {{ stats.totalBots }}
          </p>
+          <button
+            v-if="isOwner"
+            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) -->
+        <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>
+              </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>

        <!-- Stats -->
@@ -2,6 +2,8 @@
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import PixelGlove from '../components/PixelGlove.vue'
+import SpritePreview from '../components/SpritePreview.vue'
+import HumanPreview from '../components/HumanPreview.vue'

 interface FightResult {
  id: string
@@ -12,6 +14,20 @@ interface FightResult {
  totalRounds: number
 }

+// Decorative crowd characters scattered around the page
+const crowd = [
+  { seed: 'hero_lobster', arch: 'lobster', tier: 3, type: 'bot' as const, x: 3, y: 18, size: 56, wr: 0.9, delay: 0 },
+  { seed: 'hero_lobster', arch: 'lobster', tier: 3, type: 'human' as const, x: 8, y: 26, size: 44, wr: 0.9, delay: 0.2 },
+  { seed: 'cool_ninja', arch: 'ninja', tier: 4, type: 'bot' as const, x: 88, y: 15, size: 52, wr: 0.7, delay: 0.5 },
+  { seed: 'cool_ninja', arch: 'ninja', tier: 4, type: 'human' as const, x: 92, y: 22, size: 40, wr: 0.7, delay: 0.7 },
+  { seed: 'sad_potato', arch: 'potato', tier: 1, type: 'bot' as const, x: 5, y: 72, size: 48, wr: 0.1, delay: 1.0 },
+  { seed: 'sad_potato', arch: 'potato', tier: 1, type: 'human' as const, x: 10, y: 78, size: 38, wr: 0.1, delay: 1.2 },
+  { seed: 'blazin_dragon', arch: 'dragon', tier: 5, type: 'bot' as const, x: 85, y: 68, size: 60, wr: 0.95, delay: 0.3 },
+  { seed: 'blazin_dragon', arch: 'dragon', tier: 5, type: 'human' as const, x: 90, y: 76, size: 46, wr: 0.95, delay: 0.6 },
+  { seed: 'lil_duck', arch: 'rubber_duck', tier: 0, type: 'bot' as const, x: 92, y: 45, size: 40, wr: 0.3, delay: 1.5 },
+  { seed: 'chef_boy', arch: 'chef', tier: 2, type: 'bot' as const, x: 2, y: 48, size: 44, wr: 0.5, delay: 0.8 },
+]
+
 const tagline = ref('')
 const fullTagline = 'A safe place to hash it out.'
 const isTypingDone = ref(false)
@@ -39,8 +55,41 @@ onMounted(async () => {
 </script>

 <template>
-  <div class="h-[calc(100vh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden">
-    <div class="max-w-4xl w-full text-center slide-up">
+  <div class="h-[calc(100vh-4rem)] flex flex-col items-center justify-center px-6 overflow-hidden relative">
+    <!-- Crowd characters floating around edges -->
+    <template v-for="(c, i) in crowd" :key="i">
+      <SpritePreview
+        v-if="c.type === 'bot'"
+        :seed="c.seed"
+        :archetype="c.arch"
+        :tier="c.tier"
+        :size="c.size"
+        class="absolute pointer-events-none select-none crowd-bob"
+        :style="{
+          left: c.x + '%',
+          top: c.y + '%',
+          opacity: 0.35,
+          animationDelay: c.delay + 's',
+        }"
+      />
+      <HumanPreview
+        v-else
+        :seed="c.seed"
+        :archetype="c.arch"
+        :size="c.size"
+        :win-rate="c.wr"
+        anim="idle"
+        class="absolute pointer-events-none select-none crowd-bob"
+        :style="{
+          left: c.x + '%',
+          top: c.y + '%',
+          opacity: 0.3,
+          animationDelay: c.delay + 's',
+        }"
+      />
+    </template>
+
+    <div class="max-w-4xl w-full text-center slide-up relative z-10">

      <!-- BIG NEON TITLE -->
      <div class="mb-6">
@@ -130,3 +179,14 @@ onMounted(async () => {
    </div>
  </div>
 </template>
+
+<style scoped>
+.crowd-bob {
+  animation: crowdBob 3s ease-in-out infinite;
+}
+
+@keyframes crowdBob {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-6px); }
+}
+</style>
@@ -11,6 +11,7 @@ const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login,
 const step = ref<string>('login')
 const error = ref('')
 const isJoining = ref(false)
+const isFightingClassic = ref(false)
 const queueCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null

@@ -173,6 +174,25 @@ async function fight() {
  isJoining.value = false
 }

+async function fightClassicBot() {
+  if (!bot.value || isFightingClassic.value) return
+  isFightingClassic.value = true
+  error.value = ''
+  try {
+    const res = await fetch(`/api/fights/mock/${bot.value.id}`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    } else {
+      const data = await res.json()
+      error.value = data.error || 'Failed to start fight.'
+    }
+  } catch {
+    error.value = 'Network error.'
+  }
+  isFightingClassic.value = false
+}
+
 function handleSignOut() {
  logout()
  step.value = 'login'
@@ -505,17 +525,46 @@ function handleSignOut() {
          </p>
        </div>

-        <!-- Big fight button -->
-        <button
-          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="isJoining"
-          @click="fight"
-        >
-          {{ isJoining ? 'MATCHING...' : 'FIGHT' }}
-        </button>
+        <!-- Fight buttons -->
+        <div class="space-y-3">
+          <!-- Main fight button — real queue -->
+          <button
+            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="isJoining || isFightingClassic"
+            @click="fight"
+          >
+            {{ isJoining ? 'MATCHING...' : 'FIGHT' }}
+          </button>
+          <p class="font-mono text-[10px] text-text-muted text-center -mt-1">
+            Queue up against a real AI bot
+          </p>
+
+          <!-- Classic bot button — instant mock fight -->
+          <button
+            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-[0.15em]
+                   hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+                   disabled:opacity-30 disabled:cursor-not-allowed
+                   flex items-center justify-center gap-3"
+            :disabled="isJoining || isFightingClassic"
+            @click="fightClassicBot"
+          >
+            <svg class="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="4" y="4" width="16" height="12" rx="2" />
+              <circle cx="9" cy="10" r="1.5" fill="currentColor" stroke="none" />
+              <circle cx="15" cy="10" r="1.5" fill="currentColor" stroke="none" />
+              <line x1="8" y1="20" x2="8" y2="16" />
+              <line x1="16" y1="20" x2="16" y2="16" />
+            </svg>
+            {{ isFightingClassic ? 'STARTING...' : 'FIGHT A CLASSIC BOT' }}
+          </button>
+          <p class="font-mono text-[10px] text-text-muted text-center -mt-1">
+            Instant match against a house bot
+          </p>
+        </div>

        <!-- Quick links -->
        <div class="mt-5 flex gap-2">