新增歷史戰績關閉按鈕並更新 README

README.md

@@ -22,6 +22,7 @@
 - 歷史戰績頁
   - 直接從資料庫 `history` 表讀取列表
   - 點擊任一筆可開啟得分紀錄彈窗
+  - 彈窗右上角提供 `X` 關閉按鈕，手機更容易操作
   - 每筆資料可單獨刪除
 
 ## 本機開發

src/App.css

@@ -1212,6 +1212,7 @@
 }
 
 .history-modal {
+  position: relative;
   width: min(680px, 100%);
   display: grid;
   gap: 16px;
@@ -1223,6 +1224,41 @@
     inset 0 0 0 2px rgba(200, 140, 46, 0.45);
 }
 
+.history-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 44px;
+  height: 44px;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 1.6rem;
+  line-height: 1;
+  color: #b34e3a;
+  background: linear-gradient(180deg, #ffe5bf, #f0bd7c);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.34),
+    0 10px 18px rgba(8, 47, 73, 0.16);
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    filter 0.16s ease;
+}
+
+.history-modal-close:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 0 0 1px rgba(199, 125, 63, 0.42),
+    0 14px 22px rgba(8, 47, 73, 0.2);
+}
+
+.history-modal-close:active {
+  transform: translateY(0);
+  filter: brightness(0.98);
+}
+
 .history-modal-score {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

src/pages/HistoryPage.tsx

@@ -46,7 +46,7 @@ export function HistoryPage() {
 
   const handleDelete = async (item: HistoryListItem) => {
     const confirmed = window.confirm(
-      `確定要刪除這筆戰績嗎？\n${item.leftTeamName} vs ${item.rightTeamName}`,
+      `確定要刪除此筆戰績嗎？\n${item.leftTeamName} vs ${item.rightTeamName}`,
     )
 
     if (!confirmed) {
@@ -74,7 +74,7 @@ export function HistoryPage() {
           <p className="panel-kicker">History</p>
           <h2>歷史戰績</h2>
           <p className="panel-copy">
-            這裡會直接讀取資料庫 `history` 表中的比賽紀錄。點擊卡片可查看得分過程，右側按鈕可直接刪除此筆紀錄。
+            這裡會直接從資料庫的 `history` 表讀取比賽紀錄，點開後可查看每一分的得分過程，也能刪除單筆資料。
           </p>
         </article>
 
@@ -82,7 +82,7 @@ export function HistoryPage() {
           {loading ? (
             <div className="empty-state">
               <h3>正在讀取戰績</h3>
-              <p>系統正在從資料庫載入歷史列表。</p>
+              <p>請稍候，系統正在載入歷史紀錄。</p>
             </div>
           ) : error ? (
             <div className="empty-state">
@@ -91,8 +91,8 @@ export function HistoryPage() {
             </div>
           ) : history.length === 0 ? (
             <div className="empty-state">
-              <h3>目前沒有戰績</h3>
-              <p>資料庫 `history` 表內還沒有可顯示的紀錄。</p>
+              <h3>目前沒有歷史戰績</h3>
+              <p>資料庫 `history` 表目前還沒有可顯示的資料。</p>
             </div>
           ) : (
             <div className="history-list">
@@ -112,7 +112,7 @@ export function HistoryPage() {
                           {item.leftTeamName} vs {item.rightTeamName}
                         </h3>
                       </div>
-                      <span className="winner-badge">勝隊：{item.winnerTeamName}</span>
+                      <span className="winner-badge">勝方：{item.winnerTeamName}</span>
                     </div>
 
                     <div className="history-meta">
@@ -120,7 +120,7 @@ export function HistoryPage() {
                         比分：{item.score[0]} - {item.score[1]}
                       </span>
                       <span>模式：{item.typeLabel}</span>
-                      <span>目標分：{item.winScore}</span>
+                      <span>勝利分數：{item.winScore}</span>
                     </div>
                   </button>
 
@@ -160,6 +160,15 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
         role="dialog"
         onClick={(event) => event.stopPropagation()}
       >
+        <button
+          aria-label="關閉戰績紀錄"
+          className="history-modal-close"
+          type="button"
+          onClick={onClose}
+        >
+          ×
+        </button>
+
         <p className="panel-kicker">得分紀錄</p>
         <h3>
           {item.leftTeamName} vs {item.rightTeamName}
@@ -180,12 +189,12 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
         <div className="history-modal-summary">
           <span>{item.playedAt}</span>
           <span>{item.typeLabel}</span>
-          <span>勝隊：{item.winnerTeamName}</span>
+          <span>勝方：{item.winnerTeamName}</span>
         </div>
 
         <div className="history-replay-list">
           {item.scoreList.length === 0 ? (
-            <p className="history-replay-empty">這筆資料沒有完整的得分過程。</p>
+            <p className="history-replay-empty">這筆戰績沒有可顯示的得分紀錄。</p>
           ) : (
             item.scoreList.map(([round, starter, winCount, winner]) => (
               <div className="history-replay-row" key={`${item.id}-${round}`}>