Sauna Ukko

The four currencies

Pixel art generated in code

The game's pixel art is authored in code rather than loaded from sprite sheets. The two tracked binary images are scaffold leftovers: the Vite favicon and an unreferenced React logo. Palette-token matrices describe the characters and buildings.

A Ukko's face is a 24 × 16 grid of single characters:

const grid = Array.from({ length: 24 }, () => Array(16).fill(null));

Each character is a token, not a colour. 0 is transparent, 1 is dark hair, l is light hair, s/sl/sd/ss/sb are the five steps of a skin ramp, th/tw/tg/ts the towel ramp. The resolution happens at paint time:

const resolve = (token) => {
  if (token === 0) return null;
  if (token === 1) return hair.H;
  if (token === "l") return hair.Hl;
  return tones[token] ?? null;
};

That indirection keeps the system small. FACE_BASE is 79 lines and serves all five skin palettes, all seven hair colours and all six towel colours. None of those appear in the matrix.

Layers paint in a fixed order, each at its own offset:

The expression layer is the detail worth noting: it is three separate rows at fixed indices, not a block that starts somewhere. The face block is only seven rows tall, so the brows and mouth sit inside it rather than being composable.

Reproducing appearance from a seed

The generator is splitmix32, a well-known 32-bit PRNG. Eight lines:

function splitmix32(seed: number) {
  return () => {
    seed |= 0;
    seed = (seed + 0x9e3779b9) | 0;
    let t = seed ^ (seed >>> 16);
    t = Math.imul(t, 0x21f0aaad) | 0;
    t ^= t >>> 15;
    t = Math.imul(t, 0x735a2d97) | 0;
    return ((t ^ (t >>> 15)) >>> 0) / 4294967296;
  };
}

generateAppearance(seed) draws from it in a fixed order: skin, then hair (with bald appended to the pool as a real candidate), then hair style, towel, build, then a single rng() call whose value is compared against a chain of thresholds to pick one of ten accessories.

The order is the fragile part. Swap the towel and the hair and every face in the game changes. They still look correct. Nothing fails. The widget above ports the function call for call for that reason. The order is the specification.

The same seed gives the same appearance for the same generator, palette data and draw order. It is enough to reproduce appearance, not the entire game save.

The face is decoration; the traits are the game

generateAppearance decides what a worker looks like. What it does comes from 17 traits rolled from the same generator, continuing the stream past the appearance's draws:

{ trait: "HeatLover", weight: 15 },
{ trait: "IronLungs", weight: 12 },
{ trait: "JealousGhost", weight: 18 },  // Akka pool

Two separate pools: eight traits for Ukkos, nine for Akkas, rather than one list with a gender field on it. Weights are relative and unnormalised, so the table reads as "more likely than that" rather than as percentages. The roll is rejection sampling against a cumulative total, so a trait cannot appear twice. Several interact rather than stack independently.

JealousGhost is worth reading. It subtracts from the Löyly of everyone in the sauna when another female is present. IronLungs is a hidden gate on the smoke sauna. HeavyDrinker has a weight of 15, shows in the roster with an alcohol tolerance, and does nothing at all.

Drag-and-drop fights the library

One piece of this is genuinely awkward: hover-to-select. Dragging a worker over a building should open that building. @dnd-kit's PointerSensor takes capture of the pointer when a drag starts, so onPointerEnter never fires on whatever is underneath. The elements being dragged over are, by definition, not receiving events.

The fix was to stop using browser events:

const handleBuildingHoverChange = useCallback((buildingId, isOver) => {
  if (!isOver) {
    // Only clear if we are leaving the building that actually started the timer
    if (activeHoverIdRef.current === buildingId) {
      clearTimeout(hoverTimeoutRef.current);
      activeHoverIdRef.current = null;
    }
    return;
  }
  // Start 300ms timer to auto-select
}, []);

Three details, all of them load-bearing:

• Each droppable reports its own isOver upward.
• The timer lives in a useRef, not component state. A state timer resets on every re-render, and crossing the grid re-renders constantly.
• The leave handler checks the id before clearing. Without that, brushing past two buildings quickly cancels the first timer and selects the second.

The reasoning is written up in docs/technical/dnd-architecture.md: the pointer-capture problem, the three-part fix, and why each part is needed.

Worker-state fixes

The recorded fixes include clearing the roster during a prestige burn, checking liveness before autorest moves a worker and keeping both breeding parents in the hut for the full operation. These are specific state-transition corrections, alongside the drag-hover fix above, rather than evidence of comprehensive testing.

Simulation and save behaviour

The simulation and the view are separate. tickEngine, calculations, the generators and the visual builder are distinct modules. The tick engine takes a GameState and returns a new one, importing the store's type rather than the store.

Three prestige layers run over those currencies. Each reset discards a different thing.

The Zustand persistence path is versioned. For an incompatible save it can reset the state and display a recovery explanation, rather than preserve all old progress. That behaviour needs to be considered separately from intentional prestige resets.

docs/ is 1,498 lines across fourteen files: the formulas the code implements, balance tables, and a dated change log with thirteen entries over five days.

Testing is manual. No runner, no CI, and the one file that looks like a test re-implements the formula instead of importing it.

The history is granular rather than swept. Most commits name one trait or one bug:

Added trait: Melancholy: -50% Social, +50% Wisdom
Fixed the bug of dead ukkos staying after burnsauna
Fixed bug: autorest was missing check for dead ukkos before moving back to hot slot
Drag and drop logic is now working and consistent no matter where drag starts