調整結算通知與全站防選字

README.md

@@ -1,60 +1,53 @@
 # 羽毛球記分板
 
-使用 `Vite + React + TypeScript + Node.js` 製作的羽毛球記分板，支援選隊伍、即時記分、歷史戰績、PWA 安裝，以及即時房間觀戰。
+這是一個使用 `Vite + React + TypeScript + Node.js` 製作的羽毛球記分板，支援手機操作、PWA 安裝、即時觀戰房間、歷史戰績與 Docker / NAS 部署。
 
-## 功能
+## 功能總覽
 
 - 選隊伍
-  - 可依指定日期從資料庫載入分組資料。
-  - 若資料庫沒有當天資料，可手動輸入 A、B 區名單產生分組。
+  - 可依指定日期從資料庫讀取分組資料。
+  - 若指定日期沒有資料，可手動輸入 A、B 區名單建立分組。
   - 點選分組後可直接進入記分板。
 - 記分板
   - 隊伍名稱只顯示在最上方與最下方。
-  - 可在設定隊伍面板中逐一選人，也可快速套用預設隊伍。
-  - 先選到的 `1、2` 為一隊，`3、4` 為另一隊。
-  - 可設定本場幾分獲勝，預設為 `21` 分。
-  - 必須先設定先攻，才能開始記分。
-  - 點擊分數直接加分，不提供加一減一按鈕。
+  - 可在設定隊伍面板中逐一選人，也可快速選擇預設隊伍。
+  - 先選到的 `1、2` 為一隊，`3、4` 為一隊。
+  - 可設定獲勝分數，預設為 `21` 分。
+  - 必須先選先攻，才能開始記分。
+  - 點擊隊伍分數直接加分，不提供加一減一按鈕。
   - 第一分記下後，`設定隊伍` 會切換成 `上一步`。
   - 可交換上下兩隊位置，也可交換同隊左右站位。
-  - `比賽結算` 需長按 `1 秒` 才會觸發。
-  - 比分 `0:0` 時不允許觸發結算。
+  - `比賽結算` 需要長按 `1 秒` 才會觸發。
+  - 比分 `0:0` 時不可結算。
+  - 全站文字預設不可選取，避免手機誤觸反白。
 - 語音播報
   - 可設定是否播報得分者。
-  - 可設定是否播報下一位發球者。
-  - 可調整語速，最高支援到 `10x`。
-  - `RURU` 會以大小寫不敏感方式播報成「嚕嚕」。
-- 動畫提示
-  - 先攻未設定時，`先攻` 文字會有提示動畫。
-  - 選定先攻後，會顯示打勾讓使用者更容易辨識。
-  - 連勝特效：
-    - `3 連勝`：大殺特殺
-    - `4 連勝`：暴走
-    - `5 連勝`：無人能擋
-    - `6 連勝`：主宰比賽
-    - `7 連勝`：像神一般的
-    - `8 連勝`：成為傳說
-  - 達到目標分數時會顯示獲勝動畫。
+  - 可設定是否播報發球者。
+  - 語速最高可調到 `10x`。
+  - `RURU` 以大小寫不敏感方式播報成「嚕嚕」。
+- 動畫與提示
+  - 未選先攻時，`先攻` 文字會有提示動畫。
+  - 選定先攻後會顯示打勾。
+  - 支援連勝稱號動畫與獲勝動畫。
 - 歷史戰績
-  - 比賽結算後可選擇是否上傳戰績到資料庫。
-  - 歷史戰績列表直接從資料庫 `history` 表讀取。
-  - 可點開查看每球得分紀錄。
-  - 手機上彈窗有 `X` 可快速關閉。
-  - 每筆戰績可刪除，刪除前會確認一次。
+  - 可將比賽結果上傳到資料庫 `history`。
+  - 歷史列表直接從 DB 顯示。
+  - 可查看逐球得分紀錄。
+  - 每筆紀錄可刪除，刪除前會確認一次。
 - 即時房間 / 觀戰
