@lagless/create 0.0.33

package/templates/pixi-react/__packageName__-frontend/src/app/screens/title.screen.tsx

@@ -0,0 +1,104 @@
+import { FC } from 'react';
+import { useStartMatch } from '../hooks/use-start-match';
+import { useStartMultiplayerMatch } from '../hooks/use-start-multiplayer-match';
+
+export const TitleScreen: FC = () => {
+  const { isBusy, startMatch } = useStartMatch();
+  const multiplayer = useStartMultiplayerMatch();
+
+  const isMultiplayerBusy = multiplayer.state !== 'idle';
+
+  return (
+    <div style={styles.screen}>
+      <div style={styles.title}><%= projectName %></div>
+      <div style={styles.subtitle}>Multiplayer Game</div>
+      <div style={styles.actions}>
+        <button style={styles.button} onClick={startMatch} disabled={isMultiplayerBusy || isBusy}>
+          {isBusy ? 'Starting...' : 'Play Local'}
+        </button>
+        <button
+          style={styles.buttonPrimary}
+          onClick={isMultiplayerBusy ? multiplayer.cancel : multiplayer.startMatch}
+          disabled={isBusy}
+        >
+          {multiplayer.state === 'queuing' && `In Queue${multiplayer.queuePosition ? ` #${multiplayer.queuePosition}` : ''}...`}
+          {multiplayer.state === 'connecting' && 'Connecting...'}
+          {multiplayer.state === 'error' && `Error: ${multiplayer.error}`}
+          {multiplayer.state === 'idle' && 'Play Online'}
+        </button>
+      </div>
+      <div style={styles.controls}>
+        <div style={styles.controlsTitle}>Controls</div>
+        <div>WASD / Arrow Keys — Move</div>
+        <div>F3 — Debug Panel</div>
+      </div>
+    </div>
+  );
+};
+
+const styles: Record<string, React.CSSProperties> = {
+  screen: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: '#0a0a1a',
+    fontFamily: "'Courier New', monospace",
+    color: '#e0e0e0',
+  },
+  title: {
+    fontSize: 48,
+    fontWeight: 'bold',
+    color: '#88aaff',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    marginBottom: 48,
+  },
+  actions: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    alignItems: 'center',
+  },
+  button: {
+    padding: '12px 32px',
+    fontSize: 18,
+    cursor: 'pointer',
+    background: '#222',
+    color: '#e0e0e0',
+    border: '2px solid #555',
+    borderRadius: 6,
+    fontFamily: "'Courier New', monospace",
+    minWidth: 220,
+  },
+  buttonPrimary: {
+    padding: '12px 32px',
+    fontSize: 18,
+    cursor: 'pointer',
+    background: '#1a3a6a',
+    color: '#88aaff',
+    border: '2px solid #4488ff',
+    borderRadius: 6,
+    fontFamily: "'Courier New', monospace",
+    minWidth: 220,
+  },
+  controls: {
+    marginTop: 48,
+    textAlign: 'center' as const,
+    color: '#555',
+    fontSize: 13,
+  },
+  controlsTitle: {
+    color: '#888',
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+};

package/templates/pixi-react/__packageName__-frontend/src/main.tsx

@@ -0,0 +1,7 @@
+import './styles.css';
+import '@abraham/reflection';
+import * as ReactDOM from 'react-dom/client';
+import { App } from './app/app';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(<App />);

package/templates/pixi-react/__packageName__-frontend/src/styles.css

@@ -0,0 +1,24 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+#root {
+  isolation: isolate;
+}

package/templates/pixi-react/__packageName__-frontend/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/pixi-react/__packageName__-frontend/vite.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import wasm from 'vite-plugin-wasm';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  server: {
+    port: <%= frontendPort %>,
+    host: true,
+  },
+  preview: {
+    port: <%= frontendPort %>,
+    host: 'localhost',
+  },
+  plugins: [
+    wasm(),
+    topLevelAwait(),
+    react({
+      tsDecorators: true,
+      useAtYourOwnRisk_mutateSwcOptions: (options) => {
+        options.jsc!.transform!.decoratorMetadata = true;
+      },
+    }),
+  ],
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+  },
+  optimizeDeps: {
+    exclude: ['@lagless/deterministic-math'],
+  },
+}));

package/templates/pixi-react/__packageName__-simulation/.swcrc

