feat: expand campaign and refine puzzle visuals and controls

Design.md

@@ -1,12 +1,12 @@
 # HEX TRAILS 设计规范
 
-版本：1.0 · 2026-09-08 · 适用：网页、手机触摸界面与 Cocos 移植。
+版本：2.0 · 2026-09-08 · 适用：网页、手机触摸界面与 Cocos 移植。
 
 本文件规定设计角色和使用方式；`src/design-tokens.js` 是颜色数值的唯一来源。修改数值后运行 `npm run design`，同步生成 CSS、JSON、面板 PNG、对比度报告和可视化手册 `Design.html`。HTML 为单文件离线版本，包含原始图片、色值复制、组件示例、弹窗动效与本文全文。新界面不得另写一套 HEX 或用滤镜临时拼配色。
 
 ## 1. 设计方向
 
-**清爽、明快、易读的哑光解谜游戏。** 环境采用冷蓝灰，棋盘采用暖白，主操作采用紫色。鲜艳的蓝、粉、黄、紫主要留给棋子；高饱和度不平均分配给每一个按钮。
+**清爽、明快、易读的哑光解谜游戏。** 环境使用按难度或活动组织的低饱和主题色，棋盘采用暖白，主操作采用紫色。全局建立 12 色棋子库，单关默认使用其中 7 色，支持 4 / 7 / 9 / 12 色对照；高饱和度不平均分配给每一个按钮。
 
 - 棋子是第一视觉焦点，Level 和步数是第二层，工具是第三层。
 - 纯色背景，无纹理、光晕、装饰圆盘。底板要看得出六边形分格。
