@lagless/create 0.0.33

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

@@ -0,0 +1,33 @@
+{
+  "name": "<%= packageName %>-frontend",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "<%= packageName %>-simulation": "workspace:*",
+    "@lagless/core": "^<%= laglessVersion %>",
+    "@lagless/misc": "^<%= laglessVersion %>",
+    "@lagless/relay-client": "^<%= laglessVersion %>",
+    "@lagless/net-wire": "^<%= laglessVersion %>",
+    "@lagless/react": "^<%= laglessVersion %>",
+    "@lagless/pixi-react": "^<%= laglessVersion %>",
+    "@abraham/reflection": "^0.12.0",
+    "pixi.js": "^8.12.0",
+    "@pixi/react": "^8.0.5",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "typescript": "^5.9.0"
+  }
+}

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+export const App: FC = () => {
+  return <RouterProvider router={router} />;
+};

package/templates/pixi-react/__packageName__-frontend/src/app/components/debug-panel.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { useRunner } from '../game-view/runner-provider';
+import { DebugPanel as SharedDebugPanel } from '@lagless/react';
+import { PlayerResource, DivergenceSignal } from '<%= packageName %>-simulation';
+
+export const DebugPanel: FC = () => {
+  const runner = useRunner();
+
+  return (
+    <SharedDebugPanel
+      runner={runner}
+      hashVerification={{
+        playerResourceClass: PlayerResource,
+        divergenceSignalClass: DivergenceSignal,
+      }}
+    />
+  );
+};

package/templates/pixi-react/__packageName__-frontend/src/app/game-view/game-scene.tsx

@@ -0,0 +1,14 @@
+import { FC, useMemo } from 'react';
+import { FilterViews } from '@lagless/pixi-react';
+import { useRunner } from './runner-provider';
+import { PlayerFilter } from '<%= packageName %>-simulation';
+import { PlayerView } from './player-view';
+
+export const GameScene: FC = () => {
+  const runner = useRunner();
+  const playerFilter = useMemo(() => runner.DIContainer.resolve(PlayerFilter), [runner]);
+
+  return (
+    <FilterViews filter={playerFilter} View={PlayerView} />
+  );
+};

package/templates/pixi-react/__packageName__-frontend/src/app/game-view/game-view.tsx

@@ -0,0 +1,46 @@
+import { FC, useRef } from 'react';
+import { Application, extend } from '@pixi/react';
+import { RunnerProvider, RunnerTicker } from './runner-provider';
+import { Container, Graphics, Text } from 'pixi.js';
+import { GameScene } from './game-scene';
+import { GridBackground } from './grid-background';
+import { DebugPanel } from '../components/debug-panel';
+
+extend({
+  Container,
+  Graphics,
+  Text,
+});
+
+export const GameView: FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <RunnerProvider>
+      <div style={styles.wrapper} ref={containerRef}>
+        <DebugPanel />
+        <Application
+          autoDensity
+          resolution={devicePixelRatio || 1}
+          resizeTo={containerRef}
+          background={0x0a0a1a}
+        >
+          <RunnerTicker>
+            <GridBackground />
+            <GameScene />
+          </RunnerTicker>
+        </Application>
+      </div>
+    </RunnerProvider>
+  );
+};
+
+const styles: Record<string, React.CSSProperties> = {
+  wrapper: {
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+  },
+};

package/templates/pixi-react/__packageName__-frontend/src/app/game-view/grid-background.tsx

