dotframe 0.1.5 → 0.1.7

package/templates/_base/main.ios.ts

@@ -0,0 +1,19 @@
+// iOS entry for dotframe build ios: scriptc library mode, so the generated host calls init once with the bundle's
+// game folder (assets under <base>/assets, engine fonts under <base>/dotframe/assets/fonts) and frame every refresh.
+// Library mode has no promises: load assets synchronously with platform.readFile.
+import type { Frame } from "dotframe/src/gpu";
+import { openLibraryPlatform } from "dotframe/src/native/library";
+import { WINDOW } from "./src/game";
+import { createSetup } from "./src/setup";
+
+let tick: Frame | null = null;
+
+export function init(_base: string): void {
+  const platform = openLibraryPlatform(WINDOW);
+  tick = createSetup({ link: null, mash: null })(platform);
+}
+
+// Returns false to ask the host to quit.
+export function frame(time: number): boolean {
+  return tick ? tick(time) : true;
+}

package/templates/_base/main.native.ts

@@ -1,6 +1,7 @@
 // Native entry for dotframe build macos|windows. The CLI stages it with the engine and compiles it with scriptc.
+// Online play is web only for now (native builds have no WebSocket).
 import { run } from "dotframe/src/native/run";
 import { WINDOW } from "./src/game";
 import { createSetup } from "./src/setup";
 
-await run(WINDOW, createSetup());
+await run(WINDOW, createSetup({ link: null, mash: null }));

package/templates/_base/main.web.ts

@@ -1,5 +1,13 @@
+import { connectRelay } from "dotframe/src/relay-client";
 import { run } from "dotframe/src/web/run";
 import { WINDOW } from "./src/game";
 import { createSetup } from "./src/setup";
 
-await run(WINDOW, createSetup());
+// ?room=<name> plays online through a dotframe relay (?relay=ws://..., default the page's /relay). ?mash=<seed> lets
+// a scripted player press random inputs, which is how `dotframe play --online` drives two browsers.
+const params = new URLSearchParams(location.search);
+const room = params.get("room");
+const relay = params.get("relay") ?? `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/relay`;
+const mash = params.get("mash");
+
+await run(WINDOW, createSetup({ link: room ? connectRelay(relay, room) : null, mash: mash === null ? null : Number(mash) }));

package/templates/_base/sim.ts

@@ -1,6 +1,6 @@
 // The dotframe CLI contract: dotframe sim, snap, replay, and desync drive the game through this module.
 import { defineSim, type SimPlatform, type SimRun } from "dotframe/src/sim";
