feat: show Wondrous Tails odds now and after a reset beside a full-width board, mark finished lines and make clearing undoable (UX Phase 3c-B) by hydai · Pull Request #67 · hydai/ff14.tw

hydai · 2026-10-20T21:25:40Z

摘要

這是 UX 改版第 3c 階段的 PR B：天書奇談改成「答案在第一個畫面」。只改網站，沒有改 API。

說明只留一句。
盤面：16 格都是按鈕，點一下貼上、再點一下拿掉；貼滿 9 張後，其他格子不能點。
機率：盤面旁邊一直列出貼滿 9 張時「至少 1／2／3 條線」的機率（手機上在盤面下面）。「現在」和「重置之後」並排，各配一條長條；只有貼了 3～7 張、遊戲能重置時，才有「重置之後」的數字。
連線：已經連成的線框綠色，再貼一張就能連成線的空格用虛線框起來。
拿掉：建議文字、好壞配色與「還原／重做」。紅色的「重置盤面」改成盤面右上角的「清空盤面」，按了之後同一顆按鈕可以「復原」。
計算：照舊列舉每一種落法，搬到不碰 DOM 的模組。

另外：

改版前後對照（合併前請先確認；最後一段是要站長決定的事）：https://claude.ai/artifact/2XHN6Rv2y5WNPwrmiU5iNn
設計文件：docs/superpowers/specs/2026-10-20-ux-phase3c-minigames-design.md（未 commit；站長 10/20 核准；3c-B 是 §2 B1–B7、§6.3、§6.5）

變更

連線機率模組（tools/wondrous-tails/tails-odds.js，0f78fb2）：WondrousTailsOdds，不碰 DOM。
- 列舉剩下的貼紙落在空格的每一種擺法，算出貼滿時至少 1／2／3 條線的機率。最多 11,440 種，空盤面約 3ms。
- 「重置之後」＝隨機 9 張的盤面：6,688／1,208／24 種（58.5%／10.6%／0.21%）。數字在載入時用同一套列舉算出來，只有 3～7 張時才給。
- 也算出連成的線與差一張的格子。
- 百分比格式：0 寫 0%，≥ 99.995% 寫 100%，≥ 1% 一位小數，其他兩位小數。
新盤面骨架（3cafa94）：
- 說明只剩一句；盤面標題寫「已貼 N／9 張」。
- 16 格寫在 index.html，都是 <button>，鍵盤用 Enter 或空白鍵。
- 貼滿 9 張時，其他空格 disabled，不再跳 toast；toggle() 自己也擋第 10 張。
- 拿掉機率面板、建議文字、還原／重做（這一頁不再載入 state-history-manager.js）和紅色的重置。
- 盤面用滿寬度，格子是正方形。
- 已貼的格子不再設 box-shadow：main 上這條規則會蓋掉共用的焦點外框，用鍵盤時看不到焦點在哪一格（Chrome 確認過）。
- 說明在窄螢幕平均分行。
- 拿掉 18 個不再用的翻譯鍵；新增頁面替身 tests/helpers/wondrous-page.js。
機率卡（49512f5）：
- 表格：列是「至少 1／2／3 條」，欄是「現在」「重置之後」。
- 長條在名稱和數字之間，長度就是百分比。「現在」用主色、「重置之後」用灰色，數字和長條都不用好壞配色；寫「—」時長條長度是 0。
- 電腦（768px 以上）盤面在左、機率在右；手機上機率緊接在盤面下面。
連線標示（8847deb）：
- 連成的線上每一格，外面一圈綠色 outline（offset 3px，不蓋掉焦點外框）。
- 差一張的空格是綠色虛線框；9 張時不標。
- 格子名稱也會寫「已連成線」或「貼了就連成線」，給螢幕閱讀器用。沒有圖例。
清空盤面與復原（d26c50d）：
- 一般的小按鈕，在盤面卡標題列的右邊；盤面是空的時候不能按。
- 按了清空後，同一顆按鈕變成「復原」，再按一次放回去。之後貼上或拿掉任何一張，就不能再復原。
- 寬度固定，換成「復原」時不會跳。不跳 toast，焦點留在按鈕上。
文件（1ca17a8）：修改紀錄 v2.25.0、README、CLAUDE.md。

和設計、計畫不同之處

差一張的虛線框用綠色，不是草稿的黃色：黃色（--color-warning）在白底上的對比只有約 2.2:1；綠色和連成的線是同一個意思。
已貼的格子拿掉光暈，順便修好 main 上用鍵盤看不到焦點外框的問題。設計沒有提到。
格子名稱寫出連線狀態（「已連成線」「貼了就連成線」），給螢幕閱讀器用。設計沒有提到。
「清空盤面」按鈕有最小寬度（7.5rem）：換成「復原」時，左邊緣原本會跳 26–28px。這是整條分支審查時發現的。
被擋下來的 toggle() 不會讓「復原」消失：計畫寫「一開始就清掉可復原的盤面」，但照字面寫的話，清空之後的盤面會救不回來。實作者發現這點，審查者用突變確認過。

