@rune-kit/rune 2.10.0 → 2.12.0

package/extensions/gamedev/skills/multiplayer.md

@@ -1,180 +1,180 @@
----
-name: "multiplayer"
-pack: "@rune/gamedev"
-description: "WebSocket game server and client prediction — authoritative server model, client-side prediction, reconciliation, entity interpolation, and lag compensation."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# multiplayer
-
-WebSocket game server and client prediction — authoritative server model, client-side prediction, reconciliation, entity interpolation, and lag compensation.
-
-Authoritative server model: server owns game state, clients send inputs only. Never trust client position.
-
-#### Workflow
-
-**Step 1 — Assess multiplayer architecture**
-Use Grep to find existing WebSocket code: `WebSocket`, `socket.io`, `ws`, `onmessage`, `postMessage`. Determine: is there a server or is this client-only? What is the tick rate?
-
-**Step 2 — Implement authoritative server**
-Emit: Node.js WebSocket server with fixed-tick update (20Hz sufficient), input queue per player, server-side physics/movement, state broadcast.
-
-**Step 3 — Implement client prediction**
-Emit: local input application before server confirmation, pending input buffer, reconciliation on server update, smooth interpolation for remote entities.
-
-**Step 4 — Add lag compensation**
-Emit: snapshot buffer for entity interpolation (render ~100ms behind server), client prediction with rollback on desync.
-
-#### WebSocket Game Server Pattern
-
-```typescript
-// Server (Node.js + ws) — authoritative game server
-import { WebSocketServer, WebSocket } from 'ws';
-
-interface PlayerInput { seq: number; keys: { up: boolean; down: boolean; left: boolean; right: boolean }; }
-interface PlayerState { id: string; x: number; y: number; vx: number; vy: number; }
-
-const wss = new WebSocketServer({ port: 3001 });
-const players = new Map<string, PlayerState>();
-const inputQueues = new Map<string, PlayerInput[]>();
-
-wss.on('connection', (ws: WebSocket, req) => {
-  const id = crypto.randomUUID();
-  players.set(id, { id, x: 0, y: 0, vx: 0, vy: 0 });
-  inputQueues.set(id, []);
-
-  ws.send(JSON.stringify({ type: 'init', id, state: Object.fromEntries(players) }));
-  broadcast({ type: 'player_joined', id });
-
-  ws.on('message', (raw) => {
-    const msg = JSON.parse(raw.toString());
-    if (msg.type === 'input') {
-      inputQueues.get(id)?.push(msg.input);
-    }
-  });
-
-  ws.on('close', () => {
-    players.delete(id);
-    inputQueues.delete(id);
-    broadcast({ type: 'player_left', id });
-  });
-});
-
-// Fixed-tick server update (20Hz is sufficient for authoritative server)
-const TICK_MS = 50;
-setInterval(() => {
-  inputQueues.forEach((queue, id) => {
-    const player = players.get(id)!;
-    const input = queue.shift(); // process one input per tick
-    if (input) applyInput(player, input);
-    integratePhysics(player);
-  });
-
-  broadcast({ type: 'state_update', tick: Date.now(), players: Object.fromEntries(players) });
-}, TICK_MS);
-
-function broadcast(msg: object) {
-  const data = JSON.stringify(msg);
-  wss.clients.forEach(c => c.readyState === WebSocket.OPEN && c.send(data));
-}
-
-function applyInput(p: PlayerState, input: PlayerInput) {
-  const speed = 200;
-  p.vx = (input.keys.right ? 1 : 0) - (input.keys.left ? 1 : 0);
-  p.vy = (input.keys.down ? 1 : 0) - (input.keys.up ? 1 : 0);
-  const len = Math.hypot(p.vx, p.vy);
-  if (len > 0) { p.vx = (p.vx / len) * speed; p.vy = (p.vy / len) * speed; }
-}
-
-function integratePhysics(p: PlayerState) {
-  p.x += p.vx * (TICK_MS / 1000);
-  p.y += p.vy * (TICK_MS / 1000);
-}
-```
-
-#### Client Prediction & Reconciliation
-
-```typescript
-// Client — predict locally, reconcile on server update
-class NetworkedPlayer {
-  private pendingInputs: { seq: number; input: PlayerInput; }[] = [];
-  private seq = 0;
-  localState: PlayerState;
-  serverState: PlayerState;
-
-  constructor(initial: PlayerState) {
-    this.localState = { ...initial };
-    this.serverState = { ...initial };
-  }
-
-  sendInput(keys: PlayerInput['keys'], ws: WebSocket) {
-    const input: PlayerInput = { seq: ++this.seq, keys };
-    this.pendingInputs.push({ seq: this.seq, input });
-    ws.send(JSON.stringify({ type: 'input', input }));
-
-    // Apply immediately (client prediction)
-    applyInputToState(this.localState, keys);
-  }
-
-  reconcile(serverUpdate: PlayerState & { lastProcessedSeq: number }) {
-    this.serverState = serverUpdate;
-
-    // Remove acknowledged inputs
-    this.pendingInputs = this.pendingInputs.filter(p => p.seq > serverUpdate.lastProcessedSeq);
-
-    // Reapply unacknowledged inputs on top of server state
-    this.localState = { ...serverUpdate };
-    for (const { input } of this.pendingInputs) {
-      applyInputToState(this.localState, input.keys);
-    }
-  }
-}
-
-function applyInputToState(state: PlayerState, keys: PlayerInput['keys']) {
-  const dt = 1 / 60;
-  const speed = 200;
-  state.x += ((keys.right ? 1 : 0) - (keys.left ? 1 : 0)) * speed * dt;
-  state.y += ((keys.down ? 1 : 0) - (keys.up ? 1 : 0)) * speed * dt;
-}
-```
-
-#### Lag Compensation & Entity Interpolation
-
-```typescript
-// Interpolate remote entities between server snapshots (smooth movement, ~100ms behind)
-interface Snapshot { tick: number; timestamp: number; entities: Map<string, PlayerState>; }
-
-class EntityInterpolator {
-  private buffer: Snapshot[] = [];
-  private readonly delay = 100; // ms behind server
-
-  addSnapshot(snapshot: Snapshot) {
-    this.buffer.push(snapshot);
-    // Keep only last 1 second of snapshots
-    const cutoff = Date.now() - 1000;
-    this.buffer = this.buffer.filter(s => s.timestamp > cutoff);
-  }
-
-  getInterpolatedState(entityId: string): PlayerState | null {
-    const renderTime = Date.now() - this.delay;
-
-    // Find the two snapshots bracketing renderTime
-    const newer = this.buffer.find(s => s.timestamp >= renderTime);
-    const older = this.buffer.slice().reverse().find(s => s.timestamp < renderTime);
-
-    if (!older || !newer) return newer?.entities.get(entityId) ?? null;
-
-    const t = (renderTime - older.timestamp) / (newer.timestamp - older.timestamp);
-    const a = older.entities.get(entityId);
-    const b = newer.entities.get(entityId);
-    if (!a || !b) return null;
-
-    return {
-      ...a,
-      x: a.x + (b.x - a.x) * t,
-      y: a.y + (b.y - a.y) * t,
-    };
-  }
-}
-```
+---
+name: "multiplayer"
+pack: "@rune/gamedev"
+description: "WebSocket game server and client prediction — authoritative server model, client-side prediction, reconciliation, entity interpolation, and lag compensation."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# multiplayer
+
+WebSocket game server and client prediction — authoritative server model, client-side prediction, reconciliation, entity interpolation, and lag compensation.
+
+Authoritative server model: server owns game state, clients send inputs only. Never trust client position.
+
+#### Workflow
+
+**Step 1 — Assess multiplayer architecture**
+Use Grep to find existing WebSocket code: `WebSocket`, `socket.io`, `ws`, `onmessage`, `postMessage`. Determine: is there a server or is this client-only? What is the tick rate?
+
+**Step 2 — Implement authoritative server**
+Emit: Node.js WebSocket server with fixed-tick update (20Hz sufficient), input queue per player, server-side physics/movement, state broadcast.
+
+**Step 3 — Implement client prediction**
+Emit: local input application before server confirmation, pending input buffer, reconciliation on server update, smooth interpolation for remote entities.
+
+**Step 4 — Add lag compensation**
+Emit: snapshot buffer for entity interpolation (render ~100ms behind server), client prediction with rollback on desync.
+
+#### WebSocket Game Server Pattern
+
+```typescript
+// Server (Node.js + ws) — authoritative game server
+import { WebSocketServer, WebSocket } from 'ws';
+
+interface PlayerInput { seq: number; keys: { up: boolean; down: boolean; left: boolean; right: boolean }; }
+interface PlayerState { id: string; x: number; y: number; vx: number; vy: number; }
+
+const wss = new WebSocketServer({ port: 3001 });
+const players = new Map<string, PlayerState>();
+const inputQueues = new Map<string, PlayerInput[]>();
+
+wss.on('connection', (ws: WebSocket, req) => {
+  const id = crypto.randomUUID();
+  players.set(id, { id, x: 0, y: 0, vx: 0, vy: 0 });
+  inputQueues.set(id, []);
+
+  ws.send(JSON.stringify({ type: 'init', id, state: Object.fromEntries(players) }));
+  broadcast({ type: 'player_joined', id });
+
+  ws.on('message', (raw) => {
+    const msg = JSON.parse(raw.toString());
+    if (msg.type === 'input') {
+      inputQueues.get(id)?.push(msg.input);
+    }
+  });
+
+  ws.on('close', () => {
+    players.delete(id);
+    inputQueues.delete(id);
+    broadcast({ type: 'player_left', id });
+  });
+});
+
+// Fixed-tick server update (20Hz is sufficient for authoritative server)
+const TICK_MS = 50;
+setInterval(() => {
+  inputQueues.forEach((queue, id) => {
+    const player = players.get(id)!;
+    const input = queue.shift(); // process one input per tick
+    if (input) applyInput(player, input);
+    integratePhysics(player);
+  });
+
+  broadcast({ type: 'state_update', tick: Date.now(), players: Object.fromEntries(players) });
+}, TICK_MS);
+
+function broadcast(msg: object) {
+  const data = JSON.stringify(msg);
+  wss.clients.forEach(c => c.readyState === WebSocket.OPEN && c.send(data));
+}
+
+function applyInput(p: PlayerState, input: PlayerInput) {
+  const speed = 200;
+  p.vx = (input.keys.right ? 1 : 0) - (input.keys.left ? 1 : 0);
+  p.vy = (input.keys.down ? 1 : 0) - (input.keys.up ? 1 : 0);
+  const len = Math.hypot(p.vx, p.vy);
+  if (len > 0) { p.vx = (p.vx / len) * speed; p.vy = (p.vy / len) * speed; }
+}
+
+function integratePhysics(p: PlayerState) {
+  p.x += p.vx * (TICK_MS / 1000);
+  p.y += p.vy * (TICK_MS / 1000);
+}
+```
+
+#### Client Prediction & Reconciliation
+
+```typescript
+// Client — predict locally, reconcile on server update
+class NetworkedPlayer {
+  private pendingInputs: { seq: number; input: PlayerInput; }[] = [];
+  private seq = 0;
+  localState: PlayerState;
+  serverState: PlayerState;
+
+  constructor(initial: PlayerState) {
+    this.localState = { ...initial };
+    this.serverState = { ...initial };
+  }
+
+  sendInput(keys: PlayerInput['keys'], ws: WebSocket) {
+    const input: PlayerInput = { seq: ++this.seq, keys };
+    this.pendingInputs.push({ seq: this.seq, input });
+    ws.send(JSON.stringify({ type: 'input', input }));
+
+    // Apply immediately (client prediction)
+    applyInputToState(this.localState, keys);
+  }
+
+  reconcile(serverUpdate: PlayerState & { lastProcessedSeq: number }) {
+    this.serverState = serverUpdate;
+
+    // Remove acknowledged inputs
+    this.pendingInputs = this.pendingInputs.filter(p => p.seq > serverUpdate.lastProcessedSeq);
+
+    // Reapply unacknowledged inputs on top of server state
+    this.localState = { ...serverUpdate };
+    for (const { input } of this.pendingInputs) {
+      applyInputToState(this.localState, input.keys);
+    }
+  }
+}
+
+function applyInputToState(state: PlayerState, keys: PlayerInput['keys']) {
+  const dt = 1 / 60;
+  const speed = 200;
+  state.x += ((keys.right ? 1 : 0) - (keys.left ? 1 : 0)) * speed * dt;
+  state.y += ((keys.down ? 1 : 0) - (keys.up ? 1 : 0)) * speed * dt;
+}
+```
+
+#### Lag Compensation & Entity Interpolation
+
+```typescript
+// Interpolate remote entities between server snapshots (smooth movement, ~100ms behind)
+interface Snapshot { tick: number; timestamp: number; entities: Map<string, PlayerState>; }
+
+class EntityInterpolator {
+  private buffer: Snapshot[] = [];
+  private readonly delay = 100; // ms behind server
+
+  addSnapshot(snapshot: Snapshot) {
+    this.buffer.push(snapshot);
+    // Keep only last 1 second of snapshots
+    const cutoff = Date.now() - 1000;
+    this.buffer = this.buffer.filter(s => s.timestamp > cutoff);
+  }
+
+  getInterpolatedState(entityId: string): PlayerState | null {
+    const renderTime = Date.now() - this.delay;
+
+    // Find the two snapshots bracketing renderTime
+    const newer = this.buffer.find(s => s.timestamp >= renderTime);
+    const older = this.buffer.slice().reverse().find(s => s.timestamp < renderTime);
+
+    if (!older || !newer) return newer?.entities.get(entityId) ?? null;
+
+    const t = (renderTime - older.timestamp) / (newer.timestamp - older.timestamp);
+    const a = older.entities.get(entityId);
+    const b = newer.entities.get(entityId);
+    if (!a || !b) return null;
+
+    return {
+      ...a,
+      x: a.x + (b.x - a.x) * t,
+      y: a.y + (b.y - a.y) * t,
+    };
+  }
+}
+```

