import { mkdir, writeFile } from 'node:fs/promises'; import { itemStudy, itemIcon } from '../src/item-study.js'; import { ICON_ATLAS } from '../src/ui-skin.js'; import { ART_DIRECTIONS } from '../src/art-directions.js'; const out=new URL('../design/directions/',import.meta.url);await mkdir(out,{recursive:true}); for(const d of ART_DIRECTIONS){ const html=`${d.name} · HEX TRAILS 设计稿
${d.en}

${d.name}

${d.description}

01 / FIVE WORLDS

同一风格，五种主题

统一的弯曲轨道关卡 · 用实际渲染检查识别度

${d.themes.map(t=>`
${t.label}

${t.name}

${t.palette.map(i=>``).join('')}
${t.background}
`).join('')}
02 / DESIGN LANGUAGE

造型与交互规则

    ${d.principles.map(p=>`
  • ${p}
    • `).join('')}
  • 所有棋子保留独立方向箭头，颜色和表情不改变规则。
  • 离场与碰撞共用游戏动画，切换设计保持路线与时长一致。

这是一套可与其他方案同时保留的候选设计。到审核页勾选保留、记录修改意见；不会替换你的其他选择。

审核与体验这套设计 ↗
03 / COMPONENT STUDY

控件与奖励

${itemStudy(name=>itemIcon(name,'../../'+ICON_ATLAS))}
★ ★ ★

漂亮，全部过关！

每一次转弯，都找到出口。

继续旅程 →

底部道具独立于顶部导航。棋盘在通知与旋转区之间垂直居中；可操作棋盘在设计审核页。

`; await writeFile(new URL(`${d.id}.html`,out),html); await writeFile(new URL(`${d.id}.md`,out),`# ${d.name}\n\n${d.description}\n\n## 设计规则\n\n${d.principles.map(p=>`- ${p}`).join('\n')}\n\n## 五种主题\n\n| 难度 | 名称 | 环境色 |\n| --- | --- | --- |\n${d.themes.map(t=>`| ${t.label} | ${t.name} | ${t.background} |`).join('\n')}\n\n## 游戏道具与布局\n\n- 撤销、重来、提示使用独立彩色底座，64–68px，图标 32px，标签 13px。顶部导航保持紧凑。道具使用纯色平面，不使用阴影、立体底边或渐变高光。\n- 右上角预留次数或“▶ AD”角标。设计稿展示“撤销 3 次”和“广告获取提示”，仅为样式，不启用真实库存或广告逻辑。\n- 棋盘在通知区与独立旋转区之间垂直居中。旋转区和道具区占据真实布局行，不覆盖棋盘。\n\n此方案使用独立的棋子造型、轨道材质和控件样式，共用现有弯曲轨道玩法。审核页支持同时保留多套方案。\n`); } console.log('Art direction sheets built: 4 designs × 5 themes.');