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

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">
-          <div className="room-watch-scoreboard">
-            <div className="room-watch-team">
-              <small>{room.leftTeamName}</small>
-              <strong>{room.scoreState.scoreLeft}</strong>
+        {room ? (
+          <article className="panel full-span room-watch-panel">
+            <div className="room-watch-scoreboard">
+              <div className="room-watch-team">
+                <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">
-            <span>目標分數 {room.scoreState.targetScore}</span>
-            <span>房間狀態 {room.status === 'finished' ? '已結束' : '進行中'}</span>
-            <span>
-              最後更新 {new Date(room.updatedAt).toLocaleTimeString('zh-TW', { hour12: false })}
-            </span>
-          </div>
-        </article>
+            <div className="room-watch-meta">
+              <span>目標分數 {room.scoreState.targetScore}</span>
+              <span>房間狀態 {room.status === 'finished' ? '已結束' : '進行中'}</span>
+              <span>
+                最後更新 {new Date(room.updatedAt).toLocaleTimeString('zh-TW', { hour12: false })}
+              </span>
+            </div>
+          </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}
     </>
   )
 }