強化房間清理與比賽中分頁限制

src/App.tsx

@@ -6,6 +6,7 @@ import {
   loadMatchResults,
   releaseLiveRoom,
   saveMatchHistory,
+  sendLiveRoomHeartbeat,
   updateLiveRoom,
 } from './lib/api'
 import {
@@ -90,6 +91,7 @@ const STREAK_TITLES: Record<number, string> = {
 }
 const PWA_UPDATE_EVENT = 'badminton-scoreboard:pwa-update-ready'
 const APP_VERSION_POLL_MS = 30000
+const LIVE_ROOM_HEARTBEAT_MS = 10_000
 
 function App() {
   const location = useLocation()
@@ -129,6 +131,7 @@ function App() {
   const [victoryAnnouncement, setVictoryAnnouncement] = useState<VictoryAnnouncement | null>(null)
   const [pwaUpdateReady, setPwaUpdateReady] = useState(false)
   const [liveRoomSession, setLiveRoomSession] = useState<LiveRoomSession | null>(null)
+  const [navigationLockMessage, setNavigationLockMessage] = useState('')
   const currentAppVersionRef = useRef<string | null>(null)
   const creatingRoomRef = useRef(false)
   const lastSyncedRoomSignatureRef = useRef('')
@@ -139,6 +142,7 @@ function App() {
   const leftTeam = activeMatchup.leftTeam
   const rightTeam = activeMatchup.rightTeam
   const liveRoomId = liveRoomSession?.roomId ?? null
+  const isNavigationLocked = Boolean(leftTeam && rightTeam && scoreState.serving !== null)
 
   useEffect(() => {
     window.localStorage.setItem(STORAGE_KEYS.targetDate, targetDate)
@@ -192,6 +196,18 @@ function App() {
     return () => window.clearTimeout(timer)
   }, [victoryAnnouncement])
 
+  useEffect(() => {
+    if (!navigationLockMessage) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setNavigationLockMessage('')
+    }, 1400)
+
+    return () => window.clearTimeout(timer)
+  }, [navigationLockMessage])
+
   useEffect(() => {
     const handlePwaUpdateReady = () => {
       setPwaUpdateReady(true)
@@ -482,6 +498,43 @@ function App() {
     isScoreboardRoute,
   ])
 
+  useEffect(() => {
+    if (!isNavigationLocked || isScoreboardRoute) {
+      return
+    }
+
+    navigate('/scoreboard', { replace: true })
+    setNavigationLockMessage('比賽進行中，請先完成結算。')
+  }, [isNavigationLocked, isScoreboardRoute, navigate])
+
+  useEffect(() => {
+    if (!isScoreboardRoute || !liveRoomSession || liveRoomSession.status !== 'live') {
+      return
+    }
+
+    let active = true
+
+    const syncHeartbeat = async () => {
+      try {
+        await sendLiveRoomHeartbeat(liveRoomSession.roomId, liveRoomSession.hostToken)
+      } catch (error) {
+        if (active) {
+          console.error('live room heartbeat error:', error)
+        }
+      }
+    }
+
+    void syncHeartbeat()
+    const timer = window.setInterval(() => {
+      void syncHeartbeat()
+    }, LIVE_ROOM_HEARTBEAT_MS)
+
+    return () => {
+      active = false
+      window.clearInterval(timer)
+    }
+  }, [isScoreboardRoute, liveRoomSession])
+
   useEffect(() => {
     if (!liveRoomSession || liveRoomSession.status !== 'live') {
       return
@@ -822,6 +875,15 @@ function App() {
     }
   }
 
+  const handleNavAttempt = (targetPath: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (!isNavigationLocked || targetPath === '/scoreboard') {
+      return
+    }
+
+    event.preventDefault()
+    setNavigationLockMessage('比賽進行中，請先完成結算。')
+  }
+
   return (
     <div className={isScoreboardRoute ? 'app-shell app-shell-scoreboard' : 'app-shell'}>
       <header className={isScoreboardRoute ? 'topbar topbar-compact' : 'topbar'}>
@@ -837,16 +899,32 @@ function App() {
         </div>
 
         <nav className="topnav" aria-label="主要導覽">
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/teams">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/teams')}
+            to="/teams"
+          >
             選隊伍
           </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/scoreboard">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/scoreboard')}
+            to="/scoreboard"
+          >
             記分板
           </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/history">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/history')}
+            to="/history"
+          >
             歷史戰績
           </NavLink>
-          <NavLink className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')} to="/rooms">
+          <NavLink
+            className={({ isActive }) => (isActive ? 'nav-pill nav-pill-active' : 'nav-pill')}
+            onClick={handleNavAttempt('/rooms')}
+            to="/rooms"
+          >
             房間列表
           </NavLink>
         </nav>
@@ -943,6 +1021,12 @@ function App() {
           </button>
         </div>
       ) : null}
+
+      {navigationLockMessage ? (
+        <div className="floating-status-bubble" role="status" aria-live="polite">
+          {navigationLockMessage}
+        </div>
+      ) : null}
     </div>
   )
 }