@@ -20,7 +20,7 @@
 
 采用 W3C 的对比度方法作为验收约束：普通文字至少 4.5:1，大号文字和必要的非文字视觉标识至少 3:1。颜色之外还要用文字、图标、位移或选中标记表达状态。[文字对比度](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) · [非文字对比度](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
 
-这些来源提供方法和约束；下面的 HEX、游戏形态、动效时长是本项目的设计选择，并非 Material 官方游戏模板。当前为固定浅色主题，不随系统壁纸自动换色。
+这些来源提供方法和约束；下面的 HEX、游戏形态、动效时长是本项目的设计选择，并非 Material 官方游戏模板。当前有四套主线主题与一套每周挑战美术主题，不随系统壁纸自动换色。主题只改变美术表现，不改变难度判定。
 
 ## 3. 颜色体系
 
@@ -28,11 +28,11 @@
 
 | Token | 色值 | 用途与配对 |
 |---|---|---|
-| `background` | `#A8BECF` | 页面背景，搭配主文字或辅助文字 |
+| `background` | `#A8BECF` | 基础回退色；游戏场景使用下表主题背景与场景文字色 |
 | `board` | `#F2EEE5` | 棋盘底格，暖白区分冷色背景 |
-| `boardGrid` | `#7C8B94` | 六边形边界，细线且清楚可见 |
-| `track` | `#6D808B` | 轨道中心线 |
-| `trackHalo` | `#DFE3E2` | 轨道浅色外缘，不能盖断接头 |
+| `boardGrid` | `#89867D` | 六边形边界，细线且清楚可见 |
+| `track` | `#435F78` | 深蓝轨道中心线，线宽 `max(2.5px, 格子半径 × 0.10)` |
+| `trackHalo` | `#F2EEE5` | 轨道浅色外缘，不能盖断接头 |
 | `surface` | `#F7F6F2` | 弹窗与编辑面板 |
 | `textPrimary` | `#273B50` | Level、步数、标题、主要标签 |
 | `textSecondary` | `#314A5F` | 说明与次要标签；用字号和字重区分层级 |
@@ -60,7 +60,7 @@
 
 ### 3.3 棋子色与图片事实
 
-棋子颜色不代表功能、品质或阵营。现有四枚棋子来自已接受的图片；以下是采样区域中心的代表值，图片像素允许存在小幅变化：
+棋子颜色不代表功能、品质或阵营。原有四枚棋子来自已接受的图片；以下是采样区域中心的代表值，图片像素允许存在小幅变化：
 
 | Token | 代表色 | 方向箭头 |
 |---|---|---|
@@ -69,9 +69,29 @@
 | `tileYellow` | `#FDBC28` | 深蓝灰 `textPrimary` |
 | `tilePurple` | `#874FFD` | 白色 |
 
-黄色上的白箭头对比不足，因此使用深色箭头。四种棋子均可通过方向箭头、位置和运动判断，不要求辨认颜色才能通关。未经用户确认，不重新生成或调色替换已接受的棋子。
+黄色上的白箭头对比不足，因此使用深色箭头。所有棋子均可通过方向箭头、位置和运动判断，不要求辨认颜色才能通关。未经用户确认，不重新生成或调色替换已接受的棋子。
 
-### 3.4 禁止的搭配
+### 3.4 场景主题与 12 色库
+
+互动展示：在本地开发服务打开 `/design-showcase.html`，可切换主题、点击真实棋盘、播放离场效果与慢速观察。展示中的五套主题使用同一关，便于比较色彩。
+
+| 难度 / 场景 | 主题 | 环境色 | 棋子搭配 |
+|---|---|---|---|
+| 轻松 0–29 | 薄荷浅湾 | `#C5E4DF` | 晴空蓝、湖水青、日光黄 |
+| 进阶 30–49 | 杏色午后 | `#F1D7B8` | 珊瑚橙、鸢尾蓝、湖水青、蜜桃杏 |
+| 烧脑 50–69 | 鸢尾花园 | `#D8D0EB` | 葡萄紫、嫩芽绿、玫瑰红、冰川青 |
+| 挑战 70–100 | 玫瑰暮色 | `#E7C3CE` | 玫瑰红、鸢尾蓝、日光黄、兰花紫 |
+| 每周挑战美术预览 | 午夜极光 | `#293956` | 冰川青、兰花紫、日光黄、莓果粉 |
+
+四套浅色背景使用 `textPrimary` 场景文字；午夜背景使用 `surface` 色文字。弹窗内部继续使用暖白底和深色文字，避免场景文字色污染组件。每周挑战目前提供独立美术主题和预览入口，尚未接入周赛、排行榜或活动日历。
+
+新增八色：湖水青 `#008B83`、珊瑚橙 `#EF704F`、嫩芽绿 `#91C95B`、鸢尾蓝 `#5267CF`、玫瑰红 `#C83F66`、蜜桃杏 `#F5AA83`、冰川青 `#58C9D5`、兰花紫 `#AE64C7`。前四色保留已接受的图片采样；新增色使用同一圆角六边形轮廓进行纯色绘制，没有改动原始图片。
+
+`PIGMENTS` 与 `LEVEL_THEMES` 在 `src/design-tokens.js` 中维护，并导出到 `design/tokens.json`。箭头按实际色值选择白色或深蓝灰，最低对比度 3:1。主线默认将主题色组扩展为 7 色，URL 参数 `colors` 支持 4、7、9、12；主题表中的配色作为起始色，优先补足差异较大的色相。主线按初始棋子顺序循环分配主题色组，因此移走棋子、旋转和撤销不会让剩余棋子变色。编辑器开放完整 12 色库，自由创作不强制收敛。
+
+颜色不代表功能、品质或阵营；难度也必须保留文字，不只靠背景判断。主题切换只发生在换关或主动预览时，不随剩余步数改变。背景保持纯色，用色彩变化建立旅程感。
+
+### 3.5 禁止的搭配
 
 - 白色小字放在黄色、浅蓝灰或浅绿色按钮上。
 - 使用同样的浅灰同时承担背景、底板和轨道。
@@ -83,7 +103,7 @@
 
 ### 游戏主界面
 
-顶部仅显示居中的 Level 与其下方的剩余步数。左侧选关，右侧设置。没有 Logo、关卡副标题、难度、待离场数量、角度读数或底部导航。
+游戏顶部恢复居中关卡计数，左侧选关、右侧设置；剩余步数位于其下方，不显示主题说明。棋盘视口占据顶部状态与底部紧凑操作栏之间的全部空间，不再限制为正方形。底部仅排列撤销、重来、提示；左右转恢复大箭头，悬浮于棋盘下部两侧，不占据额外布局高度。缩放按钮与常驻手势说明不占用棋盘空间；保留双指缩放、放大后拖动及桌面组合键滚轮。左侧选关，右侧设置。没有 Logo、关卡副标题、难度、待离场数量、角度读数或底部导航。
 
 旋转操作为放大的生成箭头，下方分别写“左转”“右转”，不加矩形底板。文字用主文字色；白色箭头允许轻微蓝灰轮廓阴影增强边缘识别，不能改写原图轮廓。它们须保留至少 44×44 的触摸区域。
 
@@ -91,7 +111,9 @@
 
 ### 棋盘和轨道
 
-先画全部底格，再画分格线，再统一画轨道外缘与中心线，最后画棋子。相邻格子连接端口必须完全重合。内部不留透出背景的缝；外边缘需为线帽预留空间。分格线宽取 `max(1.25px, 格子半径 × 0.038)`。
+大棋盘测试支持边长 6（轴向半径 5，91 格）与边长 7（半径 6，127 格）。网页棋盘支持以双指中点为锚的 1–4 倍缩放，放大后单指拖动；双指手势及其余指抬起不触发棋子点击。100% 视图保留原有边缘拖动旋转，放大后用左右按钮旋转。桌面提供 Ctrl/Command + 滚轮缩放；收拢双指或缩小回 100% 恢复全盘视图。缩放与绘制、点击共用同一坐标变换，不改变规则坐标。
+
+先画全部底格，再画分格线，再统一画轨道外缘与中心线，最后画棋子。相邻格子连接端口必须完全重合。内部不留透出背景的缝；外边缘需为线帽预留空间。分格线宽取 `max(1px, 格子半径 × 0.024)`。
 
 棋子保持微小圆角。所有游戏运动、碰撞和绘制使用同一坐标体系。图片只能在原图不透明、无杂点的区域采样；不得带入棋盘格底纹或透明噪点。
 
@@ -137,10 +159,13 @@
 
 ## 7. 动效、音效与反馈
 
+- 快速连点：棋子运动和转盘动画期间继续接收点击，待执行棋子以紫色描边反馈；按顺序重新判定路线，不重复记录同一棋子。碰撞、重来、换关、进入编辑器或打开弹窗时取消待执行点击。动画仍顺序播放，避免多个运动棋子产生碰撞歧义。
 - 按压：150ms，缩放到 94%；不移动命中区域。
 - 弹窗：420ms，从上方 60px 和 96% 缩放进入；遮罩约 250ms。
 - 星星：分别延迟 300/490/680ms 出现，每枚动画 400ms。
-- 碰撞：总长 1250ms，先接近，再接触停顿并让阻挡棋子轻震，最后原路弹回；不改变模型中的位置。
+- 离场：总时长随路径长度变化，按实际轨道长度以每单位 60ms 滑行，滑行段限制为 140–800ms，出口收束固定为 180ms。边缘棋子约 320ms 完成离场；从 3 格路线起平滑增加滑行时间，5 格及以上恢复初版总时长（550ms + 每格 85ms，最长 1700ms），新增时间全部用于滑行，出口收束仍为 180ms。不再给短路线添加固定等待。滑行与出口位移使用平滑 S 曲线（smoothstep），起止速度为零，中段流畅加速；缩小同样使用 S 曲线，避免末段突然消失。碎片采用快速展开、缓慢停下的 ease-out 曲线。棋子向外推进约 0.48 个格子半径，缩小后留下短尾迹与 6 枚同色六角碎片；效果结束后再显示结果。不得把消散阶段放在画布外，不引入额外彩虹色。减少动态效果时取消尾迹与碎片，仅保留短路线过渡与成功状态文字。
+- 旋转：240ms，快速到位，棋子保持固定。
+- 碰撞：总长 650ms，先接近，再接触停顿并让阻挡棋子轻震，最后原路弹回；不改变模型中的位置。
 - 音效：首次手势后启动，点击、旋转、离场、碰撞和通关各有短音；设置里可关闭并保存偏好。
 - `prefers-reduced-motion` 下取消非必要位移、缩放和震动，仍保留状态文字。
 - 手机棋盘禁用 WebKit tap highlight、选中文字和长按菜单，避免整块矩形高亮。
@@ -157,7 +182,7 @@
 2. 修改 `src/design-tokens.js`，运行 `npm run design`。
 3. 检查自动生成的 PNG/CSS/JSON 和对比度报告。
 4. 运行 `npm test`、`npm run build`。
-5. 检查 390×844 手机布局，以及较矮屏幕；检查主界面、选关、设置、通关/失败和碰撞状态。
+5. 对五套背景逐一检查场景文字与箭头，并检查离场、旋转和撤销后颜色稳定。检查 390×844 手机布局，以及较矮屏幕；检查主界面、选关、设置、通关/失败和碰撞状态。
 6. 验证弹窗不能穿透操作、图标居中、轨道接缝不断裂。
 7. 如需替换已接受的图片，明确告知用户素材来源和变化，再更新本表。