@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/spider-solitaire/SpiderSolitaireScene.ts

@@ -0,0 +1,352 @@
+// Everything Spider Solitaire draws: real cards (a thin white card with its rank and suit standing on
+// its face, a blue patterned back) lying on the table in ten piles, the deck to deal from and the
+// finished runs along the bottom, and an outline for every empty place. Seen from a little in front of
+// straight down (shared/EngineTilt: an orthographic camera leaning back, one world unit per point).
+//
+// Every card is one entity (all sharing one mesh), its rank and suit pips attached to it, so it moves,
+// flips and lifts as one piece. Cards glide, arc and turn over in the engine's Rust core; JS only says
+// where each one should be.
+import { type Color, effects, type Entity, extrude, merge, type Model, Path, type Quat, quat, type Vec3, type World } from '@nayan-ui/engine';
+import { COLORS as GAME_COLORS } from '../../services/GamesConstants';
+import type { GameTheme } from '../../services/ThemeService';
+import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
+import { GLYPH_WIDTH, glyphMesh } from '../shared/EngineGlyphs';
+import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
+import { placeTiltedBackdrop } from '../shared/EngineTilt';
+import { toColor } from '../shared/EngineUtils';
+import { CARD_RATIO, COLORS, FACE_DOWN_STEP, FACE_UP_STEP, type Layout, MOVE_TIME, SMALL, SUIT_COLORS, THICKNESS } from './SpiderSolitaireConstants';
+import { type Board, type Card, PILES, type Suit } from './SpiderSolitaireRules';
+
+const meshes = new Map<string, Model>();
+const cached = (key: string, build: () => Model) => {
+  let m = meshes.get(key);
+  if (!m) {
+    m = cacheGameAsset('spider-solitaire/SpiderSolitaireScene:' + key, build);
+    meshes.set(key, m);
+  }
+  return m;
+};
+const BACKDROP_DEPTH = 30;
+const HALF_H = CARD_RATIO / 2;
+const RADIUS = 0.07;
+const FACE_UP: Quat = [0, 0, 0, 1];
+const FACE_DOWN = quat.y(Math.PI);
+const EDGE_ON = quat.y(Math.PI / 2);
+const LIFT = 7; // a picked-up run rises off the table this far
+const HELD = 40; // and a dragged one this far
+
+// ── Meshes (one card width across) ────────────────────────────────────
+
+const rrect = (inset: number, path = new Path()) =>
+  path.addRoundedRect(-0.5 + inset, -HALF_H + inset, 1 - inset * 2, CARD_RATIO - inset * 2, Math.max(0.01, RADIUS - inset));
+
+/** A card: a thin white slab, its back (facing -z) blue in a white frame with a lattice of diamonds. */
+const cardMesh = () =>
+  cached('ss-card', () => {
+    const t = THICKNESS;
+    // A flat layer on the back, turned to face -z, just behind the slab
+    const back = (path: Path, color: string, k: number) => ({
+      geometry: extrude(path, { depth: 0, fillRule: 'evenodd' as const }),
+      rotation: FACE_DOWN,
+      position: [0, 0, -t / 2 - 0.002 * k] as Vec3,
+      color: toColor(color)
+    });
+    const lattice = new Path();
+    for (let r = 0; r < 7; r++)
+      for (let c = 0; c < 4; c++) {
+        const x = -0.27 + c * 0.18 + (r % 2 ? 0.09 : 0);
+        const y = -0.5 + r * 0.166;
+        if (x > 0.3) continue;
+        lattice.addPolygon([
+          [x, y - 0.07],
+          [x + 0.06, y],
+          [x, y + 0.07],
+          [x - 0.06, y]
+        ]);
+      }
+    return createShape(
+      merge([
+        { geometry: extrude(rrect(0), { depth: t }), color: toColor(COLORS.FACE) },
+        back(rrect(0.035), COLORS.BACK, 1),
+        back(rrect(0.075, rrect(0.095)), COLORS.BACK_FRAME, 2),
+        back(lattice, COLORS.BACK_LIGHT, 2)
+      ]),
+      { center: false, shine: 0.35 }
+    );
+  });
+
+const SUIT_PATHS: Record<Suit, string> = {
+  hearts:
+    'M0.5,0.95 C0.2,0.72 0,0.52 0,0.3 C0,0.12 0.13,0 0.28,0 C0.38,0 0.46,0.06 0.5,0.15 C0.54,0.06 0.62,0 0.72,0 C0.87,0 1,0.12 1,0.3 C1,0.52 0.8,0.72 0.5,0.95 Z',
+  diamonds: 'M0.5,0 L0.86,0.5 L0.5,1 L0.14,0.5 Z',
+  clubs:
+    'M0.5,0 C0.64,0 0.75,0.11 0.75,0.25 C0.75,0.33 0.71,0.4 0.66,0.44 C0.7,0.42 0.74,0.41 0.78,0.41 C0.92,0.41 1,0.52 1,0.65 C1,0.79 0.9,0.89 0.77,0.89 C0.67,0.89 0.58,0.83 0.54,0.75 C0.56,0.86 0.6,0.94 0.68,1 L0.32,1 C0.4,0.94 0.44,0.86 0.46,0.75 C0.42,0.83 0.33,0.89 0.23,0.89 C0.1,0.89 0,0.79 0,0.65 C0,0.52 0.08,0.41 0.22,0.41 C0.26,0.41 0.3,0.42 0.34,0.44 C0.29,0.4 0.25,0.33 0.25,0.25 C0.25,0.11 0.36,0 0.5,0 Z',
+  spades:
+    'M0.5,0 C0.8,0.25 1,0.42 1,0.6 C1,0.75 0.88,0.84 0.75,0.84 C0.65,0.84 0.57,0.79 0.53,0.72 C0.55,0.84 0.6,0.93 0.68,1 L0.32,1 C0.4,0.93 0.45,0.84 0.47,0.72 C0.43,0.79 0.35,0.84 0.25,0.84 C0.12,0.84 0,0.75 0,0.6 C0,0.42 0.2,0.25 0.5,0 Z'
+};
+/** A suit's pip, one unit across at its widest, with a little depth. */
+const suitMesh = (suit: Suit) =>
+  cached(`ss-suit:${suit}`, () => createShape(extrude(Path.fromSVG(SUIT_PATHS[suit]), { depth: 0.08 }), { fit: 1, shine: 0.5 }));
+
+/** An empty place's outline, and the faint card-shaped fill inside it. */
+const slotRingMesh = () =>
+  cached('ss-slot-ring', () => createShape(extrude(rrect(0, rrect(0.035)), { depth: 0, fillRule: 'evenodd' }), { center: false }));
+const slotFillMesh = () => cached('ss-slot-fill', () => createShape(extrude(rrect(0.035), { depth: 0 }), { center: false }));
+
+// ── Spawning ──────────────────────────────────────────────────────────
+
+/** Where a card should be: its centre on the table, its height, face up or down, its size, picked up or not. */
+export type Spot = { x: number; y: number; z: number; faceUp: boolean; small: boolean; selected: boolean };
+type CardView = { body: Entity; spot: Spot | null };
+type Slot = { ring: Entity; fill: Entity | null };
+
+export type Scene = {
+  backdrop: Entity;
+  piles: Slot[];
+  stock: Slot;
+  foundation: Slot;
+  cards: Map<string, CardView>;
+};
+
+const slotColor = (theme: GameTheme): Color => toColor(theme.mode === 'classic' ? COLORS.CLASSIC_SLOT : theme.BOARD.BORDER);
+const slotFill = (theme: GameTheme): Color => toColor(theme.mode === 'classic' ? GAME_COLORS.BG_35 : theme.BOARD.CELL_EMPTY);
+
+function spawnSlot(world: World, l: Layout, x: number, y: number, small: boolean, filled: boolean, theme: GameTheme): Slot {
+  const scale = l.card * (small ? SMALL : 1);
+  const ring = world.spawn({ mesh: slotRingMesh(), position: [x, y, 0.1], scale, color: slotColor(theme), pickable: false });
+  const fill = filled ? world.spawn({ mesh: slotFillMesh(), position: [x, y, 0.05], scale, color: slotFill(theme), pickable: false }) : null;
+  return { ring, fill };
+}
+
+/** The pips on a card's face (attached to it): its rank top left, a small suit top right, a big one in the middle. */
+function spawnFace(world: World, body: Entity, card: Card) {
+  const color = toColor(SUIT_COLORS[card.suit]);
+  const z = THICKNESS / 2;
+  const chars = card.value.split('');
+  const size = chars.length > 1 ? 0.27 : 0.32;
+  const advance = size * GLYPH_WIDTH * 1.05;
+  chars.forEach((ch, i) => {
+    const x = -0.33 + (i - (chars.length - 1) / 2) * advance + (chars.length > 1 ? 0.04 : 0);
+    world.spawn({ mesh: glyphMesh(ch), parent: body, position: [x, HALF_H - 0.24, z], scale: size, color, pickable: false });
+  });
+  const suit = suitMesh(card.suit);
+  world.spawn({ mesh: suit, parent: body, position: [0.29, HALF_H - 0.24, z + 0.02], scale: 0.26, color, pickable: false });
+  world.spawn({ mesh: suit, parent: body, position: [0, -0.16, z + 0.02], scale: 0.56, color, pickable: false });
+}
+
+/** The table: the backdrop, an outline for each pile, the deck's place and the first run's, and all 104 cards. */
+export function buildScene(world: World, l: Layout, theme: GameTheme, cards: Card[]): Scene {
+  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
+  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
+  const pileY = l.pileTop - l.cardH / 2;
+  const small = l.card * SMALL;
+  const s: Scene = {
+    backdrop,
+    piles: l.columns.map((x) => spawnSlot(world, l, x, pileY, false, false, theme)),
+    stock: spawnSlot(world, l, l.stockRight - small / 2, l.rowY, true, true, theme),
+    foundation: spawnSlot(world, l, l.foundationX, l.rowY, true, true, theme),
+    cards: new Map()
+  };
+  for (const card of cards) {
+    const body = world.spawn({
+      mesh: cardMesh(),
+      scale: l.card * SMALL,
+      rotation: FACE_DOWN,
+      position: [l.stockRight - small / 2, l.rowY, 1],
+      pickable: false
+    });
+    spawnFace(world, body, card);
+    s.cards.set(card.id, { body, spot: { x: l.stockRight - small / 2, y: l.rowY, z: 1, faceUp: false, small: true, selected: false } });
+  }
+  return s;
+}
+
+export function removeScene(world: World, s: Scene) {
+  const slots = [...s.piles, s.stock, s.foundation];
+  for (const e of [s.backdrop, ...slots.flatMap((x) => [x.ring, x.fill]), ...Array.from(s.cards.values(), (c) => c.body)])
+    if (e != null) world.despawn(e);
+}
+
+export function setSceneTheme(world: World, s: Scene, theme: GameTheme) {
+  setBackdropTheme(world, s.backdrop, theme);
+  for (const slot of [...s.piles, s.stock, s.foundation]) {
+    world.set(slot.ring, { color: slotColor(theme) });
+    if (slot.fill != null) world.set(slot.fill, { color: slotFill(theme) });
+  }
+}
+
+// ── Where every card goes ─────────────────────────────────────────────
+
+/** How far down from the pile's top edge each card's top edge is: the original steps, squeezed if the pile would run too long. */
+export function pileOffsets(l: Layout, pile: Card[]): number[] {
+  const steps = pile.map((c) => (c.faceUp ? FACE_UP_STEP : FACE_DOWN_STEP) * l.cardH);
+  let total = 0;
+  for (let i = 0; i < pile.length - 1; i++) total += steps[i]!;
+  const room = l.pileTop - l.pileBottom - l.cardH;
+  const k = total > room && total > 0 ? Math.max(0, room) / total : 1;
+  const out: number[] = [];
+  let at = 0;
+  for (let i = 0; i < pile.length; i++) {
+    out.push(at);
+    at += steps[i]! * k;
+  }
+  return out;
+}
+
+/** A pile card's place: its centre and height (each card a little above the one under it). */
+export function pileSpot(l: Layout, column: number, offset: number, index: number): [number, number, number] {
+  return [l.columns[column]!, l.pileTop - offset - l.cardH / 2, l.dz * (index + 1)];
+}
+
+/** What the player holds: a picked-up run (lifted), or a dragged one (following the finger, its top card's centre at x, y). */
+export type Held = { pile: number; index: number; drag: { x: number; y: number } | null } | null;
+
+/** Every card's place on the table, from the board and what's held. */
+export function layoutCards(l: Layout, b: Board, held: Held, onlyHeld = false): Map<string, Spot> {
+  const spots = new Map<string, Spot>();
+  if (onlyHeld && held?.drag) {
+    const pile = b.tableau[held.pile]!;
+    const offsets = pileOffsets(l, pile);
+    for (let i = held.index; i < pile.length; i++) {
+      const card = pile[i]!;
+      spots.set(card.id, {
+        x: held.drag.x,
+        y: held.drag.y - (offsets[i]! - offsets[held.index]!),
+        z: HELD + l.dz * (i - held.index),
+        faceUp: card.faceUp,
+        small: false,
+        selected: true
+      });
+    }
+    return spots;
+  }
+  b.tableau.forEach((pile, col) => {
+    const offsets = pileOffsets(l, pile);
+    pile.forEach((card, i) => {
+      const lifted = held !== null && held.pile === col && i >= held.index;
+      let [x, y, z] = pileSpot(l, col, offsets[i]!, i);
+      if (lifted && held.drag) {
+        const below = offsets[i]! - offsets[held.index]!;
+        x = held.drag.x;
+        y = held.drag.y - below;
+        z = HELD + l.dz * (i - held.index);
+      } else if (lifted) {
+        y += 2;
+        z += LIFT;
+      }
+      spots.set(card.id, { x, y, z, faceUp: card.faceUp, small: false, selected: lifted });
+    });
+  });
+  // The deck: a stack for each deal left, fanned leftward from the deck's place, the next to deal on the right
+  const small = l.card * SMALL;
+  const deals = Math.ceil(b.stock.length / PILES);
+  const thick = small * THICKNESS + 0.15;
+  b.stock.forEach((card, i) => {
+    const group = Math.floor(i / PILES);
+    spots.set(card.id, {
+      x: l.stockRight - small / 2 - (deals - 1 - group) * small * 0.22,
+      y: l.rowY,
+      z: 1 + (group * PILES + (i % PILES)) * thick * 0.3,
+      faceUp: false,
+      small: true,
+      selected: false
+    });
+  });
+  // The finished runs, fanned rightward from the first's place, each with its King on top
+  b.completed.forEach((run, r) => {
+    run.forEach((card, j) => {
+      spots.set(card.id, {
+        x: l.foundationX + r * small * 0.5,
+        y: l.rowY,
+        z: 1 + r * 3 + (12 - j) * 0.2,
+        faceUp: true,
+        small: true,
+        selected: false
+      });
+    });
+  });
+  return spots;
+}
+
+const scaleOf = (l: Layout, s: Spot) => l.card * (s.small ? SMALL : 1);
+const same = (a: Spot, b: Spot) =>
+  a.x === b.x && a.y === b.y && a.z === b.z && a.faceUp === b.faceUp && a.small === b.small && a.selected === b.selected;
+
+/**
+ * Moves every card that's changed place to its new one: it glides (rising over the cards between and
+ * turning over on the way if it flips), after `delay(id)` seconds. `instant` puts them there at once
+ * (a dragged run following the finger).
+ */
+export function placeCards(world: World, l: Layout, s: Scene, spots: Map<string, Spot>, delay: (id: string) => number = () => 0, instant = false) {
+  for (const [id, spot] of spots) {
+    const view = s.cards.get(id);
+    if (!view) continue;
+    const prev = view.spot;
+    if (prev && same(prev, spot)) continue;
+    view.spot = spot;
+    const position: Vec3 = [spot.x, spot.y, spot.z];
+    const rotation = spot.faceUp ? FACE_UP : FACE_DOWN;
+    const scale = scaleOf(l, spot);
+    const color = toColor(spot.selected ? COLORS.SELECTED : COLORS.FACE);
+    if (instant || !prev) {
+      world.stopAnimation(view.body);
+      world.set(view.body, { position, rotation, scale, color });
+      continue;
+    }
+    if (prev.selected !== spot.selected) world.set(view.body, { color });
+    const far = Math.hypot(prev.x - spot.x, prev.y - spot.y);
+    const flips = prev.faceUp !== spot.faceUp;
+    if (far < 1 && !flips) {
+      // A lift or a set-down in place
+      world.animate(view.body, { position, scale }, { duration: 0.14, delay: delay(id) });
+      continue;
+    }
+    // Up over the others, across, and down, turning over at the top if it flips
+    const top = Math.max(prev.z, spot.z) + (far > 1 ? 18 + far * 0.05 : 10);
+    const mid: Vec3 = [(prev.x + spot.x) / 2, (prev.y + spot.y) / 2, top];
+    world.animate(
+      view.body,
+      [
+        { position: mid, ...(flips ? { rotation: EDGE_ON } : {}), scale: (scale + scaleOf(l, prev)) / 2, at: 0.5 },
+        { position, rotation, scale }
+      ],
+      { duration: MOVE_TIME + Math.min(0.16, far * 0.0006), delay: delay(id), path: 'smooth', easing: 'easeInOut' }
+    );
+  }
+}
+
+// ── Feedback ──────────────────────────────────────────────────────────
+
+/** A move that isn't allowed: the cards shake where they are. */
+export function shakeCards(world: World, s: Scene, ids: string[]) {
+  for (const id of ids) {
+    const v = s.cards.get(id);
+    if (v) world.animate(v.body, { shake: 3 }, { duration: 0.25 });
+  }
+}
+
+/** A finished run lifted off: a sparkle where it was. */
+export function sparkle(world: World, l: Layout, x: number, y: number) {
+  effects.sparkle(world, {
+    position: [x, y, 30],
+    count: 26,
+    size: l.card * 0.1,
+    speed: l.card * 3,
+    lifetime: 0.7,
+    gravity: -l.card * 3,
+    colors: ['#FFD700', '#FFF59D', '#FF8A80', '#FFFFFF'].map((c) => toColor(c))
+  });
+}
+
+/** All eight runs home: confetti over the table. */
+export function celebrate(world: World, l: Layout) {
+  effects.confetti(world, {
+    position: [0, (l.pileTop + l.pileBottom) / 2, 60],
+    count: 80,
+    size: l.card * 0.14,
+    speed: l.width * 1.2,
+    lifetime: 1.4,
+    gravity: -l.width * 2,
+    colors: ['#FFD700', '#4CAF50', '#2196F3', '#E74C3C'].map((c) => toColor(c))
+  });
+}

