From 84625bc4d213ef398c994c51ac786bef230bac34 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sat, 7 Mar 2026 23:15:39 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20watch=20another=20fight,=20rename=20nav?=
 =?UTF-8?q?=20=E2=80=94=20FIGHT!=20+=20WATCH,=20fix=20stale=20SW=20assets?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add "WATCH ANOTHER FIGHT" button on post-fight overlay (loads random fight)
- Rename "JOIN A BOUT" → "FIGHT!" in nav, join page, register page
- Rename "ARENA" → "WATCH" in nav
- Server: return 404 for missing asset files instead of index.html (fixes "Unexpected token '<'")
- PWA: cleanupOutdatedCaches, skipWaiting, clientsClaim for instant SW updates
- Serve PWA files (sw.js, workbox, icons) with correct cache headers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/NavBar.vue  |  4 ++--
 frontend/src/pages/FightPage.vue    | 34 +++++++++++++++++++++++++++++
 frontend/src/pages/JoinBoutPage.vue |  2 +-
 frontend/src/pages/RegisterPage.vue |  2 +-
 4 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index c325c08..6c6a8e1 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -8,8 +8,8 @@ const { bot, isLoggedIn } = useNostr()
 const isMenuOpen = ref(false)
 
 const links = [
-  { to: '/join', label: 'JOIN A BOUT' },
-  { to: '/arena', label: 'ARENA' },
+  { to: '/join', label: 'FIGHT!' },
+  { to: '/arena', label: 'WATCH' },
   { to: '/leaderboard', label: 'RANKINGS' },
 ]
 </script>
diff --git a/frontend/src/pages/FightPage.vue b/frontend/src/pages/FightPage.vue
index f904415..4e2f3e8 100644
--- a/frontend/src/pages/FightPage.vue
+++ b/frontend/src/pages/FightPage.vue
@@ -636,6 +636,29 @@ function onReplayDone() {
   }
 }
 
+const isLoadingNext = ref(false)
+async function watchAnotherFight() {
+  if (isLoadingNext.value) return
+  isLoadingNext.value = true
+  try {
+    const res = await fetch('/api/fights')
+    if (res.ok) {
+      const fights = await res.json()
+      const finished = fights.filter((f: any) => f.status === 'finished' && f.id !== fightId.value)
+      if (finished.length > 0) {
+        const pick = finished[Math.floor(Math.random() * finished.length)]
+        router.push(`/arena/${pick.id}`)
+        return
+      }
+    }
+    router.push('/arena')
+  } catch {
+    router.push('/arena')
+  } finally {
+    isLoadingNext.value = false
+  }
+}
+
 function startAutoBattle() {
   if (!myBotId.value || isHumanFight.value) return
   autoBattle.value = true
@@ -934,6 +957,17 @@ function stopAutoBattle() {
                 </button>
               </template>
 
+              <button
+                :disabled="isLoadingNext"
+                class="w-full py-3 bg-neon-purple/10 border-2 border-neon-purple/50 text-neon-purple
+                       font-display font-black text-sm tracking-widest rounded-lg
+                       hover:bg-neon-purple/20 hover:border-neon-purple transition-all
+                       disabled:opacity-50 disabled:cursor-wait flex items-center justify-center gap-2"
+                @click="watchAnotherFight"
+              >
+                <span v-if="isLoadingNext" class="w-4 h-4 border-2 border-neon-purple/30 border-t-neon-purple rounded-full animate-spin" />
+                {{ isLoadingNext ? 'LOADING...' : 'WATCH ANOTHER FIGHT' }}
+              </button>
               <button
                 class="w-full py-2 border border-white/10 text-text-muted
                        font-display text-xs tracking-widest rounded-lg
diff --git a/frontend/src/pages/JoinBoutPage.vue b/frontend/src/pages/JoinBoutPage.vue
index 52ad724..8569421 100644
--- a/frontend/src/pages/JoinBoutPage.vue
+++ b/frontend/src/pages/JoinBoutPage.vue
@@ -255,7 +255,7 @@ function handleSignOut() {
       <template v-if="step === 'login'">
         <div class="text-center mb-8">
           <h2 class="font-display font-black text-4xl tracking-wider text-neon-pink glow-pink mb-3">
-            JOIN A BOUT
+            FIGHT!
           </h2>
           <p class="font-mono text-text-muted text-xs">
             Sign in with Nostr to fight.
diff --git a/frontend/src/pages/RegisterPage.vue b/frontend/src/pages/RegisterPage.vue
index bc2dc6e..8aa4a63 100644
--- a/frontend/src/pages/RegisterPage.vue
+++ b/frontend/src/pages/RegisterPage.vue
@@ -149,7 +149,7 @@ function goFight() {
                  hover:bg-neon-cyan/20 transition-all"
           @click="goFight"
         >
-          JOIN A BOUT
+          FIGHT!
         </button>
       </div>
     </div>