toshiocn/HexTrails
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Paper Routes and package five design systems

Browse Source 
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links.

Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links.

Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
This commit is contained in:
cabinw
2026-09-13 13:24:34 +08:00
parent e32a1616be
commit 10cf93a324
52 changed files with 3365 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Design.md
+28 -10
View File
@@ -2,7 +2,9 @@
版本：2.0 · 2026-09-08 · 适用：网页、手机触摸界面与 Cocos 移植。
本文件规定设计角色和使用方式；`src/design-tokens.js` 是颜色数值的唯一来源。修改数值后运行 `npm run design`，同步生成 CSS、JSON、面板 PNG、对比度报告和可视化手册 `Design.html`。HTML 为单文件离线版本，包含原始图片、色值复制、组件示例、弹窗动效与本文全文。新界面不得另写一套 HEX 或用滤镜临时拼配色。
本文件保留基础方案与通用组件的设计规范。五套方案的 Agent 入口为 [design/README.md](design/README.md)，各套独立规则见 `design/directions/<id>/design.md`；本文的基础哑光造型和配色要求不覆盖其他四套的独立画法。
`src/design-tokens.js` 是基础语义色来源，`src/art-directions.js` 定义各套独立配色。修改数值后运行 `npm run design`，同步生成 CSS、JSON、面板 PNG、对比度报告、设计包和可视化手册 `Design.html`。HTML 为单文件离线版本，包含原始图片、色值复制、组件示例、弹窗动效与本文全文。新界面应复用所选方案的颜色源，不另写一份重复色库。
## 1. 设计方向
@@ -107,11 +109,11 @@
旋转操作为放大的生成箭头，下方分别写“左转”“右转”，不加矩形底板。文字用主文字色；白色箭头允许轻微蓝灰轮廓阴影增强边缘识别，不能改写原图轮廓。它们须保留至少 44×44 的触摸区域。
撤销、重来、提示使用独立彩色底座：原版为蓝、紫、金；高彩为青、荧粉、亮黄；玩具为蓝、红、黄圆角积木键；动物为绿、棕、麦黄徽章。四套方案的底部道具均采用纯色平面，不使用投影、内阴影、立体底边或渐变高光；图标和未来次数／广告角标同样不加阴影。普通底座 64px，大屏 68px，短屏 56px；图标 32px、标签 13px。整体点击区至少 80×96px，短屏 80×84px。禁用时确实停止操作，道具透明度为 50%；不得只有颜色变化却仍可点击。
撤销、重来、提示使用独立彩色底座：原版为蓝、紫、金；高彩为青、荧粉、亮黄；玩具为蓝、红、黄圆角积木键；动物为绿、棕、麦黄徽章；轻线纸境为雾蓝、陶橙、赭金平面底座。五套方案的底部道具均采用纯色平面，不使用投影、内阴影、立体底边或渐变高光；图标和未来次数／广告角标同样不加阴影。普通底座 64px，大屏 68px，短屏 56px；图标 32px、标签 13px。整体点击区至少 80×96px，短屏 80×84px。禁用时确实停止操作，道具透明度为 50%；不得只有颜色变化却仍可点击。
右上角预留 27px 次数角标或 42px 广告角标，距底座上缘 -5px；广告使用播放符号 + AD，不能只有模糊的加号。两种角标互斥，不遮挡图标与标签。设计稿仅展示“撤销 3 次”和“广告获取提示”的外观，不接入库存、扣次数、广告播放或奖励。实际次数、定价与获取方式待产品确定。
统一审核页的“道具设计”区域、四套独立设计稿与离线手册均包含普通态和未来角标示例，允许在同一页面切换比较。
统一审核页的“道具设计”区域、五套独立设计稿与离线手册均包含普通态和未来角标示例，允许在同一页面切换比较。
### 棋盘和轨道
@@ -194,13 +196,29 @@ Cocos 读取同一 JSON/JS token 和 PNG。`CandyUiSkin` 使用纯色 Sprite、
## 多设计方案审核
新增四套并列设计（现有方案 + 三套实验方案），每套均包含轻松、进阶、烧脑、挑战、每周挑战五种主题。设计切换同时作用于棋子造型、轨道材质与主题配色；共享同一弯曲关卡与动画逻辑。
Agent 接入先读 [design/README.md](design/README.md)，共用规则见 [design/shared.md](design/shared.md)。每套独立目录包含人工维护的 design.md、生成配色 tokens.json 和预览 index.html；五套方案不能只用本手册的基础色值描述。
| 设计 | 视觉特征 | 独立设计稿 |
| --- | --- | --- |
| 柔和原色 | 哑光色块、蓝灰轨道 | [柔和原色](design/directions/calm.html) |
| 高彩游乐场 | 高饱和撞色、粗轮廓、贴纸硬阴影 | [高彩游乐场](design/directions/vivid.html) |
| 积木轨道屋 | 塑胶高光、分层厚度、圆角积木 | [积木轨道屋](design/directions/toy.html) |
| 动物弯弯镇 | 猫、熊、兔、蛙造型与独立箭头 | [动物弯弯镇](design/directions/animals.html) |
共有五套并列设计（现有方案 + 三套实验方案 + 玩法实验页衍生方案），每套均包含轻松、进阶、烧脑、挑战、每周挑战五种主题。设计切换同时作用于棋子造型、轨道材质与主题配色；共享同一弯曲关卡与动画逻辑。
| 编号 | 设计 | 视觉特征 | 独立设计稿 |
| --- | --- | --- | --- |
| 01 | 柔和原色 | 哑光色块、蓝灰轨道 | [柔和原色](design/directions/calm/index.html) |
| 02 | 高彩游乐场 | 高饱和撞色、粗轮廓、贴纸硬阴影 | [高彩游乐场](design/directions/vivid/index.html) |
| 03 | 积木轨道屋 | 塑胶高光、分层厚度、圆角积木 | [积木轨道屋](design/directions/toy/index.html) |
| 04 | 动物弯弯镇 | 猫、熊、兔、蛙造型与独立箭头 | [动物弯弯镇](design/directions/animals/index.html) |
| 05 | 轻线纸境 | 浅色细轨道、微小格缝、细白边六角与线条箭头 | [轻线纸境](design/directions/paper/index.html) |
在 [设计总览](design/index.html) 并排比较各套画法、切换统一主题，完整编号与 25 种主题见 [方案目录](design/README.md)。最新是第 05 套「轻线纸境」，五套方案均可并列保留。
在 [统一审核页](design-showcase.html) 切换设计及主题，可同时保留多套、逐套记录意见并导出 JSON。意见保存在当前浏览器。设计稿由 `scripts/build-art-directions.mjs` 生成，颜色及造型规则来自 `src/art-directions.js`、`src/token-art.js`。
### 轻线纸境 · 实验页画法提取
来源为 [玩法变种实验页](labs/variants/index.html) 的棋盘绘制，不改动实验页的关卡或玩法。独立设计稿中以「双色试航」的初始布局作对照，保留陶橙／雾蓝棋子、细白边与线条箭头；统一审核页使用与其他方案相同的弯曲轨道测试关，供多选比较。
- 轻松主题沿用背景 `#EAF0F3`、格面 `#FAFBF7`、分格 `#D3DFE3`、轨道 `#B2C4CE`，核心棋子为陶橙 `#D66C4D` 与雾蓝 `#477FC0`。
- 格面半径为格半径的 0.97，棋子为 0.88；格线宽度 0.025、轨道线宽 0.055、棋子白边 0.035、箭头线宽 0.09，均相对于格半径。极小缩略图的轨道最小 0.7px、格线最小 0.4px。
- 棋子为正六角纯色面，细白边；箭头由一根直线和开放的箭头头部组成，圆头圆接缝。移动时同样使用此画法，不切回原版粗实心箭头。
- 五种主题为雾蓝信纸、暖砂手札、鼠尾草页、石墨练习、夜航图纸；保留 12 色库与每关 4／7／9／12 色对照，所有白色棋子箭头对比度至少 3:1。
- 浅色细轨道忠实保留用户认可的参考画面，轨道本身低于原版 3:1 目标；这是一份待视觉审核的设计方案，不宣称通过轨道可访问性对比度标准。页面文字与棋子方向仍分别检查可读性。
- 延续当前居中棋盘、大尺寸扁平道具、通知位置与动画时序；线条和六角形可通过现有跨引擎绘制命令实现。原生引擎尚未实机验收。