驗證

測試：node --test 從 1134 個增加到 1174 個，6 個 commit 每個單獨跑都通過（1144、1153、1160、1167、1174、1174）。
開 PR 前的審查：
- 6 個任務各自經過規格與品質審查，全部 Approved，沒有要修的 Important。
- 最後由 opus 審查整條分支，結論是可以合併。順便修了 5 個小地方：按鈕寬度、說明分行、兩段過時的註解、凍結盤面的測試、CLAUDE.md 的一句說法；修正也經過複審。
- 50,643 種盤面全部用獨立寫的程式對過，計算結果一致。
PR 上的審查：Codex 審 1ca17a8 沒有意見。Copilot 開 1 則：部署時新舊 HTML／JS 混用。照 3b 決定的作法用 Cloudflare 的設定處理，不改程式；設定已改好，已回覆並 resolve。
Chrome 實測（審查者，裝置模擬）：
- 390×844 三語：第一個畫面看得到整個盤面和三列機率（第三列底邊在 795px）。
- 320×568 英文、日文：張數和按鈕在同一行，長條換到名稱下面。
- 1280×800：盤面和機率分兩欄。
- 深色模式正常。
- 鍵盤：Tab 到連成的線上的已貼格子，焦點外框和綠框都看得到。
- 按鈕換成「復原」時，三語都是 120px 寬、位置不動。
還沒確認：
- Safari、Firefox：窄螢幕長條換行的寫法只在 Chrome 看過。
- iPhone、Android 實機。
- 真的螢幕閱讀器。

合併前待確認

改版前後對照。
部署時的瀏覽器快取：這一頁的 HTML 和 JS 一起換了。站長已把 Cloudflare 的 Browser Cache TTL 改成「Respect Existing Headers」，2026-10-21 04:14 UTC 確認正式站的 JS、CSS、HTML 都是 max-age=600（原本 JS／CSS 是 4 小時）。改設定之前存進瀏覽器的舊檔最晚 08:14 UTC（台灣時間 16:14）過期；在那之後合併，新舊檔案錯開的時間最多大約 10 分鐘。

後續（不在本 PR）

五個頁面替身裡有重複的 i18n 替身（這次是第 5 份），可以抽成共用模組。
對照頁上請站長決定的四件事：
- 手機上機率長條比較短；給列標題 width: 100% 大約可以加長一倍。
- 清空或復原時，螢幕閱讀器沒有提示；可以讓張數加上 aria-live。
- ⭐ 的大小。
- 同一條線上相鄰兩格的綠框，會接成一條 6px 的綠帶。
還沒有測試的地方：
- 兩個只有直接呼叫程式才會遇到的防呆：被擋下的 toggle() 不清掉復原、空盤面呼叫 clearOrRestore()。
- LINES 有沒有凍結、表格的結構、CSS 的載入順序。
CLAUDE.md 的測試說明，沒寫到這次新加的兩條 CSS 檢查（說明分行、按鈕最小寬度）。

🤖 Generated with Claude Code

…he card fills up, now and after a reset - 原因：設計要列出「至少 1／2／3 條」並和「重置之後」並排比較；計算放在不碰 DOM 的模組才測得到，之後的任務再接上頁面 - 機率：貼了 k 張時，剩下的 9−k 張落在空格的每一種擺法（C(16−k, 9−k) 種）一樣可能；遞迴挑空格，挑滿 9 張就直接數連成幾條線，累加至少 1／2／3 條的擺法數；貼了超過 9 張丟 RangeError - 重置：只有貼 3～7 張時能重置（canReset）；重置之後等於隨機的 9 張盤面，常數 6,688／1,208／24 ÷ 11,440 在載入時用同一個列舉算空盤面得到，不另外寫死 - 盤面：連成的線與它們的格子（completedLines）、剛好貼了 3 張的線缺的那一格（nearCells，9 張時不列）、一次給出畫面要畫的 analyze()、百分比格式 formatPercent() - 測試：新增 wondrous-tails-odds.test.js，釘住 11,440／6,688／1,208／24、六個例子盤面、重置的邊界、連線、差一張的格子與百分比格式 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

