Kevin/lifegame
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the board an illustrated-map feel instead of a flowchart

Browse Source 
Same data-driven layout as before (nothing about computeLayout changed) —
only what gets drawn changed:

- Procedural terrain backdrop: a winding river, a few mountain clusters, and
  denser two-tone trees, scattered deterministically like the existing
  tree-blobs were, so none of it needs hand-alignment to specific tiles and
  it keeps working at any board size.
- The road between spaces is now a wide dashed dirt path with a subtle
  hand-drawn "wobble" (SVG feTurbulence/feDisplacementMap) instead of a
  clean vector line.
- Tiles are beveled: a drawn shadow copy, a gloss gradient, and a few
  degrees of per-tile tilt derived from a hash of the space id (deterministic,
  not random-per-render) so they read as hand-placed rather than
  machine-stamped. Choice diamonds get a small signpost stick underneath.

Prototyped and screenshotted headlessly before committing; user confirmed
this direction over the previous flowchart-style rendering.
This commit is contained in:
Kevin
2026-07-22 09:17:25 -07:00
parent 6aa9769ce5
commit 70eeb78eaf
2 changed files with 162 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+25 -5
View File
@@ -71,15 +71,35 @@
/* --- Board --- */
.board-container {
overflow: auto; max-height: 620px; border-radius: 14px; margin-bottom: 14px;
background: radial-gradient(900px 500px at 30% 0%, #2a5f4c 0%, #1d493c 55%, #163a30 100%);
border: 1px solid var(--line);
background: #163a30; border: 1px solid var(--line);
}
.board-svg { display: block; width: 100%; height: auto; min-width: 680px; }
.tree-blob { fill: #2f6b52; opacity: .55; }
.edge-path { fill: none; stroke: #caa15a; stroke-width: 7; stroke-linecap: round; opacity: .9; }
.field-bg { fill: url(#fieldGradient); }
.mountain-body { fill: #8f9aa8; opacity: .5; }
.mountain-snow { fill: #e8edf2; opacity: .45; }
.river-body { fill: none; stroke: #4a90b8; stroke-width: 34; stroke-linecap: round; opacity: .5; }
.river-shine { fill: none; stroke: #a8d8ea; stroke-width: 8; stroke-linecap: round; opacity: .4; }
.tree-canopy-a { fill: #2f6b52; opacity: .6; }
.tree-canopy-b { fill: #3a7a5e; opacity: .55; }
.tree-trunk { fill: #4a3a2a; opacity: .5; }
.road-shadow {
fill: none; stroke: #0f2a23; stroke-width: 15; stroke-linecap: round;
opacity: .3; transform: translate(0, 3px);
}
.road-base { fill: none; stroke: #caa15a; stroke-width: 13; stroke-linecap: round; filter: url(#roadWobble); }
.road-centerline {
fill: none; stroke: #f0dcae; stroke-width: 2.5; stroke-linecap: round;
stroke-dasharray: 8 10; opacity: .85; filter: url(#roadWobble);
}
.space-shadow { fill: rgba(0,0,0,.32); }
.space-gloss { fill: url(#tileGloss); pointer-events: none; }
.choice-post { fill: #8a6a3c; stroke: #5f462a; stroke-width: 1; }
.space-shape {
fill: #fffaf0; stroke: var(--line); stroke-width: 2.5;
filter: drop-shadow(0 3px 3px rgba(0,0,0,.35));
filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.space-start .space-shape { fill: var(--good); stroke: #2c6b44; }
.space-finish .space-shape { fill: var(--marigold); stroke: #b97f18; }