@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/search-grid/SearchGridGame.ts

@@ -1,209 +0,0 @@
-// Word Search and Number Search's rules, with no React: build a game with `createGame` (it deals a grid
-// from the game's list and alphabet), give it a layout, `start` it and `tick` it every frame. Drag
-// along a row, column or diagonal; let go on exactly a hidden entry (either way round) to find it for
-// 1,000 points. Find all seven inside five minutes to win (the score then rewards the time left, as the
-// original versions did).
-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 { type Cell, cellAt, FIND_POINTS, generate, type Layout, lineCells, matchOf, type Placed, TIME_LIMIT } from './SearchGridConstants';
-import {
-  buildScene,
-  celebrate,
-  followSelection,
-  hideSelection,
-  markFound,
-  relabel,
-  removeScene,
-  type Scene,
-  setSceneTheme,
-  showSelection
-} from './SearchGridScene';
-
-export type Phase = 'ready' | 'playing' | 'over';
-export type Content = { list: readonly string[]; alphabet: string };
-
-const WORLD_CAPACITY = 400; // 100 tiles and their glyphs, the pills, the board, and bursts
-
-export function createGame(theme: GameTheme, content: Content) {
-  const world = new World(WORLD_CAPACITY);
-  const camera: Camera = { eye: [0, 0, 240], target: [0, 0, 0], fov: 1, ortho: 1 };
-  const { grid, placed } = generate(content.list, content.alphabet);
-  const g = {
-    world,
-    camera,
-    theme,
-    content,
-    layout: null as Layout | null,
-    scene: null as Scene | null,
-    phase: 'ready' as Phase,
-    grid,
-    placed,
-    found: new Set<string>(),
-    /** The line being dragged: its first cell and where it ends now. */
-    start: null as Cell | null,
-    end: null as Cell | null,
-    /** 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;
-    },
-    won: false,
-    // UI hooks, set by the screen.
-    onPhase: (_p: Phase) => {},
-    onScore: (_s: number) => {},
-    onTime: (_t: number) => {},
-    /** A new grid's entries, in placement order (their colors follow it). */
-    onEntries: (_entries: string[]) => {},
-    onFound: (_found: ReadonlySet<string>) => {},
-    /** One more entry found (its sound and haptic), then `onWin` if it was the last. */
-    onFind: () => {},
-    onWin: () => {}
-  };
-  world.scoreboard.reset(0, TIME_LIMIT);
-  world.scoreboard.handlers = {
-    onSecond: (t) => g.onTime(t),
-    onTimeUp: () => g.phase === 'playing' && end(g, false)
-  };
-  return g;
-}
-export type Game = ReturnType<typeof createGame>;
-
-// ── Scene ─────────────────────────────────────────────────────────────
-
-/** Lays the scene out for the view (first layout, header height, rotation): rebuilt from the game's state. */
-export function setLayout(g: Game, l: Layout) {
-  if (g.scene) removeScene(g.world, g.scene);
-  g.layout = l;
-  aimTilted(g.camera, l);
-  g.scene = buildScene(g.world, l, g.theme, g.grid);
-  g.placed.forEach((p, i) => g.found.has(p.text) && markFound(g.world, l, g.scene!, p.cells, i, false));
-  if (g.start && g.end) showSelection(g.world, l, g.scene, g.start, g.end, true);
-}
-
-export function setTheme(g: Game, theme: GameTheme) {
-  g.theme = theme;
-  if (g.layout && g.scene) setSceneTheme(g.world, g.layout, g.scene, theme);
-}
-
-// ── Run ───────────────────────────────────────────────────────────────
-
-/** Plays the grid that's showing. */
-export function start(g: Game) {
-  if (g.phase !== 'ready') return;
-  g.phase = 'playing';
-  g.world.scoreboard.startCountdown(TIME_LIMIT);
-  g.onPhase('playing');
-}
-
-/** A fresh grid, not started (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
-export function reset(g: Game) {
-  const { grid, placed } = generate(g.content.list, g.content.alphabet);
-  g.grid = grid;
-  g.placed = placed;
-  g.found = new Set();
-  clearSelection(g);
-  g.world.scoreboard.reset(0, TIME_LIMIT);
-  g.won = false;
-  g.phase = 'ready';
-  if (g.layout && g.scene) relabel(g.world, g.layout, g.scene, grid);
-  g.onEntries(entries(g));
-  g.onFound(g.found);
-  g.onScore(0);
-  g.onTime(TIME_LIMIT);
-  g.onPhase('ready');
-}
-
-export const entries = (g: Game) => g.placed.map((p) => p.text);
-
-export function dispose(g: Game) {
-  g.world.dispose();
-}
-
-export function tick(g: Game, dt: number) {
-  if (g.world.isDisposed) return;
-  if (g.layout && g.scene) followSelection(g.world, g.layout, g.scene, dt);
-  g.world.update(dt);
-}
-
-function end(g: Game, won: boolean) {
-  g.world.scoreboard.stop();
-  clearSelection(g);
-  g.won = won;
-  g.phase = 'over';
-  g.onPhase('over');
-}
-
-function clearSelection(g: Game) {
-  g.start = null;
-  g.end = null;
-  if (g.scene) hideSelection(g.world, g.scene);
-}
-
-// ── The finger ────────────────────────────────────────────────────────
-
-/** The cell under a view point, as seen on the tiles' tops. */
-export function cellUnder(g: Game, x: number, y: number): Cell | null {
-  const l = g.layout;
-  if (!l) return null;
-  const [wx, wy] = unproject(l, x, y, l.tileTop);
-  return cellAt(l, wx, wy);
-}
-
-/** Start a line on the cell under the finger, stretch it along a row, column or diagonal, check it on release. */
-export function drag(g: Game, { phase, x, y }: DragEvent) {
-  const { layout: l, scene: s } = g;
-  if (!l || !s) return;
-  if (phase === 'start') {
-    if (g.phase !== 'playing') return;
-    const cell = cellUnder(g, x, y);
-    if (!cell) return;
-    g.start = cell;
-    g.end = cell;
-    showSelection(g.world, l, s, cell, cell, true);
-    return;
-  }
-  if (phase === 'move') {
-    if (!g.start || g.phase !== 'playing') return;
-    const cell = cellUnder(g, x, y);
-    // Off the grid, on the same cell, or not in a straight line: the line stays where it was
-    if (!cell || (cell.row === g.end?.row && cell.col === g.end?.col) || !lineCells(g.start, cell).length) return;
-    g.end = cell;
-    showSelection(g.world, l, s, g.start, cell, false);
-    return;
-  }
-  release(g);
-}
-
-function release(g: Game) {
-  const { start: from, end: to } = g;
-  clearSelection(g);
-  if (!from || !to || g.phase !== 'playing') return;
-  const cells = lineCells(from, to);
-  const match = matchOf(cells, g.grid, g.placed, g.found);
-  if (!match) return;
-  // Circled where it was found (and kept there across relayouts)
-  match.cells = cells;
-  found(g, match);
-}
-
-function found(g: Game, match: Placed) {
-  const { layout: l, scene: s } = g;
-  g.found = new Set(g.found).add(match.text);
-  g.world.scoreboard.add(FIND_POINTS);
-  if (l && s) markFound(g.world, l, s, match.cells, g.placed.indexOf(match), true);
-  g.onFound(g.found);
-  g.onFind();
-  if (g.found.size === g.placed.length) {
-    g.world.scoreboard.set(calculateTimeBasedScore(TIME_LIMIT - g.timeLeft, TIME_LIMIT, g.score));
-    g.onScore(g.score);
-    if (l) celebrate(g.world, l);
-    g.onWin();
-    end(g, true);
-    return;
-  }
-  g.onScore(g.score);
-}