…r count and a one-line description - 原因：天書改成答案在第一個畫面：說明只留一句、盤面用滿寬度、16 格改成按鈕；這個任務先換掉頁面骨架，所以這個 commit 之後頁面暫時不顯示機率，之後的任務再補上 - 頁面：說明只剩「點一格貼上貼紙，再點一次拿掉（最多 9 張）」；盤面卡的標題列寫「已貼 N／9 張」；16 格直接寫在 index.html，都是 <button>，用鍵盤的 Enter、空白鍵就能貼上與拿掉，不再自己聽 keydown - 拿掉：連線機率面板與建議文字、還原／重做（不再載入 state-history-manager.js）、紅色的「重置盤面」；貼滿 9 張時其他的空格改成不能點（disabled），不再跳「最多只能放置 9 個物件」的 toast，toggle() 自己也不讓第 10 張貼上去 - 版面：盤面用滿卡片的寬度（四欄一樣寬、格子正方形、間距 12px）；已貼的格子不再設 box-shadow，不然會蓋掉共用的焦點外框，用鍵盤時看不到焦點在哪一格 - 翻譯：改 wondrous_tails_desc、新增 wondrous_tails_count，三語各拿掉 18 個不再用的鍵 - 測試：新增 wondrous-tails-page.test.js 與頁面替身 tests/helpers/wondrous-page.js（作法照 cactpot-page.js）；design-system.test.js 的「格子都能用 Tab 鍵移動焦點」改成檢查天書的 16 個 <button> Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

…eset next to the board - 原因：站長想知道連線機率的分布、自己決定要不要重置；上一個 commit 之後頁面不顯示機率，這個 commit 把 tails-odds.js 算出來的結果畫在盤面旁邊 - 機率卡：盤面卡後面多一張卡，表格每一列是「至少 1／2／3 條」，欄是「現在」與「重置之後」；重置之後只在貼 3～7 張時有數字，其他時候寫「—」；數字照 formatPercent()（0 寫 0%、≥ 99.995% 寫 100%、≥ 1% 一位小數、其他兩位小數） - 長條：每一列兩條，長度就是機率（寫「—」時長度 0），「現在」用主色、「重置之後」用灰色，數字與長條都不用好壞配色；長條 aria-hidden，名稱與數字照表格唸，table、tr、th、td 的 display 不動 - 版面：手機在盤面下面，名稱與長條左右排，放不下時長條換到名稱下面；電腦（768px 以上）兩欄，盤面 26rem、機率卡 22rem - 實作：render() 開頭呼叫 analyze()，張數也改用 view.placed；三列在建構子收好，重畫只改文字與長條長度；表頭與名稱是 data-i18n，三語各新增 5 個鍵 - 測試：頁面替身加 odds()、header()；新增 0 張、3～7 張的邊界、例子盤面、貼滿 9 張、切換語言與版面的測試；另外補上 toggle() 自己擋盤面外的位置與第 10 張的測試（原本只靠格子的 disabled 擋下來，現在 render() 會呼叫 analyze()，超過 9 張會丟 RangeError） Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

…ould finish one - 原因：盤面上看不出哪幾格已經連成線、貼哪一格就會連成；機率表只有數字，要自己在盤面上一條一條數 - 綠框：連成的線上每一格外面加 3px 的綠色 outline（離格子 3px）；用 outline 而不是 box-shadow，才不會蓋掉共用的 .cell:focus-visible 用 box-shadow 畫的焦點外框，用鍵盤時連成的線上的格子也看得到焦點 - 虛線框：只差一張的空格（某條線剛好貼了 3 張）加 2px 的綠色虛線框，同一格補齊兩條線只標一次；顏色和連成的線一樣，意思是「貼了就連成」，不用草稿的黃色，它在白底上的對比只有約 2.2:1 - 貼滿 9 張時不標虛線框（空格不能再貼），拿掉一張後標回來；線斷掉時綠框跟著拿掉 - 螢幕閱讀器：格子名稱也寫出來，連成的線寫「第 N 格：已連成線」、差一張的空格寫「第 N 格：貼了就連成線」，三語各新增 2 個鍵；不加圖例 - 共用樣式：tools-common.css 的 .cell.suggested 註解拿掉「之後天書的連線」，天書不用它（它會把主色底換成淡綠色，看不出貼了貼紙），規則本身不動 - 測試：頁面替身加 doneCells()、nearCells()；新增 7 個測試，涵蓋線上 4 格、只差一張、同一格補齊兩條線只標一次與兩種標示同時出現、9 張時不標、拿掉一張讓線斷掉、切換語言，以及樣式（綠框用 outline 且不含 box-shadow、虛線框用 --color-success、頁面沒有圖例） Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

