新增 PWA 更新提示並整理 README

README.md

@@ -1,51 +1,48 @@
-# 羽毛球記分板
+# 羽球記分板
 
-以 `Vite + React + TypeScript + Node.js` 製作的羽毛球記分板，提供選隊伍、記分板、歷史戰績三個主要頁面，並可搭配 Docker 部署到 NAS。
+使用 `Vite + React + TypeScript + Node.js` 製作的羽毛球記分板，支援選隊伍、計分板、歷史戰績、語音播報、PWA 安裝與 Docker / NAS 部署。
 
 ## 功能
 
-- 選隊伍頁
-  - 可依指定日期從資料庫讀取分組資料
-  - 若當天沒有資料，可手動輸入 A、B 區名單建立分組
-  - 成功載入後會在畫面底部顯示 1 秒浮動提示
-  - 對戰名單直接點 `進入記分板` 就會帶入該組
-  - 分組卡片標題改成左右緊湊排列，減少手機版高度
-- 記分板頁
-  - 從所選組別進入記分板
-  - 設定隊伍彈窗支援兩種方式
-  - 左側逐一選人，依順序 `1、2` 為上方隊伍，`3、4` 為下方隊伍
-  - 右側快速套用預設隊伍
-  - 可設定幾分獲勝，預設 `21`
-  - 必須先設定先攻，之後點分數即可直接加分
-  - 尚未設定先攻時，`先攻` 文字會做動畫提醒
-  - 選定先攻後，該方的先攻方框會直接顯示打勾
-  - 第一分後 `設定隊伍` 會改成 `上一步`
-  - 支援上下交換兩隊位置、左右交換隊內站位
-  - 三連勝以上會顯示連勝稱號動畫
-    - `3` 連勝：`大殺特殺`
-    - `4` 連勝：`暴走`
-    - `5` 連勝：`無人能擋`
-    - `6` 連勝：`主宰比賽`
-    - `7` 連勝：`像神一般的`
-    - `8` 連勝：`成為傳說`
-  - 達到目標分數獲勝時，會跳出獲勝動畫特效
-  - 內建免費瀏覽器 TTS 播報
-  - 右側 `設定` 按鈕可開啟語音設定面板
-  - 可分別設定是否播報誰得分、是否播報誰發球
-  - 可調整語速，範圍 `0.7x ~ 10x`
-- 歷史戰績頁
-  - 直接從資料庫 `history` 表讀取列表
-  - 點擊任一筆可開啟得分紀錄彈窗
-  - 彈窗右上角提供 `X` 關閉按鈕，手機更容易操作
-  - 每筆資料可單獨刪除
-  - 刪除前只會提示一次確認視窗
+- 選隊伍
+  - 可依指定日期從資料庫讀取分組資料。
+  - 若當天沒有資料，可手動輸入 A、B 區名單產生分組。
+  - 每組可直接進入記分板，不需額外再點選這組。
+- 計分板
+  - 設定隊伍彈窗支援逐一選人。
+  - 依選取順序自動成隊：`1、2` 一隊，`3、4` 一隊。
+  - 右側可快速選擇預設隊伍。
+  - 可設定本場幾分獲勝，預設 `21` 分。
+  - 需先指定先攻，之後點擊分數即可直接加分。
+  - 第一分記錄後，右側 `設定隊伍` 會切成 `上一步`。
+  - 可交換上下隊伍位置，也可交換同隊左右球員位置。
+  - 連勝會出現特效提示：
+    - `3 連勝`：`大殺特殺`
+    - `4 連勝`：`暴走`
+    - `5 連勝`：`無人能擋`
+    - `6 連勝`：`主宰比賽`
+    - `7 連勝`：`像神一般的`
+    - `8 連勝`：`成為傳說`
+  - 達到目標分數時會顯示獲勝動畫。
+  - 內建免費瀏覽器 TTS。
+  - 可設定是否播報得分者、是否播報發球者、以及語速。
+  - `RURU` 已支援不分大小寫的發音別名，會念成 `嚕嚕`。
+- 歷史戰績
+  - 直接從資料庫 `history` 表讀取列表。
+  - 點擊單筆戰績可開啟得分紀錄彈窗。
+  - 彈窗支援右上角 `X` 關閉按鈕。
+  - 每筆資料可直接刪除，刪除前會跳一次確認提示。
+- PWA
+  - 可加入手機主畫面，像 App 一樣開啟。
+  - 支援 `manifest`、`service worker`、主畫面 icon。
+  - 偵測到新版本時，畫面底部會顯示更新提示，可一鍵重新整理套用新版。
 