package/extensions/gamedev/skills/particles.md

@@ -1,105 +1,105 @@
----
-name: "particles"
-pack: "@rune/gamedev"
-description: "GPU particle system with WebGL instancing — object-pooled particles, emission presets, and performance-safe rendering for 10k+ particles."
-model: sonnet
-tools: [Read, Edit, Write, Grep, Glob, Bash]
----
-
-# particles
-
-GPU particle system with WebGL instancing — object-pooled particles, emission presets, and performance-safe rendering for 10k+ particles.
-
-#### Workflow
-
-**Step 1 — Detect particle usage**
-Use Grep to find particle code: `particles`, `emitter`, `ParticleSystem`, `createBufferSource`. Understand current implementation: CPU vs GPU, pooling strategy, and draw call count.
-
-**Step 2 — Audit particle performance**
-Check for: new particle objects created on emit (GC pressure), no object pool, drawing each particle as a separate draw call, no life/alpha fade.
-
-**Step 3 — Emit particle system**
-Emit: ParticleSystem with pre-allocated pool, update/render separation, emitter presets for common effects (explosion, sparks, smoke).
-
-#### GPU Particles with WebGL Instancing
-
-```typescript
-// GPU particle system — update on CPU, render 10k+ particles via instancing
-interface Particle {
-  x: number; y: number;
-  vx: number; vy: number;
-  life: number; maxLife: number;
-  size: number;
-  r: number; g: number; b: number; a: number;
-}
-
-class ParticleSystem {
-  private particles: Particle[] = [];
-  private pool: Particle[] = [];
-  private readonly maxParticles: number;
-
-  constructor(maxParticles = 5000) {
-    this.maxParticles = maxParticles;
-    // Pre-allocate pool
-    for (let i = 0; i < maxParticles; i++) {
-      this.pool.push({ x:0,y:0,vx:0,vy:0,life:0,maxLife:1,size:4,r:1,g:1,b:1,a:1 });
-    }
-  }
-
-  emit(x: number, y: number, count: number, config: Partial<Particle> = {}) {
-    for (let i = 0; i < count && this.particles.length < this.maxParticles; i++) {
-      const p = this.pool.pop() ?? { x:0,y:0,vx:0,vy:0,life:0,maxLife:1,size:4,r:1,g:1,b:1,a:1 };
-      const angle = Math.random() * Math.PI * 2;
-      const speed = 50 + Math.random() * 150;
-      Object.assign(p, {
-        x, y,
-        vx: Math.cos(angle) * speed,
-        vy: Math.sin(angle) * speed,
-        life: 1, maxLife: 0.5 + Math.random() * 1.5,
-        size: 3 + Math.random() * 5,
-        r: 1, g: 0.5, b: 0.1, a: 1,
-        ...config,
-      });
-      this.particles.push(p);
-    }
-  }
-
-  update(dt: number) {
-    const gravity = 200;
-    for (let i = this.particles.length - 1; i >= 0; i--) {
-      const p = this.particles[i];
-      p.x += p.vx * dt;
-      p.y += p.vy * dt;
-      p.vy += gravity * dt;
-      p.life -= dt / p.maxLife;
-      p.a = Math.max(0, p.life);
-      if (p.life <= 0) {
-        this.pool.push(p);
-        this.particles.splice(i, 1);
-      }
-    }
-  }
-
-  // Render with Canvas 2D (swap with WebGL instancing for >10k particles)
-  render(ctx: CanvasRenderingContext2D) {
-    for (const p of this.particles) {
-      ctx.globalAlpha = p.a;
-      ctx.fillStyle = `rgb(${p.r * 255 | 0},${p.g * 255 | 0},${p.b * 255 | 0})`;
-      ctx.beginPath();
-      ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
-      ctx.fill();
-    }
-    ctx.globalAlpha = 1;
-  }
-}
-
-// Emitter presets
-const EMITTER_PRESETS = {
-  explosion: (x: number, y: number, sys: ParticleSystem) =>
-    sys.emit(x, y, 80, { r: 1, g: 0.4, b: 0 }),
-  sparks: (x: number, y: number, sys: ParticleSystem) =>
-    sys.emit(x, y, 20, { r: 1, g: 0.9, b: 0.2, size: 2, maxLife: 0.8 }),
-  smoke: (x: number, y: number, sys: ParticleSystem) =>
-    sys.emit(x, y, 10, { r: 0.5, g: 0.5, b: 0.5, size: 12, maxLife: 3, vx: 0, vy: -30 }),
-};
-```
+---
+name: "particles"
+pack: "@rune/gamedev"
+description: "GPU particle system with WebGL instancing — object-pooled particles, emission presets, and performance-safe rendering for 10k+ particles."
+model: sonnet
+tools: [Read, Edit, Write, Grep, Glob, Bash]
+---
+
+# particles
+
+GPU particle system with WebGL instancing — object-pooled particles, emission presets, and performance-safe rendering for 10k+ particles.
+
+#### Workflow
+
+**Step 1 — Detect particle usage**
+Use Grep to find particle code: `particles`, `emitter`, `ParticleSystem`, `createBufferSource`. Understand current implementation: CPU vs GPU, pooling strategy, and draw call count.
+
+**Step 2 — Audit particle performance**
+Check for: new particle objects created on emit (GC pressure), no object pool, drawing each particle as a separate draw call, no life/alpha fade.
+
+**Step 3 — Emit particle system**
+Emit: ParticleSystem with pre-allocated pool, update/render separation, emitter presets for common effects (explosion, sparks, smoke).
+
+#### GPU Particles with WebGL Instancing
+
+```typescript
+// GPU particle system — update on CPU, render 10k+ particles via instancing
+interface Particle {
+  x: number; y: number;
+  vx: number; vy: number;
+  life: number; maxLife: number;
+  size: number;
+  r: number; g: number; b: number; a: number;
+}
+
+class ParticleSystem {
+  private particles: Particle[] = [];
+  private pool: Particle[] = [];
+  private readonly maxParticles: number;
+
+  constructor(maxParticles = 5000) {
+    this.maxParticles = maxParticles;
+    // Pre-allocate pool
+    for (let i = 0; i < maxParticles; i++) {
+      this.pool.push({ x:0,y:0,vx:0,vy:0,life:0,maxLife:1,size:4,r:1,g:1,b:1,a:1 });
+    }
+  }
+
+  emit(x: number, y: number, count: number, config: Partial<Particle> = {}) {
+    for (let i = 0; i < count && this.particles.length < this.maxParticles; i++) {
+      const p = this.pool.pop() ?? { x:0,y:0,vx:0,vy:0,life:0,maxLife:1,size:4,r:1,g:1,b:1,a:1 };
+      const angle = Math.random() * Math.PI * 2;
+      const speed = 50 + Math.random() * 150;
+      Object.assign(p, {
+        x, y,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        life: 1, maxLife: 0.5 + Math.random() * 1.5,
+        size: 3 + Math.random() * 5,
+        r: 1, g: 0.5, b: 0.1, a: 1,
+        ...config,
+      });
+      this.particles.push(p);
+    }
+  }
+
+  update(dt: number) {
+    const gravity = 200;
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      const p = this.particles[i];
+      p.x += p.vx * dt;
+      p.y += p.vy * dt;
+      p.vy += gravity * dt;
+      p.life -= dt / p.maxLife;
+      p.a = Math.max(0, p.life);
+      if (p.life <= 0) {
+        this.pool.push(p);
+        this.particles.splice(i, 1);
+      }
+    }
+  }
+
+  // Render with Canvas 2D (swap with WebGL instancing for >10k particles)
+  render(ctx: CanvasRenderingContext2D) {
+    for (const p of this.particles) {
+      ctx.globalAlpha = p.a;
+      ctx.fillStyle = `rgb(${p.r * 255 | 0},${p.g * 255 | 0},${p.b * 255 | 0})`;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+}
+
+// Emitter presets
+const EMITTER_PRESETS = {
+  explosion: (x: number, y: number, sys: ParticleSystem) =>
+    sys.emit(x, y, 80, { r: 1, g: 0.4, b: 0 }),
+  sparks: (x: number, y: number, sys: ParticleSystem) =>
+    sys.emit(x, y, 20, { r: 1, g: 0.9, b: 0.2, size: 2, maxLife: 0.8 }),
+  smoke: (x: number, y: number, sys: ParticleSystem) =>
+    sys.emit(x, y, 10, { r: 0.5, g: 0.5, b: 0.5, size: 12, maxLife: 3, vx: 0, vy: -30 }),
+};
+```