package/src/games/stack-tower/StackTower.tsx

@@ -0,0 +1,76 @@
+// Stack Tower's screen, on the Nayan engine: the tower, the sliding block and the plinth are one 3D
+// scene (an orthographic camera looking down a little from in front), under Playtura's scoreboard,
+// controls and modals. The rules are in StackTowerGame.ts, what it draws in StackTowerScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place, so the GPU view is
+// never rebuilt. JS slides the block and steps the clock and the world once a frame; landings and
+// misses animate in the engine's Rust core.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { getLayout, LIGHT, TIME_LIMIT } from './StackTowerConstants';
+import { createGame, dispose, type GameEvent, reset, setLayout, setTheme, start, tap, tick } from './StackTowerGame';
+
+const SOUNDS = GAME_SOUNDS.STACK_TOWER;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  place: { sound: SOUNDS.PLACE, haptic: HapticType.MEDIUM },
+  perfect: { sound: SOUNDS.PERFECT, haptic: HapticType.SUCCESS },
+  miss: { sound: SOUNDS.MISS, haptic: HapticType.ERROR }
+};
+
+export const StackTower = engineGame(GAME_IDS.STACK_TOWER, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [timeLeft, setTimeLeft] = useLiveState(TIME_LIMIT);
+
+  // A win when the clock runs out, a loss on a miss
+  const { theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.STACK_TOWER,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    // Lay the tower out for the view.
+    resize: (g, width, height) => {
+      const l = getLayout(width, height);
+      setLayout(g, l);
+      return l.gameWidth;
+    },
+    // Drops the block the moment a finger touches down, where the player sees it
+    drag: (g, e) => {
+      if (e.phase === 'start') tap(g);
+    },
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START, HapticType.SUCCESS),
+    onStop: (fx) => fx(null, HapticType.MEDIUM),
+    onOver: (fx, s) => fx(s === 'win' ? SOUNDS.WIN : SOUNDS.GAME_OVER, s === 'win' ? HapticType.SUCCESS : HapticType.ERROR),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onTime = setTimeLeft;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), timerColumn(timeLeft, theme)]}
+      subtext="Stack blocks with care!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'AMAZING!' : 'GAME OVER',
+        message: status === 'win' ? 'Perfect tower!' : 'Great stacking!',
+        scoreLabel: 'Final Score',
+        score,
+        buttonText: 'Stack Again!'
+      })}
+    />
+  );
+});