-## 本機開發
+## 執行環境
 
 ### Port
 
-- Client: `3501`
-- Server: `8788`
+- Client：`3501`
+- Server：`8788`
 
 ### 安裝
 
@@ -53,18 +50,18 @@
 npm install
 ```
 
-### 啟動開發模式
+### 開發模式
 
 ```bash
 npm run dev
 ```
 
-啟動後可從以下位置開啟：
+啟動後會同時開兩個服務：
 
 - 前端：`http://localhost:3501`
 - API：`http://localhost:8788`
 
-### 驗證
+### 檢查
 
 ```bash
 npm run lint
@@ -73,7 +70,7 @@ npm run build
 
 ## 環境變數
 
-請在專案根目錄建立 `.env`，至少包含以下欄位：
+請在專案根目錄建立 `.env`：
 
 ```env
 DB_HOST=127.0.0.1
@@ -81,26 +78,25 @@ DB_PORT=3306
 DB_USER=root
 DB_PASSWORD=your_password
 DB_DATABASE=badminton
-DB_TABLE=match_results
+DB_TABLE=badminton
 DB_HISTORY_TABLE=history
 PORT=8788
 ```
 
 ## Docker / NAS 部署
 
-目前部署設計如下：
+正式部署時目前是雙容器架構：
 
-- 對外入口：`3501`
 - App 內部服務：`8788`
-- 由 Nginx 負責 SSL 與反向代理
+- Nginx SSL 對外入口：`3501`
 
-### 啟動
+啟動指令：
 
 ```bash
 sudo docker compose up -d --build
 ```
 
-正式部署後入口會是：
+部署完成後，對外入口：
 
 ```text
 https://你的網域或 NAS IP:3501
@@ -108,23 +104,23 @@ https://你的網域或 NAS IP:3501
 
 ## SSL 憑證目錄
 
-Docker Compose 會掛載 NAS 的憑證目錄：
+Docker Compose 會直接掛載 NAS 上的憑證目錄：
 
 ```text
 /volume1/homes/JianMiau/www/certificate/
 ```
 
-目前 Nginx 會使用這個目錄下的檔案產生 `fullchain.pem`，因此之後若你更新 SSL，只要更新這個資料夾內的憑證即可，再重新啟動容器讓設定重載。
-
-預設使用的檔名為：
+目前預設使用這三個檔名：
 
 - `RSA-cert.pem`
 - `RSA-chain.pem`
 - `RSA-privkey.pem`
 
-## 歷史戰績寫入格式
+更新憑證時，只要更新上述目錄內的檔案，再重新啟動容器即可。
 
-`history` 表使用的資料欄位如下：
+## history 資料表格式
+
+`history` 表目前使用以下欄位：
 
 - `id`
 - `time`
@@ -135,21 +131,19 @@ Docker Compose 會掛載 NAS 的憑證目錄：
   - `0`：雙打
   - `1`：單打
 - `players`
-  - 依照 `1 ~ 4` 編號順序儲存
+  - 依 `1 ~ 4` 順序排序的玩家名稱
 - `team`
-  - `1、2` 為一隊
-  - `3、4` 為一隊
+  - `1、2` 一隊
+  - `3、4` 一隊
 - `scoreList`
   - 格式：`[round, 發球者編號, 連勝次數, 得分隊伍(0 或 1)]`
 
-## Git 中文紀錄
+## Git 中文顯示
 
-專案已設定 git 使用 UTF-8：
+若要讓 commit 與 log 正常顯示中文，可設定：
 
 ```bash
 git config i18n.commitEncoding utf-8
 git config i18n.logOutputEncoding utf-8
 git config core.quotepath false
 ```
-
-之後 commit 訊息與 log 可直接使用中文。