From c5f6c6bbf9fc82c8238c35a96ebf8812ff7ce0fd Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 20:10:57 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20homepage=20=E2=80=94=20side-by-?=
 =?UTF-8?q?side=20Fight/Watch=20buttons,=20hero=20bots=20below=20title?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Buttons always side-by-side with shorter labels (FIGHT / WATCH)
- Hero bots displayed horizontally below title on mobile
- Desktop keeps flanking hero layout with larger sprites

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/FightPage.vue |  56 +++++++++--------
 frontend/src/pages/HomePage.vue  | 102 ++++++++++++++++---------------
 2 files changed, 82 insertions(+), 76 deletions(-)

diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index e624e1e..90d95f0 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import FightViewer from '../components/FightViewer.vue'
 import { useNostr } from '../composables/useNostr'
@@ -44,7 +44,6 @@ const humanTimer = ref(5)
 const humanSubmitted = ref(false)
 let humanPollHandle: ReturnType<typeof setInterval> | null = null
 let timerHandle: ReturnType<typeof setInterval> | null = null
-const answerInput = ref<HTMLInputElement | null>(null)
 
 // Live human fight scene state
 const liveFightData = ref<any>(null)
@@ -66,7 +65,6 @@ const liveAnnouncementVisible = ref(false)
 const currentChallengeInfo = ref<{ type: string; label: string } | null>(null)
 const pendingChallengeData = ref<{ data: any; receivedAt: number } | null>(null)
 const humanChoices = ref<string[]>([])
-const isMobile = ref(typeof window !== 'undefined' && window.innerWidth < 768)
 const humanFightDone = ref(false)
 const humanFightResult = ref<{ winnerId: string; winnerName: string; isPerfect: boolean } | null>(null)
 
