TITLE: Isometric City — a tiny living skyline on a rolling day
PROMPT: Build a single self-contained HTML page (no external assets, no libraries, all CSS in one inline <style>, all JS in one inline <script> at the end of body) called "Isometric City". Concept: a small isometric city builder on a 12x12 tile grid where clicking raises buildings, a day/night cycle rolls the light across the facades, cars drive tile to tile along the roads and birds cross the sky. Palette: #d9e6e3 day ground, #7fb3a8 grass, #e8b04b sun, #2b3a55 night, #e2e8f0 glass, plus warm house walls #e9ddc9 and terracotta roofs #c97a5a. Typography: HUD numbers and labels in ui-monospace uppercase with 0.24em tracking, tool labels in system-ui 600 uppercase, and the title in Georgia italic. Layout: a single full-viewport DPR-scaled canvas (width = cssW * devicePixelRatio, ctx.setTransform) with a fixed HUD card top-left (translucent white, 16px radius, backdrop blur) showing day, population and the active tool; a centred instruction line; a floating tool bar bottom-centre with six tools (house, tower, park, water, road, demolish) each showing its keyboard digit; and a time slider in its own card bottom-right. Projection: iso(gx,gy) = origin + ((gx-gy)*TILE_W/2*S, (gx+gy)*TILE_H/2*S) with TILE_W 62, TILE_H 31 and a scale S fitted from the viewport (clamped 0.34-1.7) so the whole grid plus three storeys of headroom always fits between 360px and 1920px; the origin centres the mass including building height. Every tile draws its ground diamond first (checker-shaded by 2.2% for a subtle grid), then a building as three iso faces — left and right walls and a raised top diamond — with the wall multipliers driven by the sun's azimuth (litLeft = (1 - cos(theta))/2) so morning light comes from the left and evening light from the right. Towers carry a deterministic window grid drawn as small parallelograms on both visible faces using a hash of tile seed + column + row, which turns warm gold as night falls; houses get a bright roof top face; parks scatter three tapered iso trees; water adds a slow white shimmer band. Depth sorting is painter's order by (gx+gy) computed once at boot. Day/night: dayT 0-1 advances automatically (about 110 seconds per day, incrementing the day counter on wrap) and the time slider scrubs it directly; sun height = sin(theta) drives a night factor of clamp((0.25 - sin)/0.75, 0, 1), a dusk factor peaking at the horizon, and every ground, wall, roof, road and car colour is mixed toward #2b3a55 by the night factor, with the sky gradient mixing from #cfe0dd/#eef3f1 to #0f1525/#2b3a55 and a warm #e8b04b band at dawn and dusk; a sun disc with a radial glow arcs left-to-top-to-right, becoming a crescent moon at night; a final low-alpha navy wash grades the whole frame. Cars are stored as tile-to-tile lerps with a speed, are drawn inside the tile loop of whichever tile they currently occupy so they sort correctly, and re-route to a random road neighbour (never reversing) at each tile boundary; they get a warm headlight dot at night. Four birds cross the upper sky with a sine bob and a small wing flap. A seeded city (a lake, three roads, twenty houses/towers/parks) is laid down at boot with full animation progress so a frozen-clock render shows a complete living skyline. Interaction: pointerdown picks the tile under the cursor by ray-casting the raised top-face polygons in reverse painter order, then places the selected tool; shift-click or the demolish tool removes a tile with an expanding white flash; hovering highlights the tile's top face with a gold outline; tool buttons or keys 1-6 switch tools; the time slider scrubs the day. New buildings animate in with a transform-style squash (height scaled by an easeOutCubic with a 0.3 overshoot, never opacity), and the population counter lerps smoothly to the new total. prefers-reduced-motion pauses the automatic day cycle. One IIFE, all shared state declared above boot, zero console errors.
DESCRIPTION: A serene little isometric city on a pale ground, drawn entirely in code. Twelve by twelve tiles of pale stone with a lake in one corner, three streets crossing the grid, terracotta-roofed houses and glass towers with window grids, and tiny parks with tapered trees. The sun arcs across the sky and the whole palette rolls from bright day to deep blue night, windows lighting up one by one as it darkens, while small cars drive the roads and birds cross overhead. You click a tile and a building squashes up into place; the population counter ticks upward. A translucent HUD in the corner reports the day, the population and the active tool, and a single slider lets you drag the sun anywhere you like.
TECHNIQUES: Isometric projection math with a viewport-fitted scale; painter's-order depth sorting by (gx+gy); three-face prism shading with a light azimuth that flips between morning and evening; deterministic hash-driven window grids that turn into warm lit windows at night; per-colour mixing toward a night tint instead of a global overlay, plus a low-alpha navy grade; procedural sky gradient with an arcing sun/moon and radial glow; tile-to-tile car lerps drawn inside the tile loop for correct occlusion; sine-bobbed bird strokes; polygon ray-casting hit test against raised top faces for hover and click; transform-style squash entrance for new buildings; smoothed population counter; DPR-scaled canvas with setTransform on measure; fixed glass HUD, tool bar and time-slider cards.
INTERACTION: Click any tile to build the selected tool there — the building squashes up into place and the population counter animates to its new value. Shift-click, or switch to the demolish tool and click, to remove a tile with a white expanding flash. Hover a tile and its top face is outlined in gold. Pick a tool from the bottom bar (house, tower, park, water, road, demolish) or press keys 1-6; the HUD's tool readout updates. Drag the time slider to scrub the day and night cycle — the sun or moon arcs across the sky, shadows flip side, and the tower windows light up as it gets dark. The day counter advances by itself as the cycle rolls, cars re-route along whatever roads exist, and birds keep crossing. Resizing re-fits and re-centres the whole city.