package/src/games/search-grid/SearchGridScene.ts

@@ -1,301 +0,0 @@
-import { type Color, effects, type Entity, extrude, type Model, Path, quat, tube, type World } from '@nayan-ui/engine';
-import type { GameTheme } from '../../services/ThemeService';
-import { setBackdropTheme, spawnBackdrop } from '../shared/EngineBackdrop';
-import { GLYPH_RADIUS, glyphMesh } from '../shared/EngineGlyphs';
-import type { EngineHud } from '../shared/EngineHud';
-import { cacheGameAsset, createGameMesh as createShape } from '../shared/EngineMeshes';
-import { placeTiltedBackdrop } from '../shared/EngineTilt';
-import { toColor } from '../shared/EngineUtils';
-// Everything Word Search and Number Search draw: a board (themed, as the original board) of white tiles,
-// each with its letter or digit in raised 3D strokes (shared/EngineGlyphs), seen from a little in front
-// of straight down (shared/EngineTilt: an orthographic camera leaning back, one world unit per point).
-// A see-through blue band behind the characters follows the finger along the line being selected;
-// each found entry is backed by a band in its own color and its tiles bounce. Tiles share one mesh, every "E" is one
-// instance of the same glyph, and a pill is a cylinder between two flattened spheres.
-import {
-  type Cell,
-  cellCentre,
-  CLASSIC_BOARD,
-  FIND_TIME,
-  GRID_SIZE,
-  HIGHLIGHT_COLORS,
-  INK_COLOR,
-  type Layout,
-  SELECT_TIME,
-  SELECTION_COLOR,
-  TILE_COLOR
-} from './SearchGridConstants';
-
-const meshes = new Map<string, Model>();
-const cached = (key: string, build: () => Model) => {
-  let m = meshes.get(key);
-  if (!m) {
-    m = cacheGameAsset('search-grid/SearchGridScene:' + key, build);
-    meshes.set(key, m);
-  }
-  return m;
-};
-const BOARD_DEPTH = 10;
-const BACKDROP_DEPTH = 25;
-const GLYPH_SIZE = 0.4; // of a cell
-
-const panelMesh = (size: number, radius: number) =>
-  cached(`sg-panel:${size.toFixed(1)}:${radius}`, () =>
-    createShape(extrude(new Path().addRoundedRect(-size / 2, -size / 2, size, size, radius), { depth: BOARD_DEPTH }), { shine: 0.2 })
-  );
-/** A pill's middle: a cylinder one unit long and across, along x, open at its ends (the caps cover them). */
-const barMesh = () =>
-  cached('sg-bar', () =>
-    createShape(
-      tube(
-        [
-          [-0.5, 0, 0],
-          [0.5, 0, 0]
-        ],
-        { radius: 0.5, sides: 18, smoothness: 1, caps: false }
-      ),
-      { shine: 0.5 }
-    )
-  );
-
-const boardColor = (theme: GameTheme) => toColor(theme.mode === 'classic' ? CLASSIC_BOARD : theme.BOARD.SURFACE);
-
-// ── Spawning ──────────────────────────────────────────────────────────
-
-/** A pill: its middle and two round ends. */
-export type Pill = [Entity, Entity, Entity];
-/** The live selection's ends: where they're drawn now and where they're heading (world x, y). */
-type Ends = { ax: number; ay: number; bx: number; by: number; tax: number; tay: number; tbx: number; tby: number; on: boolean };
-export type Scene = { backdrop: Entity; panel: Entity; tiles: Entity[]; glyphs: Entity[]; selection: Pill; ends: Ends; found: Pill[] };
-
-const tileIndex = (c: Cell) => c.row * GRID_SIZE + c.col;
-
-export function buildScene(world: World, l: Layout, theme: GameTheme, grid: string[][]): Scene {
-  const backdrop = spawnBackdrop(world, l.width, l.height, -BACKDROP_DEPTH, theme);
-  placeTiltedBackdrop(world, backdrop, l, BACKDROP_DEPTH);
-  const panel = world.spawn({
-    mesh: panelMesh(l.boardSize, theme.mode === 'classic' ? 12 : 8),
-    position: [0, 0, -BOARD_DEPTH / 2],
-    color: boardColor(theme),
-    pickable: false
-  });
-  const tiles: Entity[] = [];
-  const glyphs: Entity[] = [];
-  const ink = toColor(INK_COLOR);
-  const white = toColor(TILE_COLOR);
-  for (let row = 0; row < GRID_SIZE; row++)
-    for (let col = 0; col < GRID_SIZE; col++) {
-      const [x, y] = cellCentre(l, row, col);
-      tiles.push(
-        world.spawn({
-          mesh: 'roundedBox',
-          position: [x, y, l.tileTop / 2],
-          scale: [l.cell * 0.88, l.cell * 0.88, l.tileTop],
-          color: white,
-          pickable: false
-        })
-      );
-      glyphs.push(spawnGlyph(world, l, grid[row]![col]!, x, y, ink));
-    }
-  return {
-    backdrop,
-    panel,
-    tiles,
-    glyphs,
-    selection: spawnPill(world, toColor(SELECTION_COLOR)),
-    ends: { ax: 0, ay: 0, bx: 0, by: 0, tax: 0, tay: 0, tbx: 0, tby: 0, on: false },
-    found: []
-  };
-}
-
-function spawnGlyph(world: World, l: Layout, char: string, x: number, y: number, ink: Color) {
-  const size = l.cell * GLYPH_SIZE;
-  return world.spawn({ mesh: glyphMesh(char), position: [x, y, l.tileTop + GLYPH_RADIUS * size], scale: size, color: ink, pickable: false });
-}
-
-/** A new grid's characters on the same tiles. */
-export function relabel(world: World, l: Layout, s: Scene, grid: string[][]) {
-  const ink = toColor(INK_COLOR);
-  s.glyphs.forEach((g, i) => {
-    world.despawn(g);
-    const row = Math.floor(i / GRID_SIZE);
-    const col = i % GRID_SIZE;
-    const [x, y] = cellCentre(l, row, col);
-    s.glyphs[i] = spawnGlyph(world, l, grid[row]![col]!, x, y, ink);
-  });
-  for (const p of s.found) for (const e of p) world.despawn(e);
-  s.found = [];
-}
-
-export function removeScene(world: World, s: Scene) {
-  for (const e of [s.backdrop, s.panel, ...s.tiles, ...s.glyphs, ...s.selection, ...s.found.flat()]) world.despawn(e);
-}
-
-export function setSceneTheme(world: World, l: Layout, s: Scene, theme: GameTheme) {
-  setBackdropTheme(world, s.backdrop, theme);
-  world.set(s.panel, { mesh: panelMesh(l.boardSize, theme.mode === 'classic' ? 12 : 8), color: boardColor(theme) });
-}
-
-// ── Pills ─────────────────────────────────────────────────────────────
-
-function spawnPill(world: World, color: Color): Pill {
-  return [
-    world.spawn({ mesh: barMesh(), scale: 0, color, pickable: false }),
-    world.spawn({ mesh: 'sphere', scale: 0, color, pickable: false }),
-    world.spawn({ mesh: 'sphere', scale: 0, color, pickable: false })
-  ];
-}
-
-/** Draws a pill between two points: a thin flat band on the tiles' tops, under the characters (which stand on them). */
-function drawPill(world: World, l: Layout, pill: Pill, ax: number, ay: number, bx: number, by: number) {
-  const width = l.cell * 0.8;
-  const thick = Math.max(0.4, l.tileTop * 0.12);
-  const z = l.tileTop + thick * 0.15;
-  const length = Math.hypot(bx - ax, by - ay);
-  const [bar, a, b] = pill;
-  world.set(bar, {
-    position: [(ax + bx) / 2, (ay + by) / 2, z],
-    rotation: quat.z(Math.atan2(by - ay, bx - ax)),
-    scale: [Math.max(length, 0.001), width, thick]
-  });
-  world.set(a, { position: [ax, ay, z], scale: [width, width, thick] });
-  world.set(b, { position: [bx, by, z], scale: [width, width, thick] });
-}
-
-function layPill(world: World, l: Layout, pill: Pill, from: Cell, to: Cell) {
-  const [ax, ay] = cellCentre(l, from.row, from.col);
-  const [bx, by] = cellCentre(l, to.row, to.col);
-  drawPill(world, l, pill, ax, ay, bx, by);
-}
-
-/** The live selection, from its first cell to where the finger is now: `fresh` snaps it there, else it glides (followSelection). */
-export function showSelection(world: World, l: Layout, s: Scene, from: Cell, to: Cell, fresh: boolean) {
-  const e = s.ends;
-  [e.tax, e.tay] = cellCentre(l, from.row, from.col);
-  [e.tbx, e.tby] = cellCentre(l, to.row, to.col);
-  e.on = true;
-  if (!fresh) return;
-  e.ax = e.tax;
-  e.ay = e.tay;
-  e.bx = e.tbx;
-  e.by = e.tby;
-  drawPill(world, l, s.selection, e.ax, e.ay, e.bx, e.by);
-}
-
-/** Eases the live selection's ends toward their targets each frame (frame-rate independent), redrawing it only while it moves. */
-export function followSelection(world: World, l: Layout, s: Scene, dt: number) {
-  const e = s.ends;
-  if (!e.on) return;
-  const dx = Math.abs(e.tax - e.ax) + Math.abs(e.tay - e.ay) + Math.abs(e.tbx - e.bx) + Math.abs(e.tby - e.by);
-  if (dx < 0.05) return;
-  const k = 1 - Math.exp(-dt / (SELECT_TIME / 3));
-  e.ax += (e.tax - e.ax) * k;
-  e.ay += (e.tay - e.ay) * k;
-  e.bx += (e.tbx - e.bx) * k;
-  e.by += (e.tby - e.by) * k;
-  drawPill(world, l, s.selection, e.ax, e.ay, e.bx, e.by);
-}
-
-export function hideSelection(world: World, s: Scene) {
-  s.ends.on = false;
-  for (const e of s.selection) world.set(e, { scale: 0 });
-}
-
-/** A found entry: circled in its color, its tiles bouncing one after another, a few sparkles. */
-export function markFound(world: World, l: Layout, s: Scene, cells: Cell[], colorIndex: number, animate: boolean) {
-  const [r, g, b, a] = toColor(HIGHLIGHT_COLORS[colorIndex % HIGHLIGHT_COLORS.length]!);
-  const pill = spawnPill(world, [r, g, b, a ?? 1]);
-  layPill(world, l, pill, cells[0]!, cells[cells.length - 1]!);
-  s.found.push(pill);
-  if (!animate) return;
-  const size = [l.cell * 0.88, l.cell * 0.88, l.tileTop] as [number, number, number];
-  world.animate(
-    cells.map((c) => s.tiles[tileIndex(c)]!),
-    [{ scale: [size[0] * 1.15, size[1] * 1.15, size[2] * 1.6], at: 0.4 }, { scale: size }],
-    { duration: FIND_TIME, stagger: 0.04 }
-  );
-  world.animate(
-    cells.map((c) => s.glyphs[tileIndex(c)]!),
-    [{ scale: l.cell * GLYPH_SIZE * 1.2, at: 0.4 }, { scale: l.cell * GLYPH_SIZE }],
-    { duration: FIND_TIME, stagger: 0.04 }
-  );
-  const mid = cells[Math.floor(cells.length / 2)]!;
-  const [x, y] = cellCentre(l, mid.row, mid.col);
-  effects.sparkle(world, {
-    position: [x, y, l.tileTop + l.cell * 0.3],
-    count: 14,
-    size: l.cell * 0.12,
-    speed: l.cell * 4,
-    lifetime: 0.55,
-    gravity: -l.cell * 4,
-    colors: [
-      [r, g, b, 1],
-      [1, 1, 1, 1]
-    ]
-  });
-}
-
-/** Confetti over the board when everything's found. */
-export function celebrate(world: World, l: Layout) {
-  effects.confetti(world, {
-    position: [0, 0, l.cell * 2],
-    count: 60,
-    size: l.cell * 0.22,
-    speed: l.boardSize * 1.4,
-    lifetime: 1.3,
-    gravity: -l.boardSize * 2.4,
-    colors: HIGHLIGHT_COLORS.slice(0, 4).map((c) => {
-      const [r, g, b] = toColor(c);
-      return [r, g, b, 1] as Color;
-    })
-  });
-}
-
-// The entry strip is engine geometry/text, sharing the same overlay and animation clock as the HUD.
-const entryStrips = new WeakMap<
-  EngineHud,
-  {
-    key: string;
-    chips: { root: Entity; face: Entity; strike: Entity; color: string; text: string; found: boolean }[];
-  }
->();
-export function drawEntryList(hud: EngineHud, entries: readonly string[], found: ReadonlySet<string>, layout: Layout) {
-  if (!hud.ready) return;
-  const ordered = entries
-    .map((text, i) => ({ text, color: HIGHLIGHT_COLORS[i % HIGHLIGHT_COLORS.length]! }))
-    .sort((a, b) => a.text.localeCompare(b.text));
-  const key = `${ordered.map((item) => item.text).join('|')}:${layout.width}:${layout.listTop}:${layout.listWidth}`;
-  let strip = entryStrips.get(hud);
-  if (strip?.key !== key) {
-    hud.clearLayer('entries');
-    const layer = hud.layer('entries');
-    const columns = Math.min(4, ordered.length);
-    const gap = 5,
-      cell = (layout.listWidth - gap * (columns - 1)) / columns;
-    const left = (layout.width - layout.listWidth) / 2;
-    strip = {
-      key,
-      chips: ordered.map((item, i) => {
-        const root = hud.world.spawn({
-          mesh: 'none',
-          parent: layer,
-          position: [left + (i % columns) * (cell + gap) + cell / 2, -(layout.listTop + Math.floor(i / columns) * 24 + 11), 0],
-          pickable: false
-        });
-        const face = hud.rectangle(root, 0, 0, cell, 21, toColor(item.color));
-        hud.text(root, item.text, 0, 0, Math.min(12, (cell - 8) / item.text.length / 0.65), [1, 1, 1, 1]);
-        const strike = hud.rectangle(root, 0, 0, cell - 12, 1, [1, 1, 1, 0], 3);
-        return { root, face, strike, color: item.color, text: item.text, found: false };
-      })
-    };
-    entryStrips.set(hud, strip);
-  }
-  for (const chip of strip.chips) {
-    const selected = found.has(chip.text);
-    if (selected === chip.found) continue;
-    chip.found = selected;
-    hud.world.set(chip.face, { color: toColor(selected ? 'rgba(90,90,90,0.45)' : chip.color) });
-    hud.world.set(chip.strike, { color: [1, 1, 1, selected ? 0.85 : 0] });
-    if (selected) hud.world.animate(chip.root, [{ scale: 1.18 }, { scale: 1 }], { duration: 0.3 });
-  }
-}

