diff --git a/web/src/screens/minimap.ts b/web/src/screens/minimap.ts index 81769ee..9829344 100644 --- a/web/src/screens/minimap.ts +++ b/web/src/screens/minimap.ts @@ -12,12 +12,16 @@ * * One hue, value carrying a fixed importance order: * - * low ground -> high ground -> woods -> water -> roads -> buildings + * water -> low ground -> high ground -> buildings -> woods -> roads * darkest ------------------------------------------------> lightest * - * so it survives being 200 pixels wide, and survives colour blindness. The two - * darkest values are the card's own board colours, so the tile sits in the card - * rather than on it. + * The order is by what is rare rather than by what is important, because a + * board made mostly of one thing has to read as ground with markings on it and + * not as a block. Archipelago is half water and Downtown Arbitration is most + * of the way to solid buildings; both were coming out as a bright slab with + * the land drawn on top. Water is a hole in the ground and a city block is a + * thing standing on it, so both go dark and the streets between them light - + * which is what a city looks like from above anyway. * * so it survives being 200 pixels wide, and survives colour blindness. The two * darkest values are the card's own board colours, so the tile sits in the card @@ -45,13 +49,14 @@ const LEVELS = "abcdefghijklmnopqrs"; const INK = { ground: "#0b1017", + low: "#0f1622", grid: "#172134", high: "#22314b", woods: "#2f5f86", - water: "#3b82c4", + water: "#1e4468", edge: "#63a6de", road: "#8fb6d9", - building: "#cfe2f2", + building: "#3d4d69", }; /** @@ -120,7 +125,9 @@ export function drawMinimap( }; // Ground first, banded against the board's own median so a board that sits - // entirely at level 2 reads as flat rather than as a plateau. + // entirely at level 2 reads as flat rather than as a plateau. Three bands + // and not two: Sinkhole's one feature is a hole, and against a high/flat + // pair a hole is indistinguishable from open ground. const allLevels = sheets.flatMap((s) => [...s.l].map((c) => LEVELS.indexOf(c) - 9), ); @@ -145,7 +152,8 @@ export function drawMinimap( const kind = sheet.t[n]!; const level = LEVELS.indexOf(sheet.l[n]!) - 9; const { cx, cy } = at(i, x, y); - let fill = level > median ? INK.high : INK.grid; + let fill = + level > median ? INK.high : level < median ? INK.low : INK.grid; if (kind === "w" || kind === "W") fill = INK.woods; else if (kind === "~") fill = INK.water; else if (kind === "=") fill = INK.road;