@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/bluk/BlukGame.ts

@@ -0,0 +1,323 @@
+// Bluk's play, with no React: build a game with `createGame`, give it the view's size, `start` it and
+// `tick` it every frame. Drag to aim (a dotted arc shows the jump), let go to launch the block toward the
+// next pillar. Landing scores 1,000; landing in the gold sweet spot is a perfect landing worth 500 more
+// and builds a combo. Falling off ends the run; surviving the two minutes wins it.
+//
+// The rules are the original version's (BlukRules.ts): the same launches, flights, landings and pillars,
+// stepped at a fixed 60 Hz on the game's own clock (the original flight stepped once per display frame,
+// scaled to 60 Hz).
+import { type Camera, type DragEvent, World } from '@nayan-ui/engine';
+import type { GameTheme } from '../../services/ThemeService';
+import type { HudFeedback } from '../shared/EngineHud';
+import { type Config, FALL_DELAY, GAME_DURATION, MAX_PENDING_MS, START_COLOR, STEP_MS, STEP_TOLERANCE_MS } from './BlukConstants';
+import {
+  type Course,
+  type Flight,
+  landingPoints,
+  landOn,
+  launchVelocity,
+  newCourse,
+  type Pillar,
+  stepFlight,
+  targetsAhead,
+  tiltFor,
+  trajectory
+} from './BlukRules';
+import {
+  buildScene,
+  fall,
+  frame,
+  hideArc,
+  land,
+  placeBlock,
+  relax,
+  removeScene,
+  resetBlock,
+  type Scene,
+  showArc,
+  squash,
+  stretch,
+  syncPillars
+} from './BlukScene';
+
+export type Phase = 'ready' | 'playing' | 'over';
+/** jump / land / perfect: the block's moves; fall: it went over the edge; gameOver: the run's lost a beat later. */
+export type GameEvent = 'jump' | 'land' | 'perfect' | 'fall' | 'gameOver';
+type Block = 'resting' | 'flying' | 'dead';
+
+const WORLD_CAPACITY = 600; // the sky and towers, the pillars, the block, the arc, and the bursts
+const CAMERA_TIME = 0.3; // the camera sliding on to a new pillar
+
+export function createGame(theme: GameTheme) {
+  const world = new World(WORLD_CAPACITY);
+  const camera: Camera = { eye: [0, 0, 300], target: [0, 0, 0], fov: 1, ortho: 1 };
+  const g = {
+    world,
+    camera,
+    theme,
+    config: null as Config | null,
+    scene: null as Scene | null,
+    phase: 'ready' as Phase,
+    course: null as Course | null,
+    block: 'resting' as Block,
+    flight: { x: 0, y: 0, vx: 0, vy: 0 } as Flight,
+    /** The pillars this jump can land on (fixed at launch, as the original flight's were). */
+    targets: [] as Pillar[],
+    tilt: 0,
+    /** Whether the board on screen has been played on (Start deals a fresh one if so). */
+    dirty: false,
+    /** Score and the countdown live in the engine (Rust), advanced by world.update. */
+    get score() {
+      return world.scoreboard.score;
+    },
+    combo: 0,
+    colorIndex: START_COLOR,
+    won: false,
+    get timeLeft() {
+      return world.scoreboard.shownSeconds;
+    },
+    /** The camera: where it is, and where it's sliding to (from, to, when it started). */
+    camX: 0,
+    camMove: null as { from: number; to: number; at: number } | null,
+    /** Whether the finger has moved far enough to be aiming (the original pan only began after it moved). */
+    aiming: false,
+    pending: 0,
+    /** Seconds on the game's clock, for the camera's slide. */
+    clock: 0,
+    // UI hooks, set by the screen.
+    onPhase: (_p: Phase) => {},
+    onScore: (_s: number) => {},
+    onCombo: (_c: number) => {},
+    onTime: (_t: number) => {},
+    hudFeedback: {} as HudFeedback,
+    onEvent: (_e: GameEvent) => {}
+  };
+  world.scoreboard.reset(0, GAME_DURATION);
+  world.scoreboard.handlers = {
+    onSecond: (t) => g.onTime(t),
+    // Two minutes survived is a win
+    onTimeUp: () => g.phase === 'playing' && g.block !== 'dead' && end(g, true)
+  };
+  return g;
+}
+export type Game = ReturnType<typeof createGame>;
+
+// ── Scene ─────────────────────────────────────────────────────────────
+
+/** Sizes the course for the view: a fresh board if none was played on yet, else the board rebuilt where it stands. */
+export function setLayout(g: Game, c: Config) {
+  const changed = !g.config || g.config.width !== c.width || g.config.height !== c.height;
+  g.config = c;
+  if (!g.course || (changed && !g.dirty && g.phase === 'ready')) {
+    deal(g);
+    return;
+  }
+  rebuild(g);
+}
+
+export function setTheme(g: Game, theme: GameTheme) {
+  g.theme = theme;
+  if (g.config && g.scene) rebuild(g);
+}
+
+function rebuild(g: Game) {
+  const { config: c, course: k } = g;
+  if (!c || !k) return;
+  if (g.scene) removeScene(g.world, g.scene);
+  g.scene = buildScene(g.world, c, g.theme, k.pillars, [g.flight.x, g.flight.y], g.colorIndex);
+  placeBlock(g.world, g.scene, g.flight.x, g.flight.y, g.tilt);
+  frame(g.world, c, g.scene, g.camera, g.camX);
+}
+
+/** A fresh board: the first pillar under the anchor, the block resting on it, the camera at the start. */
+function deal(g: Game) {
+  const c = g.config;
+  if (!c) return;
+  g.course = newCourse(c);
+  const first = g.course.pillars[0]!;
+  g.flight = { x: first.worldX, y: first.topY - c.blockSize / 2, vx: 0, vy: 0 };
+  g.block = 'resting';
+  g.tilt = 0;
+  g.dirty = false;
+  g.colorIndex = START_COLOR;
+  g.camX = 0;
+  g.camMove = null;
+  g.pending = 0;
+  g.world.cancelTimers();
+  rebuild(g);
+  if (g.scene) resetBlock(g.world, c, g.scene, g.colorIndex);
+}
+
+// ── Run ───────────────────────────────────────────────────────────────
+
+/** Starts play: on the board shown if it's fresh, on a fresh one if not (as the original game). */
+export function start(g: Game) {
+  if (g.phase === 'playing' || !g.config) return;
+  if (g.dirty || g.phase === 'over') deal(g);
+  g.world.scoreboard.reset();
+  g.world.scoreboard.startCountdown(GAME_DURATION);
+  g.combo = 0;
+  g.won = false;
+  g.colorIndex = START_COLOR;
+  g.phase = 'playing';
+  g.onScore(0);
+  g.onCombo(0);
+  g.onTime(GAME_DURATION);
+  g.hudFeedback.message = undefined;
+  g.onPhase('playing');
+}
+
+/** A fresh board, not started (Stop, Play Again). The world, and the GPU view drawing it, are kept. */
+export function reset(g: Game) {
+  g.world.scoreboard.reset(0, GAME_DURATION);
+  g.combo = 0;
+  g.won = false;
+  g.phase = 'ready';
+  deal(g);
+  g.onScore(0);
+  g.onCombo(0);
+  g.onTime(GAME_DURATION);
+  g.hudFeedback.message = undefined;
+  g.onPhase('ready');
+}
+
+export function dispose(g: Game) {
+  g.world.dispose();
+}
+
+export function tick(g: Game, dt: number) {
+  if (g.world.isDisposed) return;
+  g.clock += Math.min(dt, 0.25);
+  // The flight, in fixed 60 Hz steps
+  if (g.phase === 'playing' && g.block === 'flying') {
+    let pending = Math.min(g.pending + dt * 1000, MAX_PENDING_MS);
+    while (g.block === 'flying' && pending >= STEP_MS - STEP_TOLERANCE_MS) {
+      pending -= STEP_MS;
+      step(g);
+    }
+    g.pending = pending;
+    if (g.block === 'flying' && g.scene) placeBlock(g.world, g.scene, g.flight.x, g.flight.y, g.tilt);
+  }
+  // The camera sliding on (an ease-out over 0.3 s)
+  const m = g.camMove;
+  if (m) {
+    const t = Math.min(1, (g.clock - m.at) / CAMERA_TIME);
+    g.camX = m.from + (m.to - m.from) * (1 - (1 - t) ** 3);
+    if (t >= 1) g.camMove = null;
+  }
+  if (g.config && g.scene) frame(g.world, g.config, g.scene, g.camera, g.camX);
+  g.world.update(dt);
+}
+
+function end(g: Game, won: boolean) {
+  g.world.scoreboard.stop();
+  g.won = won;
+  g.phase = 'over';
+  if (g.config && g.scene) hideArc(g.world, g.config, g.scene);
+  g.onPhase('over');
+}
+
+function step(g: Game) {
+  const c = g.config!;
+  const k = g.course!;
+  const { landed, fell } = stepFlight(c, g.flight, g.targets);
+  g.tilt = tiltFor(g.flight.vy);
+  if (landed >= 0) return arrive(g, k.current + 1 + landed);
+  if (fell) {
+    g.block = 'dead';
+    // The clock stops with the block: a fall can't run out into a win
+    g.world.scoreboard.stop();
+    if (g.scene) fall(g.world, g.scene, g.tilt, g.colorIndex);
+    g.onEvent('fall');
+    g.world.after(FALL_DELAY, () => {
+      if (g.phase !== 'playing') return;
+      g.onEvent('gameOver');
+      end(g, false);
+    });
+  }
+}
+
+/** Landed on a pillar: scored (perfect or not), the board moves on, the camera slides after it. */
+function arrive(g: Game, index: number) {
+  const c = g.config!;
+  const k = g.course!;
+  const p = k.pillars[index]!;
+  const x = g.flight.x;
+  const { perfect, points, combo } = landingPoints(c, p, x, g.combo);
+  const tilt = g.tilt;
+  g.block = 'resting';
+  g.flight.vx = 0;
+  g.flight.vy = 0;
+  g.tilt = 0;
+  g.world.scoreboard.add(points);
+  g.combo = combo;
+  g.colorIndex = p.colorIndex;
+  landOn(c, k, index);
+  const { scene: s } = g;
+  if (s) {
+    placeBlock(g.world, s, x, g.flight.y, tilt); // snapped onto the top; the landing eases the tilt out
+    land(g.world, c, s, x, p.topY, perfect, g.colorIndex);
+    syncPillars(g.world, c, s, k.pillars);
+  }
+  g.camMove = { from: g.camX, to: p.worldX - c.anchorX, at: g.clock };
+  g.onScore(g.score);
+  g.onCombo(g.combo);
+  if (perfect) {
+    g.hudFeedback.message = 'PERFECT!';
+    g.onEvent('perfect');
+  } else g.onEvent('land');
+}
+
+// ── The finger ────────────────────────────────────────────────────────
+
+const PAN_SLOP = 10;
+const aimable = (g: Game) => g.phase === 'playing' && g.block === 'resting' && !!g.config && !!g.course;
+
+/** Dragging aims (the arc and a crouch follow the drag); letting go launches, if the drag was enough. */
+export function drag(g: Game, { phase, dx, dy, cancelled }: DragEvent) {
+  const { config: c, scene: s } = g;
+  if (!c || !s) return;
+  if (phase === 'start') {
+    g.aiming = false;
+    return;
+  }
+  // A drag only aims once it's gone PAN_SLOP points (a tap never jumps, as the original pan didn't start for one)
+  if (!g.aiming && Math.hypot(dx, dy) >= PAN_SLOP) g.aiming = true;
+  if (!g.aiming) return;
+  if (phase === 'end') g.aiming = false;
+  if (!aimable(g)) {
+    hideArc(g.world, c, s);
+    return;
+  }
+  const v = launchVelocity(c, dx, dy);
+  if (phase === 'move') {
+    if (!v) {
+      hideArc(g.world, c, s);
+      squash(g.world, c, s, 0);
+      return;
+    }
+    showArc(g.world, c, s, trajectory(c, v, g.flight.x, g.flight.y, targetsAhead(g.course!)));
+    squash(g.world, c, s, (-0.16 * Math.hypot(v.vx, v.vy)) / c.maxLaunchSpeed);
+    return;
+  }
+  hideArc(g.world, c, s);
+  if (!v || cancelled) {
+    relax(g.world, c, s);
+    return;
+  }
+  launch(g, v.vx, v.vy);
+}
+
+/** The block leaves the pillar. */
+export function launch(g: Game, vx: number, vy: number) {
+  const c = g.config;
+  if (!c || !aimable(g)) return;
+  g.flight.vx = vx;
+  g.flight.vy = vy;
+  g.targets = targetsAhead(g.course!);
+  g.block = 'flying';
+  g.dirty = true;
+  g.pending = 0;
+  if (g.scene) stretch(g.world, c, g.scene);
+  g.onEvent('jump');
+}

