@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/falling-sticks/FallingSticksScene.ts

@@ -0,0 +1,245 @@
+// Cached 3D batons in a perspective meadow. Screen-space rules map onto the camera's play plane,
+// keeping taps and swipes aligned while the landscape has real depth, lighting and shadows.
+import { effects, type Entity, lathe, merge, type Model, type Quat, quat, type TransformBatch, type Vec3, type World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import { stickBlast } from '../shared/EngineBlasts';
+import {
+  at,
+  facing,
+  flowerMesh,
+  makeView,
+  pineMesh,
+  pointSize,
+  random,
+  sceneryTint,
+  spawnWorld,
+  tuftMesh,
+  type View3D
+} from '../shared/EngineMeadow';
+import { createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { type Layout, MAX_STICKS, STICK_COLORS } from './FallingSticksConstants';
+import type { Stick } from './FallingSticksRules';
+
+const DEG = Math.PI / 180;
+const TRAIL = 10;
+const SIDEWAYS = quat.z(-Math.PI / 2);
+let baton: Model | null = null;
+let bands: Model | null = null;
+
+/** A smoothly rounded baton, one unit long along X; shared by the entire pool. */
+const batonMesh = () =>
+  (baton ??= createShape(
+    merge([
+      {
+        geometry: lathe(
+          [
+            [0.08, -0.5],
+            [0.31, -0.49],
+            [0.44, -0.465],
+            [0.47, -0.43],
+            [0.47, 0.43],
+            [0.44, 0.465],
+            [0.31, 0.49],
+            [0.08, 0.5]
+          ],
+          { segments: 20 }
+        ),
+        rotation: SIDEWAYS
+      }
+    ]),
+    { center: false, shine: 0.35 }
+  ));
+
+/** Raised ivory grip rings keep their own color when the main body is tinted. */
+const bandMesh = () =>
+  (bands ??= createShape(
+    merge(
+      [-1, 1].map((side) => ({
+        geometry: lathe(
+          [
+            [0.475, -0.038],
+            [0.51, -0.026],
+            [0.51, 0.026],
+            [0.475, 0.038]
+          ],
+          { segments: 20 }
+        ),
+        rotation: SIDEWAYS,
+        position: [side * 0.34, 0, 0] as Vec3,
+        color: toColor('#FFF3D9')
+      }))
+    ),
+    { center: false, shine: 0.25 }
+  ));
+
+export type Scene = {
+  view: View3D;
+  scenery: Entity[];
+  sticks: Entity[];
+  trail: Entity[];
+  tumble: number[];
+};
+
+const stickColor = (st: Stick) => toColor(STICK_COLORS[st.color % STICK_COLORS.length]!);
+const depthFor = (s: Scene, i: number) => s.view.playDepth - i * 0.003;
+const stickScale = (l: Layout, s: Scene, i: number): Vec3 => {
+  const k = pointSize(s.view, depthFor(s, i));
+  return [l.stickLen * k, l.stickW * k, l.stickW * k];
+};
+
+function meadowView(l: Layout): View3D {
+  const horizon = Math.min(0.64, l.floorY / l.height - 0.18);
+  const v = makeView(l.width, l.height, { horizon, eyeHeight: 1, playDepth: 3.6 });
+  // The landing line meets the actual meadow, instead of leaving landed sticks floating in front of it.
+  v.eye = [v.eye[0], v.eye[1] + 0.025 - at(v, l.width / 2, l.floorY)[1], v.eye[2]];
+  return v;
+}
+
+export function buildScene(world: World, l: Layout, theme: GameTheme): Scene {
+  const view = meadowView(l);
+  const scenery = spawnWorld(world, view, theme, { sun: [0.8, 0.28], clouds: [0.25, 0.48], groundDetails: false });
+  const rand = random(73);
+  const tint = sceneryTint(theme);
+  // A distant treeline leaves a calm, open backdrop behind the catches.
+  for (let i = 0; i < 13; i++) {
+    const z = -(55 + rand() * 40);
+    const span = -z * view.tanHalf * (l.width / l.height);
+    const x = ((i / 12) * 2 - 1) * span * 1.15;
+    const size = 3.5 + rand() * 2.5;
+    scenery.push(world.spawn({ mesh: pineMesh(), position: [x, 0, z], scale: size, color: tint, pickable: false }));
+  }
+  // A restrained fringe marks the landing line; large foreground plants never obscure the batons.
+  for (let i = 0; i < 28; i++) {
+    const p = at(view, ((i + rand()) / 28) * l.width, l.floorY + 6 + rand() * 5);
+    scenery.push(
+      world.spawn({
+        mesh: i % 5 === 0 ? flowerMesh() : tuftMesh(),
+        position: [p[0], 0, p[2]],
+        rotation: quat.y(rand() * Math.PI * 2),
+        scale: pointSize(view) * (32 + rand() * 20),
+        color: tint,
+        pickable: false
+      })
+    );
+  }
+  const sticks = Array.from({ length: MAX_STICKS }, () => {
+    const root = world.spawn({ mesh: batonMesh(), scale: 0, pickable: false });
+    world.spawn({ mesh: bandMesh(), parent: root, pickable: false });
+    return root;
+  });
+  const trail = Array.from({ length: TRAIL }, () => world.spawn({ mesh: 'roundedBox', scale: 0, pickable: false }));
+  return { view, scenery, sticks, trail, tumble: sticks.map(() => 0) };
+}
+
+export function removeScene(world: World, s: Scene) {
+  for (const e of [...s.scenery, ...s.sticks, ...s.trail]) world.despawn(e);
+}
+
+/** Spin in the screen plane, then roll around the baton's length. */
+const turn = (v: View3D, rot: number, tumble: number): Quat => quat.multiply(facing(v, -rot * DEG), quat.x(tumble));
+
+export function placeStick(world: World, _l: Layout, s: Scene, i: number, st: Stick, spinning = true, updates?: TransformBatch) {
+  const tumble = spinning ? s.tumble[i]! + st.rot * DEG * 0.6 : s.tumble[i]!;
+  (updates ?? world).set(s.sticks[i]!, { position: at(s.view, st.x, st.y, depthFor(s, i)), rotation: turn(s.view, st.rot, tumble) });
+}
+
+/** Reuse a pooled baton, including its color and native animation state. */
+export function showStick(world: World, l: Layout, s: Scene, i: number, st: Stick) {
+  const e = s.sticks[i]!;
+  world.stopAnimation(e);
+  s.tumble[i] = st.color * 0.73;
+  world.set(e, { scale: stickScale(l, s, i), color: stickColor(st) });
+  placeStick(world, l, s, i, st);
+}
+
+export function hideStick(world: World, s: Scene, i: number) {
+  world.stopAnimation(s.sticks[i]!);
+  world.set(s.sticks[i]!, { scale: 0 });
+}
+
+/** A soft landing bounce followed by a tumble into the grass. */
+export function landStick(world: World, l: Layout, s: Scene, i: number, st: Stick) {
+  const e = s.sticks[i]!;
+  const bounce = Math.min(st.speed * 6, 24);
+  const depth = depthFor(s, i);
+  const restTumble = Math.round((s.tumble[i]! + st.rot * DEG * 0.6) / Math.PI) * Math.PI;
+  s.tumble[i] = restTumble;
+  world.animate(
+    e,
+    [
+      { position: at(s.view, st.x, st.restY - bounce, depth), at: 0.3 },
+      { position: at(s.view, st.x, st.restY, depth), rotation: turn(s.view, st.restRot, restTumble) }
+    ],
+    { duration: 0.45, easing: 'easeOut', path: 'smooth' }
+  );
+  const k = pointSize(s.view);
+  effects.shatter(world, {
+    position: at(s.view, st.x, l.floorY, depth),
+    count: 7,
+    mesh: 'sphere',
+    size: l.stickW * k * 0.3,
+    speed: 75 * k,
+    lifetime: 0.45,
+    gravity: -260 * k,
+    direction: [0, 1, 0],
+    spread: 0.9,
+    colors: [toColor('#8DA35D'), toColor('#5F9141')],
+    flash: false,
+    dust: false
+  });
+}
+
+/** Flash and pop the full baton, with a ring, flying chips and sparks along its length. */
+export function popStick(world: World, l: Layout, s: Scene, i: number, st: Stick) {
+  stickBlast(world, s.sticks[i]!, {
+    scale: stickScale(l, s, i),
+    position: at(s.view, st.x, st.y, depthFor(s, i)),
+    rotation: facing(s.view, -st.rot * DEG),
+    color: stickColor(st)
+  });
+}
+
+/** Connected tapered segments stay continuous even when touch events are far apart. */
+export function drawTrail(world: World, _l: Layout, s: Scene, points: number[]) {
+  const updates = world.transforms;
+  const n = points.length / 2;
+  const depth = s.view.playDepth - 0.2;
+  const k = pointSize(s.view, depth);
+  s.trail.forEach((e, i) => {
+    world.stopAnimation(e);
+    const j = n - 1 - i;
+    if (j < 0) {
+      updates.scale(e, 0);
+      return;
+    }
+    const ax = points[j * 2]!;
+    const ay = points[j * 2 + 1]!;
+    const bx = points[Math.max(0, j - 1) * 2]!;
+    const by = points[Math.max(0, j - 1) * 2 + 1]!;
+    const radius = 4 * (1 - i / TRAIL);
+    const position = at(s.view, (ax + bx) / 2, (ay + by) / 2, depth);
+    const rotation = facing(s.view, Math.atan2(by - ay, ax - bx));
+    updates.transform(e, position[0], position[1], position[2], rotation[0], rotation[1], rotation[2], rotation[3]);
+    updates.scale(e, (Math.hypot(ax - bx, ay - by) + radius) * k, radius * k, radius * k);
+    updates.color(e, 1.7, 1.6, 1.35, 0.7 * (1 - i / TRAIL));
+  });
+  updates.flush();
+}
+
+export function fadeTrail(world: World, s: Scene) {
+  world.animate(s.trail, { color: [1.7, 1.6, 1.35, 0], scale: 0 }, { duration: 0.18 });
+}
+
+export function celebrate(world: World, l: Layout, s: Scene) {
+  const k = pointSize(s.view);
+  effects.confetti(world, {
+    position: at(s.view, l.width / 2, l.height * 0.45),
+    count: 64,
+    size: 5 * k,
+    speed: l.right * k,
+    lifetime: 1.2,
+    gravity: -260 * k,
+    colors: STICK_COLORS.map((color) => toColor(color))
+  });
+}

package/src/games/find-different-number/FindDifferentNumber.tsx

@@ -0,0 +1,74 @@
+// Find Different Number's screen, on the Nayan engine: the board and its 100 tiles are one 3D scene
+// (an orthographic camera leaning back over the board), under Playtura's scoreboard, controls and
+// modals. The play is in FindDifferentNumberGame.ts (the puzzle in FindDifferentNumberRules.ts), what
+// it draws in FindDifferentNumberScene.ts.
+//
+// One world serves the whole visit: Start, Stop and Play Again reset it in place (a new round's
+// numbers swap onto the same tiles) and a theme change repaints it, so the GPU view is never rebuilt.
+import { HapticType } from '../../services/HapticsService';
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS, isTablet } from '../../services/UtilsService';
+import { engineGame, EngineGameScreen } from '../shared/EngineGameScreen';
+import { scoreColumn, textColumn, timerColumn } from '../shared/EngineHud';
+import { useEngineGame } from '../shared/useEngineGame';
+import { useLiveState } from '../shared/useLiveState';
+import { GAME_DURATION, getLayout, LIGHT } from './FindDifferentNumberConstants';
+import { createGame, dispose, drag, type GameEvent, reset, setLayout, setTheme, start, tick } from './FindDifferentNumberGame';
+import { DIFFERENT_COUNT } from './FindDifferentNumberRules';
+
+const SOUNDS = GAME_SOUNDS.FIND_DIFFERENT_NUMBER;
+
+/** Each event's sound and haptic, as the original version played them. */
+const FEEDBACK: Record<GameEvent, { sound: (typeof SOUNDS)[keyof typeof SOUNDS]; haptic: HapticType }> = {
+  correct: { sound: SOUNDS.CORRECT, haptic: HapticType.SUCCESS },
+  wrong: { sound: SOUNDS.WRONG, haptic: HapticType.WARNING },
+  win: { sound: SOUNDS.WIN, haptic: HapticType.SUCCESS },
+  lose: { sound: SOUNDS.GAME_OVER, haptic: HapticType.ERROR }
+};
+
+export const FindDifferentNumber = engineGame(GAME_IDS.FIND_DIFFERENT_NUMBER, (props) => {
+  const [score, setScore] = useLiveState(0);
+  const [time, setTime] = useLiveState(GAME_DURATION);
+  const [left, setLeft] = useLiveState(DIFFERENT_COUNT);
+
+  // Win or lose as the round ends (with the score so far)
+  const { game, theme, status, screen, gameOver } = useEngineGame(props, {
+    gameId: GAME_IDS.FIND_DIFFERENT_NUMBER,
+    create: createGame,
+    start,
+    reset,
+    dispose,
+    tick,
+    setTheme,
+    resize: (g, width, height, offset) => {
+      const l = getLayout(width, height, offset, isTablet);
+      setLayout(g, l);
+      return l.size + l.pad * 2;
+    },
+    drag,
+    sounds: SOUNDS,
+    onStart: (fx) => fx(SOUNDS.START),
+    wire: (g, fx) => {
+      g.onScore = setScore;
+      g.onTime = setTime;
+      g.onLeft = setLeft;
+      g.onEvent = (event) => fx(FEEDBACK[event].sound, FEEDBACK[event].haptic);
+    }
+  });
+
+  return (
+    <EngineGameScreen
+      {...screen}
+      light={LIGHT}
+      columns={[scoreColumn(score), textColumn('LEFT', left), timerColumn(time, theme)]}
+      subtext="Find the different numbers!"
+      gameOver={gameOver({
+        title: status === 'win' ? 'GREAT JOB!' : 'TIME UP!',
+        message: status === 'win' ? 'You found all the different numbers!' : 'You ran out of time!',
+        scoreLabel: 'Score',
+        score: game.score,
+        buttonText: status === 'win' ? 'Play Again!' : 'Try Again!'
+      })}
+    />
+  );
+});

package/src/games/find-different-number/FindDifferentNumberConstants.ts

@@ -0,0 +1,74 @@
+// Find Different Number's scoring, timings, colors and layout. Rules and scores match the original version
+// (games/find-different-number), so scores carry over.
+import { getScoreBoardTop } from '../shared/EngineHud';
+import type { TiltView } from '../shared/EngineTilt';
+import { frontLight, gameWidthFor } from '../shared/EngineUtils';
+import { GRID } from './FindDifferentNumberRules';
+
+// ── Rules and scoring ─────────────────────────────────────────────────
+
+export const GAME_DURATION = 120; // seconds
+export const POINTS_PER_FIND = 500;
+export const WRONG_PENALTY = 3; // seconds off the clock
+
+// ── Colors ────────────────────────────────────────────────────────────
+
+export const COLORS = {
+  // Classic: translucent white tiles on a frosted panel, white numbers (as the original board)
+  CLASSIC_BOARD: 'rgba(255, 255, 255, 0.10)',
+  CLASSIC_RIM: 'rgba(255, 255, 255, 0.35)',
+  // Light mode's board, a soft blue-grey so the white tiles stand out on it
+  LIGHT_BOARD: '#D3DBE8',
+  LIGHT_RIM: '#AEBBD0',
+  // Every theme's tiles, as Sudoku's cells
+  TILE: '#FFFFFF',
+  TEXT: '#0D1757',
+  FOUND: '#4FC562',
+  FOUND_TEXT: '#FFFFFF',
+  WRONG: '#FF5252'
+} as const;
+
+// ── The scene ─────────────────────────────────────────────────────────
+
+/** The camera looks straight down at the board. */
+export const TILT = 0;
+/** Evenly lit, straight from the camera and all ambient: every face keeps its exact color, with no shading anywhere. */
+export const LIGHT = frontLight([0, 0, 1], 1);
+/** A tile's height, of its width. */
+export const TILE_HEIGHT = 0.2;
+export const FOUND_SCALE = 1.18;
+
+// ── Layout (view points) ──────────────────────────────────────────────
+
+const SCOREBOARD_HEIGHT = 82;
+const CONTROLS_HEIGHT = 120;
+
+export type Layout = TiltView & { tile: number; gap: number; pitch: number; pad: number; size: number };
+
+/** Tiles as wide as the screen allows (as the original grid), smaller if the screen is short. */
+export function getLayout(width: number, height: number, offset: number, tablet: boolean): Layout {
+  const gap = tablet ? 6 : 4;
+  const pad = tablet ? 10 : 6;
+  const top = getScoreBoardTop(offset) + SCOREBOARD_HEIGHT;
+  const room = Math.max(200, height - top - CONTROLS_HEIGHT);
+  const fromWidth = (gameWidthFor(width) - pad * 2 - gap * (GRID - 1)) / GRID;
+  const fromHeight = (room / Math.cos(TILT) - pad * 2 - gap * (GRID - 1)) / GRID;
+  const tile = Math.max(18, Math.floor(Math.min(fromWidth, fromHeight)));
+  return { width, height, tilt: TILT, centerY: top + room / 2, tile, gap, pitch: tile + gap, pad, size: tile * GRID + gap * (GRID - 1) };
+}
+
+/** A cell's centre (row 0 along the top), in world units. */
+export const cellCentre = (l: Layout, i: number): [number, number] => {
+  const half = (GRID - 1) / 2;
+  return [((i % GRID) - half) * l.pitch, (half - Math.floor(i / GRID)) * l.pitch];
+};
+
+/** The cell under a board point (on a tile, not the gap between), or -1. */
+export function cellAt(l: Layout, x: number, y: number): number {
+  const lx = x + l.size / 2;
+  const ly = l.size / 2 - y;
+  const col = Math.floor(lx / l.pitch);
+  const row = Math.floor(ly / l.pitch);
+  if (row < 0 || row >= GRID || col < 0 || col >= GRID) return -1;
+  return lx - col * l.pitch <= l.tile && ly - row * l.pitch <= l.tile ? row * GRID + col : -1;
+}

package/src/games/find-different-number/FindDifferentNumberGame.ts

@@ -0,0 +1,174 @@
+// Find Different Number's play, with no React: build a game with `createGame`, give it a layout,
+// `start` it and `tick` it every frame. Every tile shows the same number but ten, which show a
+// look-alike: tap those. 500 points each; a wrong tap costs three seconds. Find all ten inside two
+// minutes to win (the time saved adds to the score); running out of time loses.
+//
+// The rules are the original store's (FindDifferentNumberRules.ts); the clock runs on the game's own clock.
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import { calculateTimeBasedScore } from '../../services/ScoringService';
+import type { GameTheme } from '../../services/ThemeService';
+import { aimTilted, unproject } from '../shared/EngineTilt';
+import { cellAt, GAME_DURATION, type Layout, POINTS_PER_FIND, TILE_HEIGHT, WRONG_PENALTY } from './FindDifferentNumberConstants';
+import { DIFFERENT_COUNT, generatePuzzle, type Puzzle } from './FindDifferentNumberRules';
+import {
+  buildScene,
+  celebrate,
+  dim,
+  intro,
+  markFound,
+  markWrong,
+  paint,
+  removeScene,
+  type Scene,
+  setSceneTheme,
+  showNumbers
+} from './FindDifferentNumberScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** correct / wrong: a tap's verdict; win / lose: how it ended. */
+export type GameEvent = 'correct' | 'wrong' | 'win' | 'lose';
+
+const WORLD_CAPACITY = 500; // 100 tiles with two digits each, the board, and the confetti
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const g = {
+    world,
+    camera,
+    theme,
+    layout: null as Layout | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    puzzle: generatePuzzle() as Puzzle,
+    found: new Set<number>(),
+    won: false,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onTime: (_t: number) => {},
+    onLeft: (_n: number) => {},
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.reset(0, GAME_DURATION);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    onTimeUp: () => g.phase === 'playing' && end(g, false)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+const left = (g: Game) => DIFFERENT_COUNT - g.found.size;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Lays the board out for the view (first layout, header height, rotation): rebuilt where things stand. */
+export function setLayout(g: Game, l: Layout) {
+  const first = !g.scene;
+  if (g.scene) removeScene(g.world, g.scene);
+  g.layout = l;
+  aimTilted(g.camera, l);
+  g.scene = buildScene(g.world, l, g.theme, g.puzzle.numbers, g.found);
+  if (first) intro(g.world, g.scene);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.layout && g.scene) setSceneTheme(g.world, g.layout, g.scene, theme, g.found);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** Starts on the round already shown. */
+export function start(g: Game) {
+  if (g.phase !== 'ready') return;
+  g.phase = 'playing';
+  g.world.scoreboard.startCountdown(GAME_DURATION);
+  g.onPhase('playing');
+}
+
+/** A fresh round, not started (Stop, Play Again, as the original game). */
+export function reset(g: Game) {
+  g.puzzle = generatePuzzle();
+  g.found = new Set();
+  g.won = false;
+  g.world.scoreboard.reset(0, GAME_DURATION);
+  g.phase = 'ready';
+  if (g.scene) {
+    showNumbers(g.world, g.scene, g.puzzle.numbers);
+    paint(g.world, g.scene, g.theme, g.found);
+    intro(g.world, g.scene);
+  }
+  g.onScore(0);
+  g.onTime(GAME_DURATION);
+  g.onLeft(DIFFERENT_COUNT);
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.world.update(dt);
+}
+
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  const { layout: l, scene: s } = g;
+  if (l && s) {
+    if (won) celebrate(g.world, l, s);
+    else dim(g.world, s, g.theme, g.found);
+  }
+  g.onPhase('over');
+  g.onEvent(won ? 'win' : 'lose');
+}
+
+// ── Taps ──────────────────────────────────────────────────────────────
+
+/** A tap on a cell: a different number found, or a wrong guess (three seconds off). Found cells are ignored. */
+export function tapCell(g: Game, i: number) {
+  if (g.phase !== 'playing' || i < 0 || i >= g.puzzle.numbers.length || g.found.has(i)) return;
+  const { layout: l, scene: s } = g;
+  if (g.puzzle.different.has(i)) {
+    g.found.add(i);
+    g.world.scoreboard.add(POINTS_PER_FIND);
+    const done = left(g) <= 0;
+    if (done) g.world.scoreboard.set(calculateTimeBasedScore(GAME_DURATION - g.timeLeft, GAME_DURATION, g.score));
+    if (s) markFound(g.world, s, i);
+    g.onScore(g.score);
+    g.onLeft(left(g));
+    g.onEvent('correct');
+    if (done) end(g, true);
+    return;
+  }
+  g.world.scoreboard.addTime(-Math.min(WRONG_PENALTY, g.world.scoreboard.seconds));
+  if (l && s) markWrong(g.world, l, s, g.camera, i, g.theme);
+  g.onTime(g.timeLeft);
+  g.onEvent('wrong');
+  if (g.timeLeft <= 0) end(g, false);
+}
+
+/** The cell under a view point (on the tiles' tops), or -1. */
+export function cellUnder(g: Game, x: number, y: number): number {
+  const l = g.layout;
+  if (!l) return -1;
+  const [wx, wy] = unproject(l, x, y, 1 + l.tile * TILE_HEIGHT);
+  return cellAt(l, wx, wy);
+}
+
+/** Taps land on touch-down, as the original grid's did. */
+export function drag(g: Game, { phase, x, y }: DragEvent) {
+  if (phase === 'start') tapCell(g, cellUnder(g, x, y));
+}

package/src/games/find-different-number/FindDifferentNumberRules.ts

@@ -0,0 +1,43 @@
+// Find Different Number's rules, with no React or engine: a 10 x 10 grid where every cell shows the
+// same two-digit number except ten that show a look-alike (one digit swapped for a similar one).
+// Ported from the original store (games/find-different-number), with the same random draws in the same order.
+
+export const GRID = 10;
+export const CELLS = GRID * GRID;
+export const DIFFERENT_COUNT = 10;
+
+/** Digits that look like each one. */
+const SIMILAR: readonly (readonly number[])[] = [
+  [8, 9, 6, 3],
+  [7, 4, 2],
+  [7, 1, 3],
+  [8, 9, 5, 0, 2],
+  [1, 9, 7, 6],
+  [6, 9, 3, 8],
+  [9, 5, 0, 8, 4],
+  [1, 2, 4],
+  [0, 3, 6, 9, 5],
+  [6, 0, 4, 3, 8, 5]
+];
+
+export type Puzzle = { numbers: number[]; different: Set<number> };
+
+export function generatePuzzle(): Puzzle {
+  const base = 10 + Math.floor(Math.random() * 90);
+  const tens = Math.floor(base / 10);
+  const ones = base % 10;
+  const candidates: number[] = [];
+  for (const alt of SIMILAR[tens]!) {
+    const n = alt * 10 + ones;
+    if (n >= 10 && n <= 99 && n !== base) candidates.push(n);
+  }
+  for (const alt of SIMILAR[ones]!) {
+    const n = tens * 10 + alt;
+    if (n >= 10 && n <= 99 && n !== base) candidates.push(n);
+  }
+  const diff = candidates[Math.floor(Math.random() * candidates.length)]!;
+  const different = new Set<number>();
+  while (different.size < DIFFERENT_COUNT) different.add(Math.floor(Math.random() * CELLS));
+  const numbers = Array.from({ length: CELLS }, (_, i) => (different.has(i) ? diff : base));
+  return { numbers, different };
+}