-import { checksum, createGame, PLAYERS, encode, type Game, randomInput, render, snapshot, state, step, WINDOW } from "./src/game";
+import { checksum, createGame, encode, type Game, PLAYERS, randomInput, render, restore, snapshot, state, step, WINDOW } from "./src/game";
 
 export default defineSim({
   players: PLAYERS,
@@ -23,9 +23,7 @@ export default defineSim({
       state: (): unknown => state(game),
       over: (): boolean => game.winner >= 0,
       save: (): unknown => snapshot(game),
-      restore: (saved: unknown): void => {
-        Object.assign(game, snapshot(saved as Game));
-      },
+      restore: (saved: unknown): void => restore(game, saved as Game),
       inspect: (): unknown => game,
       render: (draw) => render(game, draw),
     };

package/templates/_base/src/setup.ts

@@ -1,27 +1,128 @@
-// Shared by main.web.ts and main.native.ts: fixed 60 Hz steps from the keyboard, then one render per frame.
+// Shared by main.web.ts and main.native.ts: keyboard and pointer to inputs, fixed 60 Hz steps, one render per frame.
+// Online, the same steps go through dotframe's rollback netplay instead of straight to step().
 import { createDraw2D } from "dotframe/src/draw2d";
-import type { Frame, Setup } from "dotframe/src/gpu";
-import { Key } from "dotframe/src/input";
-import type { Platform } from "dotframe/src/platform";
-import { createGame, keyInput, PLAYERS, render, step, WINDOW } from "./game";
+import type { AudioPlayer } from "dotframe/src/audio";
+import type { Frame, RenderGpu } from "dotframe/src/gpu";
+import type { Input } from "dotframe/src/input";
+import { Key, MouseButton } from "dotframe/src/input";
+import { createRollback, type RelayLink, type Rollback } from "dotframe/src/netplay";
+import { checksum, createGame, type Game, keyInput, PLAYERS, POINTER_BIT, randomInput, render, restore, snapshot, step, WINDOW } from "./game";
+
+export interface SetupOptions {
+  // An open relay link plays online as the slot the relay assigns; null plays locally.
+  link: RelayLink | null;
+  // A seed makes player 1 a scripted masher (tests); null reads the keyboard and pointer.
+  mash: number | null;
+}
+
+// What `dotframe play --online` reads from each browser.
+interface Probe {
+  frame: number;
+  confirmed: number;
+  status: string;
+  sums: Record<number, number>;
+}
 
 const STEP = 1 / 60;
+// A full charge takes one second of holding.
+const FULL_CHARGE = 60;
 
-export function createSetup(): Setup {
-  return ({ gpu, input }: Platform): Frame => {
-    const draw = createDraw2D(gpu, WINDOW.width, WINDOW.height);
-    const game = createGame(Math.floor(Math.random() * 1e9));
+// What setup needs from a platform: the async web and native platforms and iOS's library platform all have it.
+export interface SetupPlatform {
+  gpu: RenderGpu;
+  input: Input;
+  audio: AudioPlayer;
+}
+
+export function createSetup(options: SetupOptions): (platform: SetupPlatform) => Frame {
+  return ({ gpu, input, audio }: SetupPlatform): Frame => {
+    // The logical canvas keeps the game's aspect and grows to fill the screen: on a 2.16 phone the game area is
+    // centered with extra width around it instead of being stretched.
+    const aspect = gpu.aspect();
+    const logicalWidth = Math.max(WINDOW.width, Math.round(WINDOW.height * aspect));
+    const logicalHeight = Math.max(WINDOW.height, Math.round(WINDOW.width / aspect));
+    const offsetX = (logicalWidth - WINDOW.width) / 2;
+    const offsetY = (logicalHeight - WINDOW.height) / 2;
+    const draw = createDraw2D(gpu, logicalWidth, logicalHeight);
+    // Online peers must start from the same state, so the seed is fixed there.
+    const game: Game = createGame(options.link ? 1 : Math.floor(Math.random() * 1e9));
+    let rollback: Rollback | null = null;
+    let mashState = options.mash ?? 0;
+    const nextRandom = (): number => {
+      mashState = (Math.imul(mashState, 1103515245) + 12345) >>> 0;
+      return mashState / 4294967296;
+    };
+    let mashed = 0;
+    let mashInput = 0;
+    const probe: Probe = { frame: 0, confirmed: 0, status: options.link ? "connecting" : "local", sums: {} };
+    (globalThis as { __dotframe?: Probe }).__dotframe = probe;
     let simulated = -1;
+    // Hold to charge, release to act: the pattern most mouse and touch games need.
+    let charge = 0;
+    let wasDown = false;
     return (time: number): boolean => {
       if (simulated < 0) simulated = time;
-      // Fixed steps, so every target plays exactly what dotframe sim simulates.
       for (let n = 0; simulated + STEP <= time && n < 5; n++) {
+        const pointer = input.pointer();
+        const inside = pointer.x >= 0 && pointer.x <= 1 && pointer.y >= 0 && pointer.y <= 1;
+        const down = inside && ((pointer.buttons & MouseButton.Left) !== 0 || input.touches().length > 0);
+        let released = false;
+        if (down) charge = Math.min(FULL_CHARGE, charge + 1);
+        else if (wasDown) {
+          released = true;
+          // Audio is presentation, never simulation state: the pitch says how charged the release was.
+          audio.tone(220 + (charge / FULL_CHARGE) * 660, 0.12, 0.25);
+          charge = 0;
+        }
+        wasDown = down;
         const keys = [keyInput(input, [Key.A, Key.D, Key.W, Key.J]), keyInput(input, [Key.Left, Key.Right, Key.Up, Key.L])];
-        step(game, keys.slice(0, PLAYERS));
+        if (released) keys[0] = keys[0] | POINTER_BIT;
+        if (options.mash !== null) {
+          // A new random input every 6 frames, like a mashing player.
+          if (mashed % 6 === 0) mashInput = randomInput(nextRandom);
+          keys[0] = mashInput;
+          mashed += 1;
+        }
+        const link = options.link;
+        if (link) {
+          probe.status = link.status();
+          if (!rollback && link.status() === "paired") {
+            rollback = createRollback({
+              sim: {
+                step: (inputs: number[]): void => step(game, inputs),
+                save: (): Game => snapshot(game),
+                restore: (saved: Game): void => restore(game, saved),
+                checksum: (): number => checksum(game),
+              },
+              transport: link.transport,
+              localPort: link.slot(),
+              neutral: 0,
+              inputDelay: 2,
+              maxRollback: 20,
+            });
+          }
+          // Online, each browser controls its own player with player 1's keys.
+          if (rollback) {
+            rollback.tick(keys[0]);
+            probe.frame = rollback.stats().frame;
+            probe.confirmed = rollback.confirmedFrame();
+            for (let f = 30; f < probe.confirmed; f += 30) if (probe.sums[f] === undefined) probe.sums[f] = rollback.sumAt(f) ?? 0;
+          }
+        } else {
+          step(game, keys.slice(0, PLAYERS));
+          probe.frame += 1;
+        }
         simulated += STEP;
       }
       draw.begin();
+      draw.translate(offsetX, offsetY);
       render(game, draw);
+      if (charge > 0) {
+        // Charge meter under the play area.
+        draw.setFillStyle("#ffffff");
+        draw.fillRect(20, WINDOW.height - 16, (WINDOW.width - 40) * (charge / FULL_CHARGE), 6);
+      }
+      draw.resetTransform();
       draw.end({ r: 0, g: 0, b: 0 });
       return true;
     };

package/templates/_base/tsconfig.json

@@ -10,5 +10,5 @@
     "skipLibCheck": true
   },
   "include": ["*.ts", "src", "scripts"],
-  "exclude": ["main.native.ts"]
+  "exclude": ["main.native.ts", "main.ios.ts"]
 }

package/templates/blank/game.ts

@@ -4,6 +4,8 @@ import type { Draw2D } from "dotframe/src/draw2d";
 import type { Input } from "dotframe/src/input";
 
 export const WINDOW = { width: 960, height: 540, title: "__NAME__" };
+// The input bit a released mouse or touch press sets for player 1 (fires the action bit); see src/setup.ts.
+export const POINTER_BIT = 8;
 export const PLAYERS = 2;
 
 export interface Game {
@@ -50,8 +52,15 @@ export function state(game: Game): unknown {
   return game;
 }
 
+// Field by field (scriptc compiles neither structuredClone nor Object.assign): netplay saves every frame.
 export function snapshot(game: Game): Game {
-  return structuredClone(game);
+  return { frame: game.frame, players: game.players.map((p) => ({ x: p.x, y: p.y })), winner: game.winner };
+}
+
+export function restore(game: Game, saved: Game): void {
+  game.frame = saved.frame;
+  game.players = saved.players.map((p) => ({ x: p.x, y: p.y }));
+  game.winner = saved.winner;
 }
 
 export function render(game: Game, draw: Draw2D): void {

package/templates/fighter/game.ts

@@ -11,6 +11,8 @@ const RIGHT = 2;
 const JUMP = 4;
 const ATTACK = 8;
 const GROUND = 440;
+// The input bit a released mouse or touch press sets for player 1 (attacks); see src/setup.ts.
+export const POINTER_BIT = ATTACK;
 const GRAVITY = 0.8;
 const SPEED = 5;
 const JUMP_SPEED = 15;
@@ -112,8 +114,20 @@ export function state(game: Game): unknown {
   return { frame: game.frame, winner: game.winner, fighters: game.fighters.map(({ x, y, damage, stocks }) => ({ x: Math.round(x), y: Math.round(y), damage, stocks })) };
 }
 
+// Field by field (scriptc compiles neither structuredClone nor Object.assign): netplay saves every frame.
+function copyFighter(f: Fighter): Fighter {
+  return { x: f.x, y: f.y, vx: f.vx, vy: f.vy, facing: f.facing, damage: f.damage, stocks: f.stocks, cooldown: f.cooldown, stun: f.stun, held: f.held };
+}
+
 export function snapshot(game: Game): Game {
-  return structuredClone(game);
+  return { frame: game.frame, seed: game.seed, fighters: game.fighters.map(copyFighter), winner: game.winner };
+}
+
+export function restore(game: Game, saved: Game): void {
+  game.frame = saved.frame;
+  game.seed = saved.seed;
+  game.fighters = saved.fighters.map(copyFighter);
+  game.winner = saved.winner;
 }
 
 const COLORS = ["#ff5a5f", "#3fa7ff"];

package/templates/platformer/game.ts

@@ -9,6 +9,8 @@ export const PLAYERS = 1;
 const LEFT = 1;
 const RIGHT = 2;
 const JUMP = 4;
+// The input bit a released mouse or touch press sets for player 1 (jumps); see src/setup.ts.
+export const POINTER_BIT = JUMP;
 const GRAVITY = 0.7;
 const SPEED = 4.5;
 const JUMP_SPEED = 13;
@@ -100,8 +102,32 @@ export function state(game: Game): unknown {
   return { frame: game.frame, x: Math.round(game.x), y: Math.round(game.y), coins: game.coins.filter((c) => c.taken).length, of: game.coins.length, won: game.winner === 0 };
 }
 
+// Field by field (scriptc compiles neither structuredClone nor Object.assign): netplay saves every frame.
 export function snapshot(game: Game): Game {
-  return structuredClone(game);
+  return {
+    frame: game.frame,
+    x: game.x,
+    y: game.y,
+    vx: game.vx,
+    vy: game.vy,
+    onGround: game.onGround,
+    held: game.held,
+    coins: game.coins.map((c) => ({ x: c.x, y: c.y, taken: c.taken })),
+    winner: game.winner,
+  };
+}
+
+export function restore(game: Game, saved: Game): void {
+  const s = snapshot(saved);
+  game.frame = s.frame;
+  game.x = s.x;
+  game.y = s.y;
+  game.vx = s.vx;
+  game.vy = s.vy;
+  game.onGround = s.onGround;
+  game.held = s.held;
+  game.coins = s.coins;
+  game.winner = s.winner;
 }
 
 export function render(game: Game, draw: Draw2D): void {