12 lines
4.3 KiB
JavaScript
12 lines
4.3 KiB
JavaScript
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=`<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>${d.name} · HEX TRAILS 设计稿</title><link rel="stylesheet" href="../showcase.css"><link rel="stylesheet" href="../art-directions.css"><link rel="stylesheet" href="../game-tools.css"></head><body class="sheet-page" data-design="${d.id}" style="--paper:${d.paper};--accent:${d.accent};--bg:${d.themes[0].background}"><main class="sheet-main"><nav class="sheet-nav"><a href="../../design-showcase.html?design=${d.id}">← 回到设计审核</a><span>HEX TRAILS / ART DIRECTION ${d.code}</span></nav><header class="sheet-hero"><div><span class="eyebrow">${d.en}</span><h1>${d.name}</h1><p>${d.description}</p></div><canvas id="sheet-tokens" class="sheet-token-row" width="720" height="270" aria-label="${d.name}棋子造型设计"></canvas></header><section><div class="section-heading"><div><span class="eyebrow">01 / FIVE WORLDS</span><h2>同一风格，五种主题</h2></div><p>统一的弯曲轨道关卡 · 用实际渲染检查识别度</p></div><div class="sheet-themes">${d.themes.map(t=>`<article class="sheet-theme" style="--bg:${t.background};--ink:${t.ink}"><small>${t.label}</small><h3>${t.name}</h3><canvas data-sheet-theme="${t.id}" width="480" height="520" aria-label="${t.label}主题的弯曲棋盘"></canvas><div class="sheet-swatches">${t.palette.map(i=>`<i style="background:${d.pigments[i].color}" title="${d.pigments[i].color}"></i>`).join('')}</div><small>${t.background}</small></article>`).join('')}</div></section><section class="sheet-components"><div class="sheet-panel"><span class="eyebrow">02 / DESIGN LANGUAGE</span><h2>造型与交互规则</h2><ul>${d.principles.map(p=>`<li>${p}</li>`).join('')}<li>所有棋子保留独立方向箭头，颜色和表情不改变规则。</li><li>离场与碰撞共用游戏动画，切换设计保持路线与时长一致。</li></ul><p class="sheet-caption">这是一套可与其他方案同时保留的候选设计。到审核页勾选保留、记录修改意见；不会替换你的其他选择。</p><a class="sheet-link" href="../../design-showcase.html?design=${d.id}">审核与体验这套设计 ↗</a></div><div class="sheet-panel"><span class="eyebrow">03 / COMPONENT STUDY</span><h2>控件与奖励</h2><div class="component-preview">${itemStudy(name=>itemIcon(name,'../../'+ICON_ATLAS))}<div class="sample-modal"><div class="stars" aria-label="三颗金色星星">★ ★ ★</div><h3>漂亮，全部过关！</h3><p>每一次转弯，都找到出口。</p><a class="sheet-link" href="../../design-showcase.html?design=${d.id}">继续旅程 →</a></div></div><p class="sheet-caption">底部道具独立于顶部导航。棋盘在通知与旋转区之间垂直居中；可操作棋盘在设计审核页。</p></div></section></main><script type="module" src="../../src/direction-sheet.js"></script></body></html>`;
|
||
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.');
|