Dynamic colors

src/button.ts

@@ -25,7 +25,7 @@ export function addButton(
   drawpile.addClickable(
     0,
     (hover) => {
-      let [bg, fg, fgLabel] = [C.BG_INSET, C.FG_TEXT, C.FG_BOLD];
+      let [bg, fg, fgLabel] = [C.BG_UI, C.FG_TEXT, C.FG_BOLD];
       if (!enabled) {
         fgLabel = C.FG_TEXT_DISABLED;
       }
@@ -36,7 +36,7 @@ export function addButton(
       }
 
       if (hover) {
-        [bg, fg, fgLabel] = [C.FG_BOLD, C.BG_INSET, C.BG_INSET];
+        [bg, fg, fgLabel] = [C.FG_BOLD, C.BG_UI, C.BG_UI];
       }
       D.fillRect(
         topLeftPadded.offset(new Point(-1, -1)),

src/checkmodal.ts

@@ -54,7 +54,7 @@ export class CheckModal {
 
     let size = this.#size;
     this.#drawpile.add(0, () => {
-      D.fillRect(new Point(-4, -4), size.add(new Size(8, 8)), C.BG_INSET);
+      D.fillRect(new Point(-4, -4), size.add(new Size(8, 8)), C.BG_UI);
     });
 
     let success = this.#success;

src/colors.ts

@@ -1,16 +1,173 @@
 import { Color } from "./engine/datatypes.ts";
 import { Stat } from "./datatypes.ts";
+import { getHuntMode, maybeGetHuntMode } from "./huntmode.ts";
+import { getEndgameModal } from "./endgamemodal.ts";
+import { getVNModal } from "./vnmodal.ts";
+
+export type Microtheme = {
+  SKY0: Color; // outer, less dark
+  FLOOR0: Color; // floor, even less dark
+
+  WALL0: Color; // darkest (ex. the underside of something)
+  WALL1: Color; // darkest (ex. the underside of something)
+
+  BG0: Color; // UI background -- should be highly readable and similar to SKY or FLOOR
+  FG1: Color; // dark (ex. disabled text)
+  FG2: Color; // normal  (ex. normal text)
+  FG3: Color; // brightest (ex. bold text)
+};
+
+/*
+const MICROTHEME_OLD: MicroTheme = {
+  BG0: Color.parseHexCode("#242234"),
+  BG1: Color.parseHexCode("#143464"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+}
+ */
+
+export const MICROTHEME_DEFAULT: Microtheme = {
+  // outdoors
+  SKY0: Color.parseHexCode("#242234"),
+  FLOOR0: Color.parseHexCode("#141013"),
+  WALL0: Color.parseHexCode("#5d758d"),
+  WALL1: Color.parseHexCode("#8b93af"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_BLACK: Microtheme = {
+  // manor
+  SKY0: Color.parseHexCode("#141013"),
+  FLOOR0: Color.parseHexCode("#3b1725"),
+  WALL0: Color.parseHexCode("#221c1a"),
+  WALL1: Color.parseHexCode("#322b28"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_PURPLE_TAN: Microtheme = {
+  // library
+  SKY0: Color.parseHexCode("#403353"),
+  FLOOR0: Color.parseHexCode("#242234"),
+  WALL0: Color.parseHexCode("#5a4e44"),
+  WALL1: Color.parseHexCode("#c7b08b"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_GREEN: Microtheme = {
+  // zoo
+  SKY0: Color.parseHexCode("#24523b"),
+  FLOOR0: Color.parseHexCode("#122020"),
+  WALL0: Color.parseHexCode("#328464"),
+  WALL1: Color.parseHexCode("#5daf8d"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_TEAL: Microtheme = {
+  // optometrist
+  SKY0: Color.parseHexCode("#143464"),
+  FLOOR0: Color.parseHexCode("#122020"),
+  WALL0: Color.parseHexCode("#477d85"),
+  WALL1: Color.parseHexCode("#588dbe"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_PINK: Microtheme = {
+  // coffee shop
+  SKY0: Color.parseHexCode("#793a80"),
+  FLOOR0: Color.parseHexCode("#221c1a"),
+  WALL0: Color.parseHexCode("#e86a73"),
+  WALL1: Color.parseHexCode("#f5a097"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_NEON: Microtheme = {
+  // club
+  SKY0: Color.parseHexCode("#141013"),
+  FLOOR0: Color.parseHexCode("#221c1a"),
+  WALL0: Color.parseHexCode("#9cdb43"),
+  WALL1: Color.parseHexCode("#d6f264"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
+
+export const MICROTHEME_RED: Microtheme = {
+  // blood bank
+  SKY0: Color.parseHexCode("#73172d"),
+  FLOOR0: Color.parseHexCode("#141013"),
+  WALL0: Color.parseHexCode("#df3e23"),
+  WALL1: Color.parseHexCode("#f9a31b"),
+  BG0: Color.parseHexCode("#000000"),
+  FG1: Color.parseHexCode("#8b93af"),
+  FG2: Color.parseHexCode("#b3b9d1"),
+  FG3: Color.parseHexCode("#ffffff"),
+};
 
 export class ColorSystem {
-  readonly BG_INSET = Color.parseHexCode("#242234");
+  get BG_UI() {
-  readonly FG_TEXT = Color.parseHexCode("#c0c0c0");
+    return this.#microtheme.BG0;
-  readonly FG_TEXT_DISABLED = Color.parseHexCode("#808080");
+  }
-  readonly FG_TOO_EXPENSIVE = Color.parseHexCode("#ff8080");
+  get BG_FLOOR() {
-  readonly FG_TEXT_ENDORSED = Color.parseHexCode("#80ff80");
+    return this.#microtheme.FLOOR0;
-  readonly FG_BOLD = Color.parseHexCode("#ffffff");
+  }
-  readonly BG_OUTER = Color.parseHexCode("#143464");
+  get FG_TEXT() {
-  readonly BG_WALL_OR_UNREVEALED = Color.parseHexCode("#143464");
+    return this.#microtheme.FG2;
-  readonly BG_CEILING = Color.parseHexCode("#143464");
+  }
+  get FG_TEXT_DISABLED() {
+    return this.#microtheme.FG1;
+  }
+  readonly FG_TOO_EXPENSIVE = Color.parseHexCode("#f5a097");
+  readonly FG_TEXT_ENDORSED = Color.parseHexCode("#d6f264");
+  get FG_BOLD() {
+    return this.#microtheme.FG3;
+  }
+  get BG_OUTER() {
+    return this.#microtheme.SKY0;
+  }
+  get BG_WALL_OR_UNREVEALED() {
+    return this.#microtheme.SKY0;
+  }
+  get BG_CEILING() {
+    return this.#microtheme.SKY0;
+  }
+
+  get BG_INNERWALL() {
+    return this.#microtheme.WALL0;
+  }
+  get BG_OUTERWALL() {
+    return this.#microtheme.WALL1;
+  }
+
+  get #microtheme(): Microtheme {
+    if (getEndgameModal().isShown || getVNModal().isShown) {
+      return MICROTHEME_RED;
+    }
+    let option = maybeGetHuntMode()?.getActiveMicrotheme();
+    if (option) {
+      return option;
+    }
+    return MICROTHEME_DEFAULT;
+  }
 
   // stat colors
   readonly SWATCH_EXP: [Color, Color] = [

src/endgamemodal.ts

@@ -293,9 +293,9 @@ export class EndgameModal {
     this.#drawpile.addClickable(
       0,
       (hover) => {
-        let [bg, fg, fgBold] = [C.BG_INSET, C.FG_TEXT, C.FG_BOLD];
+        let [bg, fg, fgBold] = [C.BG_UI, C.FG_TEXT, C.FG_BOLD];
         if (hover || selected) {
-          [bg, fg, fgBold] = [C.FG_BOLD, C.BG_INSET, C.BG_INSET];
+          [bg, fg, fgBold] = [C.FG_BOLD, C.BG_UI, C.BG_UI];
         }
         D.fillRect(at.offset(new Point(0, 4)), new Size(w, h - 8), bg);
         D.drawRect(at.offset(new Point(0, 4)), new Size(w, h - 8), fg);
@@ -383,9 +383,9 @@ export class EndgameModal {
     this.#drawpile.addClickable(
       0,
       (hover) => {
-        let [bg, fg, fgBold] = [C.BG_INSET, C.FG_TEXT, C.FG_BOLD];
+        let [bg, fg, fgBold] = [C.BG_UI, C.FG_TEXT, C.FG_BOLD];
         if (hover || selected) {
-          [bg, fg, fgBold] = [C.FG_BOLD, C.BG_INSET, C.BG_INSET];
+          [bg, fg, fgBold] = [C.FG_BOLD, C.BG_UI, C.BG_UI];
         }
         D.fillRect(at.offset(new Point(2, 4)), new Size(w - 4, h - 8), bg);
         D.drawRect(at.offset(new Point(2, 4)), new Size(w - 4, h - 8), fg);

src/huntmode.ts

@@ -11,7 +11,7 @@ import { Block3D, Floor3D, World3D } from "./world3d.ts";
 import { Floater } from "./floater.ts";
 import { displace } from "./physics.ts";
 import { getThralls } from "./thralls.ts";
-import { C } from "./colors.ts";
+import { C, Microtheme } from "./colors.ts";
 
 export class HuntMode {
   map: LoadedNewMap;
@@ -87,6 +87,10 @@ export class HuntMode {
     return this.map.get(this.gridifiedPlayer).zoneLabel;
   }
 
+  getActiveMicrotheme(): Microtheme | null {
+    return this.map.get(this.gridifiedPlayer).microtheme;
+  }
+
   // draw
   update() {
     withCamera("Gameplay", () => {
@@ -295,7 +299,7 @@ export class HuntMode {
           highlighted = false;
         }
 
-        let color = C.BG_INSET;
+        let color = C.BG_FLOOR;
         if (highlighted) {
           color = C.FG_TEXT;
           if (tooExpensive) {
@@ -461,3 +465,7 @@ export function getHuntMode() {
   }
   return active;
 }
+
+export function maybeGetHuntMode(): HuntMode | null {
+  return active;
+}

src/manormap.ts

@@ -8,6 +8,7 @@ import {
   ThrallRecruitedPickup,
 } from "./pickups.ts";
 import { getPlayerProgress } from "./playerprogress.ts";
+import { MICROTHEME_BLACK } from "./colors.ts";
 
 const BASIC_PLAN = Grid.createGridFromMultilineString(`
 #####################
@@ -53,6 +54,7 @@ export function generateManor(): LoadedNewMap {
       };
 
       cell.zoneLabel = "Manor";
+      cell.microtheme = MICROTHEME_BLACK;
       switch (BASIC_PLAN.get(xy)) {
         case "#":
           break;

src/mapgen.ts

@@ -14,6 +14,7 @@ import {
 } from "./pickups.ts";
 import { getPlayerProgress } from "./playerprogress.ts";
 import { ItemStage } from "./thralls.ts";
+import { Microtheme } from "./colors.ts";
 
 const WIDTH = 19;
 const HEIGHT = 19;
@@ -68,16 +69,22 @@ class Knife {
     this.#region += 1;
   }
 
-  carve(point: Point, label?: string) {
+  carve(point: Point, theme?: Microtheme | null, label?: string) {
     this.#regions.set(point, this.#region);
     this.map.get(point).architecture = Architecture.Floor;
+    this.map.get(point).microtheme = theme ?? null;
     this.map.get(point).zoneLabel = label ?? null;
   }
 
-  carveRoom(room: Rect, protect?: boolean, label?: string) {
+  carveRoom(
+    room: Rect,
+    protect?: boolean,
+    theme?: Microtheme | null,
+    label?: string,
+  ) {
     for (let y = room.top.y; y < room.top.y + room.size.h; y++) {
       for (let x = room.top.x; x < room.top.x + room.size.w; x++) {
-        this.carve(new Point(x, y), label);
+        this.carve(new Point(x, y), theme, label);
       }
     }
 
@@ -335,9 +342,24 @@ function carveVault(knife: Knife, room: Rect, vaultTemplate: VaultTemplate) {
   let ab = mergeRects(a, b);
 
   knife.startRegion();
-  knife.carveRoom(ab, false, vaultTemplate.roomLabels.hall);
+  knife.carveRoom(
-  knife.carveRoom(c, true, vaultTemplate.roomLabels.backroom);
+    ab,
-  knife.carveRoom(d, true, vaultTemplate.roomLabels.closet);
+    false,
+    vaultTemplate.microtheme(),
+    vaultTemplate.roomLabels.hall,
+  );
+  knife.carveRoom(
+    c,
+    true,
+    vaultTemplate.microtheme(),
+    vaultTemplate.roomLabels.backroom,
+  );
+  knife.carveRoom(
+    d,
+    true,
+    vaultTemplate.microtheme(),
+    vaultTemplate.roomLabels.closet,
+  );
 
   // now place standard pickups
   for (let dy = 0; dy < ab.size.h; dy++) {
@@ -391,7 +413,11 @@ function carveVault(knife: Knife, room: Rect, vaultTemplate: VaultTemplate) {
       if (check != null) {
         knife.map.get(connector).pickup = new LockPickup(check);
       }
-      knife.carve(connector, vaultTemplate.roomLabels.backroom);
+      knife.carve(
+        connector,
+        vaultTemplate.microtheme(),
+        vaultTemplate.roomLabels.backroom,
+      );
     }
     if (mergeRects(c, d).contains(connector)) {
       // TODO: Put check 2 here
@@ -399,7 +425,11 @@ function carveVault(knife: Knife, room: Rect, vaultTemplate: VaultTemplate) {
       if (check != null) {
         knife.map.get(connector).pickup = new LockPickup(check);
       }
-      knife.carve(connector, vaultTemplate.roomLabels.closet);
+      knife.carve(
+        connector,
+        vaultTemplate.microtheme(),
+        vaultTemplate.roomLabels.closet,
+      );
     }
   }
 
@@ -445,7 +475,7 @@ function carveVault(knife: Knife, room: Rect, vaultTemplate: VaultTemplate) {
 }
 
 function carveStaircase(knife: Knife, room: Rect, ix: number) {
-  carveRoom(knife, room, "Stairwell");
+  carveRoom(knife, room, null, "Stairwell");
 
   let x = Math.floor(room.top.x + room.size.w / 2);
   let y = Math.floor(room.top.y + room.size.h / 2);
@@ -460,9 +490,14 @@ function carveStaircase(knife: Knife, room: Rect, ix: number) {
   }
 }
 
-function carveRoom(knife: Knife, room: Rect, label?: string) {
+function carveRoom(
+  knife: Knife,
+  room: Rect,
+  theme?: Microtheme | null,
+  label?: string,
+) {
   knife.startRegion();
-  knife.carveRoom(room, false, label);
+  knife.carveRoom(room, false, theme, label);
 
   for (let dy = 0; dy < Math.ceil(room.size.h / 2); dy++) {
     for (let dx = 0; dx < Math.ceil(room.size.w / 2); dx++) {

src/newmap.ts

@@ -1,6 +1,7 @@
 import { Grid, Point, Size } from "./engine/datatypes.ts";
 import { Pickup } from "./pickups.ts";
 import { Skill } from "./datatypes.ts";
+import { Microtheme } from "./colors.ts";
 
 export enum Architecture {
   Wall,
@@ -36,6 +37,7 @@ export class LoadedNewMap {
   #provinces: Grid<string | null>; // TODO: Does this just duplicate zoneLabels
   #revealed: Grid<boolean>;
   #zoneLabels: Grid<string | null>;
+  #microthemes: Grid<Microtheme | null>;
 
   constructor(id: string, size: Size) {
     this.#id = id;
@@ -47,6 +49,7 @@ export class LoadedNewMap {
     this.#provinces = new Grid<string | null>(size, () => null);
     this.#revealed = new Grid<boolean>(size, () => false);
     this.#zoneLabels = new Grid<string | null>(size, () => null);
+    this.#microthemes = new Grid<Microtheme | null>(size, () => null);
   }
 
   set entrance(point: Point) {
@@ -116,6 +119,14 @@ export class LoadedNewMap {
     return this.#zoneLabels.get(point);
   }
 
+  setMicrotheme(point: Point, value: Microtheme | null) {
+    this.#microthemes.set(point, value);
+  }
+
+  getMicrotheme(point: Point): Microtheme | null {
+    return this.#microthemes.get(point);
+  }
+
   isConnected(): boolean {
     const size = this.#size;
     let reached = new Grid<boolean>(size, () => false);
@@ -216,6 +227,13 @@ export class CellView {
     return this.#map.getZoneLabel(this.#point);
   }
 
+  set microtheme(value: Microtheme | null) {
+    this.#map.setMicrotheme(this.#point, value);
+  }
+  get microtheme(): Microtheme | null {
+    return this.#map.getMicrotheme(this.#point);
+  }
+
   copyFrom(cell: CellView) {
     this.architecture = cell.architecture;
     this.pickup = cell.pickup;

src/skillsmodal.ts

@@ -45,7 +45,7 @@ export class SkillsModal {
     this.#drawpile.clear();
     let size = this.#size;
     this.#drawpile.add(0, () => {
-      D.fillRect(new Point(-4, -4), size.add(new Size(8, 8)), C.BG_INSET);
+      D.fillRect(new Point(-4, -4), size.add(new Size(8, 8)), C.BG_UI);
     });
 
     // draw skills
@@ -66,7 +66,7 @@ export class SkillsModal {
         0,
         (hover) => {
           // two column layout
-          let [bg, fg] = [C.BG_INSET, C.FG_BOLD];
+          let [bg, fg] = [C.BG_UI, C.FG_BOLD];
 
           let overpriced =
             getSkills().computeCost(skill) >
@@ -79,7 +79,7 @@ export class SkillsModal {
           }
 
           if (selected || hover) {
-            [bg, fg] = [C.FG_BOLD, C.BG_INSET];
+            [bg, fg] = [C.FG_BOLD, C.BG_UI];
             if (overpriced) {
               // still use the same BG, for contrast
             } else if (atMinimum) {
@@ -113,7 +113,7 @@ export class SkillsModal {
 
       this.#drawpile.add(0, () => {
         D.fillRect(new Point(160, 0), new Size(remainingWidth, 96), C.FG_BOLD);
-        D.drawText(createFullDescription(data), new Point(164, 0), C.BG_INSET, {
+        D.drawText(createFullDescription(data), new Point(164, 0), C.BG_UI, {
           forceWidth: remainingWidth - 8,
         });
       });

src/thralls.ts

@@ -264,7 +264,7 @@ export let thrallBat = table.add({
     options: [
       {
         skill: () => party1, // Rave
-        locked: "Act crazy to get her attention",
+        locked: "Act weird to get her attention",
         failure: '"I -- you -- you know we\'re not being filmed, right?"',
         unlockable: "Flash your eyes like a TV camera",
         success:

src/vaulttemplate.ts

@@ -29,8 +29,18 @@ import {
   thrallStare,
   thrallStealth,
 } from "./thralls.ts";
+import {
+  Microtheme,
+  MICROTHEME_GREEN,
+  MICROTHEME_NEON,
+  MICROTHEME_PINK,
+  MICROTHEME_PURPLE_TAN,
+  MICROTHEME_RED,
+  MICROTHEME_TEAL,
+} from "./colors.ts";
 
 export type VaultTemplate = {
+  microtheme: () => Microtheme | null;
   stats: { primary: Stat; secondary: Stat };
   roomLabels: {
     hall: string;
@@ -45,6 +55,7 @@ export type VaultTemplate = {
 export const standardVaultTemplates: VaultTemplate[] = [
   {
     // zoo
+    microtheme: () => MICROTHEME_GREEN,
     stats: { primary: "AGI", secondary: "PSI" },
     roomLabels: {
       hall: "Zoo",
@@ -97,6 +108,7 @@ export const standardVaultTemplates: VaultTemplate[] = [
   },
   {
     // blood bank
+    microtheme: () => MICROTHEME_RED,
     stats: { primary: "AGI", secondary: "INT" },
     roomLabels: {
       hall: "Blood Bank",
@@ -148,6 +160,7 @@ export const standardVaultTemplates: VaultTemplate[] = [
   },
   {
     // coffee shop
+    microtheme: () => MICROTHEME_PINK,
     stats: { primary: "PSI", secondary: "CHA" },
     roomLabels: {
       hall: "Coffee Shop",
@@ -200,6 +213,7 @@ export const standardVaultTemplates: VaultTemplate[] = [
   },
   {
     // optometrist
+    microtheme: () => MICROTHEME_TEAL,
     stats: { primary: "PSI", secondary: "PSI" },
     roomLabels: {
       hall: "Optometrist",
@@ -252,6 +266,7 @@ export const standardVaultTemplates: VaultTemplate[] = [
   },
   {
     // club,
+    microtheme: () => MICROTHEME_NEON,
     stats: { primary: "CHA", secondary: "PSI" },
     roomLabels: {
       hall: "Nightclub",
@@ -304,6 +319,7 @@ export const standardVaultTemplates: VaultTemplate[] = [
   },
   {
     // library
+    microtheme: () => MICROTHEME_PURPLE_TAN,
     stats: { primary: "INT", secondary: "CHA" },
     roomLabels: {
       hall: "Library",

src/world3d.ts

@@ -130,6 +130,6 @@ export class Block3D {
   }
 
   static standardWall(): Block3D {
-    return new Block3D(C.FG_BOLD, C.FG_TEXT, C.BG_WALL_OR_UNREVEALED);
+    return new Block3D(C.BG_OUTERWALL, C.BG_INNERWALL, C.BG_WALL_OR_UNREVEALED);
   }
 }