@@ -153,9 +151,12 @@ function startPolling() {
     pollCount++
     const s = await loadFight()
     if (s === 'finished') {
-      isLive.value = false
-      stopHumanPolling()
-      if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+      // Human fights handle end via SSE fight_end event — don't transition here
+      if (!isHumanFight.value) {
+        isLive.value = false
+        stopHumanPolling()
+        if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+      }
     } else if (pollCount > 120) {
       isLive.value = false
       fightError.value = 'Fight took too long. Try refreshing.'
@@ -510,12 +511,17 @@ function toggleLiveSound() {
   setMasterMute(!liveSoundOn.value)
 }
 
-// --- Resize listener ---
-function onResize() { isMobile.value = window.innerWidth < 768 }
+// Watch for liveFightData becoming available (may arrive via polling after mount)
+watch(liveFightData, async (val) => {
+  if (val && !liveSceneReady.value && !liveScene) {
+    await nextTick()
+    await nextTick()
+    await initLiveScene()
+  }
+})
 
 // --- Mount / Unmount ---
 onMounted(async () => {
-  window.addEventListener('resize', onResize)
   const status = await loadFight()
   isLoading.value = false
 
@@ -528,15 +534,11 @@ onMounted(async () => {
     if (isHumanFight.value) {
       startHumanPolling()
       connectSSE()
-      await nextTick()
-      await nextTick()
-      if (liveFightData.value) await initLiveScene()
     }
   }
 })
 
 onUnmounted(() => {
-  window.removeEventListener('resize', onResize)
   if (pollHandle) clearInterval(pollHandle)
   stopHumanPolling()
   disconnectSSE()
@@ -698,38 +700,38 @@ function stopAutoBattle() {
               BACK TO LOBBY
             </button>
           </div>
-          <div v-else-if="roundCooldown > 0" class="text-center py-1">
-            <p class="font-display text-neon-yellow text-sm tracking-widest animate-pulse">
+          <div v-else-if="roundCooldown > 0" class="text-center py-4">
+            <p class="font-display text-neon-yellow text-lg tracking-widest animate-pulse">
               NEXT ROUND IN {{ roundCooldown }}...
             </p>
           </div>
           <div v-else-if="humanChallenge && !humanSubmitted">
-            <div class="flex items-center justify-between mb-1">
+            <div class="flex items-center justify-between mb-2">
               <div class="flex items-center gap-2 min-w-0 flex-1">
-                <span class="font-display font-black text-[10px] tracking-wider text-neon-cyan shrink-0">
+                <span class="font-display font-black text-xs tracking-wider text-neon-cyan shrink-0">
                   R{{ humanChallenge.roundNumber }}
                 </span>
-                <span class="font-display font-bold text-[9px] tracking-wider text-neon-purple uppercase truncate">
+                <span class="font-display font-bold text-xs tracking-wider text-neon-purple uppercase truncate">
                   {{ humanChallenge.label }}
                 </span>
               </div>
               <span
-                class="font-display font-black text-sm tracking-wider tabular-nums shrink-0 ml-2"
+                class="font-display font-black text-lg tracking-wider tabular-nums shrink-0 ml-2"
                 :class="humanTimer <= 1 ? 'text-ko animate-pulse scale-125' : humanTimer <= 2 ? 'text-ko animate-pulse' : 'text-neon-yellow'"
               >
                 {{ humanTimer }}s
               </span>
             </div>
-            <p class="font-mono text-[11px] text-text-primary leading-snug mb-1.5 line-clamp-2">
+            <p class="font-mono text-sm text-text-primary leading-relaxed mb-3">
               {{ humanChallenge.prompt }}
             </p>
             <!-- Multiple choice buttons -->
-            <div class="flex flex-col gap-1.5">
+            <div class="flex flex-col gap-2">
               <button
                 v-for="(choice, i) in humanChoices"
                 :key="i"
-                class="w-full text-left px-3 py-2 border-2 rounded-lg font-mono text-xs leading-snug
-                       active:scale-[0.97] transition-all line-clamp-2"
+                class="w-full text-left px-4 py-3 border-2 rounded-lg font-mono text-sm leading-normal
+                       active:scale-[0.97] transition-all"
                 :class="[
                   i === 0 ? 'border-neon-cyan/40 text-neon-cyan bg-neon-cyan/5 hover:bg-neon-cyan/15 active:bg-neon-cyan/20' :
                   i === 1 ? 'border-neon-pink/40 text-neon-pink bg-neon-pink/5 hover:bg-neon-pink/15 active:bg-neon-pink/20' :
@@ -741,11 +743,11 @@ function stopAutoBattle() {
               </button>
             </div>
           </div>
-          <div v-else-if="humanSubmitted" class="text-center py-1">
-            <p class="font-mono text-text-muted text-xs animate-pulse">Scoring round...</p>
+          <div v-else-if="humanSubmitted" class="text-center py-3">
+            <p class="font-display text-text-muted text-sm tracking-wider animate-pulse">SCORING ROUND...</p>
           </div>
-          <div v-else class="flex items-center justify-between py-1">
-            <p class="font-mono text-text-muted text-xs">Waiting for challenge...</p>
+          <div v-else class="flex items-center justify-between py-2">
+            <p class="font-mono text-text-muted text-sm">Waiting for challenge...</p>
             <button
               class="w-7 h-7 flex items-center justify-center border border-border/50 text-text-muted
                      hover:text-neon-cyan hover:border-neon-cyan/50 transition-all"
diff --git a/frontend/src/pages/HomePage.vue b/frontend/src/pages/HomePage.vue
index 79e0b47..50ea9cb 100644
--- a/frontend/src/pages/HomePage.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -342,52 +342,56 @@ onUnmounted(() => {
 
     <div class="max-w-4xl w-full text-center slide-up relative z-10">
 
-      <!-- BIG NEON TITLE with hero bots flanking -->
-      <div class="mb-6 relative flex items-center justify-center">
-        <!-- Hero bot LEFT -->
-        <div class="hero-fighter hero-fighter-left shrink-0 -mr-2 sm:-mr-4">
-          <SpritePreview
-            seed="hero_samurai"
-            archetype="samurai"
-            :tier="5"
-            :size="140"
-            class="hidden sm:block drop-shadow-[0_0_24px_rgba(255,68,136,0.4)]"
-          />
+      <!-- Title -->
+      <h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight flex items-center justify-center gap-3 sm:gap-5 md:gap-6 mb-4 sm:mb-6">
+        <PixelGlove :size="40" class="hidden sm:block md:!w-[56px] shrink-0" />
+        <PixelGlove :size="28" class="sm:hidden shrink-0" />
+        BOTFIGHTS
+        <PixelGlove :size="28" flip class="sm:hidden shrink-0" />
+        <PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
+      </h1>
+
+      <!-- Hero bots: vertical on mobile, flanking on desktop -->
+      <!-- Mobile: stacked vertically -->
+      <div class="sm:hidden flex items-center justify-center gap-6 mb-4">
+        <div class="hero-fighter hero-fighter-left shrink-0">
           <SpritePreview
             seed="hero_samurai"
             archetype="samurai"
             :tier="5"
             :size="90"
-            class="sm:hidden drop-shadow-[0_0_16px_rgba(255,68,136,0.4)]"
+            class="drop-shadow-[0_0_16px_rgba(255,68,136,0.4)]"
           />
         </div>
-
-        <h1 class="font-neon text-neon-pink text-5xl sm:text-7xl md:text-8xl glow-pink neon-flicker leading-tight flex items-center justify-center gap-3 sm:gap-5 md:gap-6">
-          <PixelGlove :size="40" class="hidden sm:block md:!w-[56px] shrink-0" />
-          <PixelGlove :size="28" class="sm:hidden shrink-0" />
-          BOTFIGHTS
-          <PixelGlove :size="28" flip class="sm:hidden shrink-0" />
-          <PixelGlove :size="40" flip class="hidden sm:block md:!w-[56px] shrink-0" />
-        </h1>
-
-        <!-- Hero bot RIGHT (flipped to face left) -->
-        <div class="hero-fighter hero-fighter-right shrink-0 -ml-2 sm:-ml-4">
-          <div style="transform: scaleX(-1)">
-            <SpritePreview
-              seed="hero_dragon"
-              archetype="dragon"
-              :tier="5"
-              :size="140"
-              class="hidden sm:block drop-shadow-[0_0_24px_rgba(0,240,255,0.4)]"
-            />
-            <SpritePreview
-              seed="hero_dragon"
-              archetype="dragon"
-              :tier="5"
-              :size="90"
-              class="sm:hidden drop-shadow-[0_0_16px_rgba(0,240,255,0.4)]"
-            />
-          </div>
+        <div class="hero-fighter hero-fighter-right shrink-0" style="transform: scaleX(-1)">
+          <SpritePreview
+            seed="hero_dragon"
+            archetype="dragon"
+            :tier="5"
+            :size="90"
+            class="drop-shadow-[0_0_16px_rgba(0,240,255,0.4)]"
+          />
+        </div>
+      </div>
+      <!-- Desktop: flanking (hidden on mobile) -->
+      <div class="hidden sm:flex items-center justify-center mb-6">
+        <div class="hero-fighter hero-fighter-left shrink-0">
+          <SpritePreview
+            seed="hero_samurai"
+            archetype="samurai"
+            :tier="5"
+            :size="140"
+            class="drop-shadow-[0_0_24px_rgba(255,68,136,0.4)]"
+          />
+        </div>
+        <div class="hero-fighter hero-fighter-right shrink-0 ml-8" style="transform: scaleX(-1)">
+          <SpritePreview
+            seed="hero_dragon"
+            archetype="dragon"
+            :tier="5"
+            :size="140"
+            class="drop-shadow-[0_0_24px_rgba(0,240,255,0.4)]"
+          />
         </div>
       </div>
 
@@ -406,23 +410,23 @@ onUnmounted(() => {
         </p>
       </div>
 
-      <!-- CTAs -->
-      <div class="flex flex-col sm:flex-row items-center justify-center gap-5 mb-10">
+      <!-- CTAs — always side by side -->
+      <div class="flex items-center justify-center gap-3 sm:gap-5 mb-8 sm:mb-10">
         <RouterLink
           to="/join"
-          class="px-10 py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
-                 font-display font-black text-base tracking-widest
-                 hover:bg-neon-pink/20 transition-all neon-border-pink"
+          class="flex-1 sm:flex-none sm:px-10 py-3 sm:py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
+                 font-display font-black text-sm sm:text-base tracking-widest text-center
+                 hover:bg-neon-pink/20 transition-all neon-border-pink max-w-[180px] sm:max-w-none"
         >
-          JOIN A BOUT
+          FIGHT
         </RouterLink>
         <RouterLink
           to="/arena"
-          class="px-10 py-4 border-2 border-neon-cyan/40 text-neon-cyan
-                 font-display font-black text-base tracking-widest
-                 hover:border-neon-cyan hover:bg-neon-cyan/10 transition-all"
+          class="flex-1 sm:flex-none sm:px-10 py-3 sm:py-4 border-2 border-neon-cyan/40 text-neon-cyan
+                 font-display font-black text-sm sm:text-base tracking-widest text-center
+                 hover:border-neon-cyan hover:bg-neon-cyan/10 transition-all max-w-[180px] sm:max-w-none"
         >
-          WATCH FIGHTS
+          WATCH
         </RouterLink>
       </div>