From 4c576b03699e7ca465815f9420e10d38664e51dd Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 23:41:05 +0000
Subject: [PATCH] fix: watch another fight route watcher, profile fight button
 spinner

- Add route param watcher so navigating to a new fight properly resets
  and reinitializes the scene (fixes KAPLAY re-init / null scene errors)
- Add loading spinner to profile page instant fight button
- Restore truncated challenges.ts (was causing all 500 errors)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/BotProfilePage.vue |  3 +-
 frontend/src/pages/FightPage.vue      | 50 +++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/BotProfilePage.vue b/frontend/src/pages/BotProfilePage.vue
index b182636..93c2aa7 100644
--- a/frontend/src/pages/BotProfilePage.vue
+++ b/frontend/src/pages/BotProfilePage.vue
@@ -409,10 +409,11 @@ const tierClass = (t: number) => `tier-${t}`
                 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
                        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-2"
                 :disabled="isJoining"
                 @click="instantFight"
               >
+                <span v-if="isJoining" class="w-4 h-4 border-2 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
                 {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
               </button>
               <button
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index f44725f..c7cd62f 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -27,6 +27,56 @@ const autoBattleCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null
 let pollCount = 0
 
+// Watch route param changes (e.g. "watch another fight" navigating to a new fight)
+watch(() => route.params.fightId, async (newId) => {
+  if (!newId || newId === fightId.value) return
+  // Clean up current state
+  if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
+  stopHumanPolling()
+  disconnectSSE()
+  stopAllAudio()
+  if (liveScene) { liveScene.destroy(); liveScene = null }
+  liveSceneReady.value = false
+
+  // Reset all state
+  fightId.value = newId as string
+  fight.value = null
+  isLoading.value = true
+  isLive.value = false
+  liveRounds.value = 0
+  fightError.value = ''
+  replayDone.value = false
+  autoBattle.value = false
+  autoBattleCount.value = 0
+  liveFightData.value = null
+  liveLogItems.value = []
+  liveHpA.value = 100
+  liveHpB.value = 100
+  liveCurrentRound.value = 0
+  humanChallenge.value = null
+  humanSubmitted.value = false
+  humanFightDone.value = false
+  humanFightResult.value = null
+  pendingChallengeData.value = null
+
+  // Re-load
+  const status = await loadFight()
+  isLoading.value = false
+  if (status === null || status !== 'finished') {
+    isLive.value = true
+  }
+  if (isLive.value) {
+    startPolling()
+    if (isHumanFight.value) {
+      startHumanPolling()
+      connectSSE()
+      await nextTick()
+      await nextTick()
+      if (liveFightData.value) await initLiveScene()
+    }
+  }
+})
+
 // Human fight detection
 const isHumanFight = computed(() => !!myBot.value?.isHuman || myBot.value?.archetype === 'human')