diff --git a/README.md b/README.md index 7975b69..4f69c9a 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ - 歷史戰績頁 - 直接從資料庫 `history` 表讀取列表 - 點擊任一筆可開啟得分紀錄彈窗 + - 彈窗右上角提供 `X` 關閉按鈕,手機更容易操作 - 每筆資料可單獨刪除 ## 本機開發 diff --git a/src/App.css b/src/App.css index 917bcfb..8fafc13 100644 --- a/src/App.css +++ b/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); diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx index 89f78cb..b26a4a7 100644 --- a/src/pages/HistoryPage.tsx +++ b/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() {

History

歷史戰績

- 這裡會直接讀取資料庫 `history` 表中的比賽紀錄。點擊卡片可查看得分過程,右側按鈕可直接刪除此筆紀錄。 + 這裡會直接從資料庫的 `history` 表讀取比賽紀錄,點開後可查看每一分的得分過程,也能刪除單筆資料。

@@ -82,7 +82,7 @@ export function HistoryPage() { {loading ? (

正在讀取戰績

-

系統正在從資料庫載入歷史列表。

+

請稍候,系統正在載入歷史紀錄。

) : error ? (
@@ -91,8 +91,8 @@ export function HistoryPage() {
) : history.length === 0 ? (
-

目前沒有戰績

-

資料庫 `history` 表內還沒有可顯示的紀錄。

+

目前沒有歷史戰績

+

資料庫 `history` 表目前還沒有可顯示的資料。

) : (
@@ -112,7 +112,7 @@ export function HistoryPage() { {item.leftTeamName} vs {item.rightTeamName}
- 勝隊:{item.winnerTeamName} + 勝方:{item.winnerTeamName}
@@ -120,7 +120,7 @@ export function HistoryPage() { 比分:{item.score[0]} - {item.score[1]} 模式:{item.typeLabel} - 目標分:{item.winScore} + 勝利分數:{item.winScore}
@@ -160,6 +160,15 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) { role="dialog" onClick={(event) => event.stopPropagation()} > + +

得分紀錄

{item.leftTeamName} vs {item.rightTeamName} @@ -180,12 +189,12 @@ function HistoryReplayModal({ item, onClose }: HistoryReplayModalProps) {
{item.playedAt} {item.typeLabel} - 勝隊:{item.winnerTeamName} + 勝方:{item.winnerTeamName}
{item.scoreList.length === 0 ? ( -

這筆資料沒有完整的得分過程。

+

這筆戰績沒有可顯示的得分紀錄。

) : ( item.scoreList.map(([round, starter, winCount, winner]) => (