package/src/games/stack-tower/StackTowerConstants.ts

@@ -0,0 +1,74 @@
+// Stack Tower's rules, physics, timings and layout. Rules, speeds (points per 60 Hz frame) and scoring
+// match the original version (games/stack-tower), so scores and feel carry over: blocks keep their full
+// width, and the round ends on a miss (a loss) or when the clock runs out (a win).
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+
+// ── Rules ─────────────────────────────────────────────────────────────
+
+export const TIME_LIMIT = 120; // seconds
+export const POINTS_PER_BLOCK = 500;
+export const PERFECT_BONUS = 250; // times the perfect streak
+export const PERFECT_THRESHOLD = 3; // points of overhang still counted as perfect
+export const MIN_OVERLAP_RATIO = 0.4;
+
+/** Cycled up the tower. */
+export const BLOCK_COLORS = ['#FF4757', '#FFA502', '#2ED573', '#1E90FF', '#FF6BD6', '#A55EEA', '#00D2D3', '#FF6348'] as const;
+
+// ── Physics ───────────────────────────────────────────────────────────
+
+export const FRAME_MS = 16.67; // the slide speed is per this much time
+export const MAX_FRAMES = 2; // a long frame slides at most two frames' worth
+
+// ── Timings (seconds) ─────────────────────────────────────────────────
+
+export const NEXT_BLOCK_DELAY = 0.2;
+export const MISS_TIME = 0.45; // a missed block tumbles off
+export const GAME_OVER_DELAY = 0.3; // ...and the round ends this long after
+export const SPAWN_FADE = 0.2;
+export const PERFECT_SHOW = 0.6;
+export const CAMERA_TIME = 0.35; // the view scrolls up after a new block
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera looks down a little from in front, so the tower's top and its depth show. */
+export const TILT = -0.24;
+/** Lit from the upper left; faces toward the camera (+z) keep their exact color. */
+export const LIGHT = frontLight([-0.45, 0.6, 1], 0.5);
+
+// ── Layout (view points; tower positions are view points with y down, as the original game used) ──
+
+const TABLET_WIDTH = 640;
+
+export type Layout = TiltView & {
+  /** The slide's bounds: the game area, 30 narrower than the screen and at most 500 across. */
+  left: number;
+  gameWidth: number;
+  blockWidth: number;
+  blockHeight: number;
+  /** Front to back. */
+  blockDepth: number;
+  speed: number;
+  /** The base block's top. */
+  baseY: number;
+};
+
+export function getLayout(width: number, height: number): Layout {
+  const tablet = width > TABLET_WIDTH;
+  const gameWidth = gameWidthFor(width);
+  const blockWidth = tablet ? 200 : 160;
+  return {
+    width,
+    height,
+    centerY: height / 2,
+    tilt: TILT,
+    left: (width - gameWidth) / 2,
+    gameWidth,
+    blockWidth,
+    blockHeight: tablet ? 28 : 22,
+    // Shallow enough that the sliding block's open top is a slim strip, not twice a stacked block's height
+    blockDepth: blockWidth * 0.36,
+    speed: tablet ? 4.5 : 3.5,
+    baseY: height - (tablet ? 180 : 160)
+  };
+}