@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/mob-control/MobControlScene.ts

@@ -0,0 +1,399 @@
+// A compact 3D arena: a moving cannon, portal choices, three destructible strongholds and health
+// bars. The crowds themselves are instanced by MobControlRenderer, not spawned as native entities.
+import { type Camera, type Color, effects, type Entity, type Model, quat, tube, type Vec3, type World } from '@nayan-ui/engine';
+import { glyphMesh } from '../shared/EngineGlyphs';
+import { createGameMesh as createShape } from '../shared/EngineMeshes';
+import { toColor } from '../shared/EngineUtils';
+import { type Barrier, type Base, type Gate, MOB_COLORS, MOB_CONFIG as C } from './MobControlConstants';
+import type { Sim } from './MobControlRules';
+
+export interface View {
+  width: number;
+  height: number;
+  k: number;
+}
+interface BaseView {
+  root: Entity;
+  body: Entity;
+  bar: Entity;
+  digits: Entity[];
+  shown: string;
+  hp: number;
+  captured: boolean;
+}
+interface GateView {
+  root: Entity;
+  panel: Entity;
+  hits: number;
+  factor: number;
+}
+interface BarrierView {
+  root: Entity;
+  digits: Entity[];
+  shown: number;
+  broken: boolean;
+}
+interface BossView {
+  root: Entity;
+  bar: Entity;
+  digits: Entity[];
+  shown: number;
+  visible: boolean;
+}
+export interface Scene {
+  root: Entity;
+  battleRoot: Entity;
+  cannon: Entity;
+  barrel: Entity;
+  chargeBar: Entity;
+  chargeShown: number;
+  battle: Sim | null;
+  bases: BaseView[];
+  gates: GateView[];
+  barriers: BarrierView[];
+  boss: BossView | null;
+  night: boolean;
+}
+const WHITE: Color = [1, 1, 1, 1];
+export function makeView(width: number, height: number, camera: Camera): View {
+  const zoom = Math.max(1, 0.5 / (width / Math.max(height, 1)));
+  camera.eye = [0, 19 * zoom, 15 * zoom];
+  camera.target = [0, 0, height < 550 ? -9 : -13];
+  camera.fov = 0.9;
+  const dy = camera.target[1] - camera.eye[1],
+    dz = camera.target[2] - camera.eye[2],
+    length = Math.hypot(dy, dz);
+  const depth = (-camera.eye[1] * dy - camera.eye[2] * dz) / length;
+  return { width, height, k: height / (2 * Math.tan(camera.fov / 2) * depth) };
+}
+const gateColor = (g: Gate) => toColor(g.factor < 0 ? MOB_COLORS.GATE_DANGER : g.factor >= 3 ? MOB_COLORS.GATE_HIGH : MOB_COLORS.GATE);
+function part(
+  world: World,
+  parent: Entity,
+  mesh: 'cube' | 'roundedBox' | 'cylinder' | 'sphere' | 'cone',
+  position: Vec3,
+  scale: Vec3 | number,
+  color: Color,
+  rotation?: readonly [number, number, number, number]
+) {
+  return world.spawn({ mesh, parent, position, scale, color, rotation, pickable: false });
+}
+function number(world: World, parent: Entity, text: string, y: number, z: number, size: number): Entity[] {
+  return [...text].map((ch, i) =>
+    world.spawn({
+      mesh: glyphMesh(ch),
+      parent,
+      position: [(i - (text.length - 1) / 2) * size * 0.7, y, z],
+      scale: size,
+      color: WHITE,
+      pickable: false
+    })
+  );
+}
+function spawnBase(world: World, parent: Entity, b: Base, level: number, night: boolean): BaseView {
+  const root = world.spawn({ mesh: 'none', parent, position: [b.x, 0, b.z], pickable: false });
+  const red = toColor(MOB_COLORS.ENEMY),
+    dark = toColor(MOB_COLORS.ENEMY_DARK);
+  const body = part(world, root, 'roundedBox', [0, 1.5, 0], [2.45, 3, 2.5], red);
+  part(world, root, 'roundedBox', [0, 0.18, 0], [2.8, 0.36, 2.9], dark);
+  part(world, root, 'roundedBox', [0, 3.05, 0], [2.65, 0.3, 2.7], night ? [0.6, 0.31, 0.45, 1] : [1, 0.62, 0.65, 1]);
+  for (const side of [-1, 1]) {
+    part(world, root, 'cylinder', [side * 1.1, 2.1, 0.65], [0.62, 4.2, 0.62], red);
+    part(world, root, 'cone', [side * 1.1, 4.45, 0.65], [0.9, 0.8, 0.9], dark);
+  }
+  part(world, root, 'roundedBox', [0, 0.9, 1.27], [0.9, 1.8, 0.08], dark);
+  part(world, root, 'cube', [0, 1, 1.32], [0.53, 1.2, 0.04], [0.1, 0.16, 0.23, 1]);
+  part(world, root, 'cylinder', [0, 3.9, -0.65], [0.08, 1.7, 0.08], [0.85, 0.87, 0.84, 1]);
+  part(world, root, 'cube', [0.4, 4.45, -0.65], [0.8, 0.5, 0.055], red);
+  const pips = ((level - 1) % 3) + 1;
+  for (let i = 0; i < pips; i++) part(world, root, 'roundedBox', [(i - (pips - 1) / 2) * 0.32, 2.0, 1.3], [0.2, 0.35, 0.07], [1.25, 1.08, 0.5, 1]);
+  part(world, root, 'roundedBox', [0, 3.5, 1.45], [2.3, 0.24, 0.14], [0.17, 0.23, 0.29, 1]);
+  const bar = part(world, root, 'roundedBox', [0, 3.5, 1.54], [2.15, 0.14, 0.08], toColor('#FFC66E'));
+  const digits = number(world, root, String(b.hp), 2.75, 1.5, 0.5);
+  return { root, body, bar, digits, shown: String(b.hp), hp: b.hp, captured: false };
+}
+let bow: Model | null = null;
+function portalBow() {
+  if (!bow)
+    bow = createShape(
+      tube(
+        [
+          [-1.86, 1.65, 0],
+          [-1.65, 0.3, 0],
+          [0, 0.16, 0],
+          [1.65, 0.3, 0],
+          [1.86, 1.65, 0]
+        ],
+        { radius: 0.045, sides: 6, smoothness: 5 }
+      ),
+      { center: false, shine: 0.1 }
+    );
+  return bow;
+}
+function spawnGate(world: World, parent: Entity, g: Gate): GateView {
+  const root = world.spawn({ mesh: 'none', parent, position: [g.x, 0, g.z], pickable: false });
+  const frame = toColor(MOB_COLORS.FRAME),
+    color = gateColor(g),
+    width = g.halfWidth * 2;
+  for (const side of [-1, 1]) {
+    part(world, root, 'roundedBox', [side * g.halfWidth, 0.94, 0], [0.21, 1.88, 0.32], frame);
+    part(world, root, 'cube', [side * g.halfWidth, 1.92, 0], [0.22, 0.11, 0.33], [1, 0.8, 0.24, 1]);
+  }
+  part(world, root, 'roundedBox', [0, 0.03, 0], [width, 0.06, 0.38], [color[0] * 1.3, color[1] * 1.3, color[2] * 1.3, 1]);
+  const panel = part(world, root, 'cube', [0, 0.92, 0], [width - 0.12, 1.7, 0.035], [color[0], color[1], color[2], 0.48]);
+  world.spawn({ mesh: portalBow(), parent: root, position: [0, 0, 0.06], color: [0.8, 1.3, 1.5, 1], pickable: false });
+  // A dark backing keeps the arithmetic readable as mobs pass behind the translucent panel.
+  part(world, root, 'roundedBox', [0, 1.03, 0.06], [1.65, 1.1, 0.04], [color[0] * 0.38, color[1] * 0.38, color[2] * 0.38, 1]);
+  if (g.factor < 0 || g.operation === 'add') {
+    part(world, root, 'roundedBox', [-0.43, 1.03, 0.15], [0.51, 0.1, 0.05], WHITE);
+    if (g.factor < 0) for (const dy of [-0.23, 0.23]) part(world, root, 'sphere', [-0.43, 1.03 + dy, 0.15], 0.1, WHITE);
+    else part(world, root, 'roundedBox', [-0.43, 1.03, 0.15], [0.1, 0.51, 0.05], WHITE);
+    world.spawn({
+      mesh: glyphMesh(String(Math.abs(g.factor))),
+      parent: root,
+      position: [0.3, 1.03, 0.18],
+      scale: 0.85,
+      color: WHITE,
+      pickable: false
+    });
+  } else number(world, root, `X${g.factor}`, 1.03, 0.18, 0.85);
+  return { root, panel, hits: g.hits, factor: g.factor };
+}
+function spawnBarrier(world: World, parent: Entity, b: Barrier): BarrierView {
+  const root = world.spawn({ mesh: 'none', parent, position: [b.x, 0, b.z], pickable: false });
+  const gold: Color = [0.92, 0.62, 0.23, 1];
+  part(world, root, 'roundedBox', [0, 0.75, 0], [b.halfWidth * 2, 1.5, 0.7], gold);
+  for (const x of [-1.2, 0, 1.2]) part(world, root, 'cube', [x, 0.75, 0.39], [0.1, 1.5, 0.1], [1, 0.8, 0.41, 1]);
+  for (const y of [0.15, 1.35]) part(world, root, 'cube', [0, y, 0.4], [b.halfWidth * 2, 0.12, 0.12], [0.52, 0.31, 0.12, 1]);
+  part(world, root, 'roundedBox', [0, 0.8, 0.47], [1.3, 1.05, 0.08], [0.2, 0.17, 0.13, 1]);
+  return { root, digits: number(world, root, String(b.hp), 0.8, 0.54, 0.65), shown: b.hp, broken: false };
+}
+function spawnBoost(world: World, parent: Entity, sim: Sim) {
+  const b = sim.boostPad;
+  if (!b) return;
+  const root = world.spawn({ mesh: 'none', parent, position: [b.x, 0.06, b.z], pickable: false });
+  part(world, root, 'roundedBox', [0, 0, 0], [b.halfWidth * 2, 0.07, b.halfLength * 2], [0.13, 0.56, 0.65, 1]);
+  for (let i = 0; i < 3; i++)
+    for (const side of [-1, 1])
+      part(world, root, 'cube', [side * 0.3, 0.05, -0.65 + i * 0.6], [0.12, 0.03, 0.8], [0.65, 1.3, 1.4, 1], quat.y((side * Math.PI) / 4));
+}
+function spawnBossBar(world: World, parent: Entity): BossView {
+  const root = world.spawn({ mesh: 'none', parent, pickable: false });
+  part(world, root, 'roundedBox', [0, 2.9, 0], [2.15, 0.3, 0.1], [0.18, 0.1, 0.14, 1]);
+  const bar = part(world, root, 'roundedBox', [0, 2.9, 0.07], [2, 0.18, 0.08], [1.1, 0.2, 0.25, 1]);
+  return { root, bar, digits: number(world, root, String(C.BOSS_STRENGTH), 3.4, 0.1, 0.65), shown: C.BOSS_STRENGTH, visible: true };
+}
+export function buildScene(world: World, night: boolean, sim: Sim): Scene {
+  // Prepare changing health labels before play, so the first new digit never builds a mesh mid-battle.
+  for (const ch of '0123456789X') glyphMesh(ch);
+  const root = world.spawn({ mesh: 'none', pickable: false });
+  const ground = night ? ([0.12, 0.13, 0.18, 1] as Color) : toColor(MOB_COLORS.GROUND);
+  const trackLength = C.TRACK_NEAR_Z - C.TRACK_FAR_Z,
+    trackCenter = (C.TRACK_NEAR_Z + C.TRACK_FAR_Z) / 2;
+  part(world, root, 'cube', [0, -1.5, -18], [250, 0.3, 240], ground);
+  // Continue the road beyond both ends of the camera view, including behind the enemy towers.
+  part(
+    world,
+    root,
+    'roundedBox',
+    [0, -0.55, trackCenter],
+    [C.HALF_WIDTH * 2 + 1.2, 0.9, trackLength + 0.5],
+    night ? [0.25, 0.31, 0.37, 1] : toColor(MOB_COLORS.ROAD_EDGE)
+  );
+  part(world, root, 'cube', [0, -0.04, trackCenter], [C.HALF_WIDTH * 2, 0.13, trackLength], night ? [0.38, 0.43, 0.46, 1] : toColor(MOB_COLORS.ROAD));
+  for (const side of [-1, 1])
+    part(
+      world,
+      root,
+      'roundedBox',
+      [side * (C.HALF_WIDTH + 0.1), 0.04, trackCenter],
+      [0.18, 0.22, trackLength],
+      night ? [0.52, 0.65, 0.73, 1] : [0.95, 0.94, 0.86, 1]
+    );
+  // Road markings and fence posts stay on the arena's shoulders; the battlefield remains clear.
+  for (let i = 0, z = C.TRACK_NEAR_Z - 1.5; z > C.TRACK_FAR_Z; i++, z -= 2.3) {
+    part(world, root, 'cube', [0, 0.032, z], [0.07, 0.012, 0.9], night ? [0.51, 0.57, 0.6, 1] : [0.96, 0.96, 0.92, 1]);
+    if (i % 2 === 0)
+      for (const side of [-1, 1])
+        part(
+          world,
+          root,
+          'cylinder',
+          [side * (C.HALF_WIDTH + 0.4), 0.23, z],
+          [0.13, 0.9, 0.13],
+          night ? [0.35, 0.31, 0.28, 1] : [0.55, 0.35, 0.18, 1]
+        );
+  }
+  for (const side of [-1, 1])
+    part(
+      world,
+      root,
+      'cube',
+      [side * (C.HALF_WIDTH + 0.4), 0.4, trackCenter],
+      [0.09, 0.13, trackLength],
+      night ? [0.35, 0.31, 0.28, 1] : [0.67, 0.43, 0.22, 1]
+    );
+  part(world, root, 'roundedBox', [0, 0.06, 0.35], [C.HALF_WIDTH * 2, 0.1, 0.2], toColor(MOB_COLORS.PLAYER));
+  const cannon = world.spawn({ mesh: 'none', parent: root, position: [0, 0, C.CANNON_Z], pickable: false });
+  const blue = toColor(MOB_COLORS.PLAYER),
+    dark = toColor(MOB_COLORS.PLAYER_DARK);
+  part(world, cannon, 'roundedBox', [0, 0.38, 0], [1.6, 0.4, 1.65], [0.8, 0.18, 0.21, 1]);
+  part(world, cannon, 'sphere', [0, 0.86, 0], [1.18, 0.9, 1.2], blue);
+  for (const side of [-1, 1])
+    for (const z of [-0.48, 0.5]) {
+      part(world, cannon, 'cylinder', [side * 0.83, 0.31, z], [0.6, 0.24, 0.6], [0.1, 0.13, 0.18, 1], quat.z(Math.PI / 2));
+      part(world, cannon, 'cylinder', [side * 0.96, 0.31, z], [0.25, 0.03, 0.25], [0.77, 0.83, 0.87, 1], quat.z(Math.PI / 2));
+    }
+  const barrel = world.spawn({ mesh: 'none', parent: cannon, position: [0, 0.92, -0.1], pickable: false });
+  part(world, barrel, 'cylinder', [0, 0, -0.7], [0.62, 1.6, 0.62], dark, quat.x(Math.PI / 2));
+  part(world, barrel, 'cylinder', [0, 0, -1.52], [0.76, 0.22, 0.76], blue, quat.x(Math.PI / 2));
+  part(world, barrel, 'cylinder', [0, 0, -1.65], [0.49, 0.025, 0.49], [0.06, 0.11, 0.17, 1], quat.x(Math.PI / 2));
+  part(world, cannon, 'roundedBox', [0, 0.4, 1.05], [1.65, 0.15, 0.26], [0.16, 0.24, 0.31, 1]);
+  const chargeBar = part(world, cannon, 'roundedBox', [-0.76, 0.5, 1.05], [0.01, 0.1, 0.2], toColor(MOB_COLORS.CHAMPION));
+  const scene: Scene = {
+    root,
+    battleRoot: world.spawn({ mesh: 'none', parent: root, pickable: false }),
+    cannon,
+    barrel,
+    chargeBar,
+    chargeShown: -1,
+    battle: null,
+    bases: [],
+    gates: [],
+    barriers: [],
+    boss: null,
+    night
+  };
+  syncBattle(world, scene, sim);
+  return scene;
+}
+function syncBattle(world: World, s: Scene, sim: Sim) {
+  if (s.battle === sim) return;
+  world.despawn(s.battleRoot);
+  s.battleRoot = world.spawn({ mesh: 'none', parent: s.root, pickable: false });
+  s.battle = sim;
+  s.bases = sim.bases.map((b) => spawnBase(world, s.battleRoot, b, sim.level, s.night));
+  s.gates = sim.gates.map((g) => spawnGate(world, s.battleRoot, g));
+  s.barriers = sim.barriers.map((b) => spawnBarrier(world, s.battleRoot, b));
+  spawnBoost(world, s.battleRoot, sim);
+  s.boss = sim.bossCount > 0 ? spawnBossBar(world, s.battleRoot) : null;
+}
+export function syncScene(world: World, s: Scene, sim: Sim, labels: boolean) {
+  syncBattle(world, s, sim);
+  world.set(s.cannon, { position: [sim.cannonX, 0, C.CANNON_Z] });
+  const charge = Math.floor(sim.charge / 5) * 5;
+  if (charge !== s.chargeShown) {
+    s.chargeShown = charge;
+    const fraction = charge / C.CHAMPION_CHARGE;
+    world.set(s.chargeBar, { scale: [Math.max(0.01, fraction * 1.5), 0.1, 0.2], position: [-0.75 + fraction * 0.75, 0.5, 1.05] });
+  }
+  for (let i = 0; i < sim.gates.length; i++) {
+    const g = sim.gates[i]!,
+      v = s.gates[i]!;
+    if (g.moving) world.set(v.root, { position: [g.x, 0, g.z] });
+    if (v.hits !== g.hits) {
+      v.hits = g.hits;
+      const c = gateColor(g);
+      world.set(v.panel, { color: [c[0] * 1.3, c[1] * 1.3, c[2] * 1.3, 0.65] });
+      world.animate(v.panel, { color: [c[0], c[1], c[2], 0.48] }, { duration: 0.18 });
+    }
+  }
+  for (let i = 0; i < sim.bases.length; i++) {
+    const b = sim.bases[i]!,
+      v = s.bases[i]!;
+    if (b.hp !== v.hp) {
+      v.hp = b.hp;
+      const fraction = b.hp / b.maxHp;
+      world.set(v.bar, { scale: [Math.max(0.001, 2.15 * fraction), 0.14, 0.08], position: [-(1 - fraction) * 1.075, 3.5, 1.54] });
+    }
+    if (b.hp === 0 && !v.captured) {
+      v.captured = true;
+      world.set(v.body, { color: toColor(MOB_COLORS.PLAYER) });
+      world.animate(v.root, { scale: [1, 0.25, 1] }, { duration: 0.55, easing: 'bounce' });
+    }
+    const text = String(b.hp);
+    if (labels && text !== v.shown) {
+      for (const digit of v.digits) world.despawn(digit);
+      v.digits = number(world, v.root, text, 2.75, 1.5, 0.5);
+      v.shown = text;
+    }
+  }
+  for (let i = 0; i < sim.barriers.length; i++) {
+    const b = sim.barriers[i]!,
+      v = s.barriers[i]!;
+    if (b.hp === 0 && !v.broken) {
+      v.broken = true;
+      effects.shatter(world, {
+        position: [b.x, 0.65, b.z],
+        colors: [0.92, 0.62, 0.23, 1],
+        count: 9,
+        size: 0.13,
+        speed: 2,
+        lifetime: 0.4,
+        gravity: -7
+      });
+      world.animate(v.root, { scale: [1, 0.001, 1] }, { duration: 0.25 });
+    }
+    if (labels && b.hp !== v.shown) {
+      for (const digit of v.digits) world.despawn(digit);
+      v.digits = b.hp > 0 ? number(world, v.root, String(b.hp), 0.8, 0.54, 0.65) : [];
+      v.shown = b.hp;
+    }
+  }
+  if (s.boss) {
+    const v = s.boss;
+    let boss = -1;
+    for (let i = C.PLAYER_SLOTS; i < C.CAPACITY; i++)
+      if (sim.alive[i] && sim.kind[i] === 2) {
+        boss = i;
+        break;
+      }
+    if (boss >= 0) {
+      world.set(v.root, { position: [sim.previousX[boss]!, 0, sim.previousZ[boss]!] });
+      const hp = sim.strength[boss]!;
+      if (hp !== v.shown) {
+        const fraction = hp / C.BOSS_STRENGTH;
+        world.set(v.bar, { scale: [Math.max(0.001, 2 * fraction), 0.18, 0.08], position: [-(1 - fraction), 2.9, 0.07] });
+        if (labels) {
+          for (const digit of v.digits) world.despawn(digit);
+          v.digits = number(world, v.root, String(hp), 3.4, 0.1, 0.65);
+          v.shown = hp;
+        }
+      }
+    } else if (v.visible) {
+      v.visible = false;
+      world.set(v.root, { scale: 0.001 });
+    }
+  }
+}
+export function recoil(world: World, s: Scene) {
+  world.animate(s.barrel, [{ position: [0, 0.92, 0.1], at: 0.2 }, { position: [0, 0.92, -0.1] }], { duration: 0.09 });
+}
+export function battleEffect(world: World, x: number, z: number, player: boolean) {
+  effects.sparkle(world, {
+    position: [x, 0.4, z],
+    colors: toColor(player ? MOB_COLORS.PLAYER : MOB_COLORS.ENEMY),
+    count: 5,
+    size: 0.07,
+    speed: 1.5,
+    lifetime: 0.24,
+    flash: false
+  });
+}
+export function captured(world: World, x: number, z: number) {
+  effects.shatter(world, { position: [x, 1.2, z], colors: toColor(MOB_COLORS.ENEMY), count: 12, size: 0.14, speed: 3, lifetime: 0.5, gravity: -7 });
+}
+export function celebrate(world: World) {
+  effects.confetti(world, {
+    position: [0, 2, -12],
+    colors: [toColor(MOB_COLORS.PLAYER), [1, 0.82, 0.35, 1], WHITE],
+    count: 35,
+    size: 0.1,
+    speed: 5,
+    lifetime: 1.2,
+    gravity: -4
+  });
+}
+export function removeScene(world: World, s: Scene) {
+  world.despawn(s.root);
+}

package/src/games/number-search/NumberSearch.tsx

@@ -0,0 +1,18 @@
+// Number Search, on the Nayan engine: eight numbers hidden in a 10 x 10 grid of 3D digit tiles. The
+// board, rules and screen are shared with Word Search (search-grid/); this is what's Number Search's own.
+import { GAME_SOUNDS } from '../../services/SoundsService';
+import { GAME_IDS } from '../../services/UtilsService';
+import { createSearchGame } from '../search-grid/SearchGrid';
+import { NUMBERS } from './NumberSearchNumbers';
+
+export const NumberSearch = createSearchGame({
+  gameId: GAME_IDS.NUMBER_SEARCH,
+  list: NUMBERS,
+  alphabet: '0123456789',
+  sounds: GAME_SOUNDS.NUMBER_SEARCH,
+  winTitle: 'ALL NUMBERS FOUND!',
+  winMessage: 'Great number hunting!',
+  startSubtext: 'Find hidden numbers!',
+  variant: 'number',
+  displayName: 'NumberSearch'
+});