羽球記分板

使用 Vite + React + TypeScript + Node.js 製作的羽毛球記分板，支援選隊伍、計分板、歷史戰績、語音播報、PWA 安裝與 Docker / NAS 部署。

功能

選隊伍
- 可依指定日期從資料庫讀取分組資料。
- 若當天沒有資料，可手動輸入 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

安裝

npm install

開發模式

npm run dev

啟動後會同時開兩個服務：

前端：http://localhost:3501
API：http://localhost:8788

檢查

npm run lint
npm run build

環境變數

請在專案根目錄建立 .env：

DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=your_password
DB_DATABASE=badminton
DB_TABLE=badminton
DB_HISTORY_TABLE=history
PORT=8788

Docker / NAS 部署

正式部署時目前是雙容器架構：

App 內部服務：8788
Nginx SSL 對外入口：3501

啟動指令：

sudo docker compose up -d --build

部署完成後，對外入口：

https://你的網域或 NAS IP:3501

SSL 憑證目錄

Docker Compose 會直接掛載 NAS 上的憑證目錄：

/volume1/homes/JianMiau/www/certificate/

目前預設使用這三個檔名：

RSA-cert.pem
RSA-chain.pem
RSA-privkey.pem

更新憑證時，只要更新上述目錄內的檔案，再重新啟動容器即可。

history 資料表格式

history 表目前使用以下欄位：

id
time
dayOfWeek
score
winScore
type
- 0：雙打
- 1：單打
players
- 依 1 ~ 4 順序排序的玩家名稱
team
- 1、2 一隊
- 3、4 一隊
scoreList
- 格式：[round, 發球者編號, 連勝次數, 得分隊伍(0 或 1)]

Git 中文顯示

若要讓 commit 與 log 正常顯示中文，可設定：

git config i18n.commitEncoding utf-8
git config i18n.logOutputEncoding utf-8
git config core.quotepath false

3.4 KiB Raw Blame History Unescape Escape