-  - 只要帶入隊伍進入記分板，就會自動建立一個房間。
-  - 記分板右側會顯示房號。
-  - `房間列表` 只顯示房號、隊伍、目標分數與最後更新時間，不顯示比分。
-  - 觀戰者進入房間後可即時看到比分，不能操作。
-  - 觀戰同步使用 `SSE + 輪詢備援`，降低漏分風險。
-  - 房主重整、離開記分板或換隊伍時，未結束房間會自動清掉。
-  - 達到目標分數後房間會標記結束，觀戰者會看到獲勝彈窗，按確定後返回房間列表。
+  - 帶入隊伍進入記分板後會自動建立房間。
+  - 記分板會顯示房號。
+  - 房間列表不顯示比分，只顯示房號、隊伍、目標分數與更新時間。
+  - 觀戰者只能看，不能操作。
+  - 觀戰同步使用 `SSE + 輪詢備援`。
+  - 房主重整、離開記分板或換隊伍時，未完成房間會自動清掉。
+  - 達標獲勝時，觀戰者會收到獲勝通知。
+  - 手動按 `比賽結算` 完成後，觀戰者也會收到獲勝結果，再返回房間列表。
 - PWA
   - 可加入手機主畫面，像 App 一樣開啟。
-  - 支援自訂網站 icon / PWA icon。
-  - 新版本部署後會顯示更新提示，可直接重新整理套用新版。
+  - 支援主畫面 icon 與版本更新提示。
 
-## 開發環境
+## 開發
 
 ### Port
 
@@ -104,7 +97,7 @@ PORT=8788
 
 正式部署時：
 
-- App 內部服務 port：`8788`
+- App 內部服務：`8788`
 - 對外 HTTPS 入口：`3501`
 
 部署指令：
@@ -113,23 +106,23 @@ PORT=8788
 sudo docker compose up -d --build
 ```
 
-部署完成後，對外入口為：
+部署完成後對外入口為：
 
 ```text
 https://你的網域或 NAS IP:3501
 ```
 
-每次執行 `sudo docker compose up -d --build`，容器都會更新啟動版號，已安裝 PWA 的裝置會在偵測到新版本後顯示更新提示。
+每次執行 `sudo docker compose up -d --build`，容器都會刷新版本號，已安裝的 PWA 會在偵測到新版本後跳出更新提示。
 
 ## SSL 憑證目錄
 
-Docker Compose 會直接掛載 NAS 上的憑證目錄：
+Docker Compose 會直接掛載：
 
 ```text
 /volume1/homes/JianMiau/www/certificate/
 ```
 
-預設使用以下檔案：
+預設使用的檔案：
 
 - `RSA-cert.pem`
 - `RSA-chain.pem`
@@ -159,7 +152,7 @@ Docker Compose 會直接掛載 NAS 上的憑證目錄：
 
 ## PWA 圖示
 
-目前網站 icon 與 PWA icon 來源為：
+目前使用：
 
 - `public/favicon.png`
 - `public/apple-touch-icon.png`
@@ -168,7 +161,7 @@ Docker Compose 會直接掛載 NAS 上的憑證目錄：
 
 ## Git 中文設定
 
-建議設定 git 使用 UTF-8，避免中文 commit 或 log 顯示異常：
+建議設定 git 使用 UTF-8：
 
 ```bash
 git config i18n.commitEncoding utf-8

server/data/live-rooms.json

