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

feat: expand campaign and refine puzzle visuals and controls

Browse Source
This commit is contained in:
cabinw
2026-09-09 11:02:45 +08:00
parent 9f8990b579
commit 70b021d4cc
66 changed files with 41108 additions and 10553 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/components.css
+44
View File
@@ -49,3 +49,47 @@ button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid
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}}
/* V2 scenes: environmental ink is independent of modal/utility ink. */
.level-ribbon,.moves-bubble strong,.moves-bubble>span,.board-instruction,.rotate-button,.board-tools>button,.theme-caption{color:var(--scene-ink,var(--color-text-primary))}
.theme-caption{grid-column:1;text-align:center;font-size:11px;letter-spacing:1px;margin-top:8px}
.swatches{grid-template-columns:repeat(4,1fr);padding:0;gap:7px}
.swatches button{min-height:36px}
.pigment-swatch>.ui-plate{background:var(--pigment)}
.pigment-swatch>.ui-plate>.sprite-crop{display:none}
.canvas-wrap{overflow:visible}
@media(max-height:700px){.canvas-wrap{width:min(100%,max(270px,calc(100dvh - 380px)))}}
.canvas-wrap{overflow:hidden}.board-zoom{display:flex;align-items:center;justify-content:center;gap:8px;padding:5px 0;position:relative;z-index:2;color:var(--scene-ink,var(--color-text-primary))}.canvas-wrap{aspect-ratio:auto}.canvas-wrap canvas{aspect-ratio:1;height:auto}.board-zoom button{min-width:38px;min-height:36px;font-size:13px}.board-zoom span{font-size:10px}
/* Board-first play screen: HUD, a tall viewport, one compact action row. */
.board-zoom{display:none!important}
body:not(.editing) .game-shell{height:100dvh;min-height:0;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
body:not(.editing) .workspace,body:not(.editing) .game-column{height:100%;min-height:0}
body:not(.editing) .game-column{display:grid;grid-template-rows:52px minmax(0,1fr);gap:0}
body:not(.editing) .level-heading,body:not(.editing) .theme-caption,body:not(.editing) .board-instruction{display:none}
body:not(.editing) .hud{grid-row:1;margin:0;padding:0}
body:not(.editing) .moves-bubble{height:48px;display:flex;flex-direction:row;gap:8px}
body:not(.editing) .moves-bubble strong{font-size:28px}
body:not(.editing) .game-top{top:10px;left:14px;right:14px}
body:not(.editing) .game-card{grid-row:2;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:minmax(0,1fr) 64px;gap:0}
body:not(.editing) .canvas-wrap{grid-column:1/-1;grid-row:1;width:100%;height:100%;min-height:0;margin:0;aspect-ratio:auto}
body:not(.editing) .canvas-wrap canvas{width:100%;height:100%;aspect-ratio:auto}
body:not(.editing) .rotation-controls,body:not(.editing) .board-tools{display:contents}
body:not(.editing) .rotate-button,body:not(.editing) .board-tools>button{grid-row:2;min-width:0;min-height:44px;padding:6px 0 0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
body:not(.editing) .rotate-button>.ui-icon{width:34px;height:34px}
body:not(.editing) .rotate-button b,body:not(.editing) .board-tools b{font-size:11px;letter-spacing:0}
body:not(.editing) .tool-icon{width:40px;height:36px}
body:not(.editing) .tool-icon .ui-icon{width:24px;height:24px}
body:not(.editing) .tool-icon small{display:none}
body:not(.editing) .return-editor{position:absolute;top:12px;right:12px;margin:0;z-index:4}
@media(min-width:700px){body:not(.editing) .game-shell{height:calc(100dvh - 30px)}}
/* Restore navigation and float rotation controls over the tall board. */
body:not(.editing) .game-column{grid-template-rows:44px 44px minmax(0,1fr)}
body:not(.editing) .level-heading{display:block;grid-row:1;align-self:center;margin:0;padding:0 60px}
body:not(.editing) .level-ribbon{font-size:24px}
body:not(.editing) .hud{grid-row:2}
body:not(.editing) .moves-bubble{height:40px}
body:not(.editing) .game-card{grid-row:3;grid-template-columns:repeat(3,1fr);position:relative}
body:not(.editing) .rotation-controls{display:flex;position:absolute;left:0;right:0;bottom:76px;justify-content:space-around;margin:0;padding:0 24px;gap:50px;z-index:3;pointer-events:none}
body:not(.editing) .rotate-button{pointer-events:auto;min-width:80px;min-height:84px;gap:7px;padding:4px}
body:not(.editing) .rotate-button>.ui-icon{width:58px;height:58px}
body:not(.editing) .rotate-button b{font-size:13px}
design/contrast-report.json
+143 -7
View File
@@ -73,25 +73,25 @@
},
{
"label": "分格 / 棋盘",
"foreground": "#7C8B94",
"foreground": "#89867D",
"background": "#F2EEE5",
"ratio": 3.034,
"ratio": 3.143,
"minimum": 3,
"pass": true
},
{
"label": "轨道 / 棋盘",
"foreground": "#6D808B",
"foreground": "#435F78",
"background": "#F2EEE5",
"ratio": 3.549,
"ratio": 5.764,
"minimum": 3,
"pass": true
},
{
"label": "轨道 / 浅色外缘",
"foreground": "#6D808B",
"background": "#DFE3E2",
"ratio": 3.174,
"foreground": "#435F78",
"background": "#F2EEE5",
"ratio": 5.764,
"minimum": 3,
"pass": true
},
@@ -126,5 +126,141 @@
"ratio": 4.598,
"minimum": 3,
"pass": true
},
{
"label": "薄荷浅湾 / 场景文字",
"foreground": "#273B50",
"background": "#C5E4DF",
"ratio": 8.501,
"minimum": 4.5,
"pass": true
},
{
"label": "杏色午后 / 场景文字",
"foreground": "#273B50",
"background": "#F1D7B8",
"ratio": 8.291,
"minimum": 4.5,
"pass": true
},
{
"label": "鸢尾花园 / 场景文字",
"foreground": "#273B50",
"background": "#D8D0EB",
"ratio": 7.738,
"minimum": 4.5,
"pass": true
},
{
"label": "玫瑰暮色 / 场景文字",
"foreground": "#273B50",
"background": "#E7C3CE",
"ratio": 7.165,
"minimum": 4.5,
"pass": true
},
{
"label": "午夜极光 / 场景文字",
"foreground": "#F7F6F2",
"background": "#293956",
"ratio": 10.706,
"minimum": 4.5,
"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
},
{
"label": "湖水青 / 箭头",
"foreground": "#FFFFFF",
"background": "#008B83",
"ratio": 4.183,
"minimum": 3,
"pass": true
},
{
"label": "珊瑚橙 / 箭头",
"foreground": "#273B50",
"background": "#EF704F",
"ratio": 3.885,
"minimum": 3,
"pass": true
},
{
"label": "嫩芽绿 / 箭头",
"foreground": "#273B50",
"background": "#91C95B",
"ratio": 5.86,
"minimum": 3,
"pass": true
},
{
"label": "鸢尾蓝 / 箭头",
"foreground": "#FFFFFF",
"background": "#5267CF",
"ratio": 5,
"minimum": 3,
"pass": true
},
{
"label": "玫瑰红 / 箭头",
"foreground": "#FFFFFF",
"background": "#C83F66",
"ratio": 4.818,
"minimum": 3,
"pass": true
},
{
"label": "蜜桃杏 / 箭头",
"foreground": "#273B50",
"background": "#F5AA83",
"ratio": 5.997,
"minimum": 3,
"pass": true
},
{
"label": "冰川青 / 箭头",
"foreground": "#273B50",
"background": "#58C9D5",
"ratio": 5.871,
"minimum": 3,
"pass": true
},
{
"label": "兰花紫 / 箭头",
"foreground": "#FFFFFF",
"background": "#AE64C7",
"ratio": 3.855,
"minimum": 3,
"pass": true
}
]
design/showcase.css
+26
View File
File diff suppressed because one or more lines are too long
design/tokens.css
+3 -3
View File
@@ -2,9 +2,9 @@
:root{
--color-background:#A8BECF;
--color-board:#F2EEE5;
--color-board-grid:#7C8B94;
--color-track:#6D808B;
--color-track-halo:#DFE3E2;
--color-board-grid:#89867D;
--color-track:#435F78;
--color-track-halo:#F2EEE5;
--color-surface:#F7F6F2;
--color-text-primary:#273B50;
--color-text-secondary:#314A5F;
design/tokens.json
+152 -4
View File
@@ -2,9 +2,9 @@
"theme": {
"background": "#A8BECF",
"board": "#F2EEE5",
"boardGrid": "#7C8B94",
"track": "#6D808B",
"trackHalo": "#DFE3E2",
"boardGrid": "#89867D",
"track": "#435F78",
"trackHalo": "#F2EEE5",
"surface": "#F7F6F2",
"textPrimary": "#273B50",
"textSecondary": "#314A5F",
@@ -30,6 +30,144 @@
"arrowLight": "#FFFFFF",
"arrowDark": "#273B50"
},
"pigments": [
{
"name": "晴空蓝",
"color": "#2392FD",
"arrow": "#FFFFFF"
},
{
"name": "莓果粉",
"color": "#FC3E80",
"arrow": "#FFFFFF"
},
{
"name": "日光黄",
"color": "#FDBC28",
"arrow": "#273B50"
},
{
"name": "葡萄紫",
"color": "#874FFD",
"arrow": "#FFFFFF"
},
{
"name": "湖水青",
"color": "#008B83",
"arrow": "#FFFFFF"
},
{
"name": "珊瑚橙",
"color": "#EF704F",
"arrow": "#273B50"
},
{
"name": "嫩芽绿",
"color": "#91C95B",
"arrow": "#273B50"
},
{
"name": "鸢尾蓝",
"color": "#5267CF",
"arrow": "#FFFFFF"
},
{
"name": "玫瑰红",
"color": "#C83F66",
"arrow": "#FFFFFF"
},
{
"name": "蜜桃杏",
"color": "#F5AA83",
"arrow": "#273B50"
},
{
"name": "冰川青",
"color": "#58C9D5",
"arrow": "#273B50"
},
{
"name": "兰花紫",
"color": "#AE64C7",
"arrow": "#FFFFFF"
}
],
"levelThemes": [
{
"id": "lagoon",
"name": "薄荷浅湾",
"label": "轻松",
"range": "0–29",
"background": "#C5E4DF",
"ink": "#273B50",
"palette": [
0,
4,
2
],
"description": "冷润的浅湾，配蓝、青与一点日光黄。"
},
{
"id": "apricot",
"name": "杏色午后",
"label": "进阶",
"range": "30–49",
"background": "#F1D7B8",
"ink": "#273B50",
"palette": [
5,
7,
4,
9
],
"description": "温暖杏底，以珊瑚、鸢尾蓝和湖水青平衡。"
},
{
"id": "lavender",
"name": "鸢尾花园",
"label": "烧脑",
"range": "50–69",
"background": "#D8D0EB",
"ink": "#273B50",
"palette": [
3,
6,
8,
10
],
"description": "柔紫空间，用嫩芽绿与冰川青拉开层次。"
},
{
"id": "rose",
"name": "玫瑰暮色",
"label": "挑战",
"range": "70–100",
"background": "#E7C3CE",
"ink": "#273B50",
"palette": [
8,
7,
2,
11
],
"description": "低饱和玫瑰底，深色棋子与日光黄形成节奏。"
},
{
"id": "midnight",
"name": "午夜极光",
"label": "每周挑战",
"range": "特别主题",
"background": "#293956",
"ink": "#F7F6F2",
"palette": [
10,
11,
2,
1
],
"description": "深靛蓝舞台，冰川青、兰花紫和明亮暖色。"
}
],
"surfaces": {
"surface": "surface",
"primary": "primary",
@@ -58,7 +196,17 @@
"modalMs": 420,
"starStartMs": 300,
"starGapMs": 190,
"collisionMs": 1250
"collisionMs": 650,
"rotationMs": 240,
"exitMsPerUnit": 60,
"exitMinTravelMs": 140,
"exitMaxTravelMs": 800,
"exitEffectMs": 180,
"exitLongBaseMs": 550,
"exitLongCellMs": 85,
"exitLongMaxMs": 1700,
"exitLongStartCells": 2,
"exitLongFullCells": 5
},
"radii": {
"control": 14,