@@ -0,0 +1,27 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./*.js$"
+  ]
+}

package/templates/pixi-react/__packageName__-simulation/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "<%= packageName %>-simulation",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@lagless/core": "^<%= laglessVersion %>",
+    "@lagless/math": "^<%= laglessVersion %>",
+    "@lagless/binary": "^<%= laglessVersion %>",
+    "@lagless/misc": "^<%= laglessVersion %>",
+    "@swc/helpers": "~0.5.11"
+  }
+}

package/templates/pixi-react/__packageName__-simulation/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/schema/code-gen/index.js';
+export * from './lib/systems/index.js';
+export * from './lib/signals/index.js';
+export * from './lib/arena.js';

package/templates/pixi-react/__packageName__-simulation/src/lib/arena.ts

@@ -0,0 +1,8 @@
+export const <%= projectName %>Arena = {
+  width: 800,
+  height: 600,
+  playerRadius: 20,
+  moveSpeed: 3.0,
+  damping: 0.85,
+  hashReportInterval: 120,
+} as const;

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/GameState.ts

@@ -0,0 +1,29 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { MemoryTracker } from '@lagless/binary';
+
+export class GameState {
+  public static readonly schema = {
+    gamePhase: Uint8Array,
+  };
+
+  public readonly safe = {} as {
+    gamePhase: number;
+  };
+
+  constructor(buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    const gamePhaseArray = new Uint8Array(buffer, memTracker.ptr, 1);
+    memTracker.add(1);
+
+    Object.defineProperty(this.safe, 'gamePhase', {
+      get: () => gamePhaseArray[0],
+      set: (v: number) => { gamePhaseArray[0] = v; },
+      enumerable: true,
+    });
+  }
+
+  public static calculateSize(_maxEntities: number, memTracker: MemoryTracker): void {
+    memTracker.add(1);
+  }
+}
+
+Object.defineProperty(GameState, 'name', { value: 'GameState' });

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/MoveInput.ts

@@ -0,0 +1,23 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { InputPayloadBuffer } from '@lagless/core';
+
+export class MoveInput {
+  public static readonly id = 2;
+  public static readonly byteLength = 8;
+
+  public readonly schema!: {
+    directionX: number;
+    directionY: number;
+  };
+
+  public static encode(data: MoveInput['schema'], buffer: InputPayloadBuffer): void {
+    buffer.writeFloat32(data.directionX);
+    buffer.writeFloat32(data.directionY);
+  }
+
+  public static decode(buffer: InputPayloadBuffer): MoveInput['schema'] {
+    const directionX = buffer.readFloat32();
+    const directionY = buffer.readFloat32();
+    return { directionX, directionY };
+  }
+}

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/MovingFilter.ts

@@ -0,0 +1,15 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { AbstractFilter, MemoryTracker } from '@lagless/binary';
+import { Transform2d } from './Transform2d.js';
+import { Velocity2d } from './Velocity2d.js';
+
+export class MovingFilter extends AbstractFilter {
+  public static readonly includeMask = Transform2d.ID | Velocity2d.ID;
+  public static readonly excludeMask = 0;
+
+  constructor(maxEntities: number, buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    super(maxEntities, Transform2d.ID | Velocity2d.ID, 0, buffer, memTracker);
+  }
+}
+
+Object.defineProperty(MovingFilter, 'name', { value: 'MovingFilter' });

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/PlayerBody.ts

@@ -0,0 +1,55 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { MemoryTracker } from '@lagless/binary';
+
+export class PlayerBody {
+  public static readonly ID = 4;
+  public static readonly schema = {
+    playerSlot: Uint8Array,
+    radius: Float32Array,
+  };
+
+  public readonly unsafe = {} as {
+    playerSlot: Uint8Array;
+    radius: Float32Array;
+  };
+
+  private _cursorIndex = 0;
+  private readonly _cursor: {
+    readonly entity: number;
+    playerSlot: number;
+    radius: number;
+  };
+
+  public getCursor(index: number) {
+    this._cursorIndex = index;
+    return this._cursor;
+  }
+
+  constructor(maxEntities: number, buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    for (const [fieldName, TypedArrayConstructor] of Object.entries(PlayerBody.schema)) {
+      const typedArray = new TypedArrayConstructor(buffer, memTracker.ptr, maxEntities);
+      this.unsafe[fieldName as keyof typeof PlayerBody.schema] =
+        typedArray as PlayerBody['unsafe'][keyof PlayerBody['unsafe']];
+      memTracker.add(typedArray.byteLength);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+
+    this._cursor = {
+      get entity(): number { return self._cursorIndex; },
+      get playerSlot(): number { return self.unsafe.playerSlot[self._cursorIndex]; },
+      set playerSlot(value: number) { self.unsafe.playerSlot[self._cursorIndex] = value; },
+      get radius(): number { return self.unsafe.radius[self._cursorIndex]; },
+      set radius(value: number) { self.unsafe.radius[self._cursorIndex] = value; },
+    };
+  }
+
+  public static calculateSize(maxEntities: number, memTracker: MemoryTracker): void {
+    for (const [, TypedArrayConstructor] of Object.entries(this.schema)) {
+      memTracker.add(maxEntities * TypedArrayConstructor.BYTES_PER_ELEMENT);
+    }
+  }
+}
+
+Object.defineProperty(PlayerBody, 'name', { value: 'PlayerBody' });

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/PlayerFilter.ts

@@ -0,0 +1,15 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { AbstractFilter, MemoryTracker } from '@lagless/binary';
+import { Transform2d } from './Transform2d.js';
+import { PlayerBody } from './PlayerBody.js';
+
+export class PlayerFilter extends AbstractFilter {
+  public static readonly includeMask = Transform2d.ID | PlayerBody.ID;
+  public static readonly excludeMask = 0;
+
+  constructor(maxEntities: number, buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    super(maxEntities, Transform2d.ID | PlayerBody.ID, 0, buffer, memTracker);
+  }
+}
+
+Object.defineProperty(PlayerFilter, 'name', { value: 'PlayerFilter' });

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/PlayerJoined.ts

@@ -0,0 +1,24 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { InputDef, InputByteLength, InputPayloadBuffer } from '@lagless/core';
+
+export class PlayerJoined {
+  public static readonly id = 0;
+  public static readonly byteLength = 17;
+
+  public readonly schema!: {
+    slot: number;
+    playerId: Uint8Array;
+  };
+
+  public static encode(data: PlayerJoined['schema'], buffer: InputPayloadBuffer): void {
+    buffer.writeUint8(data.slot);
+    for (let i = 0; i < 16; i++) buffer.writeUint8(data.playerId[i]);
+  }
+
+  public static decode(buffer: InputPayloadBuffer): PlayerJoined['schema'] {
+    const slot = buffer.readUint8();
+    const playerId = new Uint8Array(16);
+    for (let i = 0; i < 16; i++) playerId[i] = buffer.readUint8();
+    return { slot, playerId };
+  }
+}

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/PlayerLeft.ts

@@ -0,0 +1,23 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { InputPayloadBuffer } from '@lagless/core';
+
+export class PlayerLeft {
+  public static readonly id = 1;
+  public static readonly byteLength = 2;
+
+  public readonly schema!: {
+    slot: number;
+    reason: number;
+  };
+
+  public static encode(data: PlayerLeft['schema'], buffer: InputPayloadBuffer): void {
+    buffer.writeUint8(data.slot);
+    buffer.writeUint8(data.reason);
+  }
+
+  public static decode(buffer: InputPayloadBuffer): PlayerLeft['schema'] {
+    const slot = buffer.readUint8();
+    const reason = buffer.readUint8();
+    return { slot, reason };
+  }
+}

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/PlayerResource.ts

@@ -0,0 +1,83 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { MemoryTracker } from '@lagless/binary';
+
+export class PlayerResource {
+  public static readonly schema = {
+    id: { type: Uint8Array, length: 16 },
+    entity: Uint32Array,
+    connected: Uint8Array,
+    lastReportedHash: Uint32Array,
+    lastReportedHashTick: Uint32Array,
+    hashMismatchCount: Uint16Array,
+  };
+
+  public readonly safe = {} as {
+    entity: number;
+    connected: number;
+    lastReportedHash: number;
+    lastReportedHashTick: number;
+    hashMismatchCount: number;
+  };
+
+  public readonly unsafe = {} as {
+    id: Uint8Array;
+  };
+
+  constructor(playerIndex: number, buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    // id: uint8[16]
+    const idArray = new Uint8Array(buffer, memTracker.ptr, 16);
+    memTracker.add(16);
+    (this.unsafe as Record<string, unknown>).id = idArray;
+
+    // entity: uint32
+    const entityArray = new Uint32Array(buffer, memTracker.ptr, 1);
+    memTracker.add(4);
+    Object.defineProperty(this.safe, 'entity', {
+      get: () => entityArray[0],
+      set: (v: number) => { entityArray[0] = v; },
+      enumerable: true,
+    });
+
+    // connected: uint8
+    const connectedArray = new Uint8Array(buffer, memTracker.ptr, 1);
+    memTracker.add(1);
+    Object.defineProperty(this.safe, 'connected', {
+      get: () => connectedArray[0],
+      set: (v: number) => { connectedArray[0] = v; },
+      enumerable: true,
+    });
+
+    // lastReportedHash: uint32
+    const lastReportedHashArray = new Uint32Array(buffer, memTracker.ptr, 1);
+    memTracker.add(4);
+    Object.defineProperty(this.safe, 'lastReportedHash', {
+      get: () => lastReportedHashArray[0],
+      set: (v: number) => { lastReportedHashArray[0] = v; },
+      enumerable: true,
+    });
+
+    // lastReportedHashTick: uint32
+    const lastReportedHashTickArray = new Uint32Array(buffer, memTracker.ptr, 1);
+    memTracker.add(4);
+    Object.defineProperty(this.safe, 'lastReportedHashTick', {
+      get: () => lastReportedHashTickArray[0],
+      set: (v: number) => { lastReportedHashTickArray[0] = v; },
+      enumerable: true,
+    });
+
+    // hashMismatchCount: uint16
+    const hashMismatchCountArray = new Uint16Array(buffer, memTracker.ptr, 1);
+    memTracker.add(2);
+    Object.defineProperty(this.safe, 'hashMismatchCount', {
+      get: () => hashMismatchCountArray[0],
+      set: (v: number) => { hashMismatchCountArray[0] = v; },
+      enumerable: true,
+    });
+  }
+
+  public static calculateSize(_maxEntities: number, memTracker: MemoryTracker): void {
+    memTracker.add(16 + 4 + 1 + 4 + 4 + 2);
+  }
+}
+
+Object.defineProperty(PlayerResource, 'name', { value: 'PlayerResource' });

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/ReportHash.ts

@@ -0,0 +1,23 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { InputPayloadBuffer } from '@lagless/core';
+
+export class ReportHash {
+  public static readonly id = 3;
+  public static readonly byteLength = 8;
+
+  public readonly schema!: {
+    hash: number;
+    atTick: number;
+  };
+
+  public static encode(data: ReportHash['schema'], buffer: InputPayloadBuffer): void {
+    buffer.writeUint32(data.hash);
+    buffer.writeUint32(data.atTick);
+  }
+
+  public static decode(buffer: InputPayloadBuffer): ReportHash['schema'] {
+    const hash = buffer.readUint32();
+    const atTick = buffer.readUint32();
+    return { hash, atTick };
+  }
+}

package/templates/pixi-react/__packageName__-simulation/src/lib/schema/code-gen/Transform2d.ts

@@ -0,0 +1,65 @@
+// Generated by @lagless/codegen. Do not edit manually.
+import { MemoryTracker } from '@lagless/binary';
+
+export class Transform2d {
+  public static readonly ID = 1;
+  public static readonly schema = {
+    positionX: Float32Array,
+    positionY: Float32Array,
+    prevPositionX: Float32Array,
+    prevPositionY: Float32Array,
+  };
+
+  public readonly unsafe = {} as {
+    positionX: Float32Array;
+    positionY: Float32Array;
+    prevPositionX: Float32Array;
+    prevPositionY: Float32Array;
+  };
+
+  private _cursorIndex = 0;
+  private readonly _cursor: {
+    readonly entity: number;
+    positionX: number;
+    positionY: number;
+    prevPositionX: number;
+    prevPositionY: number;
+  };
+
+  public getCursor(index: number) {
+    this._cursorIndex = index;
+    return this._cursor;
+  }
+
+  constructor(maxEntities: number, buffer: ArrayBuffer, memTracker: MemoryTracker) {
+    for (const [fieldName, TypedArrayConstructor] of Object.entries(Transform2d.schema)) {
+      const typedArray = new TypedArrayConstructor(buffer, memTracker.ptr, maxEntities);
+      this.unsafe[fieldName as keyof typeof Transform2d.schema] =
+        typedArray as Transform2d['unsafe'][keyof Transform2d['unsafe']];
+      memTracker.add(typedArray.byteLength);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+
+    this._cursor = {
+      get entity(): number { return self._cursorIndex; },
+      get positionX(): number { return self.unsafe.positionX[self._cursorIndex]; },
+      set positionX(value: number) { self.unsafe.positionX[self._cursorIndex] = value; },
+      get positionY(): number { return self.unsafe.positionY[self._cursorIndex]; },
+      set positionY(value: number) { self.unsafe.positionY[self._cursorIndex] = value; },
+      get prevPositionX(): number { return self.unsafe.prevPositionX[self._cursorIndex]; },
+      set prevPositionX(value: number) { self.unsafe.prevPositionX[self._cursorIndex] = value; },
+      get prevPositionY(): number { return self.unsafe.prevPositionY[self._cursorIndex]; },
+      set prevPositionY(value: number) { self.unsafe.prevPositionY[self._cursorIndex] = value; },
+    };
+  }
+
+  public static calculateSize(maxEntities: number, memTracker: MemoryTracker): void {
+    for (const [, TypedArrayConstructor] of Object.entries(this.schema)) {
+      memTracker.add(maxEntities * TypedArrayConstructor.BYTES_PER_ELEMENT);
+    }
+  }
+}
+
+Object.defineProperty(Transform2d, 'name', { value: 'Transform2d' });