Parley Hatch
f849d82d31
Phase 0+1 of the browser viz effort: - core: drop unused `rand` dep (removes getrandom/libc → clean wasm32 build); derive serde on DungeonConfig + 5 sub-configs so the bridge can (de)serialize - reikhelm-wasm: thin wasm-bindgen cdylib exposing generate(seed, config_json) -> JSON envelope (tiles as int codes, regions, edges, per-pass snapshots) and default_config_json(); holds no generation logic - workspace: add reikhelm-wasm member; default-members keeps host cargo test/clippy on core+viz only - reikhelm-web: vanilla-JS + Canvas 2D renderer running the real core live in the browser. Atmospheric look — lit stone floor, raised stone walls with rim-lit carved edges + top bevel, room light-pooling, amber door thresholds, vignette. Controls: seed/reroll, 9 config sliders, stage scrubber, semantic overlays (region outlines / graph / grid). window.reikhelm hooks for Playwright-driven iteration. Core stays 115 tests green. Driven + screenshotted via Playwright MCP. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
121 lines
2.6 KiB
CSS
121 lines
2.6 KiB
CSS
:root {
|
|
--bg: #07070a;
|
|
--panel: #121218;
|
|
--panel-edge: #23232e;
|
|
--ink: #d8d4cc;
|
|
--ink-dim: #8a8a98;
|
|
--accent: #d4a54a;
|
|
--accent-cool: #7ab8f0;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
height: 100%;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr 300px;
|
|
height: 100vh;
|
|
}
|
|
|
|
#stage-area {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#view {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
#sidebar {
|
|
background: var(--panel);
|
|
border-left: 1px solid var(--panel-edge);
|
|
padding: 16px 16px 12px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
letter-spacing: 0.08em;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
.sub { margin: -6px 0 4px; color: var(--ink-dim); font-size: 11px; }
|
|
|
|
#readout {
|
|
background: #0c0c11;
|
|
border: 1px solid var(--panel-edge);
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
font-size: 11px;
|
|
color: var(--ink-dim);
|
|
}
|
|
#readout b { color: var(--ink); font-weight: 600; }
|
|
#err { color: #e06a5a; margin-top: 4px; min-height: 0; }
|
|
#err:empty { display: none; }
|
|
|
|
#controls { display: flex; flex-direction: column; gap: 7px; }
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 78px 1fr 42px;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.row label { color: var(--ink-dim); font-size: 11px; }
|
|
.row .val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
|
|
|
|
input[type="range"] {
|
|
width: 100%;
|
|
accent-color: var(--accent);
|
|
height: 4px;
|
|
}
|
|
|
|
.seed-row { grid-template-columns: 40px 1fr auto; }
|
|
.seed-row input[type="number"] {
|
|
background: #0c0c11;
|
|
border: 1px solid var(--panel-edge);
|
|
color: var(--ink);
|
|
border-radius: 4px;
|
|
padding: 4px 6px;
|
|
font: inherit;
|
|
width: 100%;
|
|
}
|
|
button {
|
|
background: #1c1c24;
|
|
border: 1px solid var(--panel-edge);
|
|
color: var(--ink);
|
|
border-radius: 4px;
|
|
padding: 5px 9px;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
button:hover { background: #26262f; border-color: var(--accent); color: var(--accent); }
|
|
|
|
.toggles {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 14px;
|
|
grid-template-columns: none;
|
|
margin-top: 2px;
|
|
}
|
|
.tog { display: flex; align-items: center; gap: 5px; color: var(--ink-dim); cursor: pointer; }
|
|
.tog input { accent-color: var(--accent-cool); }
|
|
|
|
.stage { margin-top: auto; }
|
|
.stage .val { width: auto; text-align: right; font-size: 10px; color: var(--accent-cool); }
|
|
|
|
.hint { color: var(--ink-dim); font-size: 10px; margin: 4px 0 0; text-align: center; }
|