package/src/games/bluk/BlukRules.ts

@@ -0,0 +1,154 @@
+// Bluk's rules, with no React or engine: the launch from a drag, the flight one 60 Hz step at a time,
+// the landing test, the preview arc, and the pillars ahead. Ported from the original version's UI-thread
+// flight and its service (games/bluk), with the same random draws in the same order. Coordinates are
+// the original game's: view points, y down, x along the world.
+import {
+  type Config,
+  GRAVITY,
+  LOOKAHEAD,
+  MIN_LAUNCH_SPEED,
+  PERFECT_BONUS,
+  POINTS_PER_LAND,
+  POWER_MULTIPLIER,
+  TRAJECTORY_DOTS,
+  TRAJECTORY_STEP
+} from './BlukConstants';
+
+export type Pillar = { id: string; worldX: number; topY: number; width: number; colorIndex: number };
+export type Velocity = { vx: number; vy: number };
+
+/** The launch for a drag (it always goes forward and up), or null for a drag too small to count. */
+export function launchVelocity(c: Config, dx: number, dy: number): Velocity | null {
+  let vx = Math.max(dx * POWER_MULTIPLIER, 0);
+  let vy = Math.min(dy * POWER_MULTIPLIER, -3);
+  let speed = Math.sqrt(vx * vx + vy * vy);
+  if (speed < 1) return null;
+  if (speed < MIN_LAUNCH_SPEED) {
+    const s = MIN_LAUNCH_SPEED / speed;
+    vx *= s;
+    vy *= s;
+    speed = MIN_LAUNCH_SPEED;
+  }
+  if (speed > c.maxLaunchSpeed) {
+    const s = c.maxLaunchSpeed / speed;
+    vx *= s;
+    vy *= s;
+  }
+  return { vx, vy };
+}
+
+/** The pillar a descending block (centre x, from prevY to y) lands on, if any: it must cross the top with enough overlap. */
+export function landingOn(c: Config, targets: Pillar[], x: number, prevY: number, y: number): number {
+  const half = c.blockSize / 2;
+  for (let j = 0; j < targets.length; j++) {
+    const p = targets[j]!;
+    if (!(prevY + half <= p.topY && y + half >= p.topY)) continue;
+    if (Math.abs(x - p.worldX) <= p.width / 2 + half * 0.4) return j;
+  }
+  return -1;
+}
+
+/** The block's flight: centre and velocity. */
+export type Flight = { x: number; y: number; vx: number; vy: number };
+
+/** One 60 Hz step: falls, moves; says which target it landed on (the block snapped onto it), or that it fell, or neither. */
+export function stepFlight(c: Config, f: Flight, targets: Pillar[]): { landed: number; fell: boolean } {
+  const prevY = f.y;
+  f.vy += GRAVITY;
+  f.x += f.vx;
+  f.y += f.vy;
+  if (f.vy > 0) {
+    const j = landingOn(c, targets, f.x, prevY, f.y);
+    if (j >= 0) {
+      f.y = targets[j]!.topY - c.blockSize / 2;
+      return { landed: j, fell: false };
+    }
+  }
+  return { landed: -1, fell: f.y > c.fallThresholdY };
+}
+
+/** The tilt in flight: leaning forward going up, back coming down. */
+export const tiltFor = (vy: number) => Math.max(-0.35, Math.min(0.35, vy * 0.025));
+
+/** The preview arc's points [x0, y0, x1, y1, ...] (world x, view y), ending where it would land. */
+export function trajectory(c: Config, v: Velocity, startX: number, startY: number, targets: Pillar[]): number[] {
+  const pts: number[] = [];
+  let px = startX;
+  let py = startY;
+  let pvy = v.vy;
+  for (let i = 0; i < TRAJECTORY_DOTS * TRAJECTORY_STEP; i++) {
+    const prev = py;
+    pvy += GRAVITY;
+    px += v.vx;
+    py += pvy;
+    if (pvy > 0) {
+      const j = landingOn(c, targets, px, prev, py);
+      if (j >= 0) {
+        pts.push(px, targets[j]!.topY - c.blockSize / 2);
+        break;
+      }
+    }
+    if (i % TRAJECTORY_STEP === 0) pts.push(px, py);
+    if (py > c.fallThresholdY) break;
+  }
+  return pts;
+}
+
+/** The run of pillars: where you stand, how many you've landed on (it gets harder), and the ids handed out. */
+export type Course = { pillars: Pillar[]; current: number; landed: number; seq: number };
+
+function makePillar(c: Config, k: Course, worldX: number, width: number): Pillar {
+  const topY = c.pillarTopMin + Math.random() * (c.pillarTopMax - c.pillarTopMin);
+  const p = { id: `pillar-${k.seq}`, worldX, topY: Math.round(topY), width: Math.round(width), colorIndex: k.seq % 8 };
+  k.seq++;
+  return p;
+}
+
+function appendPillar(c: Config, k: Course) {
+  const last = k.pillars[k.pillars.length - 1]!;
+  // Narrower as the run goes on
+  const shrink = Math.min(k.landed * c.widthShrinkPerScore, c.widthShrinkMax);
+  const max = Math.max(c.pillarMinWidth, c.pillarMaxWidth - shrink);
+  const width = c.pillarMinWidth + Math.random() * (max - c.pillarMinWidth);
+  // Wider gaps as it goes on, but never so far the next pillar leaves the screen
+  const growth = Math.min(k.landed * c.gapGrowthPerScore, c.gapGrowthMax);
+  const wanted = c.gapMin + growth + Math.random() * (c.gapMax - c.gapMin);
+  const visible = c.width - c.viewportMargin - c.pillarDepth - width - (c.anchorX + last.width / 2);
+  const gap = Math.max(c.gapMin, Math.min(wanted, visible));
+  k.pillars.push(makePillar(c, k, last.worldX + last.width / 2 + gap + width / 2, width));
+}
+
+function ensureAhead(c: Config, k: Course) {
+  while (k.pillars.length - 1 - k.current < LOOKAHEAD) appendPillar(c, k);
+}
+
+/** A fresh run: the first pillar (at its widest) under the view's anchor, and four ahead. */
+export function newCourse(c: Config): Course {
+  const k: Course = { pillars: [], current: 0, landed: 0, seq: 0 };
+  k.pillars.push(makePillar(c, k, c.anchorX, c.pillarMaxWidth));
+  ensureAhead(c, k);
+  return k;
+}
+
+/** The pillars a jump can land on: everything ahead of the current one. */
+export const targetsAhead = (k: Course) => k.pillars.slice(k.current + 1);
+
+/** Landed on a pillar: it's the current one now; more are made ahead and old ones behind dropped (one kept). */
+export function landOn(c: Config, k: Course, index: number) {
+  k.current = index;
+  k.landed++;
+  ensureAhead(c, k);
+  const keepFrom = Math.max(0, k.current - 1);
+  if (keepFrom > 0) {
+    k.pillars.splice(0, keepFrom);
+    k.current -= keepFrom;
+  }
+}
+
+/** A landing's points: perfect (within the sweet spot) adds the bonus and grows the combo. */
+export function landingPoints(c: Config, p: Pillar, x: number, combo: number): { perfect: boolean; points: number; combo: number } {
+  const perfect = Math.abs(x - p.worldX) <= c.sweetSpotWidth / 2;
+  if (!perfect) return { perfect, points: POINTS_PER_LAND, combo: 0 };
+  const next = combo + 1;
+  return { perfect, points: POINTS_PER_LAND + PERFECT_BONUS + (next - 1) * 5, combo: next };
+}