Parley Hatch
ed00e31009
Render actual generated dungeons through the AI pipeline — both top-down and first-person (Eye-of-the-Beholder style) — instead of synthetic test depth. All renderer-side: derived from the envelope's tiles+regions+theme, the core stores none of it. - depth.js: top-down height-field depth exporter (walls raised, pools recessed, pillars as bumps, subtle per-theme relief), calibrated to the proven room_depth levels so one tall room can't crush every floor dark. - fpv.js: first-person depth via a Wolfenstein-style grid raycaster (16:9), reports straight-ahead distance for opening detection. - explore.js: room->room nav graph derived from REAL tile openings (scan boundary gaps, bin by cardinal, flood the corridor to the destination room) — nav + open share one source of truth with the rendered passages. - bake_atlas.py: bakes per-room x4-facing pixel-art frames; per-theme + per-facing (wall vs passage) prompts, fixed diffusion seed for cross-frame style coherence, per-run unique prefixes so re-bakes don't silently skip. - explore.html + explore-viewer.js: WASD first-person dungeon explorer (room-to-room movement, turning, minimap), integer-pixel fullscreen. - serve.py: stdlib dev server — static web root + /out tree + POST /save, no-store. - main.js/render.js/style.css: export hooks, the depth button, distanceToWall export. - tools/README.md: Stage 0/1/2/3 docs; .dev/2026-06-01-fpv-prompts.md: prompt research (cfg-1 negatives are inert; trigger words summon hands; empty-ruin reframe; fixed seed = consistency). Proven end-to-end on seed 7 (17 rooms). Outputs organized under git-ignored tools/out/. Control strength: 0.80-0.85 top-down, 0.85 first-person. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
122 lines
2.6 KiB
CSS
122 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 auto; }
|
|
.seed-row button { padding: 5px 7px; white-space: nowrap; }
|
|
.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; }
|