@nice2dev/game-engine 1.3.15 → 1.3.17

package/dist/esm/input/useGamepads.js

@@ -1,88 +1,80 @@
-import { useRef, useEffect, useState } from 'react';
-
-/**
- * useGamepads — polls connected gamepads every frame.
- * Returns an array of GamepadSnapshot objects (0-8 pads).
- * Designed for couch mini-games (higher level than InputManager).
- */
+import { useRef, useEffect, useState } from "react";
 const AXIS_THRESHOLD = 0.5;
 const TRIGGER_THRESHOLD = 0.3;
 function snapshot(gp) {
-    const btns = gp.buttons;
-    const axes = gp.axes;
-    const dpUp = !!btns[12]?.pressed;
-    const dpDown = !!btns[13]?.pressed;
-    const dpLeft = !!btns[14]?.pressed;
-    const dpRight = !!btns[15]?.pressed;
-    const lt = (btns[6]?.value ?? 0) > TRIGGER_THRESHOLD || !!btns[6]?.pressed;
-    const rt = (btns[7]?.value ?? 0) > TRIGGER_THRESHOLD || !!btns[7]?.pressed;
-    return {
-        index: gp.index,
-        up: dpUp || (axes[1] != null && axes[1] < -AXIS_THRESHOLD),
-        down: dpDown || (axes[1] != null && axes[1] > AXIS_THRESHOLD),
-        left: dpLeft || (axes[0] != null && axes[0] < -AXIS_THRESHOLD),
-        right: dpRight || (axes[0] != null && axes[0] > AXIS_THRESHOLD),
-        dpUp,
-        dpDown,
-        dpLeft,
-        dpRight,
-        lx: axes[0] ?? 0,
-        ly: axes[1] ?? 0,
-        rx: axes[2] ?? 0,
-        ry: axes[3] ?? 0,
-        a: !!btns[0]?.pressed,
-        b: !!btns[1]?.pressed,
-        x: !!btns[2]?.pressed,
-        y: !!btns[3]?.pressed,
-        lb: !!btns[4]?.pressed,
-        rb: !!btns[5]?.pressed,
-        lt,
-        rt,
-        start: !!btns[9]?.pressed,
-        select: !!btns[8]?.pressed,
-    };
+  const btns = gp.buttons;
+  const axes = gp.axes;
+  const dpUp = !!btns[12]?.pressed;
+  const dpDown = !!btns[13]?.pressed;
+  const dpLeft = !!btns[14]?.pressed;
+  const dpRight = !!btns[15]?.pressed;
+  const lt = (btns[6]?.value ?? 0) > TRIGGER_THRESHOLD || !!btns[6]?.pressed;
+  const rt = (btns[7]?.value ?? 0) > TRIGGER_THRESHOLD || !!btns[7]?.pressed;
+  return {
+    index: gp.index,
+    up: dpUp || axes[1] != null && axes[1] < -AXIS_THRESHOLD,
+    down: dpDown || axes[1] != null && axes[1] > AXIS_THRESHOLD,
+    left: dpLeft || axes[0] != null && axes[0] < -AXIS_THRESHOLD,
+    right: dpRight || axes[0] != null && axes[0] > AXIS_THRESHOLD,
+    dpUp,
+    dpDown,
+    dpLeft,
+    dpRight,
+    lx: axes[0] ?? 0,
+    ly: axes[1] ?? 0,
+    rx: axes[2] ?? 0,
+    ry: axes[3] ?? 0,
+    a: !!btns[0]?.pressed,
+    b: !!btns[1]?.pressed,
+    x: !!btns[2]?.pressed,
+    y: !!btns[3]?.pressed,
+    lb: !!btns[4]?.pressed,
+    rb: !!btns[5]?.pressed,
+    lt,
+    rt,
+    start: !!btns[9]?.pressed,
+    select: !!btns[8]?.pressed
+  };
 }
 function useGamepads() {
-    const [pads, setPads] = useState([]);
-    const rafRef = useRef(0);
-    useEffect(() => {
-        const poll = () => {
-            const raw = navigator.getGamepads?.() ?? [];
-            const snaps = [];
-            for (const gp of raw) {
-                if (gp) {
-                    snaps.push(snapshot(gp));
-                }
-            }
-            setPads(snaps);
-            rafRef.current = requestAnimationFrame(poll);
-        };
-        rafRef.current = requestAnimationFrame(poll);
-        return () => cancelAnimationFrame(rafRef.current);
-    }, []);
-    return pads;
-}
-/**
- * useGamepadEdges — returns snapshots + edge detection (justPressed).
- * Compares current frame to previous frame for each button.
- */
-function useGamepadEdges() {
-    const pads = useGamepads();
-    const prevRef = useRef([]);
-    const justPressed = (padIndex, button) => {
-        const cur = pads.find((p) => p.index === padIndex);
-        const prev = prevRef.current.find((p) => p.index === padIndex);
-        if (!cur) {
-            return false;
+  const [pads, setPads] = useState([]);
+  const rafRef = useRef(0);
+  useEffect(() => {
+    const poll = () => {
+      const raw = navigator.getGamepads?.() ?? [];
+      const snaps = [];
+      for (const gp of raw) {
+        if (gp) {
+          snaps.push(snapshot(gp));
         }
-        const cv = cur[button];
-        const pv = prev?.[button];
-        return cv === true && pv !== true;
+      }
+      setPads(snaps);
+      rafRef.current = requestAnimationFrame(poll);
     };
-    useEffect(() => {
-        prevRef.current = pads;
-    });
-    return { pads, justPressed };
+    rafRef.current = requestAnimationFrame(poll);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, []);
+  return pads;
+}
+function useGamepadEdges() {
+  const pads = useGamepads();
+  const prevRef = useRef([]);
+  const justPressed = (padIndex, button) => {
+    const cur = pads.find((p) => p.index === padIndex);
+    const prev = prevRef.current.find((p) => p.index === padIndex);
+    if (!cur) {
+      return false;
+    }
+    const cv = cur[button];
+    const pv = prev?.[button];
+    return cv === true && pv !== true;
+  };
+  useEffect(() => {
+    prevRef.current = pads;
+  });
+  return { pads, justPressed };
 }
-
-export { useGamepadEdges, useGamepads };
+export {
+  useGamepadEdges,
+  useGamepads
+};

package/dist/esm/integration/IconSprite.js

@@ -1,283 +1,171 @@
-/* ────────────────────────────────────────────────────────────────
-   IconSprite — Bridge between @nice2dev/icons-gaming SVG icons
-   and the game-engine Canvas 2D renderer.
-
-   Converts React SVG icon components to rasterized textures that
-   can be used as Sprite assets, including multi-frame animation
-   sheets generated from different animation states.
-──────────────────────────────────────────────────────────────── */
-/* ── SVG to Image conversion ──────────────────────────────────── */
-/**
- * Render an icon component to an SVG string using React's static markup API.
- * This function must be called with the result of ReactDOMServer.renderToStaticMarkup().
- */
 function iconToSvgString(svgMarkup, size) {
-    // Ensure SVG has xmlns for standalone rendering
-    if (!svgMarkup.includes('xmlns=')) {
-        svgMarkup = svgMarkup.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
-    }
-    // Ensure dimensions
-    if (!svgMarkup.includes('width=')) {
-        svgMarkup = svgMarkup.replace('<svg', `<svg width="${size}" height="${size}"`);
-    }
-    return svgMarkup;
+  if (!svgMarkup.includes("xmlns=")) {
+    svgMarkup = svgMarkup.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  if (!svgMarkup.includes("width=")) {
+    svgMarkup = svgMarkup.replace("<svg", `<svg width="${size}" height="${size}"`);
+  }
+  return svgMarkup;
 }
-/**
- * Convert an SVG string to a data URL suitable for Image loading.
- */
 function svgToDataUrl(svgString) {
-    const encoded = encodeURIComponent(svgString).replace(/'/g, '%27').replace(/"/g, '%22');
-    return `data:image/svg+xml,${encoded}`;
+  const encoded = encodeURIComponent(svgString).replace(/'/g, "%27").replace(/"/g, "%22");
+  return `data:image/svg+xml,${encoded}`;
 }
-/**
- * Load an SVG data URL into an HTMLImageElement (async).
- */
 function loadSvgImage(dataUrl) {
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error('Failed to load SVG image'));
-        img.src = dataUrl;
-    });
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("Failed to load SVG image"));
+    img.src = dataUrl;
+  });
 }
