補上房間關閉通知與列表重取

server/data/live-rooms.json

@@ -138,36 +138,24 @@
     "winnerTeamName": "柏威 / 玟瑄"
   },
   {
-    "createdAt": "2026-04-19T04:52:26.119Z",
+    "createdAt": "2026-04-19T04:58:15.291Z",
-    "groupId": 2,
+    "groupId": 1,
-    "hostToken": "mo5ahuo76ktdmleh",
+    "hostToken": "mo5apc3foksw0enn",
-    "leftTeamName": "景涵 / 小念",
+    "leftTeamName": "景涵 / RuRu",
-    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
+    "matchupLabel": "景涵 / RuRu vs 小念 / 柏威",
     "pointLog": [
       {
         "round": 0,
         "starter": 0,
         "winCount": 0,
-        "winner": 1
-      },
-      {
-        "round": 1,
-        "starter": 2,
-        "winCount": 0,
-        "winner": 0
-      },
-      {
-        "round": 2,
-        "starter": 1,
-        "winCount": 1,
         "winner": 0
       }
     ],
-    "rightTeamName": "柏威 / 玟瑄",
+    "rightTeamName": "小念 / 柏威",
-    "roomId": "208299",
+    "roomId": "432277",
     "scoreState": {
-      "scoreLeft": 2,
+      "scoreLeft": 1,
-      "scoreRight": 1,
+      "scoreRight": 0,
       "gamesLeft": 0,
       "gamesRight": 0,
       "currentGame": 1,
@@ -176,9 +164,34 @@
       "leftRightCourtPlayer": "playerB",
       "rightRightCourtPlayer": "playerA"
     },
+    "status": "finished",
+    "targetDate": "2026-04-13",
+    "updatedAt": "2026-04-19T04:58:25.870Z",
+    "winnerTeamName": "景涵 / RuRu"
+  },
+  {
+    "createdAt": "2026-04-19T05:01:10.705Z",
+    "groupId": 1,
+    "hostToken": "mo5at3g18sybc1fw",
+    "leftTeamName": "柏威 / RuRu",
+    "matchupLabel": "柏威 / RuRu vs 建喵 / 小念",
+    "pointLog": [],
+    "rightTeamName": "建喵 / 小念",
+    "roomId": "498013",
+    "scoreState": {
+      "scoreLeft": 0,
+      "scoreRight": 0,
+      "gamesLeft": 0,
+      "gamesRight": 0,
+      "currentGame": 1,
+      "targetScore": 21,
+      "serving": null,
+      "leftRightCourtPlayer": "playerA",
+      "rightRightCourtPlayer": "playerA"
+    },
     "status": "live",
     "targetDate": "2026-04-13",
-    "updatedAt": "2026-04-19T04:52:32.296Z",
+    "updatedAt": "2026-04-19T05:01:10.731Z",
     "winnerTeamName": null
   }
 ]

src/App.css

@@ -2176,6 +2176,17 @@
   gap: 16px;
 }
 
