Skip to content

feat: guide Faux Hollows with a status line, sword and chest odds and fox spots on the board, and a menu beside each cell (UX Phase 3c-C) - #68

Open
hydai wants to merge 7 commits into
mainfrom
worktree-ux-phase3c-c-faux-hollows
Open

feat: guide Faux Hollows with a status line, sword and chest odds and fox spots on the board, and a menu beside each cell (UX Phase 3c-C)#68
hydai wants to merge 7 commits into
mainfrom
worktree-ux-phase3c-c-faux-hollows

Conversation

@hydai

@hydai hydai commented Oct 26, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

摘要

這是 UX 改版第 3c 階段的 PR C：宗長計算機改成「答案在第一個畫面」。只改網站，沒有改 API。

  • 狀態列：盤面上方一行寫現在要做什麼、還能翻幾次：① 點遊戲裡被擋住的格子 → ② 找劍 → ③ 找寶箱 → ④ 翻宗長（不一定有）→ 完成。次數不夠翻完劍（或寶箱）時直接跳到下一個目標。
  • 障礙物：不可能被擋住的格子變淡、點不了；能確定的障礙物自動補上（斜線虛框），拿掉手動標的，它補上的跟著消失。
  • 盤面上的提示：每個還沒翻的格子寫 ⚔️75%、📦13%（0 不寫）；只有一個提示的格子圖示一行、百分比一行。宗長只放 🦊，從來不寫數字。下一格框綠色（同分的全部框）。
  • 翻開的格子：在格子旁邊的小選單（共用的 CellPopover）選劍／寶箱／宗長／空，不可能的是灰的；只剩一種可能時點一下就標好；點標好的格子可以改或清除。
  • 上一步／下一局：照仙人微彩；上一步會寫出退回了什麼，「下一局」按錯了用上一步救回來。
  • 拿掉：說明段落、資訊列、「隱藏機率」「關閉最佳策略」、分數卡、「重做」、蓋住盤面的對話框。
  • 刪掉 assets/js/state-history-manager.js：宗長是最後一個載入它的頁面。

另外：

  • 改版前後對照（合併前請先確認；最後一段是要站長決定的事）：https://claude.ai/artifact/7ezECYSw63ivgxfUeSuJZC
  • 設計文件：docs/superpowers/specs/2026-10-20-ux-phase3c-minigames-design.md（未 commit；站長 10/20 核准；3c-C 是 §2 C1–C9、§5、§6.1、§6.4、§6.6；10/27 照站長的決定改了 §6.6 一句）

變更

  • 計算模組（tools/faux-hollows-foxes/hollows-solver.js，0f8e6a8）：FauxHollowsSolver，不碰 DOM，盤面資料當參數傳入。
    • 從 252 種盤面算出能標的障礙物、自動補上、劍與寶箱的機率、🦊 的格子、目標與下一格、剩幾次；同分比的是「幾種盤面」這個整數。
    • 宗長不給任何比例或種數：出現率沒有公開；「假設這局有宗長」的機率每翻開一格空的就往上加，最後會到 100%。
    • choices() 把這格當成還沒翻開，列出還對得上的選項。
    • 百分比帶 %：0 不寫、不到 1% 寫 <1%。
  • 新盤面骨架（29feba3）：36 格寫在 index.html，都是 <button>；狀態列 aria-live；① 階段的標記與自動補上。
    • 用鍵盤標完最後一個需要的障礙物時，那一格會鎖住，焦點移到下一格（沒有下一格就移到第一個能點的格子）。
    • 拿掉舊頁的提示、資訊列、開關、結果卡、對話框；三語各拿掉 38 個不再用的翻譯鍵。
    • 新的頁面替身 tests/helpers/hollows-page.js。
  • 刪掉 state-history-manager.js（e8e4623）：連 README 檔案樹那一行。
  • 翻格（dcce3a0）：小選單 2 欄，上三列開在格子下方、下三列開在上方；用鍵盤打開時焦點在第一個能選的選項。tapCell()、choose() 自己擋不可能的格子與選項，不靠 disabled。次數用完時還沒翻的格子不能點。
  • 盤面提示（d3819c2）：⚔️／📦 百分比、🦊、下一格；格子名稱寫出同樣的提示，例如「第 27 格：劍 75%，寶箱 13%，建議翻這格」。重寫機率測試：唯一盤面的 4 個宗長位置不會寫成 100%。
  • 上一步／下一局（aebe25a）：每個動作之前存一份；兩顆按鈕用 aria-disabled。
  • 文件（16b36b5）：修改紀錄 v2.26.0、README、CLAUDE.md、工具目錄的 README。