package/src/games/shared/BackdropCard.tsx

@@ -1,54 +0,0 @@
-// The game background for a modal card (game over, settings), drawn by the Nayan engine from the same
-// mesh as the engine games' scenes. Like the original card background it fills its parent and shows the
-// pattern from its top-left corner (the card clips it), so cards look the same in every game.
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { type LayoutChangeEvent, StyleSheet, View } from 'react-native';
-import { type Camera, GameView, isEngineAvailable, World } from '@nayan-ui/engine';
-import { useGameTheme } from '../../helpers/GameTheme';
-import { BACKDROP_LIGHT, backdropMesh } from './EngineBackdrop';
-import { toRgb } from './EngineUtils';
-import { useGameResource } from './useGameResource';
-
-const CardScene = React.memo(({ width, height }: { width: number; height: number }) => {
-  const theme = useGameTheme();
-  const scene = useGameResource(
-    () => {
-      const world = new World(4);
-      const backdrop = world.spawn({ mesh: backdropMesh(theme), color: [1, 1, 1, 1], pickable: false });
-      return { world, backdrop };
-    },
-    (value) => () => value.world.dispose()
-  );
-  useEffect(() => {
-    scene.world.set(scene.backdrop, { mesh: backdropMesh(theme) });
-  }, [scene, theme]);
-
-  // Looking at the card-sized top-left corner of the pattern (its space runs right and down from 0, -0).
-  const camera = useMemo<Camera>(
-    () => ({ eye: [width / 2, -height / 2, 100], target: [width / 2, -height / 2, 0], fov: 1, ortho: height / 2 }),
-    [width, height]
-  );
-  const background = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
-  // GameView draws what the last `update` produced, so the world must be stepped even though nothing
-  // in it moves (one entity: negligible). No touch handlers, so the card's buttons get every touch.
-  const onUpdate = useCallback((dt: number) => scene.world.update(dt), [scene]);
-  return <GameView source={scene.world} camera={camera} light={BACKDROP_LIGHT} background={background} onUpdate={onUpdate} />;
-});
-CardScene.displayName = 'CardScene';
-
-export const BackdropCard = React.memo(() => {
-  const theme = useGameTheme();
-  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
-  const onLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setSize((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
-  }, []);
-  return (
-    <View style={[StyleSheet.absoluteFill, styles.passThrough, { backgroundColor: theme.BACKGROUND }]} onLayout={onLayout}>
-      {isEngineAvailable && size && size.width > 0 && size.height > 0 ? <CardScene width={size.width} height={size.height} /> : null}
-    </View>
-  );
-});
-BackdropCard.displayName = 'BackdropCard';
-
-const styles = StyleSheet.create({ passThrough: { pointerEvents: 'none' } });