@@ -1 +1,184 @@
-[]
+[
+  {
+    "createdAt": "2026-04-19T04:50:38.216Z",
+    "groupId": 1,
+    "hostToken": "mo5afjewicxz50b9",
+    "leftTeamName": "柏威 / 玟瑄",
+    "matchupLabel": "柏威 / 玟瑄 vs 小念 / 建喵",
+    "pointLog": [
+      {
+        "round": 0,
+        "starter": 3,
+        "winCount": 0,
+        "winner": 1
+      },
+      {
+        "round": 1,
+        "starter": 3,
+        "winCount": 0,
+        "winner": 0
+      },
+      {
+        "round": 2,
+        "starter": 1,
+        "winCount": 1,
+        "winner": 0
+      },
+      {
+        "round": 3,
+        "starter": 1,
+        "winCount": 0,
+        "winner": 1
+      },
+      {
+        "round": 4,
+        "starter": 2,
+        "winCount": 1,
+        "winner": 1
+      }
+    ],
+    "rightTeamName": "小念 / 建喵",
+    "roomId": "341793",
+    "scoreState": {
+      "scoreLeft": 2,
+      "scoreRight": 3,
+      "gamesLeft": 0,
+      "gamesRight": 0,
+      "currentGame": 1,
+      "targetScore": 21,
+      "serving": "right",
+      "leftRightCourtPlayer": "playerB",
+      "rightRightCourtPlayer": "playerA"
+    },
+    "status": "finished",
+    "targetDate": "2026-04-13",
+    "updatedAt": "2026-04-19T04:50:56.351Z",
+    "winnerTeamName": "小念 / 建喵"
+  },
+  {
+    "createdAt": "2026-04-19T04:51:17.794Z",
+    "groupId": 2,
+    "hostToken": "mo5agdyag7fyqyxv",
+    "leftTeamName": "景涵 / 小念",
+    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
+    "pointLog": [
+      {
+        "round": 0,
+        "starter": 0,
+        "winCount": 0,
+        "winner": 0
+      },
+      {
+        "round": 1,
+        "starter": 0,
+        "winCount": 0,
+        "winner": 1
+      }
+    ],
+    "rightTeamName": "柏威 / 玟瑄",
+    "roomId": "174740",
+    "scoreState": {
+      "scoreLeft": 1,
+      "scoreRight": 1,
+      "gamesLeft": 0,
+      "gamesRight": 0,
+      "currentGame": 1,
+      "targetScore": 21,
+      "serving": "right",
+      "leftRightCourtPlayer": "playerB",
+      "rightRightCourtPlayer": "playerA"
+    },
+    "status": "finished",
+    "targetDate": "2026-04-13",
+    "updatedAt": "2026-04-19T04:51:25.160Z",
+    "winnerTeamName": "景涵 / 小念"
+  },
+  {
+    "createdAt": "2026-04-19T04:51:25.190Z",
+    "groupId": 2,
+    "hostToken": "mo5agjnqeabkfpr2",
+    "leftTeamName": "景涵 / 小念",
+    "matchupLabel": "景涵 / 小念 vs 柏威 / 玟瑄",
+    "pointLog": [
+      {
+        "round": 0,
+        "starter": 0,
+        "winCount": 0,
+        "winner": 0
+      },
+      {
+        "round": 1,
+        "starter": 0,
+        "winCount": 0,
+        "winner": 1
+      },
+      {
+        "round": 2,
+        "starter": 2,
+        "winCount": 1,
+        "winner": 1
+      }
+    ],
+    "rightTeamName": "柏威 / 玟瑄",
+    "roomId": "239300",
+    "scoreState": {
+      "scoreLeft": 1,
+      "scoreRight": 2,
+      "gamesLeft": 0,
+      "gamesRight": 0,
+      "currentGame": 1,
+      "targetScore": 21,
+      "serving": "right",
+      "leftRightCourtPlayer": "playerB",
+      "rightRightCourtPlayer": "playerB"
+    },
+    "status": "finished",
+    "targetDate": "2026-04-13",
+    "updatedAt": "2026-04-19T04:52:26.087Z",
+    "winnerTeamName": "柏威 / 玟瑄"
+  },
+  {
+    "createdAt": "2026-04-19T04:52:26.119Z",
+    "groupId": 2,
+    "hostToken": "mo5ahuo76ktdmleh",
+    "leftTeamName": "景涵 / 小念",
+    "matchupLabel": "景涵 / 小念 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",
+    "scoreState": {
+      "scoreLeft": 2,
+      "scoreRight": 1,
+      "gamesLeft": 0,
+      "gamesRight": 0,
+      "currentGame": 1,
+      "targetScore": 21,
+      "serving": "left",
+      "leftRightCourtPlayer": "playerB",
+      "rightRightCourtPlayer": "playerA"
+    },
+    "status": "live",
+    "targetDate": "2026-04-13",
+    "updatedAt": "2026-04-19T04:52:32.296Z",
+    "winnerTeamName": null
+  }
+]

