調整歷史戰績彈窗顯示文字

README.md

@@ -10,7 +10,8 @@
 - 記分板支援先攻設定、點擊分數直接加分、上一步回退
 - 支援上下交換隊伍、左右交換隊員位置
 - 比賽結算後可選擇是否上傳戰績到 `history` 資料表
-- 歷史戰績頁直接從 DB 顯示列表，點擊可查看得分過程
+- 歷史戰績頁直接從 DB 顯示列表
+- 點擊歷史戰績可開啟彈窗，查看比分、發球人姓名、連勝次數與每球結果
 
 ## Port 說明
 
@@ -31,8 +32,8 @@
 
 也就是說：
 
-- Docker 部署後，使用者要連的是 `3501`
-- `8788` 是容器內部 app port，給 Nginx 反向代理用
+- Docker 與 NAS 部署後，使用者實際連的是 `3501`
+- `8788` 是容器內部 app port，給 Nginx 反向代理使用
 
 ## 本機開發
 
@@ -78,9 +79,9 @@ SSL_KEY_FILE_NAME=RSA-privkey.pem
 
 ### `badminton`
 
-- `time`: 日期，格式 `YYYYMMDD`
-- `personnel`: 人員清單，例如 `[[1,"A區成員"],[0,"B區成員"]]`
-- `battlecombination`: 分組資料，例如 `{"0":[["A","B"]],"1":[...],"2":[...]}`
+- `time`：日期，格式 `YYYYMMDD`
+- `personnel`：人員清單，例如 `[[1,"A區成員"],[0,"B區成員"]]`
+- `battlecombination`：分組資料，例如 `{"0":[["A","B"]],"1":[...],"2":[...]}`
 
 ### `history`
 
@@ -102,10 +103,10 @@ SSL_KEY_FILE_NAME=RSA-privkey.pem
 
 欄位意義：
 
-- `round`: 第幾球
-- `starter`: 發球者編號，依記分板 `1~4`
-- `winCount`: 該隊目前連續得分次數
-- `winner`: 哪一隊得分，`0` 代表上方隊伍，`1` 代表下方隊伍
+- `round`：第幾球
+- `starter`：發球者編號，依記分板 `1~4`
+- `winCount`：該隊目前連續得分次數
+- `winner`：哪一隊得分，`0` 代表上方隊伍，`1` 代表下方隊伍
 
 ## 建置
 
@@ -140,7 +141,7 @@ docker run -d \
 
 ## NAS 部署
 
-這個專案已提供 [docker-compose.yml](./docker-compose.yml)，會啟動兩個服務：
+專案提供 [docker-compose.yml](./docker-compose.yml)，會啟動兩個服務：
 
 1. `badminton-scoreboard`
 說明：Node app，內部使用 `8788`
@@ -148,17 +149,15 @@ docker run -d \
 2. `badminton-scoreboard-web`
 說明：Nginx SSL 入口，對外使用 `3501`
 
-在 NAS 專案目錄中，直接執行：
+在 NAS 專案目錄中可直接執行：
 
 ```bash
 sudo docker compose up -d --build
 ```
 
-這樣就可以部署。
-
 ## SSL 憑證掛載
 
-Nginx 會直接掛載這個 NAS 目錄：
+Nginx 直接掛載這個 NAS 目錄：
 
 ```text
 /volume1/homes/JianMiau/www/certificate/
@@ -175,7 +174,7 @@ Nginx 會在容器內自動組合：
 - `RSA-cert.pem` + `RSA-chain.pem` => fullchain
 - `RSA-privkey.pem` => private key
 
-而且已經加上憑證檔變更監看，所以你之後只要更新：
+另外已加入憑證檔變更監看，所以你之後只要更新：
 
 ```text
 /volume1/homes/JianMiau/www/certificate/
@@ -213,11 +212,11 @@ https://你的網域:3501
 
 ## 注意事項
 
-- `sudo docker compose up -d --build` 這條指令現在可以直接用，因為專案已經補上 compose 檔
+- `sudo docker compose up -d --build` 現在可以直接使用
 - Docker / NAS 對外入口是 `3501`，不是 `8788`
 - `8788` 是 Node app 內部服務埠，不是給使用者直接連的
-- 如果 NAS 上 `3501` 已被其他服務使用，請改 `docker-compose.yml` 左側對外埠
-- 若你的憑證檔名之後改了，只要更新 `.env` 對應的 `SSL_*_FILE_NAME` 即可
+- 若 NAS 上 `3501` 已被其他服務使用，請改 `docker-compose.yml` 左側對外埠
+- 若憑證檔名之後改了，只要更新 `.env` 中對應的 `SSL_*_FILE_NAME` 即可
 
 ## Git 設定
 

src/pages/HistoryPage.tsx

@@ -50,7 +50,7 @@ export function HistoryPage() {
           <p className="panel-kicker">History</p>
           <h2>歷史戰績</h2>
           <p className="panel-copy">
-            這裡直接顯示 DB 的 `history` 列表。點任一筆戰績，可快速查看該場的得分紀錄。
+            這裡直接顯示 DB 的 `history` 列表。點任一筆戰績，可快速查看該場的得分過程。
           </p>
         </article>
 
@@ -149,8 +149,8 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
             item.scoreList.map(([round, starter, winCount, winner]) => (
               <div className="history-replay-row" key={`${item.id}-${round}`}>
                 <span>第 {round + 1} 球</span>
-                <span>發球 #{starter + 1}</span>
-                <span>連得 {winCount + 1}</span>
+                <span>發球：{getStarterName(item, starter)}</span>
+                <span>連勝 {winCount + 1}</span>
                 <strong>{winner === 0 ? item.leftTeamName : item.rightTeamName}</strong>
               </div>
             ))
@@ -160,3 +160,7 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
     </div>
   )
 }
+
+function getStarterName(item: HistoryListItem, starter: number) {
+  return item.players[starter] ?? '未知玩家'
+}