和設計、計畫不同之處

  • 格子上的百分比加「%」：設計與草稿寫 ⚔️75，站長 10/27 審計畫時決定加 %。
    • 加了之後 ⚔️100% 約 47px，414px 以下的手機一行放不下。所以只有一個提示的格子圖示一行、百分比一行（100% 只會出現在這種格子）。
    • 374px 以下格子間距改成 2px。
    • 359px 以下提示字改成 11px（0.6875rem，這一頁唯一不用 token 的字級）。
  • 審閱者的例子照設計 §6.4 的目標順序：§6.6 原本寫「翻開 0、3、23 之後格 29 是下一格」，但那時劍還差 2 格、剩 3 次，下一格應該是劍的 32、33。站長 10/27 確認照 §6.4，§6.6 已改。
  • 刪掉 state-history-manager.js：設計沒要求，站長 10/27 決定刪。
  • 手動標的障礙物在 ① 階段看得出能點（手指游標、hover 時藍框）：計畫寫死 cursor: default，總審查發現手動標的還能再點一次拿掉，修正。
  • 次數用完、「完成」時，還沒翻的格子照樣畫提示：照設計「完成時盤面保留」，寶箱沒翻到的格子還寫著 📦100%。
  • 計畫之外多加的測試：
    • 翻了好幾格之後回頭改早先的一格（計畫 Review Focus 第 2 點，原本頁面層沒有測試）。
    • 鎖住且沒有下一格時焦點的去處。
    • 直接呼叫 undo()／nextGame() 時先關掉小選單。

驗證

  • 測試：node --test 從 1174 個增加到 1230 個。7 個 commit 每個單獨跑都通過（1187、1196、1196、1208、1219、1230、1230）。
  • 開 PR 前的審查：
    • 6 個任務各自經過規格與品質審查，全部 Approved。
    • 最後由 opus 審查整條分支，結論是修 4 個小地方就可以合併：① 階段手動障礙物的游標、一個過期的測試名稱、工具 README 三句、兩行註解。已用 fixup 併回原本的 commit，修正也經過複審。
    • 審查者用真的 252 種盤面做過隨機操作（600 局、約 141 萬次一致性檢查），沒有走到 0 種盤面。
  • Chrome 實測（裝置模擬，總審查者與我）：
    • 390×844 中英日：第一個畫面看得到狀態列、整個盤面和兩顆按鈕（「下一局」底部在 560px）。
    • 320×568 英文、日文：四種狀態列都是兩行（67.2px），盤面不跳動；日文「次のゲーム」按鈕 125px，沒有撐出卡片。
    • 320／360／375／390px：三行提示、綠框的格子與 ⚔️100% 都沒有被切掉（最緊的是 320px 綠框格子，寬 37.2／38px）。
    • 1280×800：一欄置中（448px）。
    • 小選單：上三列開在下方、下三列開在上方，左右不超出盤面，沒有被卡片切掉。
    • 只用鍵盤玩一輪：標障礙物後焦點自動到格 26，Enter 開選單、Tab 選、Esc 關，上一步、下一局，焦點都留在該在的地方。
    • 深色模式：障礙物、斜線、四種翻開的底色、綠框都看得清楚。
  • 還沒確認：
    • Safari、Firefox、iPhone、Android 實機。
    • Android 的 emoji 字型與網路字型沒載入時，格子提示的寬度（只在 macOS 的 Chrome 量過）。
    • 瀏覽器預設字級調大時，格子裡的提示可能被切掉。
    • 真的螢幕閱讀器。
    • 小選單只能用 Tab／Shift+Tab 移動，沒有方向鍵（共用元件，這次不改）。