-/**
- * Rasterize an SVG string to an OffscreenCanvas / HTMLCanvasElement.
- */
 async function rasterizeSvg(svgString, size) {
-    const dataUrl = svgToDataUrl(svgString);
-    const img = await loadSvgImage(dataUrl);
-    const canvas = document.createElement('canvas');
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) {
-        throw new Error('Failed to get 2D context');
-    }
-    ctx.drawImage(img, 0, 0, size, size);
-    return canvas;
+  const dataUrl = svgToDataUrl(svgString);
+  const img = await loadSvgImage(dataUrl);
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get 2D context");
+  }
+  ctx.drawImage(img, 0, 0, size, size);
+  return canvas;
 }
-/* ── Texture registration ─────────────────────────────────────── */
-/**
- * Generate a deterministic texture ID for an icon + options combination.
- */
 function getIconTextureId(displayName, options) {
-    const parts = [`icon:${displayName}`];
-    if (options?.size) {
-        parts.push(`s${options.size}`);
-    }
-    if (options?.color) {
-        parts.push(`c${options.color}`);
-    }
-    if (options?.animation && options.animation !== 'none') {
-        parts.push(`a${options.animation}`);
-    }
-    return parts.join(':');
+  const parts = [`icon:${displayName}`];
+  if (options?.size) {
+    parts.push(`s${options.size}`);
+  }
+  if (options?.color) {
+    parts.push(`c${options.color}`);
+  }
+  if (options?.animation && options.animation !== "none") {
+    parts.push(`a${options.animation}`);
+  }
+  return parts.join(":");
 }
