drwily/Pete
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventure: draw the dungeon as a fog-of-war map, not a room tally

Browse Source
This commit is contained in:
prosolis
2026-07-17 08:18:17 -07:00
parent dcd68ebdcd
commit e90deda498
6 changed files with 493 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
internal/web/static/css/input.css
View File

@@ -2588,3 +2588,61 @@ html[data-room] .pete-felt {
.pete-poker-you .pete-seat-cards { --card-h: 6rem; --card-w: 4.3rem; min-height: 6rem; }
.pete-poker-pot-total { font-size: 1.25rem; }
}
@layer components {
/* Dungeon map (who page). The graph arrives already cut to the fog-of-war
frontier; who_map.go lays it out and who.html draws it as inline SVG. Node
colours ride the phase through --ink/--card like every card does, with a
per-kind tint carried in --map-fill so the SVG discs and the legend dots
read from one source. The adventure purple marks the room you're in. */
.map-svg { display: block; overflow: visible; }
.map-edge {
stroke: color-mix(in srgb, var(--ink) 26%, transparent);
stroke-width: 2.5;
stroke-linecap: round;
}
.map-edge-locked {
stroke: #c98a2b; /* a barred door reads amber, not ink */
stroke-dasharray: 3 5;
}
.map-disc {
fill: var(--map-fill, color-mix(in srgb, var(--ink) 9%, var(--card)));
stroke: color-mix(in srgb, var(--map-stroke, var(--ink)) 55%, transparent);
stroke-width: 2;
}
.map-glyph {
fill: color-mix(in srgb, var(--map-stroke, var(--ink)) 85%, var(--ink));
font-size: 13px;
font-weight: 700;
pointer-events: none;
}
.map-node-current .map-disc { stroke: #6d4bd8; stroke-width: 2.5; }
.map-ring { fill: none; stroke: #6d4bd8; stroke-width: 2; opacity: 0.5; }
/* Per-kind tint. Set on the node group (and the legend dot); both the disc
fill and the glyph colour derive from it. */
.map-node-entry { --map-fill: color-mix(in srgb, #3fa66a 22%, var(--card)); --map-stroke: #2f8a54; }
.map-node-boss { --map-fill: color-mix(in srgb, #c0392b 22%, var(--card)); --map-stroke: #a52f22; }
.map-node-trap { --map-fill: color-mix(in srgb, #d98324 22%, var(--card)); --map-stroke: #b56a17; }
.map-node-elite { --map-fill: color-mix(in srgb, #6d4bd8 20%, var(--card)); --map-stroke: #5836b8; }
.map-node-secret { --map-fill: color-mix(in srgb, #b08d2e 22%, var(--card)); --map-stroke: #8f7018; }
.map-node-harvest { --map-fill: color-mix(in srgb, #3f8f6a 18%, var(--card)); --map-stroke: #2f7355; }
.map-node-rest { --map-fill: color-mix(in srgb, #3f83a6 18%, var(--card)); --map-stroke: #2f6a88; }
.map-node-plain { --map-fill: color-mix(in srgb, var(--ink) 9%, var(--card)); --map-stroke: var(--ink); }
.map-node-unknown { --map-fill: color-mix(in srgb, var(--ink) 5%, var(--card)); --map-stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.map-node-unknown .map-disc { stroke-dasharray: 3 4; }
/* Legend swatches. Same --map-fill source as the nodes. */
.map-dot {
width: 11px; height: 11px; border-radius: 9999px;
background: var(--map-fill, color-mix(in srgb, var(--ink) 9%, var(--card)));
border: 1.5px solid color-mix(in srgb, var(--map-stroke, var(--ink)) 55%, transparent);
}
.map-node-unknown.map-dot { border-style: dashed; }
.map-door-legend {
width: 16px; height: 0;
border-top: 2.5px dashed #c98a2b;
}
}