合併前待確認

  • 改版前後對照。
  • 部署時的瀏覽器快取：這一頁的 HTML 和 JS 一起換了（新 HTML 配舊 JS、舊 HTML 配新 JS 都會壞）。和 3c-A、3c-B 一樣，Cloudflare 是 max-age=600，新舊檔案錯開的時間最多大約 10 分鐘，重新整理就好；這個工具不存資料。

後續（不在本 PR）

  • 六個頁面替身裡有重複的 i18n 替身（這次是第 6 份），測試檔也各自有 cssRule()／mediaBlock()，可以抽成共用模組。
  • CLAUDE.md 的測試說明越來越長（每次都會載入），可以拆到 docs 的一份檔案，CLAUDE.md 只留指向。
  • 次數用完時鎖住的格子照樣畫提示，目前只有註解寫明是刻意的，沒有測試。
  • style.css 檔頭註解寫「字級一律來自 tokens.css」，但 359px 以下的 11px 是例外（同檔後面已註明）。
  • 自動補上的格子在 ① 階段是 aria-pressed="false"，語意有點怪。
  • tests/treasure-list-panel.test.js 這次偶發失敗過兩次（整個檔案 'test failed'），單獨跑與重跑都過，和這個 PR 無關。

🤖 Generated with Claude Code

hydai and others added 7 commits October 27, 2026 01:02
@hydai @claude
feat(faux-hollows): work out blocked cells, sword and chest odds, fox…
0f8e6a8 
… spots and the next cell from the 252 boards

- 原因：設計要在盤面上寫劍與寶箱的機率、放 🦊、框出下一格；計算放在不碰 DOM、盤面資料當參數的模組，才測得到設計 6.4 的假想盤面，之後的任務再接上頁面
- 障礙物：只看手動標的障礙物來數對得上的盤面；每一種都是障礙物的格子是已知的，擺法確定（剩下的盤面障礙物都在同一處）就進入翻格；沒標到的自動補上，不存進狀態，每次重畫都從 36 格的狀態重新算
- 目標與下一格：劍 → 寶箱 → 宗長 → 完成，剩的次數不夠翻完就跳到下一個；下一格取目標那一項種數最大的、同分全列，比的是盤面種數這個整數，不除成比例再比
- 宗長：只回傳放 🦊 的格子，不給任何比例或種數（宗長多常出現沒有公開，拿盤面的比例當機率會騙人）；找到宗長之後其他格都不放 🦊
- 選項：choices() 把這格當成還沒翻開（已經翻開的格子也一樣），列出和其他格還對得上的盤面裡這格可能是什麼；宗長只有一隻，別格已經是宗長時不列
- 其他：flatten() 把 6×6 轉成 36 格，formatPercent() 寫整數百分比（0 不寫、不到 1% 寫 <1%）；匯出的物件與常數是凍結的，不改傳進來的盤面與狀態
- 測試：新增 faux-hollows-solver.test.js（13 個），涵蓋 252 種盤面的統計、障礙物階段與自動補上、擺法 0 的種數、審閱者的例子、設計 6.4 的兩種假想盤面、次數不夠與次數用完、choices() 與 formatPercent()

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
feat(faux-hollows): rebuild the board as button cells with a status l…
29feba3 
…ine and blocked-cell marking that fills in the rest