-/**
- * Register an SVG icon as a texture in the game-engine renderer.
- *
- * @param renderer  The Renderer2D instance
- * @param textureId Unique texture identifier
- * @param svgMarkup Static SVG markup from ReactDOMServer.renderToStaticMarkup(<Icon ... />)
- * @param size      Rasterization size in px
- * @returns         Promise that resolves when the texture is ready
- *
- * @example
- * ```ts
- * import { renderToStaticMarkup } from 'react-dom/server';
- * import { GiWarrior } from '@nice2dev/icons-gaming';
- * import { registerIconTexture, getIconTextureId } from '@nice2dev/game-engine';
- *
- * const id = getIconTextureId('GiWarrior', { size: 64 });
- * const svg = renderToStaticMarkup(<GiWarrior size={64} color="#e74c3c" />);
- * await registerIconTexture(renderer, id, svg, 64);
- * ```
- */
 async function registerIconTexture(renderer, textureId, svgMarkup, size) {
-    const existing = renderer.getTexture(textureId);
-    if (existing) {
-        return;
-    } // already loaded
-    const prepared = iconToSvgString(svgMarkup, size);
-    const dataUrl = svgToDataUrl(prepared);
-    await renderer.loadTexture(textureId, dataUrl);
+  const existing = renderer.getTexture(textureId);
+  if (existing) {
+    return;
+  }
+  const prepared = iconToSvgString(svgMarkup, size);
+  const dataUrl = svgToDataUrl(prepared);
+  await renderer.loadTexture(textureId, dataUrl);
 }
-/**
- * Register an SVG icon as a rasterized canvas texture (sync-safe after await).
- * Useful when you need pixel-perfect rendering without scaling artifacts.
- */
 async function registerIconCanvasTexture(renderer, textureId, svgMarkup, size) {
-    const existing = renderer.getTexture(textureId);
-    if (existing) {
-        return;
-    }
-    const prepared = iconToSvgString(svgMarkup, size);
-    const canvas = await rasterizeSvg(prepared, size);
-    renderer.setTexture(textureId, canvas);
+  const existing = renderer.getTexture(textureId);
+  if (existing) {
+    return;
+  }
+  const prepared = iconToSvgString(svgMarkup, size);
+  const canvas = await rasterizeSvg(prepared, size);
+  renderer.setTexture(textureId, canvas);
 }
