dotframe 0.1.6 → 0.1.7

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,18 +1,61 @@
 // 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 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 type { Platform } from "dotframe/src/platform";
-import { createGame, keyInput, PLAYERS, POINTER_BIT, render, step, WINDOW } from "./game";
+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, audio }: 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;
@@ -34,16 +77,52 @@ export function createSetup(): Setup {
         wasDown = down;
         const keys = [keyInput(input, [Key.A, Key.D, Key.W, Key.J]), keyInput(input, [Key.Left, Key.Right, Key.Up, Key.L])];
         if (released) keys[0] = keys[0] | POINTER_BIT;
-        step(game, keys.slice(0, PLAYERS));
+        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

@@ -52,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

@@ -114,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

@@ -102,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 {