@rb-games/core 0.1.0

package/dist/helpers/index.js

@@ -0,0 +1,702 @@
+import { ExtensionType, Assets, Color, Cache, Texture, TextureSource } from 'pixi.js';
+import { minimatch } from 'minimatch';
+import { mergeWith, isPlainObject } from 'lodash';
+
+// helpers/SVGLoader.ts
+var parserConfig = {};
+function manipulateSVG(svgString, data) {
+  const parser = new DOMParser();
+  const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
+  const svgElement = svgDoc.documentElement;
+  if (data == null ? void 0 : data.styles) {
+    Object.entries(data.styles).forEach(([selector, styles]) => {
+      const elements = svgDoc.querySelectorAll(selector);
+      elements.forEach((element) => {
+        Object.entries(styles).forEach(([attr, value]) => {
+          element.setAttribute(attr, value);
+        });
+      });
+    });
+  }
+  if (data == null ? void 0 : data.size) {
+    svgElement.setAttribute("width", data.size.width.toString());
+    svgElement.setAttribute("height", data.size.height.toString());
+  }
+  return new XMLSerializer().serializeToString(svgDoc);
+}
+async function createTextureFromSVG(svgString, data) {
+  const blob = new Blob([svgString], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  const img = new Image();
+  img.src = url;
+  return new Promise((resolve, reject) => {
+    img.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Could not get canvas context"));
+          return;
+        }
+        const resolution = (data == null ? void 0 : data.resolution) || 1;
+        canvas.width = img.width * resolution;
+        canvas.height = img.height * resolution;
+        ctx.drawImage(img, 0, 0);
+        const source = TextureSource.from(canvas);
+        const texture = new Texture(source);
+        resolve(texture);
+        URL.revokeObjectURL(url);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load SVG image"));
+    };
+  });
+}
+var SVGParser = {
+  /**
+   * Extension metadata for the parser.
+   *
+   * @internal
+   */
+  extension: {
+    type: ExtensionType.LoadParser,
+    name: "svgParser",
+    priority: 0
+  },
+  /**
+   * Unique identifier for the parser.
+   *
+   * @internal
+   */
+  id: "svgParser",
+  /**
+   * Tests if a URL should be handled by this parser.
+   *
+   * By default, matches files ending with .svg extension.
+   * Can be customized via configureSVGParser() with a glob pattern.
+   *
+   * @param url - Asset URL to test
+   * @returns True if this parser should handle the URL
+   */
+  test: (url) => {
+    if (parserConfig.testPattern) {
+      try {
+        const urlObj = new URL(url);
+        const pathname = urlObj.pathname.startsWith("/") ? urlObj.pathname.slice(1) : urlObj.pathname;
+        return minimatch(pathname, parserConfig.testPattern, { partial: true });
+      } catch {
+        return minimatch(url, parserConfig.testPattern, { partial: true });
+      }
+    }
+    return /\.svg$/i.test(url);
+  },
+  /**
+   * Loads and processes an SVG file into a PixiJS Texture.
+   *
+   * This method:
+   * 1. Fetches the SVG file from the URL
+   * 2. Applies style and size manipulations
+   * 3. Rasterizes the SVG to a canvas
+   * 4. Creates a PixiJS Texture from the canvas
+   *
+   * @param url - URL of the SVG file to load
+   * @param resolvedAsset - Resolved asset with optional load data
+   * @returns Promise that resolves to a PixiJS Texture
+   */
+  async load(url, resolvedAsset) {
+    const response = await fetch(url);
+    const svgString = await response.text();
+    const manipulatedSVG = manipulateSVG(svgString, resolvedAsset == null ? void 0 : resolvedAsset.data);
+    const texture = await createTextureFromSVG(manipulatedSVG, resolvedAsset == null ? void 0 : resolvedAsset.data);
+    texture.label = (resolvedAsset == null ? void 0 : resolvedAsset.src) ?? "unknown";
+    return texture;
+  }
+};
+function configureSVGParser(config) {
+  parserConfig = { ...parserConfig, ...config };
+}
+
+// helpers/SVGLoader.ts
+var SVGLoader = class {
+  static installed = false;
+  /**
+   * Installs the SVG loader into the PixiJS Assets system.
+   *
+   * This method must be called once at application startup before loading any SVG assets.
+   * It registers the SVG parser with PixiJS, enabling automatic SVG file processing.
+   * This method is idempotent - calling it multiple times is safe but only the first call will take effect.
+   *
+   * @param config - Optional configuration for SVG file matching
+   */
+  static install(config) {
+    if (this.installed) {
+      console.warn("SVGLoader is already installed");
+      return;
+    }
+    if (config) {
+      configureSVGParser(config);
+    }
+    Assets.loader.parsers.unshift(SVGParser);
+    this.installed = true;
+    console.log("SVG Loader installed successfully");
+  }
+  /**
+   * Checks if the SVG loader has been installed.
+   *
+   * @returns True if the loader is installed, false otherwise
+   */
+  static isInstalled() {
+    return this.installed;
+  }
+  /**
+   * Uninstalls the SVG loader from the PixiJS Assets system.
+   *
+   * This method is primarily intended for testing purposes.
+   * In production, you typically install the loader once and never uninstall it.
+   */
+  static uninstall() {
+    if (!this.installed) {
+      return;
+    }
+    const index = Assets.loader.parsers.indexOf(SVGParser);
+    if (index > -1) {
+      Assets.loader.parsers.splice(index, 1);
+    }
+    this.installed = false;
+    console.log("SVG Loader uninstalled");
+  }
+};
+function adjustColor(color, amount, sign) {
+  const colorObj = new Color(color);
+  const rgb = {
+    r: colorObj.red * 255,
+    g: colorObj.green * 255,
+    b: colorObj.blue * 255
+  };
+  const delta = 255 * amount * sign;
+  const newR = Math.max(0, Math.min(255, rgb.r + delta));
+  const newG = Math.max(0, Math.min(255, rgb.g + delta));
+  const newB = Math.max(0, Math.min(255, rgb.b + delta));
+  return new Color([newR / 255, newG / 255, newB / 255]);
+}
+function lightenColor(color, amount) {
+  return adjustColor(color, amount, 1);
+}
+function darkenColor(color, amount) {
+  return adjustColor(color, amount, -1);
+}
+
+// helpers/SVGAssetHelper.ts
+var SVGAssetHelper = class {
+  static themeColor = "#4CAF50";
+  /**
+   * Sets the global theme color for all SVG assets.
+   *
+   * This color will be used as the default for all assets unless overridden
+   * in individual asset configurations.
+   *
+   * @param color - Theme color (supports all PixiJS ColorSource formats)
+   *
+   * @example
+   * ```typescript
+   * // Set theme with hex string
+   * SVGAssetHelper.setThemeColor('#4CAF50');
+   *
+   * // Set theme with number
+   * SVGAssetHelper.setThemeColor(0x4CAF50);
+   *
+   * // Set theme with RGB array
+   * SVGAssetHelper.setThemeColor([0.3, 0.69, 0.31]);
+   * ```
+   */
+  static setThemeColor(color) {
+    this.themeColor = color;
+  }
+  /**
+   * Gets the current global theme color.
+   *
+   * @returns The current theme color as ColorSource
+   *
+   * @example
+   * ```typescript
+   * const currentTheme = SVGAssetHelper.getThemeColor();
+   * // Can be used directly or converted as needed
+   * const hex = new Color(currentTheme).toHex();
+   * ```
+   */
+  static getThemeColor() {
+    return this.themeColor;
+  }
+  /**
+   * Create button state styles based on theme color
+   */
+  static createButtonStyles(themeColor, variations) {
+    const baseColor = themeColor || this.themeColor;
+    const baseColorHex = new Color(baseColor).toHex();
+    return {
+      up: {
+        "#primary": { fill: baseColorHex },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: baseColorHex }
+      },
+      over: {
+        "#primary": { fill: lightenColor(baseColor, (variations == null ? void 0 : variations.over) || 0.15).toHex() },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: lightenColor(baseColor, (variations == null ? void 0 : variations.over) || 0.15).toHex() }
+      },
+      down: {
+        "#primary": { fill: darkenColor(baseColor, (variations == null ? void 0 : variations.down) || 0.15).toHex() },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: darkenColor(baseColor, (variations == null ? void 0 : variations.down) || 0.15).toHex() }
+      },
+      disabled: {
+        "#primary": { fill: "#cccccc" },
+        "#secondary": { fill: "#999999" },
+        "#background": { fill: "#cccccc" }
+      },
+      selected_up: {
+        "#primary": { fill: baseColorHex },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: baseColorHex }
+      },
+      selected_over: {
+        "#primary": { fill: lightenColor(baseColor, (variations == null ? void 0 : variations.over) || 0.15).toHex() },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: lightenColor(baseColor, (variations == null ? void 0 : variations.over) || 0.15).toHex() }
+      },
+      selected_down: {
+        "#primary": { fill: darkenColor(baseColor, (variations == null ? void 0 : variations.down) || 0.15).toHex() },
+        "#secondary": { fill: "#ffffff" },
+        "#background": { fill: darkenColor(baseColor, (variations == null ? void 0 : variations.down) || 0.15).toHex() }
+      },
+      selected_disabled: {
+        "#primary": { fill: "#cccccc" },
+        "#secondary": { fill: "#999999" },
+        "#background": { fill: "#cccccc" }
+      }
+    };
+  }
+  /**
+   * Create custom styles
+   */
+  static createCustomStyles(config) {
+    const result = {};
+    Object.entries(config.colors).forEach(([state, colors]) => {
+      result[state] = {};
+      config.selectors.forEach((selector, index) => {
+        if (colors[index]) {
+          result[state][selector] = { fill: colors[index] };
+        }
+      });
+    });
+    return result;
+  }
+  /**
+   * Loads a single SVG asset as a PixiJS texture.
+   *
+   * This method loads an SVG file, applies optional theme colors and styles,
+   * and registers it with the PixiJS Assets system for later retrieval.
+   *
+   * @param config - Asset configuration
+   * @returns Promise that resolves when the asset is loaded
+   *
+   * @example
+   * ```typescript
+   * // Load a simple icon
+   * await SVGAssetHelper.loadSVGAsset({
+   *   alias: 'home_icon',
+   *   src: 'assets/svg/home.svg',
+   *   size: { width: 64, height: 64 },
+   *   resolution: 2
+   * });
+   *
+   * // Load with theme color
+   * await SVGAssetHelper.loadSVGAsset({
+   *   alias: 'settings_icon',
+   *   src: 'assets/svg/settings.svg',
+   *   size: { width: 48, height: 48 },
+   *   themeColor: '#2196F3'
+   * });
+   * ```
+   */
+  static async loadSVGAsset(config) {
+    const loadData = {
+      size: config.size,
+      resolution: config.resolution || 1
+    };
+    if (config.themeColor) {
+      const styles = this.createButtonStyles(config.themeColor);
+      loadData.styles = styles.up;
+    }
+    await Assets.load({
+      alias: config.alias,
+      src: `${config.src}`,
+      data: loadData
+    });
+  }
+  /**
+   * Loads a button SVG asset with multiple interaction states.
+   *
+   * Automatically generates up, over, down, and optionally disabled states
+   * by applying color variations (lighten for over, darken for down).
+   * Each state is loaded as a separate texture with the naming convention `{alias}_{state}`.
+   *
+   * @param config - Button asset configuration
+   * @returns Promise that resolves when all button states are loaded
+   *
+   * @example
+   * ```typescript
+   * // Load button with default states
+   * await SVGAssetHelper.loadButtonAsset({
+   *   alias: 'play_btn',
+   *   src: 'assets/svg/play.svg',
+   *   size: { width: 120, height: 120 },
+   *   themeColor: '#4CAF50'
+   * });
+   *
+   * // Access different states
+   * const upTexture = SVGAssetHelper.getAsset('play_btn', 'up');
+   * const overTexture = SVGAssetHelper.getAsset('play_btn', 'over');
+   * const downTexture = SVGAssetHelper.getAsset('play_btn', 'down');
+   * ```
+   *
+   * @example
+   * ```typescript
+   * // Custom states
+   * await SVGAssetHelper.loadButtonAsset({
+   *   alias: 'custom_btn',
+   *   src: 'assets/svg/button.svg',
+   *   size: { width: 100, height: 40 },
+   *   themeColor: '#E91E63',
+   *   states: ['up', 'over', 'down', 'disabled']
+   * });
+   * ```
+   */
+  static async loadButtonAsset(config) {
+    const styles = this.createButtonStyles(
+      config.themeColor ? typeof config.themeColor === "number" ? new Color(config.themeColor).toHex() : config.themeColor : void 0
+    );
+    const states = config.states || ["up", "over", "down"];
+    for (const state of states) {
+      const stateStyles = styles[state];
+      if (stateStyles) {
+        const loadData = {
+          styles: stateStyles,
+          size: config.size,
+          resolution: config.resolution || 1
+        };
+        const hash = await this.generateAssetHash(config.src, loadData);
+        await Assets.load({
+          alias: `${config.alias}_${state}`,
+          src: `${config.src}?hash=${hash}`,
+          data: loadData
+        });
+      }
+    }
+  }
+  /**
+   * Loads multiple SVG assets in parallel for efficient batch loading.
+   *
+   * Automatically determines whether to load each asset as a simple SVG or
+   * as a button with states based on the states property.
+   *
+   * @param basePath - Base directory path for all assets (assets without src will use basePath/alias.svg)
+   * @param assets - Array of asset configurations (strings, objects, or mixed)
+   * @param defaults - Optional default configuration applied to all assets
+   * @returns Promise that resolves when all assets are loaded
+   *
+   * @example
+   * ```typescript
+   * // Simple string array (most convenient)
+   * await SVGAssetHelper.loadBatchAssets(
+   *   'assets/svg/desktop',
+   *   ['btn_bet_minus', 'btn_bet_plus', 'btn_spin'],
+   *   {
+   *     size: { width: 100, height: 100 },
+   *     states: ['up', 'over', 'down', 'disabled']
+   *   }
+   * );
+   *
+   * // Mixed array (strings and objects for customization)
+   * await SVGAssetHelper.loadBatchAssets(
+   *   'assets/svg/desktop',
+   *   [
+   *     'btn_bet_minus', // uses default size
+   *     'btn_bet_plus',  // uses default size
+   *     { alias: 'btn_spin', size: { width: 120, height: 120 } } // custom size
+   *   ],
+   *   {
+   *     size: { width: 80, height: 80 },
+   *     states: ['up', 'over', 'down', 'disabled']
+   *   }
+   * );
+   *
+   * // All objects (full customization)
+   * await SVGAssetHelper.loadBatchAssets(
+   *   'assets/svg/desktop',
+   *   [
+   *     { alias: 'btn_bet_minus', size: { width: 90, height: 90 } },
+   *     { alias: 'btn_bet_plus' }, // uses default size
+   *     { alias: 'btn_spin', states: ['up', 'over'] } // custom states
+   *   ],
+   *   {
+   *     size: { width: 100, height: 100 },
+   *     states: ['up', 'over', 'down', 'disabled']
+   *   }
+   * );
+   *
+   * // With full src paths (when assets are in different directories)
+   * await SVGAssetHelper.loadBatchAssets(
+   *   '',
+   *   [
+   *     {
+   *       alias: 'star_icon',
+   *       src: 'assets/svg/icons/star.svg',
+   *       size: { width: 32, height: 32 },
+   *       themeColor: '#FFD700'
+   *     },
+   *     {
+   *       alias: 'close_btn',
+   *       src: 'assets/svg/buttons/close.svg',
+   *       size: { width: 40, height: 40 },
+   *       states: ['up', 'over'],
+   *       themeColor: '#F44336'
+   *     }
+   *   ]
+   * );
+   * ```
+   */
+  static async loadBatchAssets(basePath, assets, defaults) {
+    const defaultConfig = defaults || {};
+    const assetConfigs = assets.map(
+      (asset) => typeof asset === "string" ? { alias: asset } : asset
+    );
+    const configs = assetConfigs.map((asset) => ({
+      alias: asset.alias,
+      src: asset.src || (basePath ? `${basePath}/${asset.alias}.svg` : asset.alias),
+      size: asset.size || defaultConfig.size,
+      states: asset.states || defaultConfig.states,
+      themeColor: asset.themeColor || defaultConfig.themeColor,
+      resolution: asset.resolution || defaultConfig.resolution
+    }));
+    const promises = configs.map((config) => {
+      if (config.states && config.states.length > 1) {
+        return this.loadButtonAsset(config);
+      } else {
+        return this.loadSVGAsset(config);
+      }
+    });
+    await Promise.all(promises);
+  }
+  /**
+   * Retrieves a loaded SVG asset texture.
+   *
+   * For button assets with states, specify the state parameter to get
+   * the specific state texture.
+   *
+   * @param alias - Asset alias used during loading
+   * @param state - Button state (for button assets)
+   * @returns The PixiJS texture
+   *
+   * @example
+   * ```typescript
+   * // Get simple asset
+   * const iconTexture = SVGAssetHelper.getAsset('home_icon');
+   * const sprite = new Sprite(iconTexture);
+   *
+   * // Get button state
+   * const upTexture = SVGAssetHelper.getAsset('play_btn', 'up');
+   * const overTexture = SVGAssetHelper.getAsset('play_btn', 'over');
+   * ```
+   */
+  static getAsset(alias, state) {
+    const fullAlias = state ? `${alias}_${state}` : alias;
+    return Assets.get(fullAlias);
+  }
+  /**
+   * Check if asset exists in cache
+   */
+  static hasAsset(alias, state) {
+    const fullAlias = state ? `${alias}_${state}` : alias;
+    return Cache.has(fullAlias);
+  }
+  /**
+   * Clear specific asset from cache
+   */
+  static clearAsset(alias, state) {
+    const fullAlias = state ? `${alias}_${state}` : alias;
+    if (Cache.has(fullAlias)) {
+      Cache.remove(fullAlias);
+    }
+  }
+  /**
+   * Generate SHA-256 hash for asset configuration.
+   * This creates a unique identifier based on the actual asset properties (src, styles, size, resolution)
+   * rather than the state name, enabling efficient cache reuse when multiple states have identical configurations.
+   *
+   * @param src - Source path of the SVG
+   * @param data - Load data containing styles, size, and resolution
+   * @returns SHA-256 hash string
+   */
+  static async generateAssetHash(src, data) {
+    const configString = JSON.stringify({
+      src,
+      styles: data.styles || {},
+      size: data.size || {},
+      resolution: data.resolution || 1
+    });
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(configString);
+    const hashBuffer = await crypto.subtle.digest("SHA-256", dataBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
+    return hashHex.substring(0, 12);
+  }
+};
+function generateButtonSkinFromAsset(backgroundName, iconName, buttonStates = ["up", "over", "down", "disabled"], iconStates) {
+  const skinData = {};
+  buttonStates.forEach((state) => {
+    skinData[state] = {
+      ...skinData[state] ?? {},
+      background: { texture: `${backgroundName}_${state}` }
+    };
+  });
+  if (iconName) {
+    if (iconStates === void 0) {
+      buttonStates.forEach((state) => {
+        skinData[state] = {
+          ...skinData[state] ?? {},
+          icon: { texture: iconName }
+        };
+      });
+    } else {
+      iconStates.forEach((state) => {
+        skinData[state] = {
+          ...skinData[state] ?? {},
+          icon: { texture: `${iconName}_${state}` }
+        };
+      });
+    }
+  }
+  return skinData;
+}
+function getAnimationFrames(def) {
+  const names = getAnimationFrameNames(def);
+  return names.map((n) => Texture.from(n));
+}
+function getAnimationFrameNames(def) {
+  var _a, _b, _c;
+  if (!def) return [];
+  if (typeof def === "string") return [def];
+  if (Array.isArray(def)) return def;
+  const sheetRes = Assets.get(def.sheet);
+  if (!sheetRes) return [];
+  (_a = sheetRes.parse) == null ? void 0 : _a.call(sheetRes);
+  const nameList = (_c = (_b = sheetRes.data) == null ? void 0 : _b.animations) == null ? void 0 : _c[def.anim];
+  if (!nameList || !Array.isArray(nameList)) return [];
+  return nameList;
+}
+
+// helpers/resolvePublicPath.ts
+function resolvePublicPath(path) {
+  var _a;
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+  const base = typeof import.meta !== "undefined" && ((_a = import.meta.env) == null ? void 0 : _a.BASE_URL) ? import.meta.env.BASE_URL : "/";
+  const normalizedBase = base.endsWith("/") ? base : `${base}/`;
+  const normalizedPath = path.startsWith("/") ? path.slice(1) : path;
+  return `${normalizedBase}${normalizedPath}`;
+}
+
+// helpers/eventBridge.ts
+function createEventBridge(source, target, config = {}) {
+  var _a;
+  const originalEmit = source.emit.bind(source);
+  const originalDestroy = (_a = source.destroy) == null ? void 0 : _a.bind(source);
+  source.emit = function(event, ...args) {
+    const result = originalEmit(event, ...args);
+    if (typeof event !== "string") {
+      return result;
+    }
+    if (config.filter && !config.filter(event)) {
+      return result;
+    }
+    if (config.intercept) {
+      config.intercept(event, ...args);
+    }
+    let forwardEvent;
+    let forwardArgs;
+    if (config.transform) {
+      [forwardEvent, ...forwardArgs] = config.transform(event, ...args);
+    } else if (config.namespace) {
+      forwardEvent = `${config.namespace}:${event}`;
+      forwardArgs = args;
+    } else {
+      forwardEvent = event;
+      forwardArgs = args;
+    }
+    target.emit(forwardEvent, ...forwardArgs);
+    return result;
+  };
+  if (typeof source.destroy === "function") {
+    source.destroy = function(options) {
+      source.emit = originalEmit;
+      if (originalDestroy) {
+        source.destroy = originalDestroy;
+      }
+      if (originalDestroy) {
+        originalDestroy(options);
+      }
+    };
+  }
+  return {
+    disconnect: () => {
+      source.emit = originalEmit;
+      if (originalDestroy) {
+        source.destroy = originalDestroy;
+      }
+    }
+  };
+}
+function createTypedEventBridge(source, target, config) {
+  const bridgeConfig = {
+    namespace: config.namespace,
+    filter: config.filter,
+    intercept: config.intercept,
+    transform: config.transform
+  };
+  return createEventBridge(source, target, bridgeConfig);
+}
+var REMOVE = Symbol("REMOVE");
+var mergeWithRemove = (base, ...overrides) => {
+  const result = mergeWith({}, base, ...overrides, (_objValue, srcValue) => {
+    if (srcValue === REMOVE) {
+      return REMOVE;
+    }
+    if (Array.isArray(srcValue)) {
+      return srcValue;
+    }
+    return void 0;
+  });
+  const cleanRemoved = (obj) => {
+    if (!isPlainObject(obj)) return obj;
+    for (const key of Object.keys(obj)) {
+      if (obj[key] === REMOVE) {
+        delete obj[key];
+      } else if (isPlainObject(obj[key])) {
+        cleanRemoved(obj[key]);
+      }
+    }
+    return obj;
+  };
+  return cleanRemoved(result);
+};
+
+export { REMOVE, SVGAssetHelper, SVGLoader, SVGParser, configureSVGParser, createEventBridge, createTypedEventBridge, generateButtonSkinFromAsset, getAnimationFrameNames, getAnimationFrames, mergeWithRemove, resolvePublicPath };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map