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

feat: add hex trail puzzle, level editor, and visual design guide

Browse Source
This commit is contained in:
cabinw
2026-09-08 21:45:44 +08:00
commit ef2724bb2e
63 changed files with 15036 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/components.css
+51
View File
@@ -0,0 +1,51 @@
/* Semantic role bindings. Layout remains in style.css; colors come from tokens.css. */
:root{color:var(--color-text-primary)}
body,.game-shell{background:var(--color-background)!important;color:var(--color-text-primary)}
button,input,select,dialog{color:var(--color-text-primary)}
.level-ribbon,.moves-bubble strong,h1,h2,h3,.win-overlay h3,.hud-pill strong{color:var(--color-text-primary)}
.moves-bubble>span,.level-heading h1,.board-instruction,.rotation-caption,.rotate-button,
.board-tools>button,.field,.section-label,.metric-row,.muted,.eyebrow,.editor-footnote,
.editor-footnote a,.editor-footnote a:visited,.selection-info,.editor-analysis p,.editor-analysis small,
.editor-analysis>div>span,.editor-footnote,.dialog-note,.win-overlay p,dialog p,dialog li,
.editor-panel .muted,.level-btn small,.tool-palette button,.directions button,.editor-rotation button,
.editor-actions button,.editor-board-tools button,.text-button,.return-editor,.hud-pill small,
.hud-pill>div>span{color:var(--color-text-secondary)}
.board-instruction{font-size:12px;line-height:1.5;min-height:20px}
.moves-bubble>span,.board-tools>button{font-size:12px}
.win-overlay p,dialog p,dialog li{font-size:13px;line-height:1.75}
.eyebrow{font-size:11px;letter-spacing:1px}
.level-btn small{font-size:10px}
[data-skin=secondary]{color:var(--color-text-primary)}
button[data-skin=primary],[data-skin=primary],.primary,.level-btn.current,.level-btn.current small,
.tool-palette button.active,.directions button.active{color:var(--color-on-primary)}
button[data-skin=utility],[data-skin=utility]{color:var(--color-on-utility)}
[data-skin=warning],.error{color:var(--color-warning)!important}
.ui-plate{filter:none!important;box-shadow:none!important}
.ui-icon img{filter:none!important;opacity:1!important}
.game-icon{width:44px;height:44px;flex-shrink:0}
.game-icon .ui-icon{width:28px;height:28px;margin:0;align-self:center}
.game-icon.help-trigger .ui-icon{width:30px;height:30px}
.tool-icon{width:56px;height:52px}
.tool-icon .ui-icon{width:28px;height:28px}
.rotate-button{color:var(--color-text-primary);min-width:92px;min-height:102px;gap:8px}
.rotate-button>.ui-icon{width:62px;height:62px;filter:drop-shadow(0 1px 1px var(--color-utility))}
.rotate-button b{font-size:13px}
.rotate-button.hinted{filter:none;animation:hint-bounce .7s infinite alternate}
.tool-icon small{color:var(--color-text-primary);font-size:9px;line-height:1.4;padding:3px 5px}
.result-emblem .ui-icon{width:54px;height:54px;filter:drop-shadow(0 1px 1px var(--color-reward))}
.level-btn .ui-icon{filter:drop-shadow(0 1px 1px var(--color-utility))}
button:hover:enabled{filter:none}
button:active:enabled{filter:brightness(.96);transform:scale(.94)}
button:disabled{opacity:.55;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.primary{min-height:48px;font-size:14px}
.text-button{min-height:44px;font-size:12px}
.level-btn{min-height:60px;font-size:18px}
.dialog-close{width:36px;height:36px}
.dialog-close .ui-icon{width:22px;height:22px}
#sound-toggle{min-height:44px;padding:10px 14px;font-size:13px;margin-bottom:12px}
.board-toast{font-size:12px;line-height:1.5}
@media(min-width:700px){.editing .tool-palette{position:relative}}
dialog::backdrop{background:var(--color-scrim);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
@media(max-height:700px){.rotate-button>.ui-icon{width:52px;height:52px}.rotate-button{min-height:88px}.board-instruction{font-size:11px}}
@media(prefers-reduced-motion:reduce){.rotate-button.hinted{animation:none}}
design/contrast-report.json
+130
View File
@@ -0,0 +1,130 @@
[
{
"label": "正文 / 背景",
"foreground": "#273B50",
"background": "#A8BECF",
"ratio": 5.981,
"minimum": 4.5,
"pass": true
},
{
"label": "辅助文字 / 背景",
"foreground": "#314A5F",
"background": "#A8BECF",
"ratio": 4.804,
"minimum": 4.5,
"pass": true
},
{
"label": "正文 / 弹窗",
"foreground": "#273B50",
"background": "#F7F6F2",
"ratio": 10.625,
"minimum": 4.5,
"pass": true
},
{
"label": "辅助文字 / 弹窗",
"foreground": "#314A5F",
"background": "#F7F6F2",
"ratio": 8.535,
"minimum": 4.5,
"pass": true
},
{
"label": "主按钮文字",
"foreground": "#FFFFFF",
"background": "#6652B8",
"ratio": 6.062,
"minimum": 4.5,
"pass": true
},
{
"label": "工具图标",
"foreground": "#FFFFFF",
"background": "#52697E",
"ratio": 5.705,
"minimum": 3,
"pass": true
},
{
"label": "次按钮文字",
"foreground": "#273B50",
"background": "#E4EAF0",
"ratio": 9.48,
"minimum": 4.5,
"pass": true
},
{
"label": "选中标签",
"foreground": "#3F327A",
"background": "#DFD9F3",
"ratio": 7.881,
"minimum": 4.5,
"pass": true
},
{
"label": "阻挡提示文字",
"foreground": "#A44825",
"background": "#F9E3D2",
"ratio": 4.798,
"minimum": 4.5,
"pass": true
},
{
"label": "分格 / 棋盘",
"foreground": "#7C8B94",
"background": "#F2EEE5",
"ratio": 3.034,
"minimum": 3,
"pass": true
},
{
"label": "轨道 / 棋盘",
"foreground": "#6D808B",
"background": "#F2EEE5",
"ratio": 3.549,
"minimum": 3,
"pass": true
},
{
"label": "轨道 / 浅色外缘",
"foreground": "#6D808B",
"background": "#DFE3E2",
"ratio": 3.174,
"minimum": 3,
"pass": true
},
{
"label": "方向箭头 / 蓝棋子",
"foreground": "#FFFFFF",
"background": "#2392FD",
"ratio": 3.181,
"minimum": 3,
"pass": true
},
{
"label": "方向箭头 / 粉棋子",
"foreground": "#FFFFFF",
"background": "#FC3E80",
"ratio": 3.42,
"minimum": 3,
"pass": true
},
{
"label": "方向箭头 / 黄棋子",
"foreground": "#273B50",
"background": "#FDBC28",
"ratio": 6.785,
"minimum": 3,
"pass": true
},
{
"label": "方向箭头 / 紫棋子",
"foreground": "#FFFFFF",
"background": "#874FFD",
"ratio": 4.598,
"minimum": 3,
"pass": true
}
]
design/guide-template.html
+57
View File
File diff suppressed because one or more lines are too long
design/tokens.css
+32
View File
@@ -0,0 +1,32 @@
/* Generated by npm run design. Edit src/design-tokens.js. */
:root{
--color-background:#A8BECF;
--color-board:#F2EEE5;
--color-board-grid:#7C8B94;
--color-track:#6D808B;
--color-track-halo:#DFE3E2;
--color-surface:#F7F6F2;
--color-text-primary:#273B50;
--color-text-secondary:#314A5F;
--color-primary:#6652B8;
--color-on-primary:#FFFFFF;
--color-secondary:#E4EAF0;
--color-utility:#52697E;
--color-on-utility:#FFFFFF;
--color-selection:#DFD9F3;
--color-on-selection:#3F327A;
--color-disabled:#CBD4DD;
--color-on-disabled:#526579;
--color-input:#FFFFFF;
--color-reward:#B9760C;
--color-warning:#A44825;
--color-warning-surface:#F9E3D2;
--color-scrim:#273B507A;
--color-focus:#3F327A;
--color-tile-blue:#2392FD;
--color-tile-pink:#FC3E80;
--color-tile-yellow:#FDBC28;
--color-tile-purple:#874FFD;
--color-arrow-light:#FFFFFF;
--color-arrow-dark:#273B50;
}
design/tokens.json
+68
View File
@@ -0,0 +1,68 @@
{
"theme": {
"background": "#A8BECF",
"board": "#F2EEE5",
"boardGrid": "#7C8B94",
"track": "#6D808B",
"trackHalo": "#DFE3E2",
"surface": "#F7F6F2",
"textPrimary": "#273B50",
"textSecondary": "#314A5F",
"primary": "#6652B8",
"onPrimary": "#FFFFFF",
"secondary": "#E4EAF0",
"utility": "#52697E",
"onUtility": "#FFFFFF",
"selection": "#DFD9F3",
"onSelection": "#3F327A",
"disabled": "#CBD4DD",
"onDisabled": "#526579",
"input": "#FFFFFF",
"reward": "#B9760C",
"warning": "#A44825",
"warningSurface": "#F9E3D2",
"scrim": "#273B507A",
"focus": "#3F327A",
"tileBlue": "#2392FD",
"tilePink": "#FC3E80",
"tileYellow": "#FDBC28",
"tilePurple": "#874FFD",
"arrowLight": "#FFFFFF",
"arrowDark": "#273B50"
},
"surfaces": {
"surface": "surface",
"primary": "primary",
"secondary": "secondary",
"utility": "utility",
"warning": "warningSurface",
"reward": "reward",
"input": "input",
"selection": "selection",
"disabled": "disabled",
"tileBlue": "tileBlue",
"tilePink": "tilePink",
"tileYellow": "tileYellow",
"tilePurple": "tilePurple"
},
"typography": {
"level": 28,
"moves": 32,
"dialogTitle": 24,
"body": 14,
"label": 12,
"caption": 11
},
"motion": {
"pressMs": 150,
"modalMs": 420,
"starStartMs": 300,
"starGapMs": 190,
"collisionMs": 1250
},
"radii": {
"control": 14,
"dialog": 24,
"small": 8
}
}