src/App.tsx

@@ -255,8 +255,15 @@ function App() {
     }
   }, [])
 
-  const resetScoring = (nextState: ScoreState = initialScoreState) => {
-    if (liveRoomSession?.status === 'live') {
+  const resetScoring = (
+    nextState: ScoreState = initialScoreState,
+    options?: {
+      releaseLiveRoom?: boolean
+    },
+  ) => {
+    const shouldReleaseLiveRoom = options?.releaseLiveRoom ?? true
+
+    if (shouldReleaseLiveRoom && liveRoomSession?.status === 'live') {
       void releaseLiveRoom(liveRoomSession.roomId, liveRoomSession.hostToken).catch(() => {})
     }
 
@@ -275,6 +282,47 @@ function App() {
     lastSyncedRoomSignatureRef.current = ''
   }
 
+  const finalizeLiveRoom = async () => {
+    if (!liveRoomSession || !leftTeam || !rightTeam) {
+      return
+    }
+
+    const winnerTeamName = getWinnerName(
+      getTeamDisplayName(leftTeam),
+      getTeamDisplayName(rightTeam),
+      scoreState,
+    )
+
+    const payload = buildLiveRoomPayload({
+      groupId: selectedGroup?.id ?? null,
+      leftTeam,
+      pointLog,
+      rightTeam,
+      scoreState,
+      targetDate,
+    })
+
+    try {
+      await updateLiveRoom(liveRoomSession.roomId, {
+        ...payload,
+        hostToken: liveRoomSession.hostToken,
+        status: 'finished',
+        winnerTeamName,
+      })
+
+      setLiveRoomSession((current) =>
+        current
+          ? {
+              ...current,
+              status: 'finished',
+            }
+          : current,
+      )
+    } catch (error) {
+      console.error('finalize live room error:', error)
+    }
+  }
+
   const selectGroup = (groupId: number, nextGroups = groups) => {
     const nextGroup = nextGroups.find((group) => group.id === groupId)
     const firstTeam = nextGroup?.teams[0] ?? null
@@ -709,12 +757,14 @@ function App() {
   }
 
   const skipUpload = () => {
+    void finalizeLiveRoom().finally(() => {
       setSettlement({
         error: '',
         open: false,
         uploading: false,
       })
-    resetScoring()
+      resetScoring(initialScoreState, { releaseLiveRoom: false })
+    })
   }
 
   const uploadSettledMatch = async () => {
@@ -756,12 +806,13 @@ function App() {
       }
 
       setHistory((current) => [historyItem, ...current])
+      await finalizeLiveRoom()
       setSettlement({
         error: '',
         open: false,
         uploading: false,
       })
-      resetScoring()
+      resetScoring(initialScoreState, { releaseLiveRoom: false })
     } catch (error) {
       setSettlement({
         error: error instanceof Error ? error.message : '上傳戰績失敗。',

src/index.css

@@ -20,6 +20,8 @@
 
 * {
   box-sizing: border-box;
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 html {
@@ -51,6 +53,15 @@ body::before {
   min-height: 100vh;
 }
 
+input,
+textarea,
+select,
+button,
+[contenteditable='true'] {
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+
 h1,
 h2,
 h3,