import { mkdir, readFile, 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';
import { buildDesignCatalog } from './design-catalog.mjs';
import { buildDesignPackages } from './design-packages.mjs';
const out=new URL('../design/directions/',import.meta.url);await mkdir(out,{recursive:true});
const referenceLevel=JSON.parse(await readFile(new URL('../labs/variants/levels.json',import.meta.url),'utf8')).find(l=>l.id==='color-1');
function referenceStudy(d){
if(!d.source)return '';
return `FROM VARIANTS / 画法提取线条轻一点,
棋子就清楚一点。
以实验页「双色试航」的初始棋盘作对照:暖白格面、浅蓝灰轨道、陶橙与雾蓝棋子。边界只有一道细白线,箭头用圆头线条画出。
- 环境 / 棋盘
- #EAF0F3 / #FAFBF7
- 轨道 / 分格
- #B2C4CE / #D3DFE3
- 轨道线宽
- 格半径 × 0.055
- 棋子半径 / 白边
- 格半径 × 0.88 / 0.035
- 箭头
- 白色线条 · 圆头 · 无阴影
下方五种主题沿用这套棋盘、轨道与箭头画法。
查看原实验页 ↗ `;
}
for(const d of ART_DIRECTIONS){
const html=`
${d.name} · HEX TRAILS 设计稿${d.en}${d.name}
${d.description}
${referenceStudy(d)}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))}
★ ★ ★
漂亮,全部过关!
每一次转弯,都找到出口。
继续旅程 →底部道具独立于顶部导航。棋盘在通知与旋转区之间垂直居中;可操作棋盘在设计审核页。
`;
const packageOut=new URL(`${d.id}/`,out);
await mkdir(packageOut,{recursive:true});
// design.md is authored source; generation must never overwrite it.
await readFile(new URL('design.md',packageOut),'utf8');
await writeFile(new URL('index.html',packageOut),html);
await writeFile(new URL(`${d.id}.html`,out),`${d.name} · 设计稿已迁移设计稿已整理到独立目录:${d.code} · ${d.name}
`);
await writeFile(new URL(`${d.id}.md`,out),`# ${d.code} · ${d.name}\n\n本文件为旧入口。完整、人工维护的 Agent 规范已迁移到 [${d.id}/design.md](${d.id}/design.md)。\n\n[设计稿](${d.id}/index.html) · [配色数据](${d.id}/tokens.json) · [Agent 接入说明](../README.md)\n`);
}
await buildDesignCatalog(ART_DIRECTIONS);
await buildDesignPackages(ART_DIRECTIONS);
console.log(`Art direction catalog and sheets built: ${ART_DIRECTIONS.length} designs × 5 themes.`);