- 原因：設計要狀態列寫下一步、不可能的格子點不了、自動補上的障礙物另外標示，舊頁的提示、資訊列、開關與結果卡都拿掉
- 盤面：36 格直接寫在 index.html，都是 <button>（同仙人、天書），鍵盤的 Enter、空白鍵就能標；障礙物階段是切換鈕（aria-pressed），只有可能是障礙物的格子能點，手動標的是實心、自動補上的是斜線加虛線框，名稱寫「障礙物（自動補上）」；擺法確定就進入「② 找劍・剩 11 次」，障礙物都鎖住
- 焦點：擺法確定的那一刻，焦點所在的格子跟著鎖住時，焦點移到下一格（沒有下一格就移到第一個能點的格子），只用鍵盤也玩得下去
- 拿掉：提示、剩餘點擊次數與符合盤面、重置／重做、隱藏機率與最佳策略的開關、結果卡、選格子類型的對話框、回到頂部（common.js 本來就會建一顆）；不再載入 state-history-manager.js 與 modal-manager.js；翻譯檔三語各拿掉 38 個不再用的鍵、新增 4 個
- 版面：一欄最寬 28rem，狀態列固定兩行高，格子是正方形；374px 以下格子間距 2px、359px 以下卡片內距 8px，之後格子裡的提示才放得下
- 測試：新增頁面替身 tests/helpers/hollows-page.js（作法照 cactpot-page.js）與 faux-hollows-page.test.js；design-system.test.js 的「格子都能用 Tab 鍵移動焦點」改成檢查宗長的 36 個 <button>
- 舊的 faux-hollows-probability.test.js 用的是舊方法，先刪掉，之後的任務照同樣的意圖重寫
- 這個 commit 之後，翻格階段的格子暫時點了沒反應，之後的任務補上翻開的格子

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
chore: delete StateHistoryManager now that no page loads it
e8e4623 
- 原因：宗長計算機改寫後不再載入它；仙人微彩、天書奇談在 3c-A、3c-B 就不載入了，沒有頁面用它
- 刪掉 assets/js/state-history-manager.js；README.md 的檔案樹拿掉那一行
- 檢查頁面不載入它的測試（仙人微彩、天書奇談、宗長計算機的頁面測試）留著，之後有人把那行 <script> 加回來，載入的是不存在的檔案，測試擋得住
- CLAUDE.md 的檔案數與說明在之後的文件 commit 一起改

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
feat(faux-hollows): pick what a revealed cell holds from a menu besid…
dcce3a0 
…e it and follow the sword, chest, fox order

- 原因：設計要翻開後在格子旁邊選、不可能的選項是灰的、只剩一種時直接標好，狀態列照劍、寶箱、宗長的順序寫還剩幾次
- 小選單：沿用 3c-A 的 CellPopover（2 欄，上三列開在格子下方、下三列開在上方）；選項是劍、寶箱、宗長、空，和其他格對不上的是灰的（宗長只有一隻，別格已經是宗長時也是灰的）；用鍵盤打開時焦點移到第一個能選的選項
- 只剩一種可能時點一下就標好、不開選單；翻開的格子再點是同一個選單，目前的標成已選，最後多一個「清除」
- choose()：小選單與「只剩一種」都走這裡，自己再擋一次（不是翻格階段、障礙物、清除還沒翻的格子、不是選項、就是現在的值、次數用完時還沒翻的格子、和其他格對不上的選項），直接呼叫也什麼都不變
- 次數用完時還沒翻的格子不能點、翻開的照樣能點；「完成」但還有次數時，還沒翻的格子照樣能點
- 翻開的格子：底色照類型（劍、寶箱、宗長是淡色底加同色的框，空是淡灰底），裡面是一個圖示，格子名稱寫出翻開的是什麼
- 狀態列：② 找劍 → ③ 找寶箱 → ④ 翻宗長（不一定有）→ 完成，剩的次數不夠翻完劍或寶箱就跳到下一個
- 翻譯檔三語新增 4 個鍵（menu_label、status_chest、status_fox、status_done），小選單的字拿掉「(2x3)」「✅」「🗑️」，「空」「宗長」的名稱照統一的用語
- 測試：頁面替身加 menu()、option()、pick()、itemOf()；頁面測試新增 12 個

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
feat(faux-hollows): show sword and chest odds, fox spots and the next…
d3819c2 
… cell on the board