@@ -0,0 +1,33 @@
+import { FC, useEffect, useRef } from 'react';
+import { Graphics } from 'pixi.js';
+import { <%= projectName %>Arena } from '<%= packageName %>-simulation';
+
+export const GridBackground: FC = () => {
+  const graphicsRef = useRef<Graphics>(null);
+
+  useEffect(() => {
+    const g = graphicsRef.current;
+    if (!g) return;
+
+    const w = <%= projectName %>Arena.width;
+    const h = <%= projectName %>Arena.height;
+    const step = 100;
+
+    g.clear();
+
+    for (let x = 0; x <= w; x += step) {
+      g.moveTo(x, 0);
+      g.lineTo(x, h);
+    }
+    for (let y = 0; y <= h; y += step) {
+      g.moveTo(0, y);
+      g.lineTo(w, y);
+    }
+    g.stroke({ color: 0x333355, width: 1, alpha: 0.4 });
+
+    g.rect(0, 0, w, h);
+    g.stroke({ color: 0x6666aa, width: 3, alpha: 0.8 });
+  }, []);
+
+  return <pixiGraphics ref={graphicsRef} />;
+};

package/templates/pixi-react/__packageName__-frontend/src/app/game-view/player-view.tsx

@@ -0,0 +1,59 @@
+import { useImperativeHandle, useRef } from 'react';
+import { Container, Graphics } from 'pixi.js';
+import { filterView, FilterViewRef } from '@lagless/pixi-react';
+import { useRunner } from './runner-provider';
+import { PlayerBody, <%= projectName %>Arena, Transform2d } from '<%= packageName %>-simulation';
+import { VisualSmoother2d } from '@lagless/misc';
+
+const PLAYER_COLORS = [0xff4444, 0x4488ff, 0x44ff44, 0xffff44];
+
+export const PlayerView = filterView(({ entity }, ref) => {
+  const runner = useRunner();
+  const containerRef = useRef<Container>(null);
+  const graphicsRef = useRef<Graphics>(null);
+  const smootherRef = useRef<VisualSmoother2d>(new VisualSmoother2d());
+
+  const transform2d = runner.DIContainer.resolve(Transform2d);
+  const playerBody = runner.DIContainer.resolve(PlayerBody);
+
+  useImperativeHandle(ref, (): FilterViewRef => ({
+    onCreate() {
+      const g = graphicsRef.current;
+      if (!g) return;
+      const slot = playerBody.unsafe.playerSlot[entity];
+      const radius = playerBody.unsafe.radius[entity];
+      const color = PLAYER_COLORS[slot % PLAYER_COLORS.length];
+      g.clear();
+      g.circle(0, 0, radius);
+      g.fill(color);
+      g.circle(0, 0, radius);
+      g.stroke({ color: 0xffffff, width: 2, alpha: 0.3 });
+    },
+    onUpdate() {
+      const container = containerRef.current;
+      if (!container) return;
+      const smoother = smootherRef.current;
+      const factor = runner.Simulation.interpolationFactor;
+
+      smoother.update(
+        transform2d.unsafe.prevPositionX[entity],
+        transform2d.unsafe.prevPositionY[entity],
+        transform2d.unsafe.positionX[entity],
+        transform2d.unsafe.positionY[entity],
+        factor,
+      );
+
+      container.x = smoother.x;
+      container.y = smoother.y;
+    },
+    onDestroy() {
+      // cleanup
+    },
+  }));
+
+  return (
+    <pixiContainer ref={containerRef}>
+      <pixiGraphics ref={graphicsRef} />
+    </pixiContainer>
+  );
+});

package/templates/pixi-react/__packageName__-frontend/src/app/game-view/runner-provider.tsx

@@ -0,0 +1,180 @@
+import {
+  <%= projectName %>Runner,
+  <%= projectName %>Systems,
+  <%= projectName %>Signals,
+  DivergenceSignal,
+  MoveInput,
+  PlayerJoined,
+  ReportHash,
+  <%= projectName %>Arena,
+} from '<%= packageName %>-simulation';
+import { createContext, FC, ReactNode, useContext, useEffect, useState } from 'react';
+import { useTick } from '@pixi/react';
+import { useNavigate } from 'react-router-dom';
+import { ProviderStore } from '../hooks/use-start-match';
+import { ECSConfig, LocalInputProvider, RPC, createHashReporter } from '@lagless/core';
+import { RelayInputProvider, RelayConnection } from '@lagless/relay-client';
+import { getMatchInfo } from '../hooks/use-start-multiplayer-match';
+import { UUID } from '@lagless/misc';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const RunnerContext = createContext<<%= projectName %>Runner>(null!);
+
+export const useRunner = () => {
+  return useContext(RunnerContext);
+};
+
+interface RunnerProviderProps {
+  children: ReactNode;
+}
+
+const SQRT2_INV = 1 / Math.sqrt(2);
+
+export const RunnerProvider: FC<RunnerProviderProps> = ({ children }) => {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const [runner, setRunner] = useState<<%= projectName %>Runner>(null!);
+  const [v, setV] = useState(0);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    return ProviderStore.onProvider(() => {
+      setV((v) => v + 1);
+    });
+  }, []);
+
+  useEffect(() => {
+    let disposed = false;
+    let _runner: <%= projectName %>Runner;
+    let _connection: RelayConnection | undefined;
+    const inputProvider = ProviderStore.getInvalidate();
+
+    if (!inputProvider) {
+      navigate('/');
+      return;
+    }
+
+    // Keyboard state
+    const keys = new Set<string>();
+    const onKeyDown = (e: KeyboardEvent) => keys.add(e.key.toLowerCase());
+    const onKeyUp = (e: KeyboardEvent) => keys.delete(e.key.toLowerCase());
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('keyup', onKeyUp);
+
+    (async () => {
+      if (disposed) {
+        inputProvider.dispose();
+        return;
+      }
+
+      if (inputProvider instanceof RelayInputProvider) {
+        const matchInfo = getMatchInfo(inputProvider);
+        if (matchInfo) {
+          _connection = new RelayConnection(
+            {
+              serverUrl: matchInfo.serverUrl,
+              matchId: matchInfo.matchId,
+              token: matchInfo.token,
+            },
+            {
+              onServerHello: (data) => inputProvider.handleServerHello(data),
+              onTickInputFanout: (data) => inputProvider.handleTickInputFanout(data),
+              onCancelInput: (data) => inputProvider.handleCancelInput(data),
+              onPong: (data) => inputProvider.handlePong(data),
+              onStateRequest: (requestId) => inputProvider.handleStateRequest(requestId),
+              onStateResponse: (data) => inputProvider.handleStateResponse(data),
+              onConnected: () => console.log('[Relay] Connected'),
+              onDisconnected: () => console.log('[Relay] Disconnected'),
+            },
+          );
+
+          inputProvider.setConnection(_connection);
+          _connection.connect();
+
+          const serverHello = await inputProvider.serverHello;
+          if (disposed) { inputProvider.dispose(); return; }
+
+          const seededConfig = new ECSConfig({ ...inputProvider.ecsConfig, seed: serverHello.seed });
+          _runner = new <%= projectName %>Runner(seededConfig, inputProvider, <%= projectName %>Systems, <%= projectName %>Signals);
+        } else {
+          _runner = new <%= projectName %>Runner(inputProvider.ecsConfig, inputProvider, <%= projectName %>Systems, <%= projectName %>Signals);
+        }
+      } else {
+        _runner = new <%= projectName %>Runner(inputProvider.ecsConfig, inputProvider, <%= projectName %>Systems, <%= projectName %>Signals);
+      }
+
+      // Set up keyboard input drainer with hash reporting
+      const reportHash = createHashReporter(_runner, {
+        reportInterval: <%= projectName %>Arena.hashReportInterval,
+        reportHashRpc: ReportHash,
+      });
+
+      inputProvider.drainInputs((addRPC) => {
+        let dx = 0;
+        let dy = 0;
+        if (keys.has('a') || keys.has('arrowleft')) dx -= 1;
+        if (keys.has('d') || keys.has('arrowright')) dx += 1;
+        if (keys.has('w') || keys.has('arrowup')) dy -= 1;
+        if (keys.has('s') || keys.has('arrowdown')) dy += 1;
+
+        if (dx !== 0 || dy !== 0) {
+          if (dx !== 0 && dy !== 0) {
+            dx *= SQRT2_INV;
+            dy *= SQRT2_INV;
+          }
+          addRPC(MoveInput, { directionX: dx, directionY: dy });
+        }
+
+        reportHash(addRPC);
+      });
+
+      _runner.start();
+
+      if (inputProvider instanceof RelayInputProvider) {
+        const serverHello = await inputProvider.serverHello;
+        if (serverHello.serverTick > 0) {
+          _runner.Simulation.clock.setAccumulatedTime(serverHello.serverTick * _runner.Config.frameLength);
+        }
+      }
+
+      if (inputProvider instanceof LocalInputProvider) {
+        const playerId = UUID.generate().asUint8();
+        const joinRpc = new RPC(PlayerJoined.id, {
+          tick: 1,
+          seq: 0,
+          ordinal: 0,
+          playerSlot: 255,
+        }, {
+          slot: 0,
+          playerId,
+        });
+        inputProvider.addRemoteRpc(joinRpc);
+      }
+
+      const divergenceSignal = _runner.DIContainer.resolve(DivergenceSignal);
+      divergenceSignal.Predicted.subscribe((e) => {
+        console.warn(`[DIVERGENCE] Players ${e.data.slotA} vs ${e.data.slotB}: hash ${e.data.hashA} != ${e.data.hashB} at tick ${e.data.atTick}`);
+      });
+
+      setRunner(_runner);
+    })();
+
+    return () => {
+      disposed = true;
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('keyup', onKeyUp);
+      _connection?.disconnect();
+      _runner?.dispose();
+    };
+  }, [v, navigate]);
+
+  return !runner ? null : <RunnerContext.Provider value={runner}>{children}</RunnerContext.Provider>;
+};
+
+export const RunnerTicker: FC<{ children: ReactNode }> = ({ children }) => {
+  const runner = useRunner();
+  useTick((ticker) => {
+    runner.update(ticker.deltaMS);
+  });
+
+  return children;
+};

package/templates/pixi-react/__packageName__-frontend/src/app/hooks/use-start-match.ts

@@ -0,0 +1,53 @@
+import { <%= projectName %>InputRegistry } from '<%= packageName %>-simulation';
+import { AbstractInputProvider, ECSConfig, LocalInputProvider } from '@lagless/core';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export class ProviderStore {
+  private static readonly _listeners = new Set<() => void>();
+  private static _provider: AbstractInputProvider | undefined;
+
+  public static onProvider(listener: () => void): () => void {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  }
+
+  public static set(provider: AbstractInputProvider) {
+    this._provider = provider;
+    for (const listener of this._listeners) {
+      listener();
+    }
+  }
+
+  public static getInvalidate(): AbstractInputProvider | undefined {
+    const provider = this._provider;
+    this._provider = undefined;
+    return provider;
+  }
+}
+
+export const useStartMatch = () => {
+  const [isBusy, setIsBusy] = useState(false);
+  const navigate = useNavigate();
+
+  const startMatch = useCallback(async () => {
+    if (isBusy) return;
+    setIsBusy(true);
+    try {
+      const ecsConfig = new ECSConfig({ fps: 60 });
+      const inputProvider = new LocalInputProvider(ecsConfig, <%= projectName %>InputRegistry);
+
+      ProviderStore.set(inputProvider);
+      navigate('/game');
+    } finally {
+      setIsBusy(false);
+    }
+  }, [isBusy, navigate]);
+
+  return {
+    isBusy,
+    startMatch,
+  };
+};

package/templates/pixi-react/__packageName__-frontend/src/app/hooks/use-start-multiplayer-match.ts