-/* ── Entity helpers ───────────────────────────────────────────── */
-/**
- * Create a game entity with Sprite component sourced from an icon texture.
- *
- * The texture must already be registered via `registerIconTexture()`.
- *
- * @example
- * ```ts
- * const entityId = createIconEntity(world, 'GiWarrior', textureId, {
- *   x: 200, y: 150, displayWidth: 64, displayHeight: 64, layer: 1,
- * });
- * ```
- */
 function createIconEntity(world, name, textureId, options) {
-    const entity = world.createEntity(options?.name ?? name);
-    entity.tags.add('icon-sprite');
-    world.addComponent(entity.id, 'Transform', {
-        position: { x: options?.x ?? 0, y: options?.y ?? 0 },
-        scale: { x: 1, y: 1 },
-    });
-    const spriteOverrides = {
-        assetId: textureId,
-        width: options?.displayWidth ?? 32,
-        height: options?.displayHeight ?? 32,
-        layer: options?.layer ?? 0,
-        visible: true,
-    };
-    if (options?.tint) {
-        spriteOverrides.tint = options.tint;
-    }
-    if (options?.opacity !== undefined) {
-        spriteOverrides.opacity = options.opacity;
-    }
-    world.addComponent(entity.id, 'Sprite', spriteOverrides);
-    return entity.id;
+  const entity = world.createEntity(options?.name ?? name);
+  entity.tags.add("icon-sprite");
+  world.addComponent(entity.id, "Transform", {
+    position: { x: options?.x ?? 0, y: options?.y ?? 0 },
+    scale: { x: 1, y: 1 }
+  });
+  const spriteOverrides = {
+    assetId: textureId,
+    width: options?.displayWidth ?? 32,
+    height: options?.displayHeight ?? 32,
+    layer: options?.layer ?? 0,
+    visible: true
+  };
+  if (options?.tint) {
+    spriteOverrides.tint = options.tint;
+  }
+  if (options?.opacity !== void 0) {
+    spriteOverrides.opacity = options.opacity;
+  }
+  world.addComponent(entity.id, "Sprite", spriteOverrides);
+  return entity.id;
 }
-/* ── Animation sheet helpers ──────────────────────────────────── */
-/**
- * Create a SpriteAnimation clip from multiple icon animation frames.
- *
- * Each frame is a separate registered texture. The AnimatorComponent
- * switches `assetId` each frame to show different icon states.
- *
- * @param frames  Array of { assetId, duration } for each frame
- * @param loop    Whether animation loops
- */
 function createIconAnimationClip(frames, fps = 8, loop = true) {
-    return {
-        frames: frames.map((f) => ({
-            assetId: f.assetId,
-            srcRect: null,
-            duration: f.duration,
-        })),
-        fps,
-        loop,
-    };
+  return {
+    frames: frames.map((f) => ({
+      assetId: f.assetId,
+      srcRect: null,
+      duration: f.duration
+    })),
+    fps,
+    loop
+  };
 }
-/**
- * Predefined character animation state sequences.
- * Maps game animation concepts to sets of icon animation states
- * that can be baked into textures.
- */
 const CHARACTER_ANIMATION_STATES = [
-    'idle',
-    'move',
-    'jump',
-    'attack-melee',
-    'attack-ranged',
-    'attack-magic',
-    'damage',
-    'death',
+  "idle",
+  "move",
+  "jump",
+  "attack-melee",
+  "attack-ranged",
+  "attack-magic",
+  "damage",
+  "death"
 ];
 const OBJECT_ANIMATION_STATES = [
-    'idle',
-    'spin',
-    'float',
-    'shake',
-    'glow',
-    'bounce',
-    'flicker',
+  "idle",
+  "spin",
+  "float",
+  "shake",
+  "glow",
+  "bounce",
+  "flicker"
 ];