- 原因：設計要每個還沒翻的格子寫劍、寶箱的機率，宗長只放 🦊、不寫數字，下一格框綠色
- 格子上的提示：翻格階段還沒翻的格子依序寫 ⚔️、📦 加整數百分比（帶「%」，0 不寫）與 🦊（宗長有出現的話，可能在這格；找到宗長後其他格不放），宗長的提示沒有任何數字
- 下一格：加共用的 .cell.suggested（綠框），同分的全部框起來；tools-common.css 只改這條規則上面的註解
- 格子名稱：寫出同樣的提示（例如「第 27 格：劍 75%，寶箱 13%，建議翻這格」「第 4 格：宗長有出現的話，可能在這格」），螢幕閱讀器才聽得到，三語；宗長不帶數字
- 版面：每個提示是 span.cell-hint，圖示放在 span.cell-hint-icon，格子裡只放提示；只有一個提示時圖示一行、百分比一行（⚔️100% 在 414px 以下的手機一行放不下），359px 以下提示字 11px（手機上放得下）
- 🦊 的說明改短成一句（三語）
- 測試：頁面替身加 hints()、nextCells()；頁面測試新增 8 個（含翻了好幾格之後回頭改、清掉早先的一格）；faux-hollows-probability.test.js 照原本的意圖在新頁面重寫（只剩 1 種盤面時宗長的位置不寫成 100%、找到宗長後其他格不再提示、三語重畫照樣正確）

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
feat(faux-hollows): undo any step with a toast saying what was undone…
aebe25a 
… and start the next game without losing the board

- 原因：設計要「上一步」「下一局」跟仙人一樣，按錯了救得回來，「重置遊戲」不再清空復原紀錄
- 上一步：每個動作（標、拿掉、翻開、改、清除、下一局）改狀態之前先存一份 { state, action }，退回最後一份並用 toast 寫出退回了什麼（「已退回：第 26 格標成劍」「已退回：清除第 26 格」「已退回：下一局」，三語）
- 跨過階段：自動補上的障礙物不存進狀態，退回進入翻格的那一步時跟著消失、障礙物又能點；小選單先關掉，aria-expanded 由 render() 拿掉
- 下一局：清空盤面、不跳 toast，按「上一步」整盤救回來；盤面上沒有標記時什麼都不做，「上一步」不會多一步什麼都沒改的
- 兩顆按鈕用 aria-disabled（不用 disabled），焦點留在按鈕上；click 照樣會送出，所以 undo()、nextGame() 自己擋
- 版面：盤面卡片裡兩顆按鈕並排，不能按的外觀照仙人的 .cactpot-actions 四條規則改名；翻譯檔三語加 faux_hollows_next 與三個 faux_hollows_undone_*，faux_hollows_undo 的中文改成「上一步」
- 測試：頁面測試新增 10 個（含直接呼叫 undo()、nextGame() 時函式自己先關掉小選單），機率測試新增 1 個（上一步退回找到宗長，🦊 回到原本的 4 格）

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@hydai @claude
docs: record the Faux Hollows redesign in the changelog, README and C…
16b36b5 
…LAUDE.md

- 原因：專案規則要每個 PR 更新 changelog、README、CLAUDE.md；工具目錄的 README 還在描述舊畫面（三段式顯示、隱藏機率）
- changelog.html：新增 v2.26.0（2026年10月27日）：狀態列與目標順序、下一格框綠色、格子旁的小選單、障礙物自動補上、格子上的機率與 🦊、上一步與下一局、鍵盤操作，拿掉隱藏機率、最佳策略開關、分數卡與說明段落，以及兩個修正（盤面一片空白、最佳策略同時亮好幾格）
- README.md：重寫宗長計算機的段落；cell-popover.js 的註解加上宗長計算機；tests 的份數 50 改 52，輔助模組加 hollows-page.js
- CLAUDE.md：JavaScript 檔案數 139 改 142（工具腳本 50、共用工具 7、測試 52、輔助模組 10）；測試說明加宗長的兩份新測試、照新畫面改寫的機率測試與頁面替身 hollows-page.js（輔助模組九個改十個）；猜謎方格工具的格子都是 <button>；CellPopover 與 .cell.suggested 的使用者加上宗長計算機；Current Tools 第 5 項照新畫面改寫
- tools/faux-hollows-foxes/README.md：照新畫面改寫（功能、使用說明、hollows-solver.js 的規則摘要、檔案結構、開發筆記），拿掉三段式顯示、隱藏機率等舊內容

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 26, 2026 •
edited
Loading

Copy link
Copy Markdown

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-26T21:19:43.355975Z 16b36b5 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

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

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  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 16b36b5 Oct 26 2026, 09:17 PM

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@hydai