…if that was a mistake - 原因：紅色的「重置盤面」跟遊戲的重置同名，按了卻只是清空工具上的盤面，而且按錯了救不回來 - 改名：叫「清空盤面」（Clear board、盤面をクリア），「重置」留給遊戲的重置（機率表的「重置之後」） - 一般按鈕：.btn.btn-sm，不再是紅色；放在盤面卡標題列的右邊、張數的對面，標題列本來就留了一顆小按鈕的高度，盤面不會跳動 - 空的時候不能按：盤面沒有貼紙、也沒有可以復原的盤面時 disabled（只有拿掉最後一張貼紙才會這樣，這時焦點在格子上） - 復原：清空時先存一份清空前的盤面，同一顆按鈕就地變成「復原」，再按一次放回去（9 張時其他空格不能點、連線框都和清空前一樣）；不跳 toast，焦點留在按鈕上 - 貼新的一格：清空之後貼上或拿掉任何一張貼紙，就不能再復原，按鈕變回「清空盤面」 - 翻譯：新增 wondrous_tails_clear、wondrous_tails_restore，三語各 2 個鍵；兩種文字會切換，所以由 render() 寫，不用 data-i18n - 測試：頁面替身加 clearButton()；新增 6 個測試，涵蓋按鈕的位置與一開始不能按、清空後變「復原」且焦點不動不跳 toast、復原後盤面與連線框和不能點的空格照原樣、貼新的一格後不能再復原、一張一張拿掉到空時不能按、切換語言 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

…nd CLAUDE.md - 原因：天書奇談改版（UX 第 3c 階段 PR B）完成，更新修改紀錄與開發文件 - changelog：v2.25.0 - README：天書奇談的功能、測試數量與頁面替身 - CLAUDE.md：檔案統計、兩份新測試與頁面替身、天書奇談的說明 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-10-20T21:25:51Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-20T21:27:02.751447Z	`1ca17a8`	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

cloudflare-workers-and-pages · 2026-10-20T22:26:18Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	ff14-tw-treasure	`1ca17a8`	Oct 20 2026, 09:25 PM

Copilot

🟡 Changes recommended

Mixed cached HTML and controller versions can prevent initialization, so deployment needs a cache-safe asset strategy.

1 open issue

Version controller assets to prevent cached HTML incompatibility · New

What changed in this PR

Updates FF14.tw’s Wondrous Tails tool to show odds alongside the board, without API changes.

Changes:

Extracts probability calculations into a DOM-independent module.
Adds current/reset odds, line highlights, and undoable clearing.
Updates translations, tests, and documentation.

File	Description
tools/wondrous-tails/tails-odds.js	Calculates odds and line states.
tools/wondrous-tails/style.css	Adds responsive board and odds styling.
tools/wondrous-tails/script.js	Handles board interactions and rendering.
tools/wondrous-tails/index.html	Adds button cells and odds table.
tests/wondrous-tails-page.test.js	Covers interactions, translations, and layout rules.
tests/wondrous-tails-odds.test.js	Covers probability calculations.
tests/helpers/wondrous-page.js	Adds a page-testing helper.
tests/design-system.test.js	Checks board buttons’ keyboard accessibility.
README.md	Documents the redesigned tool.
CLAUDE.md	Updates architecture and testing documentation.
changelog.html	Adds release notes.
assets/js/i18n/translations/tools/wondrous-tails.js	Updates Chinese, English, and Japanese text.
assets/css/tools-common.css	Corrects a shared-style comment only.

_{Review effort: Balanced}

Copilot

🔵 Needs a closer look

Maintainer design sign-off remains pending, with cross-browser, device, and screen-reader checks still unconfirmed.

No open issues 🎉

1 resolved since last review

Version controller assets to prevent cached HTML incompatibility

_{Review effort: Balanced}

hydai and others added 6 commits October 21, 2026 05:22

hydai requested a balanced review from Copilot October 21, 2026 04:00

Copilot started reviewing on behalf of hydai October 21, 2026 04:01

View session

Copilot AI reviewed Oct 21, 2026

View reviewed changes

Comment thread tools/wondrous-tails/index.html Resolved

hydai requested a balanced review from Copilot October 21, 2026 04:17

Copilot started reviewing on behalf of hydai October 21, 2026 04:18

View session

Copilot AI reviewed Oct 21, 2026

View reviewed changes

hydai merged commit 523862e into main Oct 21, 2026
14 checks passed

hydai deleted the worktree-ux-phase3c-b-wondrous-tails branch October 21, 2026 12:13

Navigation Menu

Repository navigation

feat: show Wondrous Tails odds now and after a reset beside a full-width board, mark finished lines and make clearing undoable (UX Phase 3c-B) - #67

feat: show Wondrous Tails odds now and after a reset beside a full-width board, mark finished lines and make clearing undoable (UX Phase 3c-B)#67
hydai merged 6 commits into
mainfrom
worktree-ux-phase3c-b-wondrous-tails

hydai commented Oct 20, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 20, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

hydai commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

摘要

變更

和設計、計畫不同之處

驗證

合併前待確認

後續（不在本 PR）

Uh oh!

chatgpt-codex-connector Bot commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 20, 2026

Deploying with Cloudflare Workers

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hydai commented Oct 20, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 20, 2026 •

edited

Loading