-/**
- * Batch-register all animation states of an icon as separate textures.
- *
- * @returns Map of animation state → texture ID
- *
- * @example
- * ```ts
- * const textures = await registerIconAnimationSet(
- *   renderer,
- *   'GiWarrior',
- *   (anim) => renderToStaticMarkup(<GiWarrior size={64} animation={anim} color="#e74c3c" />),
- *   CHARACTER_ANIMATION_STATES,
- *   64,
- * );
- * // textures = { idle: 'icon:GiWarrior:s64:aidle', move: 'icon:GiWarrior:s64:amove', ... }
- * ```
- */
 async function registerIconAnimationSet(renderer, displayName, renderFn, states, size) {
-    const result = {};
-    for (const state of states) {
-        const textureId = getIconTextureId(displayName, { size, animation: state });
-        const svgMarkup = renderFn(state);
-        await registerIconTexture(renderer, textureId, svgMarkup, size);
-        result[state] = textureId;
-    }
-    return result;
+  const result = {};
+  for (const state of states) {
+    const textureId = getIconTextureId(displayName, { size, animation: state });
+    const svgMarkup = renderFn(state);
+    await registerIconTexture(renderer, textureId, svgMarkup, size);
+    result[state] = textureId;
+  }
+  return result;
 }
-/**
- * Create an Animator component configuration from a registered animation set.
- *
- * @param textureMap Result from `registerIconAnimationSet()`
- * @param defaultState Initial animation state (default: 'idle')
- * @param fps Frames per second for each clip
- */
-function createIconAnimator(textureMap, defaultState = 'idle', fps = 1) {
-    const animations = {};
-    for (const [state, assetId] of Object.entries(textureMap)) {
-        animations[state] = {
-            frames: [{ assetId, srcRect: null }],
-            fps,
-            loop: true,
-        };
-    }
-    return {
-        currentAnimation: defaultState,
-        animations,
-        frame: 0,
-        elapsed: 0,
-        playing: true,
-        loop: true,
+function createIconAnimator(textureMap, defaultState = "idle", fps = 1) {
+  const animations = {};
+  for (const [state, assetId] of Object.entries(textureMap)) {
+    animations[state] = {
+      frames: [{ assetId, srcRect: null }],
+      fps,
+      loop: true
     };
+  }
+  return {
+    currentAnimation: defaultState,
+    animations,
+    frame: 0,
+    elapsed: 0,
+    playing: true,
+    loop: true
+  };
 }
-/**
- * Register an entire icon map (e.g. `characterIcons`, `weaponIcons`)
- * and return a catalog array for the asset manager / picker.
- *
- * @param renderer   Renderer2D
- * @param iconMap    Map of name→icon render functions (SVG markup generators)
- * @param category   Category label for the asset catalog
- * @param size       Texture size
- *
- * @example
- * ```ts
- * const catalog = await registerIconCatalog(
- *   renderer,
- *   {
- *     GiWarrior: () => renderToStaticMarkup(<GiWarrior size={64} color="#e74c3c" />),
- *     GiMage: () => renderToStaticMarkup(<GiMage size={64} color="#3498db" />),
- *   },
- *   'characters',
- *   64,
- * );
- * ```
- */
 async function registerIconCatalog(renderer, iconMap, category, size) {
-    const catalog = [];
-    for (const [name, renderFn] of Object.entries(iconMap)) {
-        const textureId = getIconTextureId(name, { size });
-        await registerIconTexture(renderer, textureId, renderFn(), size);
-        catalog.push({ name, textureId, category });
-    }
-    return catalog;
+  const catalog = [];
+  for (const [name, renderFn] of Object.entries(iconMap)) {
+    const textureId = getIconTextureId(name, { size });
+    await registerIconTexture(renderer, textureId, renderFn(), size);
+    catalog.push({ name, textureId, category });
+  }
+  return catalog;
 }
-
-export { CHARACTER_ANIMATION_STATES, OBJECT_ANIMATION_STATES, createIconAnimationClip, createIconAnimator, createIconEntity, getIconTextureId, iconToSvgString, loadSvgImage, rasterizeSvg, registerIconAnimationSet, registerIconCanvasTexture, registerIconCatalog, registerIconTexture, svgToDataUrl };
+export {
+  CHARACTER_ANIMATION_STATES,
+  OBJECT_ANIMATION_STATES,
+  createIconAnimationClip,
+  createIconAnimator,
+  createIconEntity,
+  getIconTextureId,
+  iconToSvgString,
+  loadSvgImage,
+  rasterizeSvg,
+  registerIconAnimationSet,
+  registerIconCanvasTexture,
+  registerIconCatalog,
+  registerIconTexture,
+  svgToDataUrl
+};