# Background and Motivation

- 使用者希望針對 `src/pages/GamePage/LoadingView/index.jsx` 中 `VIDEOS` 與 `MOBILE_VIDEOS` 的圖片資源進行預先加載，降低進入遊戲或章節切換時的等待感。
- 目前僅確認需求方向為「可否預載」，尚未指定技術細節（例如使用 `Image` 物件、`<link rel="preload">` 或分批策略），需先提出最小可行且低風險方案。

# Key Challenges and Analysis

- 這些資源為 `.webp` 靜態檔，適合用前端 `Image` 物件在進入畫面時背景拉取。
- 行動版與桌機版清單分開，應避免同時預載兩份，否則會造成不必要流量與記憶體開銷。
- 預載流程不應阻塞既有 `LoadingView` 行為；應採「背景預載 + 進度可觀察（至少 console）」方式。
- 若未來要更精準控制首屏資源，可再擴充為「先載關鍵圖，再載其餘圖」的分批策略；此階段先以一次性預載為 MVP。

# High-level Task Breakdown

1. 盤點現況與插入點  
   - 作法：檢查 `LoadingView` 目前生命週期/副作用，找到安全掛載點（通常是 `useEffect`）。  
   - 成功標準：確認不破壞現有初始化流程，且可在元件載入時啟動預載。

2. 實作圖片預先加載工具函式（最小可行）  
   - 作法：新增 `preloadImages(urls)`，透過 `new Image()` 註冊 `onload/onerror` 並回傳可追蹤完成狀態。  
   - 成功標準：可對任意圖片 URL 陣列觸發下載，失敗不會中斷整體流程。

3. 依裝置選擇對應清單並啟動預載  
   - 作法：沿用現有裝置判斷邏輯，只預載 `VIDEOS` 或 `MOBILE_VIDEOS` 其中一份。  
   - 成功標準：避免重複預載雙份清單，並在載入期開始後即觸發。

4. 加入可驗證訊號與基本檢查  
   - 作法：加入開發期可讀訊息（例如預載開始/完成數量），並做一次 lint 檢查。  
   - 成功標準：可在瀏覽器/終端看到預載是否執行，且未引入新 lint 錯誤。

5. 交付驗收  
   - 作法：提供手動驗證步驟（Network 面板觀察圖片請求、二次進入速度體感）。  
   - 成功標準：使用者可依步驟確認預載生效，再決定是否進入下一輪優化（分批、優先序、節流）。

# Project Status Board

- [x] 建立 Planner 初始分析
- [x] 等待使用者確認規劃內容
- [x] Executor 階段 Task 1：盤點現況與插入點
- [x] Executor 階段 Task 2：實作 `preloadImages(urls)`
- [x] Executor 階段 Task 3：依裝置啟動單一路徑預載
- [x] Executor 階段 Task 4：加入可驗證訊號與 lint 檢查
- [ ] 使用者手動驗收與回饋
- [x] Executor 單步任務：調整 `LoadResult` 進度條速度（不變更流程）
- [ ] 使用者手動驗收 `LoadResult` 進度條體感速度
- [x] Executor 單步任務：PR 就緒後立即將進度條補滿並快速切頁
- [ ] 使用者手動驗收「PR 就緒後快速切頁」體感

# Current Status / Progress Tracking

- 目前模式：Executor
- 狀態：已完成 `LoadingView` 圖片預載實作，包含預載工具函式、依裝置選擇清單、進度累加與開發期 log，且 lint 檢查通過。
- 主要調整檔案：`src/pages/GamePage/LoadingView/index.jsx`
- 狀態更新（本輪）：已在 `src/pages/GamePage/LoadResult/index.jsx` 提升進度條更新速度（`tick` 從 `100ms` 調整為 `80ms`、載入中每次增量從 `0.5` 調整為 `0.8`、結果就緒後每次增量從 `2` 調整為 `3`），並保留原本 60% 等待閘點與 100% 切頁條件。
- 狀態更新（本輪追加）：進一步將 `LoadResult` 調整為「PR 就緒後直接把進度設為 100%」，並將 `tick` 加快為 `60ms`、就緒前步幅提高為 `1.2`，以縮短等待與切頁時間。

# Executor's Feedback or Assistance Requests

- 已依指示一次執行完畢，待使用者手動驗收是否符合實際載入體感與 Network 行為預期。
- 本輪已完成「加快進度條但維持既有邏輯」的單一步驟，請協助手動確認：1) 是否符合你期待的速度感，2) 是否仍在結果完成後正常切到 `GAME_STATES.RESULT`。
- 已完成「PR 值取得後快速進下一步」的單一步驟，請手動確認切頁是否符合你要的速度（應接近立即進入結果頁）。

# Lessons

- 在此任務中，`VIDEOS`/`MOBILE_VIDEOS` 皆為圖片路徑（副檔名為 `.webp`），雖命名為 `VIDEOS`，但實作策略應以圖片預載處理。
- 若需保留載入進度條，預載流程需在每張圖完成（成功或失敗）時都累加進度，避免單一資源失敗造成百分比卡住。
- 若只需「加快速度」且不改流程，優先調整進度條 `setInterval` 週期與每次遞增步幅，並保留既有閘點（如 60% 等待結果）可降低回歸風險。
- 若需求明確為「資料就緒後立即前進」，可在結果就緒分支直接 `setPercentage(100)`，下一個 tick 即可觸發切頁條件。
