新增即時觀戰房間並整理 README

src/pages/RoomSpectatorPage.tsx

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { loadLiveRoom, subscribeLiveRoom } from '../lib/api'
+import type { LiveRoomDetail } from '../types'
+
+type RoomSpectatorPageProps = {
+  onConfirmFinished: () => void
+}
+
+const ROOM_POLL_MS = 1500
+
+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 previousStatusRef = useRef<string | null>(null)
+  const hasRoomRef = useRef(false)
+
+  useEffect(() => {
+    if (!roomId) {
+      return
+    }
+
+    let active = true
+    hasRoomRef.current = false
+    previousStatusRef.current = null
+
+    const applyRoomUpdate = (nextRoom: LiveRoomDetail) => {
+      if (!active) {
+        return
+      }
+
+      if (nextRoom.status === 'finished' && previousStatusRef.current !== 'finished') {
+        setShowFinishedDialog(true)
+      }
+
+      previousStatusRef.current = nextRoom.status
+      hasRoomRef.current = true
+      setRoom(nextRoom)
+      setError('')
+      setLoading(false)
+    }
+
+    const load = async (showLoadError = true) => {
+      try {
+        const nextRoom = await loadLiveRoom(roomId)
+        applyRoomUpdate(nextRoom)
+      } catch (loadError) {
+        if (!active) {
+          return
+        }
+
+        if (showLoadError || !hasRoomRef.current) {
+          setError(loadError instanceof Error ? loadError.message : '載入觀戰房間失敗。')
+          setLoading(false)
+        }
+      }
+    }
+
+    void load()
+    const unsubscribe = subscribeLiveRoom(
+      roomId,
+      (nextRoom) => {
+        applyRoomUpdate(nextRoom)
+      },
+      () => {
+        if (!active) {
+          return
+        }
+
+        if (!hasRoomRef.current) {
+          setError('觀戰連線中斷，請稍後重試。')
+          setLoading(false)
+        }
+      },
+    )
+
+    const timer = window.setInterval(() => {
+      void load(false)
+    }, ROOM_POLL_MS)
+
+    return () => {
+      active = false
+      window.clearInterval(timer)
+      unsubscribe()
+    }
+  }, [roomId])
+
+  if (loading) {
+    return (
+      <section className="page-grid">
+        <article className="panel full-span">
+          <p>正在載入觀戰房間...</p>
+        </article>
+      </section>
+    )
+  }
+
+  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>
+          <Link className="primary-button inline-link" to="/rooms">
+            返回房間列表
+          </Link>
+        </article>
+      </section>
+    )
+  }
+
+  return (
+    <>
+      <section className="page-grid">
+        <article className="panel panel-hero full-span">
+          <p className="panel-kicker">Spectator</p>
+          <h2>房號 {room.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>
+            </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>
+      </section>
+
+      {showFinishedDialog ? (
+        <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} 已獲勝，本場觀戰會返回列表。`
+                : '比賽已結束，本場觀戰會返回列表。'}
+            </p>
+            <div className="finish-dialog-actions">
+              <button
+                className="team-picker-confirm"
+                type="button"
+                onClick={() => {
+                  setShowFinishedDialog(false)
+                  onConfirmFinished()
+                }}
+              >
+                確定
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  )
+}