badminton-scoreboard/README.md

badminton-scoreboard

羽毛球記分板專案，使用 Vite + React + TypeScript 建立前端，搭配 Express + MySQL 提供分組讀取與戰績寫入 API。

目前功能

• 選擇日期後從 DB 讀取隊伍與分組資料
• 若指定日期沒有資料，可手動輸入名單並產生配對
• 從指定組別選 2 隊帶入記分板
• 記分板支援先攻設定、點擊分數直接加分、上一步回退
• 支援上下換隊、左右交換隊員位置
• 比賽結算後可選擇是否上傳戰績到 history 資料表

開發環境 Port

• Client: 3501
• Server API: 8788

Vite 前端會開在：

http://localhost:3501

API 會開在：

http://localhost:8788

啟動方式

先安裝套件：

npm install

啟動開發模式：

npm run dev

這個指令會同時啟動：

• Vite client on 3501
• Node server on 8788

其中後端已使用 node --watch，修改 server/server.mjs 會自動重啟。

環境變數

可參考 .env.example：

DB_HOST=192.168.0.15
DB_PORT=3307
DB_USER=jianmiau
DB_PASSWORD=your-password
DB_DATABASE=badminton
DB_TABLE=badminton
DB_HISTORY_TABLE=history
SERVER_PORT=8788

資料表說明

badminton

• time: 日期，格式 YYYYMMDD
• personnel: 人員清單，格式例如 [[1,"A區成員"],[0,"B區成員"]]
• battlecombination: 分組資料，格式例如 {"0":[["A","B"]],"1":[...],"2":[...]}

history

• id
• time
• dayOfWeek
• score
• winScore
• type
• players
• team
• scoreList

其中 scoreList 格式為：

[round, starter, winCount, winner]

對應意義：

• round: 第幾球
• starter: 發球者編號，依記分板 1~4
• winCount: 連續得分次數
• winner: 該球由哪一隊得分，0 代表上方隊伍，1 代表下方隊伍

建置

npm run build

Docker

建置映像：

docker build -t badminton-scoreboard .

啟動容器：

docker run -d \
  --name badminton-scoreboard \
  -p 8788:8788 \
  -e PORT=8788 \
  -e DB_HOST=192.168.0.15 \
  -e DB_PORT=3307 \
  -e DB_USER=jianmiau \
  -e DB_PASSWORD=your-password \
  -e DB_DATABASE=badminton \
  -e DB_TABLE=badminton \
  -e DB_HISTORY_TABLE=history \
  badminton-scoreboard

容器啟動後可透過：

http://localhost:8788

提供 API 與建置後的前端頁面。