+.room-list-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+.room-refresh-button:disabled {
+  cursor: default;
+  opacity: 0.72;
+}
+
 .room-card {
   display: grid;
   gap: 14px;

src/lib/api.ts

@@ -201,6 +201,7 @@ export function subscribeLiveRoom(
   roomId: string,
   onMessage: (room: LiveRoomDetail) => void,
   onError?: () => void,
+  onRoomClosed?: (payload: { roomId: string; status: string }) => void,
 ) {
   const source = new EventSource(`/api/rooms/${roomId}/stream`)
 
@@ -209,6 +210,14 @@ export function subscribeLiveRoom(
     onMessage(payload)
   })
 
+  source.addEventListener('room-closed', (event) => {
+    const payload = JSON.parse((event as MessageEvent).data) as {
+      roomId: string
+      status: string
+    }
+    onRoomClosed?.(payload)
+  })
+
   source.onerror = () => {
     onError?.()
   }

src/pages/RoomListPage.tsx

@@ -1,17 +1,32 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { loadLiveRoomList, subscribeRoomList } from '../lib/api'
 import type { LiveRoomSummary } from '../types'
 
+const REFRESH_COOLDOWN_SECONDS = 5
+
 export function RoomListPage() {
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
+  const [refreshCooldown, setRefreshCooldown] = useState(0)
   const [rooms, setRooms] = useState<LiveRoomSummary[]>([])
+  const loadingRef = useRef(false)
 
   useEffect(() => {
     let active = true
 
-    const load = async () => {
+    const loadRooms = async (options?: { manual?: boolean }) => {
+      if (loadingRef.current) {
+        return
+      }
+
+      loadingRef.current = true
+
+      if (options?.manual) {
+        setRefreshing(true)
+      }
+
       try {
         const nextRooms = await loadLiveRoomList()
 
@@ -28,13 +43,18 @@ export function RoomListPage() {
 
         setError(loadError instanceof Error ? loadError.message : '載入房間列表失敗。')
       } finally {
+        loadingRef.current = false
+
         if (active) {
           setLoading(false)
+          if (options?.manual) {
+            setRefreshing(false)
+          }
         }
       }
     }
 
-    void load()
+    void loadRooms()
     const unsubscribe = subscribeRoomList((nextRooms) => {
       if (!active) {
         return
@@ -51,6 +71,40 @@ export function RoomListPage() {
     }
   }, [])
 
+  useEffect(() => {
+    if (refreshCooldown <= 0) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setRefreshCooldown((current) => Math.max(0, current - 1))
+    }, 1000)
+
+    return () => window.clearTimeout(timer)
+  }, [refreshCooldown])
+
+  const refreshRoomList = async () => {
+    if (refreshCooldown > 0 || loadingRef.current) {
+      return
+    }
+
+    loadingRef.current = true
+    setRefreshing(true)
+    setRefreshCooldown(REFRESH_COOLDOWN_SECONDS)
+
+    try {
+      const nextRooms = await loadLiveRoomList()
+      setRooms(nextRooms)
+      setError('')
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError.message : '載入房間列表失敗。')
+    } finally {
+      loadingRef.current = false
+      setRefreshing(false)
+      setLoading(false)
+    }
+  }
+
   return (
     <section className="page-grid">
       <article className="panel panel-hero full-span">
@@ -60,6 +114,21 @@ export function RoomListPage() {
       </article>
 
       <article className="panel full-span">
+        <div className="room-list-toolbar">
+          <button
+            className="secondary-button room-refresh-button"
+            disabled={refreshCooldown > 0 || refreshing}
+            onClick={() => void refreshRoomList()}
+            type="button"
+          >
+            {refreshing
+              ? '重新取得中...'
+              : refreshCooldown > 0
+                ? `${refreshCooldown} 秒後可重取`
+                : '重新取得列表'}
+          </button>
+        </div>
+
         {loading ? <p>正在載入房間列表...</p> : null}
         {!loading && error ? <p className="history-empty">{error}</p> : null}
         {!loading && !error && rooms.length === 0 ? (

src/pages/RoomSpectatorPage.tsx

@@ -9,12 +9,18 @@ type RoomSpectatorPageProps = {
 
 const ROOM_POLL_MS = 1500
 
+type RoomClosedDialog = {
+  message: string
+  title: string
+} | null
+
 export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps) {
   const { roomId = '' } = useParams()
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(true)
   const [room, setRoom] = useState<LiveRoomDetail | null>(null)
   const [showFinishedDialog, setShowFinishedDialog] = useState(false)
+  const [roomClosedDialog, setRoomClosedDialog] = useState<RoomClosedDialog>(null)
   const previousStatusRef = useRef<string | null>(null)
   const hasRoomRef = useRef(false)
 
@@ -75,6 +81,19 @@ export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps)
           setLoading(false)
         }
       },
+      (payload) => {
+        if (!active) {
+          return
+        }
+
+        if (payload.status === 'released') {
+          setRoomClosedDialog({
+            title: '房間已關閉',
+            message: '房主已重整頁面、離開記分板或重新選隊伍，本房間已結束觀戰。',
+          })
+          setLoading(false)
+        }
+      },
     )
 
     const timer = window.setInterval(() => {
@@ -98,13 +117,13 @@ export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps)
     )
   }
 
-  if (!room || error) {
+  if (!room && error) {
     return (
       <section className="page-grid">
         <article className="panel panel-hero full-span">
           <p className="panel-kicker">Spectator</p>
           <h2>無法進入房間</h2>
-          <p className="panel-copy">{error || '這個房間不存在或已關閉。'}</p>
+          <p className="panel-copy">{error}</p>
           <Link className="primary-button inline-link" to="/rooms">
             返回房間列表
           </Link>
@@ -118,42 +137,48 @@ export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps)
       <section className="page-grid">
         <article className="panel panel-hero full-span">
           <p className="panel-kicker">Spectator</p>
-          <h2>房號 {room.roomId}</h2>
+          <h2>房號 {room?.roomId ?? roomId}</h2>
           <p className="panel-copy">這是觀戰模式，只會即時同步比分，不提供任何操作。</p>
         </article>
 
-        <article className="panel full-span room-watch-panel">
+        {room ? (
-          <div className="room-watch-scoreboard">
+          <article className="panel full-span room-watch-panel">
-            <div className="room-watch-team">
+            <div className="room-watch-scoreboard">
-              <small>{room.leftTeamName}</small>
+              <div className="room-watch-team">
-              <strong>{room.scoreState.scoreLeft}</strong>
+                <small>{room.leftTeamName}</small>
+                <strong>{room.scoreState.scoreLeft}</strong>
+              </div>
+              <div className="room-watch-divider">:</div>
+              <div className="room-watch-team">
+                <small>{room.rightTeamName}</small>
+                <strong>{room.scoreState.scoreRight}</strong>
+              </div>
             </div>
-            <div className="room-watch-divider">:</div>
-            <div className="room-watch-team">
-              <small>{room.rightTeamName}</small>
-              <strong>{room.scoreState.scoreRight}</strong>
-            </div>
-          </div>
 
-          <div className="room-watch-meta">
+            <div className="room-watch-meta">
-            <span>目標分數 {room.scoreState.targetScore}</span>
+              <span>目標分數 {room.scoreState.targetScore}</span>
-            <span>房間狀態 {room.status === 'finished' ? '已結束' : '進行中'}</span>
+              <span>房間狀態 {room.status === 'finished' ? '已結束' : '進行中'}</span>
-            <span>
+              <span>
-              最後更新 {new Date(room.updatedAt).toLocaleTimeString('zh-TW', { hour12: false })}
+                最後更新 {new Date(room.updatedAt).toLocaleTimeString('zh-TW', { hour12: false })}
-            </span>
+              </span>
-          </div>
+            </div>
-        </article>
+          </article>
+        ) : (
+          <article className="panel full-span">
+            <p className="history-empty">房間已不存在，請返回房間列表。</p>
+          </article>
+        )}
       </section>
 
-      {showFinishedDialog ? (
+      {showFinishedDialog && room ? (
         <div className="finish-dialog-overlay" role="presentation">
           <div aria-modal="true" className="finish-dialog" role="dialog">
             <p className="panel-kicker">比賽結束</p>
             <h3>{room.winnerTeamName ?? '已有獲勝隊伍'}</h3>
             <p className="finish-dialog-copy">
               {room.winnerTeamName
-                ? `${room.winnerTeamName} 已獲勝，本場觀戰會返回列表。`
+                ? `${room.winnerTeamName} 已獲勝，按下確定後返回房間列表。`
-                : '比賽已結束，本場觀戰會返回列表。'}
+                : '比賽已結束，按下確定後返回房間列表。'}
             </p>
             <div className="finish-dialog-actions">
               <button
@@ -170,6 +195,28 @@ export function RoomSpectatorPage({ onConfirmFinished }: RoomSpectatorPageProps)
           </div>
         </div>
       ) : null}
+
+      {roomClosedDialog ? (
+        <div className="finish-dialog-overlay" role="presentation">
+          <div aria-modal="true" className="finish-dialog" role="dialog">
+            <p className="panel-kicker">觀戰提醒</p>
+            <h3>{roomClosedDialog.title}</h3>
+            <p className="finish-dialog-copy">{roomClosedDialog.message}</p>
+            <div className="finish-dialog-actions">
+              <button
+                className="team-picker-confirm"
+                type="button"
+                onClick={() => {
+                  setRoomClosedDialog(null)
+                  onConfirmFinished()
+                }}
+              >
+                確定
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
     </>
   )
 }