@@ -0,0 +1,138 @@
+import { <%= projectName %>InputRegistry } from '<%= packageName %>-simulation';
+import { ECSConfig } from '@lagless/core';
+import { RelayInputProvider } from '@lagless/relay-client';
+import { useCallback, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ProviderStore } from './use-start-match';
+
+const SERVER_URL = import.meta.env.VITE_RELAY_URL || 'ws://localhost:<%= serverPort %>';
+
+export type MatchmakingState = 'idle' | 'queuing' | 'connecting' | 'error';
+
+interface MatchFoundData {
+  type: 'match_found';
+  matchId: string;
+  playerSlot: number;
+  token: string;
+  serverUrl: string;
+}
+
+export const useStartMultiplayerMatch = () => {
+  const [state, setState] = useState<MatchmakingState>('idle');
+  const [queuePosition, setQueuePosition] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const navigate = useNavigate();
+
+  const cancel = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+    setState('idle');
+    setQueuePosition(null);
+    setError(null);
+  }, []);
+
+  const startMatch = useCallback(() => {
+    if (state !== 'idle') return;
+
+    setState('queuing');
+    setError(null);
+
+    const playerId = crypto.randomUUID();
+    const ws = new WebSocket(`${SERVER_URL}/matchmaking?playerId=${playerId}`);
+    wsRef.current = ws;
+
+    ws.onopen = () => {
+      ws.send(
+        JSON.stringify({
+          type: 'join',
+          scope: '<%= packageName %>',
+        }),
+      );
+    };
+
+    ws.onmessage = (event) => {
+      const msg = JSON.parse(event.data);
+
+      switch (msg.type) {
+        case 'queued':
+          setQueuePosition(msg.position);
+          break;
+
+        case 'match_found': {
+          ws.close();
+          wsRef.current = null;
+          setState('connecting');
+          handleMatchFound(msg as MatchFoundData, playerId);
+          break;
+        }
+
+        case 'error':
+          setState('error');
+          setError(msg.message);
+          ws.close();
+          wsRef.current = null;
+          break;
+      }
+    };
+
+    ws.onerror = () => {
+      setState('error');
+      setError('Connection failed');
+      wsRef.current = null;
+    };
+
+    ws.onclose = () => {
+      if (state === 'queuing') {
+        setState('idle');
+      }
+    };
+  }, [state]);
+
+  const handleMatchFound = useCallback(
+    (data: MatchFoundData, playerId: string) => {
+      const ecsConfig = new ECSConfig({
+        fps: 60,
+        maxPlayers: 4,
+      });
+
+      const inputProvider = new RelayInputProvider(data.playerSlot, ecsConfig, <%= projectName %>InputRegistry);
+
+      (inputProvider as RelayInputProviderWithMatchInfo)._matchInfo = {
+        matchId: data.matchId,
+        token: data.token,
+        serverUrl: data.serverUrl,
+        playerId,
+      };
+
+      ProviderStore.set(inputProvider);
+      navigate('/game');
+    },
+    [navigate],
+  );
+
+  return {
+    state,
+    queuePosition,
+    error,
+    startMatch,
+    cancel,
+  };
+};
+
+export interface MatchInfo {
+  matchId: string;
+  token: string;
+  serverUrl: string;
+  playerId: string;
+}
+
+interface RelayInputProviderWithMatchInfo extends RelayInputProvider {
+  _matchInfo?: MatchInfo;
+}
+
+export function getMatchInfo(provider: RelayInputProvider): MatchInfo | undefined {
+  return (provider as RelayInputProviderWithMatchInfo)._matchInfo;
+}

package/templates/pixi-react/__packageName__-frontend/src/app/router.tsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, useOutlet } from 'react-router-dom';
+import { FC } from 'react';
+import { TitleScreen } from './screens/title.screen';
+import { GameScreen } from './screens/game.screen';
+
+const Root: FC = () => {
+  return useOutlet();
+};
+
+export const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter([
+  {
+    path: '/',
+    Component: Root,
+    children: [
+      {
+        index: true,
+        Component: TitleScreen,
+      },
+      {
+        path: 'game',
+        Component: GameScreen,
+      },
+    ],
+  },
+]);

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { GameView } from '../game-view/game-view';
+
+export const GameScreen: FC = () => {
+  return <GameView />;
+};