@nayan-ui/games 1.20.0 → 1.21.0

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

@@ -1,352 +0,0 @@
-// 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

@@ -1,76 +0,0 @@
-// 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

@@ -1,74 +0,0 @@
-// 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)
-  };
-}