@almadar/ui 5.42.0 → 5.43.0

package/dist/runtime/index.js

@@ -28130,6 +28130,78 @@ var init_GameOverScreen = __esm({
     GameOverScreen.displayName = "GameOverScreen";
   }
 });
+function useRenderInterpolation(options = {}) {
+  const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
+  const prevRef = useRef(null);
+  const currRef = useRef(null);
+  const rafRef = useRef(null);
+  const onSnapshot = useCallback((entities) => {
+    prevRef.current = currRef.current;
+    currRef.current = { entities, arrivedAt: performance.now() };
+  }, []);
+  const getInterpolated = useCallback((now2) => {
+    const out = /* @__PURE__ */ new Map();
+    const curr = currRef.current;
+    if (!curr) return out;
+    const prev = prevRef.current;
+    if (!prev) {
+      for (const e of curr.entities) out.set(e.id, { x: e.x, y: e.y });
+      return out;
+    }
+    const rawAlpha = (now2 - curr.arrivedAt) / tickIntervalMs;
+    const alpha = rawAlpha < 0 ? 0 : rawAlpha > 1 ? 1 : rawAlpha;
+    const prevMap = /* @__PURE__ */ new Map();
+    for (const e of prev.entities) prevMap.set(e.id, e);
+    for (const c of curr.entities) {
+      const p2 = prevMap.get(c.id);
+      if (!p2) {
+        out.set(c.id, { x: c.x, y: c.y });
+      } else {
+        out.set(c.id, {
+          x: p2.x + (c.x - p2.x) * alpha,
+          y: p2.y + (c.y - p2.y) * alpha
+        });
+      }
+    }
+    return out;
+  }, [tickIntervalMs]);
+  const startLoop = useCallback(
+    (draw) => {
+      let active = true;
+      const loop = () => {
+        if (!active) return;
+        try {
+          draw(getInterpolated(performance.now()));
+        } catch {
+        }
+        rafRef.current = requestAnimationFrame(loop);
+      };
+      rafRef.current = requestAnimationFrame(loop);
+      return () => {
+        active = false;
+        if (rafRef.current !== null) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+      };
+    },
+    [getInterpolated]
+  );
+  useEffect(() => {
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, []);
+  return { onSnapshot, getInterpolated, startLoop };
+}
+var init_useRenderInterpolation = __esm({
+  "hooks/useRenderInterpolation.ts"() {
+    "use client";
+  }
+});
 function PlatformerCanvas({
   player,
   platforms = [
@@ -28198,8 +28270,43 @@ function PlatformerCanvas({
     y: 336,
     width: 32,
     height: 48,
+    vx: 0,
+    vy: 0,
+    grounded: true,
     facingRight: true
   };
+  const playerRef = useRef(resolvedPlayer);
+  playerRef.current = resolvedPlayer;
+  const interp = useRenderInterpolation();
+  useEffect(() => {
+    interp.onSnapshot([{ id: "player", x: resolvedPlayer.x, y: resolvedPlayer.y }]);
+  }, [resolvedPlayer.x, resolvedPlayer.y]);
+  const propsRef = useRef({
+    platforms,
+    worldWidth,
+    worldHeight,
+    canvasWidth,
+    canvasHeight,
+    followCamera,
+    bgColor,
+    playerSprite,
+    tileSprites,
+    backgroundImage,
+    assetBaseUrl
+  });
+  propsRef.current = {
+    platforms,
+    worldWidth,
+    worldHeight,
+    canvasWidth,
+    canvasHeight,
+    followCamera,
+    bgColor,
+    playerSprite,
+    tileSprites,
+    backgroundImage,
+    assetBaseUrl
+  };
   const handleKeyDown = useCallback((e) => {
     if (keysRef.current.has(e.code)) return;
     keysRef.current.add(e.code);
@@ -28248,124 +28355,149 @@ function PlatformerCanvas({
     canvas.width = canvasWidth * dpr;
     canvas.height = canvasHeight * dpr;
     ctx.scale(dpr, dpr);
-    let camX = 0;
-    let camY = 0;
-    if (followCamera) {
-      camX = Math.max(0, Math.min(resolvedPlayer.x - canvasWidth / 2, worldWidth - canvasWidth));
-      camY = Math.max(0, Math.min(resolvedPlayer.y - canvasHeight / 2 - 50, worldHeight - canvasHeight));
-    }
-    const bgImg = backgroundImage ? loadImage(backgroundImage) : null;
-    if (bgImg) {
-      ctx.drawImage(bgImg, 0, 0, canvasWidth, canvasHeight);
-    } else if (bgColor) {
-      ctx.fillStyle = bgColor;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    } else {
-      const grad = ctx.createLinearGradient(0, 0, 0, canvasHeight);
-      grad.addColorStop(0, SKY_GRADIENT_TOP);
-      grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
-      ctx.fillStyle = grad;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    }
-    ctx.strokeStyle = GRID_COLOR;
-    ctx.lineWidth = 1;
-    const gridSize = 32;
-    for (let gx = -camX % gridSize; gx < canvasWidth; gx += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(gx, 0);
-      ctx.lineTo(gx, canvasHeight);
-      ctx.stroke();
-    }
-    for (let gy = -camY % gridSize; gy < canvasHeight; gy += gridSize) {
-      ctx.beginPath();
-      ctx.moveTo(0, gy);
-      ctx.lineTo(canvasWidth, gy);
-      ctx.stroke();
-    }
-    for (const plat of platforms) {
-      const px = plat.x - camX;
-      const py = plat.y - camY;
-      const platType = plat.type ?? "ground";
-      const spriteUrl = tileSprites?.[platType];
-      const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
-      if (tileImg) {
-        const tileW = tileImg.naturalWidth;
-        const tileH = tileImg.naturalHeight;
-        const scaleH = plat.height / tileH;
-        const scaledW = tileW * scaleH;
-        for (let tx = 0; tx < plat.width; tx += scaledW) {
-          const drawW = Math.min(scaledW, plat.width - tx);
-          const srcW = drawW / scaleH;
-          ctx.drawImage(tileImg, 0, 0, srcW, tileH, px + tx, py, drawW, plat.height);
-        }
+  }, [canvasWidth, canvasHeight]);
+  useEffect(() => {
+    const drawFrame = (positions) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const {
+        platforms: plats,
+        worldWidth: ww,
+        worldHeight: wh,
+        canvasWidth: cw,
+        canvasHeight: ch,
+        followCamera: fc,
+        bgColor: bg,
+        playerSprite: pSprite,
+        tileSprites: tSprites,
+        backgroundImage: bgImg
+      } = propsRef.current;
+      const auth = playerRef.current;
+      const interped = positions.get("player");
+      const px = interped?.x ?? auth.x;
+      const py = interped?.y ?? auth.y;
+      let camX = 0;
+      let camY = 0;
+      if (fc) {
+        camX = Math.max(0, Math.min(px - cw / 2, ww - cw));
+        camY = Math.max(0, Math.min(py - ch / 2 - 50, wh - ch));
+      }
+      const bgImage = bgImg ? loadImage(bgImg) : null;
+      if (bgImage) {
+        ctx.drawImage(bgImage, 0, 0, cw, ch);
+      } else if (bg) {
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, cw, ch);
       } else {
-        const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
-        ctx.fillStyle = color;
-        ctx.fillRect(px, py, plat.width, plat.height);
-        ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
-        ctx.fillRect(px, py, plat.width, 3);
-        ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
-        ctx.fillRect(px, py + plat.height - 2, plat.width, 2);
-        if (platType === "hazard") {
-          ctx.strokeStyle = "#e74c3c";
-          ctx.lineWidth = 2;
-          for (let sx = px; sx < px + plat.width; sx += 12) {
+        const grad = ctx.createLinearGradient(0, 0, 0, ch);
+        grad.addColorStop(0, SKY_GRADIENT_TOP);
+        grad.addColorStop(1, SKY_GRADIENT_BOTTOM);
+        ctx.fillStyle = grad;
+        ctx.fillRect(0, 0, cw, ch);
+      }
+      ctx.strokeStyle = GRID_COLOR;
+      ctx.lineWidth = 1;
+      const gridSize = 32;
+      for (let gx = -camX % gridSize; gx < cw; gx += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(gx, 0);
+        ctx.lineTo(gx, ch);
+        ctx.stroke();
+      }
+      for (let gy = -camY % gridSize; gy < ch; gy += gridSize) {
+        ctx.beginPath();
+        ctx.moveTo(0, gy);
+        ctx.lineTo(cw, gy);
+        ctx.stroke();
+      }
+      for (const plat of plats) {
+        const platX = plat.x - camX;
+        const platY = plat.y - camY;
+        const platType = plat.type ?? "ground";
+        const spriteUrl = tSprites?.[platType];
+        const tileImg = spriteUrl ? loadImage(spriteUrl) : null;
+        if (tileImg) {
+          const tileW = tileImg.naturalWidth;
+          const tileH = tileImg.naturalHeight;
+          const scaleH = plat.height / tileH;
+          const scaledW = tileW * scaleH;
+          for (let tx = 0; tx < plat.width; tx += scaledW) {
+            const drawW = Math.min(scaledW, plat.width - tx);
+            const srcW = drawW / scaleH;
+            ctx.drawImage(tileImg, 0, 0, srcW, tileH, platX + tx, platY, drawW, plat.height);
+          }
+        } else {
+          const color = PLATFORM_COLORS[platType] ?? PLATFORM_COLORS.ground;
+          ctx.fillStyle = color;
+          ctx.fillRect(platX, platY, plat.width, plat.height);
+          ctx.fillStyle = "rgba(255, 255, 255, 0.15)";
+          ctx.fillRect(platX, platY, plat.width, 3);
+          ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
+          ctx.fillRect(platX, platY + plat.height - 2, plat.width, 2);
+          if (platType === "hazard") {
+            ctx.strokeStyle = "#e74c3c";
+            ctx.lineWidth = 2;
+            for (let sx = platX; sx < platX + plat.width; sx += 12) {
+              ctx.beginPath();
+              ctx.moveTo(sx, platY);
+              ctx.lineTo(sx + 6, platY + plat.height);
+              ctx.stroke();
+            }
+          }
+          if (platType === "goal") {
+            ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
             ctx.beginPath();
-            ctx.moveTo(sx, py);
-            ctx.lineTo(sx + 6, py + plat.height);
-            ctx.stroke();
+            ctx.arc(platX + plat.width / 2, platY - 10, 8, 0, Math.PI * 2);
+            ctx.fill();
           }
         }
-        if (platType === "goal") {
-          ctx.fillStyle = "rgba(241, 196, 15, 0.5)";
-          ctx.beginPath();
-          ctx.arc(px + plat.width / 2, py - 10, 8, 0, Math.PI * 2);
-          ctx.fill();
-        }
       }
-    }
-    const pw = resolvedPlayer.width ?? 24;
-    const ph = resolvedPlayer.height ?? 32;
-    const ppx = resolvedPlayer.x - camX;
-    const ppy = resolvedPlayer.y - camY;
-    const facingRight = resolvedPlayer.facingRight ?? true;
-    const playerImg = playerSprite ? loadImage(playerSprite) : null;
-    if (playerImg) {
-      ctx.save();
-      if (!facingRight) {
-        ctx.translate(ppx + pw, ppy);
-        ctx.scale(-1, 1);
-        ctx.drawImage(playerImg, 0, 0, pw, ph);
+      const pw = auth.width ?? 24;
+      const ph = auth.height ?? 32;
+      const ppx = px - camX;
+      const ppy = py - camY;
+      const facingRight = auth.facingRight ?? true;
+      const playerImg = pSprite ? loadImage(pSprite) : null;
+      if (playerImg) {
+        ctx.save();
+        if (!facingRight) {
+          ctx.translate(ppx + pw, ppy);
+          ctx.scale(-1, 1);
+          ctx.drawImage(playerImg, 0, 0, pw, ph);
+        } else {
+          ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+        }
+        ctx.restore();
       } else {
-        ctx.drawImage(playerImg, ppx, ppy, pw, ph);
+        ctx.fillStyle = PLAYER_COLOR;
+        const radius = Math.min(pw, ph) * 0.25;
+        ctx.beginPath();
+        ctx.moveTo(ppx + radius, ppy);
+        ctx.lineTo(ppx + pw - radius, ppy);
+        ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
+        ctx.lineTo(ppx + pw, ppy + ph - radius);
+        ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
+        ctx.lineTo(ppx + radius, ppy + ph);
+        ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
+        ctx.lineTo(ppx, ppy + radius);
+        ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
+        ctx.fill();
+        const eyeY = ppy + ph * 0.3;
+        const eyeSize = 3;
+        const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
+        ctx.fillStyle = PLAYER_EYE_COLOR;
+        ctx.beginPath();
+        ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
+        ctx.fill();
       }
-      ctx.restore();
-    } else {
-      ctx.fillStyle = PLAYER_COLOR;
-      const radius = Math.min(pw, ph) * 0.25;
-      ctx.beginPath();
-      ctx.moveTo(ppx + radius, ppy);
-      ctx.lineTo(ppx + pw - radius, ppy);
-      ctx.quadraticCurveTo(ppx + pw, ppy, ppx + pw, ppy + radius);
-      ctx.lineTo(ppx + pw, ppy + ph - radius);
-      ctx.quadraticCurveTo(ppx + pw, ppy + ph, ppx + pw - radius, ppy + ph);
-      ctx.lineTo(ppx + radius, ppy + ph);
-      ctx.quadraticCurveTo(ppx, ppy + ph, ppx, ppy + ph - radius);
-      ctx.lineTo(ppx, ppy + radius);
-      ctx.quadraticCurveTo(ppx, ppy, ppx + radius, ppy);
-      ctx.fill();
-      const eyeY = ppy + ph * 0.3;
-      const eyeSize = 3;
-      const eyeOffsetX = facingRight ? pw * 0.55 : pw * 0.2;
-      ctx.fillStyle = PLAYER_EYE_COLOR;
-      ctx.beginPath();
-      ctx.arc(ppx + eyeOffsetX, eyeY, eyeSize, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.beginPath();
-      ctx.arc(ppx + eyeOffsetX + 7, eyeY, eyeSize, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }, [player, platforms, worldWidth, worldHeight, canvasWidth, canvasHeight, followCamera, bgColor, playerSprite, tileSprites, backgroundImage, assetBaseUrl, loadedImages]);
+    };
+    return interp.startLoop(drawFrame);
+  }, [interp.startLoop, loadImage]);
   return /* @__PURE__ */ jsx(
     "canvas",
     {
@@ -28383,6 +28515,7 @@ var init_PlatformerCanvas = __esm({
     init_cn();
     init_useEventBus();
     init_verificationRegistry();
+    init_useRenderInterpolation();
     PLATFORM_COLORS = {
       ground: "#4a7c59",
       platform: "#7c6b4a",
@@ -28765,13 +28898,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect74, useRef: useRef68, useCallback: useCallback111, useState: useState107 } = React82__default;
+      const { useEffect: useEffect75, useRef: useRef69, useCallback: useCallback112, useState: useState107 } = React82__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef68({ centerLat, centerLng, zoom });
-        useEffect74(() => {
+        const prevRef = useRef69({ centerLat, centerLng, zoom });
+        useEffect75(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -28782,7 +28915,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect74(() => {
+        useEffect75(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -28811,7 +28944,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus3();
         const [clickedPosition, setClickedPosition] = useState107(null);
-        const handleMapClick = useCallback111((lat, lng) => {
+        const handleMapClick = useCallback112((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -28820,7 +28953,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback111((marker) => {
+        const handleMarkerClick = useCallback112((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -44692,11 +44825,13 @@ function SimulationCanvas({
   height = 400,
   running,
   speed = 1,
+  bodies: externalBodies,
   className
 }) {
   const preset = useMemo(() => resolvePreset(presetProp), [presetProp]);
   const canvasRef = useRef(null);
   const bodiesRef = useRef(structuredClone(preset.bodies));
+  const interp = useRenderInterpolation();
   useEffect(() => {
     bodiesRef.current = structuredClone(preset.bodies);
   }, [preset]);
@@ -44794,6 +44929,67 @@ function SimulationCanvas({
     }
   }, [width, height, preset]);
   useEffect(() => {
+    if (!externalBodies) return;
+    interp.onSnapshot(externalBodies.map((b) => ({ id: b.id, x: b.x, y: b.y })));
+  }, [externalBodies]);
+  const presetRef = useRef(preset);
+  presetRef.current = preset;
+  const widthRef = useRef(width);
+  widthRef.current = width;
+  const heightRef = useRef(height);
+  heightRef.current = height;
+  useEffect(() => {
+    if (!externalBodies) return;
+    const drawInterpolated = (positions) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const bodies = bodiesRef.current;
+      const p2 = presetRef.current;
+      const w = widthRef.current;
+      const h = heightRef.current;
+      ctx.clearRect(0, 0, w, h);
+      ctx.fillStyle = p2.backgroundColor ?? "#1a1a2e";
+      ctx.fillRect(0, 0, w, h);
+      if (p2.constraints) {
+        for (const c of p2.constraints) {
+          const a = bodies[c.bodyA];
+          const b = bodies[c.bodyB];
+          if (a && b) {
+            const aPos = positions.get(a.id) ?? a;
+            const bPos = positions.get(b.id) ?? b;
+            ctx.beginPath();
+            ctx.moveTo(aPos.x, aPos.y);
+            ctx.lineTo(bPos.x, bPos.y);
+            ctx.strokeStyle = "#533483";
+            ctx.lineWidth = 1;
+            ctx.setLineDash([4, 4]);
+            ctx.stroke();
+            ctx.setLineDash([]);
+          }
+        }
+      }
+      for (const body of bodies) {
+        const pos = positions.get(body.id) ?? body;
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, body.radius, 0, Math.PI * 2);
+        ctx.fillStyle = body.color ?? "#e94560";
+        ctx.fill();
+        if (p2.showVelocity) {
+          ctx.beginPath();
+          ctx.moveTo(pos.x, pos.y);
+          ctx.lineTo(pos.x + body.vx * 0.1, pos.y + body.vy * 0.1);
+          ctx.strokeStyle = "#16213e";
+          ctx.lineWidth = 2;
+          ctx.stroke();
+        }
+      }
+    };
+    return interp.startLoop(drawInterpolated);
+  }, [externalBodies !== void 0, interp.startLoop]);
+  useEffect(() => {
+    if (externalBodies !== void 0) return;
     if (!running) return;
     let raf;
     const loop = () => {
@@ -44803,10 +44999,11 @@ function SimulationCanvas({
     };
     raf = requestAnimationFrame(loop);
     return () => cancelAnimationFrame(raf);
-  }, [running, step, draw]);
+  }, [running, step, draw, externalBodies]);
   useEffect(() => {
+    if (externalBodies !== void 0) return;
     draw();
-  }, [draw]);
+  }, [draw, externalBodies]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const canvas = canvasRef.current;
@@ -44832,6 +45029,7 @@ var init_SimulationCanvas = __esm({
     init_atoms2();
     init_verificationRegistry();
     init_presets();
+    init_useRenderInterpolation();
     SimulationCanvas.displayName = "SimulationCanvas";
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.42.0",
+  "version": "5.43.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [