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

2026-04-19 13:02:00 +08:00
parent ab3647587e
commit 2d1ad0600e
5 changed files with 199 additions and 50 deletions
--- a/server/data/live-rooms.json
+++ b/server/data/live-rooms.json
@@ -138,36 +138,24 @@
    "winnerTeamName": "柏威 / 玟瑄"
  },
  {
-    "createdAt": "2026-04-19T04:52:26.119Z",
-    "groupId": 2,
-    "hostToken": "mo5ahuo76ktdmleh",
-    "leftTeamName": "景涵 / 小念",
-    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
+    "createdAt": "2026-04-19T04:58:15.291Z",
+    "groupId": 1,
+    "hostToken": "mo5apc3foksw0enn",
+    "leftTeamName": "景涵 / RuRu",
+    "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": "柏威 / 玟瑄",
-    "roomId": "208299",
+    "rightTeamName": "小念 / 柏威",
+    "roomId": "432277",
    "scoreState": {
-      "scoreLeft": 2,
-      "scoreRight": 1,
+      "scoreLeft": 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
  }
 ]
--- a/src/App.css
+++ b/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;
--- a/src/lib/api.ts
+++ b/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?.()
  }
--- a/src/pages/RoomListPage.tsx
+++ b/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 ? (
--- a/src/pages/RoomSpectatorPage.tsx
+++ b/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}
    </>
  )
 }