@canvasengine/presets 2.0.0-beta.22 → 2.0.0-beta.24

package/dist/index.js

@@ -1,817 +1,4 @@
-// src/Bar.ts
-import { Graphics, h, useProps } from "canvasengine";
-function componentToHex(c) {
-  var hex = c.toString(16);
-  return hex.length == 1 ? "0" + hex : hex;
-}
-function rgbToHex(r, g, b) {
-  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-function Bar(opts) {
-  const {
-    width,
-    height,
-    value,
-    maxValue,
-    backgroundColor,
-    foregroundColor,
-    border,
-    innerMargin,
-    borderRadius
-  } = useProps(opts, {
-    backgroundColor: "#000000",
-    foregroundColor: "#FFFFFF",
-    innerMargin: 0,
-    borderRadius: 0
-  });
-  return h(
-    Graphics,
-    {
-      ...opts,
-      width,
-      height,
-      draw(graphics) {
-        if (borderRadius()) {
-          graphics.roundRect(0, 0, width(), height(), borderRadius());
-        } else {
-          graphics.rect(0, 0, width(), height());
-        }
-        if (border) {
-          graphics.stroke(border);
-        }
-        graphics.fill(backgroundColor());
-      }
-    },
-    h(Graphics, {
-      width,
-      height,
-      draw(graphics) {
-        const margin = innerMargin();
-        const _borderRadius = borderRadius();
-        const w = Math.max(
-          0,
-          Math.min(
-            width() - 2 * margin,
-            value() / maxValue() * (width() - 2 * margin)
-          )
-        );
-        const h7 = height() - 2 * margin;
-        if (borderRadius) {
-          graphics.roundRect(margin, margin, w, h7, _borderRadius);
-        } else {
-          graphics.rect(margin, margin, w, h7);
-        }
-        const color = foregroundColor();
-        if (color.startsWith("rgba")) {
-          const [r, g, b, a] = color.match(/\d+(\.\d+)?/g).map(Number);
-          graphics.fill({ color: rgbToHex(r, g, b), alpha: a });
-        } else {
-          graphics.fill(color);
-        }
-      }
-    })
-  );
-}
-
-// src/Particle.ts
-import * as PIXI from "pixi.js";
-import { FX } from "revolt-fx";
-import { h as h2, mount, tick, Container, on, useProps as useProps2 } from "canvasengine";
-function Particle(options) {
-  const { emit, settings: settings2 = {} } = options;
-  const { name } = useProps2(options);
-  const fx = new FX();
-  let element;
-  PIXI.Assets.add({ alias: "fx_settings", src: "/default-bundle.json" });
-  PIXI.Assets.add({
-    alias: "fx_spritesheet",
-    src: "/revoltfx-spritesheet.json"
-  });
-  tick(({ deltaRatio }) => {
-    fx.update(deltaRatio);
-  });
-  mount(async (_element) => {
-    element = _element;
-    const data = await PIXI.Assets.load(["fx_settings", "fx_spritesheet"]);
-    let fxSettings = { ...data.fx_settings };
-    if (settings2.emitters) {
-      const lastId = 1e4;
-      const emittersWithIds = settings2.emitters.map((emitter, index) => ({
-        ...emitter,
-        id: lastId + index
-      }));
-      fxSettings.emitters = [
-        ...fxSettings.emitters,
-        ...emittersWithIds
-      ];
-    }
-    fx.initBundle(fxSettings, true);
-  });
-  on(emit, () => {
-    const emitter = fx.getParticleEmitter(name());
-    emitter.init(element.componentInstance);
-  });
-  return h2(Container);
-}
-
-// src/NightAmbiant.ts
-import { Container as Container2, Graphics as Graphics2, h as h3, mount as mount2, useProps as useProps3, animatedSignal, RadialGradient, effect, isSignal, signal, isObservable } from "canvasengine";
-function LightSpot(opts) {
-  const { radius } = useProps3(opts);
-  const scale = animatedSignal(1);
-  const minScale = 1;
-  const maxScale = 2;
-  const scintillationSpeed = 1e-3;
-  const animate = () => {
-    const time = Date.now() * scintillationSpeed;
-    const scintillationFactor = (Math.sin(time) + Math.sin(time * 1.3) + Math.sin(time * 0.7)) / 3;
-    const newScale = minScale + (maxScale - minScale) * (scintillationFactor * 0.5 + 0.5);
-    scale.update(() => newScale);
-    requestAnimationFrame(animate);
-  };
-  animate();
-  const draw = (g) => {
-    const size = radius() * 2;
-    const gradient = new RadialGradient(size, size, 0, size, size, 0);
-    gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
-    gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
-    gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
-    const translate = size / 2;
-    g.rect(-translate, -translate, size, size).fill(
-      gradient.render({ translate: { x: translate, y: translate } })
-    );
-  };
-  return h3(Graphics2, {
-    draw,
-    ...opts,
-    scale
-  });
-}
-function NightAmbiant(props) {
-  const { children } = props;
-  let el;
-  const width = signal(0);
-  const height = signal(0);
-  let subscription;
-  const draw = (rectAndHole) => {
-    const margin = 80;
-    rectAndHole.rect(-margin, -margin, width() + margin * 2, height() + margin * 2);
-    rectAndHole.fill(0);
-    const applyChildren = (child) => {
-      const x = isSignal(child.propObservables.x) ? child.propObservables.x() : child.props.x;
-      const y = isSignal(child.propObservables.y) ? child.propObservables.y() : child.props.y;
-      const radius = isSignal(child.propObservables.radius) ? child.propObservables.radius() : child.props.radius;
-      rectAndHole.circle(x, y, radius);
-      rectAndHole.cut();
-    };
-    for (let child of children) {
-      if (isObservable(child)) {
-        if (subscription) {
-          subscription.unsubscribe();
-        }
-        subscription = child.subscribe((event) => {
-          for (let child2 of event.fullElements) {
-            applyChildren(child2);
-          }
-        });
-        return;
-      }
-      applyChildren(child);
-    }
-  };
-  mount2((el2) => {
-    effect(() => {
-      const { displayWidth, displayHeight } = el2.componentInstance;
-      const w = +displayWidth();
-      const h7 = +displayHeight();
-      setTimeout(() => {
-        width.update(() => w);
-        height.update(() => h7);
-      }, 0);
-    });
-  });
-  return h3(
-    Container2,
-    {
-      width: "100%",
-      height: "100%",
-      ...props
-    },
-    h3(Graphics2, {
-      draw,
-      alpha: 0.8,
-      blur: 80
-    }),
-    ...children
-  );
-}
-
-// src/Joystick.ts
-import * as PIXI2 from "pixi.js";
-import { Container as Container3, Graphics as Graphics3, Sprite, h as h4, signal as signal2 } from "canvasengine";
-var Direction = /* @__PURE__ */ ((Direction2) => {
-  Direction2["LEFT"] = "left";
-  Direction2["TOP"] = "top";
-  Direction2["BOTTOM"] = "bottom";
-  Direction2["RIGHT"] = "right";
-  Direction2["TOP_LEFT"] = "top_left";
-  Direction2["TOP_RIGHT"] = "top_right";
-  Direction2["BOTTOM_LEFT"] = "bottom_left";
-  Direction2["BOTTOM_RIGHT"] = "bottom_right";
-  return Direction2;
-})(Direction || {});
-function Joystick(opts = {}) {
-  const settings2 = Object.assign(
-    {
-      outerScale: { x: 1, y: 1 },
-      innerScale: { x: 1, y: 1 }
-    },
-    opts
-  );
-  let outerRadius = 70;
-  let innerRadius = 10;
-  const innerAlphaStandby = 0.5;
-  let dragging = false;
-  let startPosition = null;
-  let power = 0;
-  const innerPositionX = signal2(0);
-  const innerPositionY = signal2(0);
-  const innerAlpha = signal2(innerAlphaStandby);
-  function getPower(centerPoint) {
-    const a = centerPoint.x - 0;
-    const b = centerPoint.y - 0;
-    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
-  }
-  function getDirection(center) {
-    let rad = Math.atan2(center.y, center.x);
-    if (rad >= -Math.PI / 8 && rad < 0 || rad >= 0 && rad < Math.PI / 8) {
-      return "right" /* RIGHT */;
-    } else if (rad >= Math.PI / 8 && rad < 3 * Math.PI / 8) {
-      return "bottom_right" /* BOTTOM_RIGHT */;
-    } else if (rad >= 3 * Math.PI / 8 && rad < 5 * Math.PI / 8) {
-      return "bottom" /* BOTTOM */;
-    } else if (rad >= 5 * Math.PI / 8 && rad < 7 * Math.PI / 8) {
-      return "bottom_left" /* BOTTOM_LEFT */;
-    } else if (rad >= 7 * Math.PI / 8 && rad < Math.PI || rad >= -Math.PI && rad < -7 * Math.PI / 8) {
-      return "left" /* LEFT */;
-    } else if (rad >= -7 * Math.PI / 8 && rad < -5 * Math.PI / 8) {
-      return "top_left" /* TOP_LEFT */;
-    } else if (rad >= -5 * Math.PI / 8 && rad < -3 * Math.PI / 8) {
-      return "top" /* TOP */;
-    } else {
-      return "top_right" /* TOP_RIGHT */;
-    }
-  }
-  function handleDragStart(event) {
-    startPosition = event.getLocalPosition(this);
-    dragging = true;
-    innerAlpha.set(1);
-    settings2.onStart?.();
-  }
-  function handleDragEnd() {
-    if (!dragging) return;
-    innerPositionX.set(0);
-    innerPositionY.set(0);
-    dragging = false;
-    innerAlpha.set(innerAlphaStandby);
-    settings2.onEnd?.();
-  }
-  function handleDragMove(event) {
-    if (dragging == false) {
-      return;
-    }
-    let newPosition = event.getLocalPosition(this);
-    let sideX = newPosition.x - (startPosition?.x ?? 0);
-    let sideY = newPosition.y - (startPosition?.y ?? 0);
-    let centerPoint = new PIXI2.Point(0, 0);
-    let angle = 0;
-    if (sideX == 0 && sideY == 0) {
-      return;
-    }
-    let calRadius = 0;
-    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
-      calRadius = outerRadius;
-    } else {
-      calRadius = outerRadius - innerRadius;
-    }
-    let direction = "left" /* LEFT */;
-    if (sideX == 0) {
-      if (sideY > 0) {
-        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
-        angle = 270;
-        direction = "bottom" /* BOTTOM */;
-      } else {
-        centerPoint.set(
-          0,
-          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
-        );
-        angle = 90;
-        direction = "top" /* TOP */;
-      }
-      innerPositionX.set(centerPoint.x);
-      innerPositionY.set(centerPoint.y);
-      power = getPower(centerPoint);
-      settings2.onChange?.({ angle, direction, power });
-      return;
-    }
-    if (sideY == 0) {
-      if (sideX > 0) {
-        centerPoint.set(
-          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
-          0
-        );
-        angle = 0;
-        direction = "left" /* LEFT */;
-      } else {
-        centerPoint.set(
-          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
-          0
-        );
-        angle = 180;
-        direction = "right" /* RIGHT */;
-      }
-      innerPositionX.set(centerPoint.x);
-      innerPositionY.set(centerPoint.y);
-      power = getPower(centerPoint);
-      settings2.onChange?.({ angle, direction, power });
-      return;
-    }
-    let tanVal = Math.abs(sideY / sideX);
-    let radian = Math.atan(tanVal);
-    angle = radian * 180 / Math.PI;
-    let centerX = 0;
-    let centerY = 0;
-    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
-      centerX = outerRadius * Math.cos(radian);
-      centerY = outerRadius * Math.sin(radian);
-    } else {
-      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
-      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
-    }
-    if (sideY < 0) {
-      centerY = -Math.abs(centerY);
-    }
-    if (sideX < 0) {
-      centerX = -Math.abs(centerX);
-    }
-    if (sideX > 0 && sideY < 0) {
-    } else if (sideX < 0 && sideY < 0) {
-      angle = 180 - angle;
-    } else if (sideX < 0 && sideY > 0) {
-      angle = angle + 180;
-    } else if (sideX > 0 && sideY > 0) {
-      angle = 360 - angle;
-    }
-    centerPoint.set(centerX, centerY);
-    power = getPower(centerPoint);
-    direction = getDirection(centerPoint);
-    innerPositionX.set(centerPoint.x);
-    innerPositionY.set(centerPoint.y);
-    settings2.onChange?.({ angle, direction, power });
-  }
-  let innerElement;
-  let outerElement;
-  if (!settings2.outer) {
-    outerElement = h4(Graphics3, {
-      draw: (g) => {
-        g.circle(0, 0, outerRadius).fill(0);
-      },
-      alpha: 0.5
-    });
-  } else {
-    outerElement = h4(Sprite, {
-      image: settings2.outer,
-      anchor: { x: 0.5, y: 0.5 },
-      scale: settings2.outerScale
-    });
-  }
-  const innerOptions = {
-    scale: settings2.innerScale,
-    x: innerPositionX,
-    y: innerPositionY,
-    alpha: innerAlpha
-  };
-  if (!settings2.inner) {
-    innerElement = h4(Graphics3, {
-      draw: (g) => {
-        g.circle(0, 0, innerRadius * 2.5).fill(0);
-      },
-      ...innerOptions
-    });
-  } else {
-    innerElement = h4(Sprite, {
-      image: settings2.inner,
-      anchor: { x: 0.5, y: 0.5 },
-      ...innerOptions
-    });
-  }
-  return h4(
-    Container3,
-    {
-      ...opts,
-      pointerdown: handleDragStart,
-      pointerup: handleDragEnd,
-      pointerupoutside: handleDragEnd,
-      pointermove: handleDragMove
-    },
-    outerElement,
-    innerElement
-  );
-}
-
-// src/Tilemap/index.ts
-import { TiledLayerType, TiledParserFile } from "@rpgjs/tiled";
-import { loop, h as h5, Container as Container4, TilingSprite, useProps as useProps4, effect as effect2, signal as signal3 } from "canvasengine";
-
-// src/Tilemap/TileLayer.ts
-import {
-  CompositeTilemap,
-  settings
-} from "@canvasengine/tilemap";
-import { Layer } from "@rpgjs/tiled";
-import {
-  createComponent,
-  registerComponent,
-  DisplayObject
-} from "canvasengine";
-
-// src/Tilemap/Tile.ts
-import { AnimatedSprite, groupD8 } from "pixi.js";
-var Tile = class _Tile extends AnimatedSprite {
-  constructor(tile, tileSet) {
-    super(_Tile.getTextures(tile, tileSet));
-    this.tile = tile;
-    this.tileSet = tileSet;
-    this.animations = [];
-    this._x = 0;
-    this._y = 0;
-    this.properties = {};
-    this.animations = tile.animations || [];
-    this.properties = tile.properties;
-    this.textures = _Tile.getTextures(tile, tileSet);
-    this.texture = this.textures[0];
-    this.flip();
-  }
-  static getTextures(tile, tileSet) {
-    const textures = [];
-    if (tile.animations && tile.animations.length) {
-      tile.animations.forEach((frame) => {
-        textures.push(tileSet.textures[frame.tileid]);
-      });
-    } else {
-      textures.push(tileSet.textures[tile.gid - tileSet.firstgid]);
-    }
-    return textures;
-  }
-  get z() {
-    return this.properties.z ?? 0;
-  }
-  get gid() {
-    return this.tile.gid;
-  }
-  setAnimation(frame) {
-    const size = this.animations.length;
-    if (size > 1) {
-      const offset = (this.animations[1].tileid - this.animations[0].tileid) * this.width;
-      frame.tileAnimX(offset, size);
-    }
-  }
-  flip() {
-    let symmetry;
-    let i = 0;
-    const add = (symmetrySecond) => {
-      i++;
-      if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond);
-      else symmetry = symmetrySecond;
-    };
-    if (this.tile.horizontalFlip) {
-      add(groupD8.MIRROR_HORIZONTAL);
-    }
-    if (this.tile.verticalFlip) {
-      add(groupD8.MIRROR_VERTICAL);
-    }
-    if (this.tile.diagonalFlip) {
-      if (i % 2 == 0) {
-        add(groupD8.MAIN_DIAGONAL);
-      } else {
-        add(groupD8.REVERSE_DIAGONAL);
-      }
-    }
-  }
-};
-
-// src/Tilemap/TileLayer.ts
-settings.use32bitIndex = true;
-var CanvasTileLayer = class _CanvasTileLayer extends DisplayObject(CompositeTilemap) {
-  constructor() {
-    super(...arguments);
-    this._tiles = {};
-    // TODO: fix this, remove any. replace with Layer
-    this.frameTile = 0;
-    this.frameRateAnimation = 10;
-  }
-  static findTileSet(gid, tileSets) {
-    let tileset;
-    for (let i = tileSets.length - 1; i >= 0; i--) {
-      tileset = tileSets[i];
-      if (tileset.firstgid && tileset.firstgid <= gid) {
-        break;
-      }
-    }
-    return tileset;
-  }
-  /** @internal */
-  createTile(x, y, options = {}) {
-    const { real, filter } = options;
-    const { tilewidth, tileheight, width } = this._layer;
-    if (real) {
-      x = Math.floor(x / tilewidth);
-      y = Math.floor(y / tileheight);
-    }
-    const i = x + y * width;
-    const tiledTile = this._layer.getTileByIndex(i);
-    if (!tiledTile || tiledTile && tiledTile.gid == 0) return;
-    const tileset = _CanvasTileLayer.findTileSet(tiledTile.gid, this.tileSets);
-    if (!tileset) return;
-    const tile = new Tile(tiledTile, tileset);
-    tile.x = x * tilewidth;
-    tile.y = y * tileheight + (tileheight - tile.texture.height);
-    tile._x = x;
-    tile._y = y;
-    if (tileset.tileoffset) {
-      tile.x += tileset.tileoffset.x ?? 0;
-      tile.y += tileset.tileoffset.y ?? 0;
-    }
-    if (filter) {
-      const ret = filter(tile);
-      if (!ret) return;
-    }
-    return tile;
-  }
-  _addFrame(tile, x, y) {
-    const frame = this.tile(tile.texture, tile.x, tile.y, {
-      rotate: tile.texture.rotate
-    });
-    tile.setAnimation(frame);
-    this._tiles[x + ";" + y] = tile;
-  }
-  async onMount(args) {
-    const { props } = args;
-    this.tileSets = props.tilesets;
-    this._layer = new Layer(
-      {
-        ...props
-      },
-      this.tileSets
-    );
-    const tick3 = props.context.tick;
-    this.subscriptionTick = tick3.observable.subscribe(({ value }) => {
-      if (value.frame % this.frameRateAnimation == 0) {
-        this.tileAnim = [this.frameTile, this.frameTile];
-        this.frameTile++;
-      }
-    });
-    super.onMount(args);
-  }
-  onUpdate(props) {
-    super.onUpdate(props);
-    if (!this.isMounted) return;
-    if (props.tileheight) this._layer.tileheight = props.tileheight;
-    if (props.tilewidth) this._layer.tilewidth = props.tilewidth;
-    if (props.width) this._layer.width = props.width;
-    if (props.height) this._layer.height = props.height;
-    if (props.parallaxX) this._layer.parallaxX = props.parallaxx;
-    if (props.parallaxY) this._layer.parallaxY = props.parallaxy;
-    this.removeChildren();
-    for (let y = 0; y < this._layer.height; y++) {
-      for (let x = 0; x < this._layer.width; x++) {
-        const tile = this.createTile(x, y);
-        if (tile) {
-          this._addFrame(tile, x, y);
-        }
-      }
-    }
-  }
-  async onDestroy(parent) {
-    this.subscriptionTick.unsubscribe();
-    await super.onDestroy(parent);
-  }
-};
-registerComponent("CompositeTileLayer", CanvasTileLayer);
-function CompositeTileLayer(props) {
-  return createComponent("CompositeTileLayer", props);
-}
-
-// src/Tilemap/TileSet.ts
-import { Tileset as TiledTilesetClass } from "@rpgjs/tiled";
-import { Assets as Assets2, Rectangle, Texture as Texture2 } from "pixi.js";
-var TileSet = class extends TiledTilesetClass {
-  constructor(tileSet) {
-    super(tileSet);
-    this.textures = [];
-    this.tileGroups = {};
-  }
-  loadGroup() {
-  }
-  /** @internal */
-  async load(image) {
-    const texture = await Assets2.load(image);
-    for (let y = this.margin; y < this.image.height; y += this.tileheight + this.spacing) {
-      for (let x = this.margin; x < this.image.width; x += this.tilewidth + this.spacing) {
-        this.textures.push(
-          new Texture2({
-            source: texture.source,
-            frame: new Rectangle(+x, +y, +this.tilewidth, +this.tileheight)
-          })
-        );
-      }
-    }
-    this.loadGroup();
-    return this;
-  }
-};
-
-// src/Tilemap/index.ts
-function reorganizeLayersByTileZ(originalLayers, tilesets, mapData) {
-  const reorganizedLayers = [];
-  for (const layer of originalLayers) {
-    if (layer.type !== TiledLayerType.Tile) {
-      reorganizedLayers.push(layer);
-      continue;
-    }
-    const layersByZ = /* @__PURE__ */ new Map();
-    let layerData;
-    if (Array.isArray(layer.data)) {
-      layerData = layer.data.map((gid) => {
-        if (typeof gid === "number") {
-          return gid;
-        } else {
-          return parseInt(String(gid), 10);
-        }
-      });
-    } else {
-      reorganizedLayers.push(layer);
-      continue;
-    }
-    let tilesProcessed = 0;
-    let tilesWithZ = 0;
-    for (let i = 0; i < layerData.length; i++) {
-      const gid = layerData[i];
-      if (gid === 0) continue;
-      tilesProcessed++;
-      let tileset;
-      for (let j = tilesets.length - 1; j >= 0; j--) {
-        if (tilesets[j].firstgid && tilesets[j].firstgid <= gid) {
-          tileset = tilesets[j];
-          break;
-        }
-      }
-      if (!tileset) {
-        if (!layersByZ.has(0)) {
-          layersByZ.set(0, new Array(layerData.length).fill(0));
-        }
-        layersByZ.get(0)[i] = gid;
-        continue;
-      }
-      const localTileId = gid - tileset.firstgid;
-      const tileProperties = tileset.tileset.tiles?.[localTileId]?.properties;
-      const zValue = tileProperties?.z ?? 0;
-      if (tileProperties?.z !== void 0) {
-        tilesWithZ++;
-      }
-      if (!layersByZ.has(zValue)) {
-        layersByZ.set(zValue, new Array(layerData.length).fill(0));
-      }
-      layersByZ.get(zValue)[i] = gid;
-    }
-    const sortedZValues = Array.from(layersByZ.keys()).sort((a, b) => a - b);
-    for (const zValue of sortedZValues) {
-      const layerDataForZ = layersByZ.get(zValue);
-      if (layerDataForZ.some((gid) => gid !== 0)) {
-        const newLayer = {
-          ...layer,
-          name: `${layer.name}_z${zValue}`,
-          // Always add _z suffix
-          data: layerDataForZ,
-          properties: {
-            ...layer.properties,
-            z: zValue
-          }
-        };
-        reorganizedLayers.push(newLayer);
-      }
-    }
-  }
-  reorganizedLayers.sort((a, b) => {
-    const zA = a.properties?.z ?? 0.5;
-    const zB = b.properties?.z ?? 0.5;
-    return zA - zB;
-  });
-  return reorganizedLayers;
-}
-function TiledMap(props) {
-  const { map, basePath, createLayersPerTilesZ } = useProps4(props, {
-    createLayersPerTilesZ: false,
-    basePath: ""
-  });
-  const layers = signal3([]);
-  const objectLayer = props.objectLayer;
-  let tilesets = [];
-  let mapData = {};
-  const parseTmx = async (file, relativePath = "") => {
-    if (typeof file !== "string") {
-      return file;
-    }
-    const parser = new TiledParserFile(
-      file,
-      {
-        basePath: "",
-        staticDir: "",
-        relativePath
-      }
-    );
-    const data = await parser.parseFilePromise({
-      getOnlyBasename: false
-    });
-    return data;
-  };
-  effect2(async () => {
-    const _map = map();
-    if (_map) {
-      mapData = await parseTmx(_map, basePath());
-      tilesets = [];
-      for (let tileSet of mapData.tilesets) {
-        if (tileSet.tile) tileSet.tiles = tileSet.tile;
-        if (!tileSet.tiles) tileSet.tiles = [];
-        tilesets.push(await new TileSet(tileSet).load(tileSet.image.source));
-      }
-      let finalLayers = mapData.layers;
-      if (createLayersPerTilesZ()) {
-        finalLayers = reorganizeLayersByTileZ(mapData.layers, tilesets, mapData);
-      }
-      layers.set(finalLayers);
-    }
-  });
-  const createLayer = (layers2, props2 = {}) => {
-    return h5(Container4, props2, loop(layers2, (layer) => {
-      switch (layer.type) {
-        case TiledLayerType.Tile:
-          return h5(CompositeTileLayer, {
-            tilewidth: mapData.tilewidth,
-            tileheight: mapData.tileheight,
-            // @ts-ignore
-            width: mapData.width,
-            // @ts-ignore
-            height: mapData.height,
-            ...layer,
-            tilesets
-          });
-        case TiledLayerType.Image:
-          const { width, height, source } = layer.image;
-          return h5(TilingSprite, {
-            image: source,
-            ...layer,
-            width: layer.repeatx ? layer.width * layer.tilewidth : width,
-            height: layer.repeaty ? layer.height * layer.tileheight : height
-          });
-        case TiledLayerType.Group:
-          return createLayer(signal3(layer.layers), layer);
-        case TiledLayerType.ObjectGroup:
-          const child = objectLayer?.(layer);
-          return h5(Container4, layer, child);
-        default:
-          return h5(Container4);
-      }
-    }));
-  };
-  return h5(Container4, props, createLayer(layers));
-}
-
-// src/Weathers/index.ts
-import {
-  tick as tick2,
-  useProps as useProps5,
-  h as h6,
-  Mesh,
-  signal as signal4
-} from "canvasengine";
-import { Geometry, Shader, GlProgram, UniformGroup } from "pixi.js";
-var WeatherEffect = (options) => {
-  const {
-    speed = signal4(0.5),
-    windDirection = signal4(0),
-    windStrength = signal4(0.2),
-    density = signal4(180),
-    resolution = signal4([1e3, 1e3])
-  } = useProps5(options);
-  const speedSignal = typeof speed === "function" ? speed : signal4(speed);
-  const windDirectionSignal = typeof windDirection === "function" ? windDirection : signal4(windDirection);
-  const windStrengthSignal = typeof windStrength === "function" ? windStrength : signal4(windStrength);
-  const densitySignal = typeof density === "function" ? density : signal4(density);
-  const resolutionSignal = typeof resolution === "function" ? resolution : signal4(resolution);
-  const vertexSrc = (
-    /* glsl */
-    `
+import{Graphics as Z,h as j,useProps as ee}from"canvasengine";function X(c){var a=c.toString(16);return a.length==1?"0"+a:a}function te(c,a,e){return"#"+X(c)+X(a)+X(e)}function He(c){let{width:a,height:e,value:r,maxValue:i,backgroundColor:n,foregroundColor:d,border:f,innerMargin:l,borderRadius:u}=ee(c,{backgroundColor:"#000000",foregroundColor:"#FFFFFF",innerMargin:0,borderRadius:0});return j(Z,{...c,width:a,height:e,draw(t){u()?t.roundRect(0,0,a(),e(),u()):t.rect(0,0,a(),e()),f&&t.stroke(f),t.fill(n())}},j(Z,{width:a,height:e,draw(t){let s=l(),o=u(),m=Math.max(0,Math.min(a()-2*s,r()/i()*(a()-2*s))),g=e()-2*s;u?t.roundRect(s,s,m,g,o):t.rect(s,s,m,g);let P=d();if(P.startsWith("rgba")){let[T,S,L,b]=P.match(/\d+(\.\d+)?/g).map(Number);t.fill({color:te(T,S,L),alpha:b})}else t.fill(P)}}))}import*as A from"pixi.js";import{FX as ie}from"revolt-fx";import{h as re,mount as ne,tick as se,Container as oe,on as ae,useProps as le}from"canvasengine";function qe(c){let{emit:a,settings:e={}}=c,{name:r}=le(c),i=new ie,n;return A.Assets.add({alias:"fx_settings",src:"/default-bundle.json"}),A.Assets.add({alias:"fx_spritesheet",src:"/revoltfx-spritesheet.json"}),se(({deltaRatio:d})=>{i.update(d)}),ne(async d=>{n=d;let l={...(await A.Assets.load(["fx_settings","fx_spritesheet"])).fx_settings};if(e.emitters){let t=e.emitters.map((s,o)=>({...s,id:1e4+o}));l.emitters=[...l.emitters,...t]}i.initBundle(l,!0)}),ae(a,()=>{i.getParticleEmitter(r()).init(n.componentInstance)}),re(oe)}import{Container as fe,Graphics as N,h as z,mount as ue,useProps as ce,animatedSignal as de,RadialGradient as he,effect as me,isSignal as W,signal as H,isObservable as pe}from"canvasengine";function Qe(c){let{radius:a}=ce(c),e=de(1),r=1,i=2,n=.001,d=()=>{let l=Date.now()*n,u=(Math.sin(l)+Math.sin(l*1.3)+Math.sin(l*.7))/3,t=r+(i-r)*(u*.5+.5);e.update(()=>t),requestAnimationFrame(d)};return d(),z(N,{draw:l=>{let u=a()*2,t=new he(u,u,0,u,u,0);t.addColorStop(0,"rgba(255, 255, 0, 1)"),t.addColorStop(.5,"rgba(255, 255, 0, 0.3)"),t.addColorStop(.8,"rgba(255, 255, 0, 0)");let s=u/2;l.rect(-s,-s,u,u).fill(t.render({translate:{x:s,y:s}}))},...c,scale:e})}function et(c){let{children:a}=c,e,r=H(0),i=H(0),n,d=f=>{f.rect(-80,-80,r()+80*2,i()+80*2),f.fill(0);let u=t=>{let s=W(t.propObservables.x)?t.propObservables.x():t.props.x,o=W(t.propObservables.y)?t.propObservables.y():t.props.y,m=W(t.propObservables.radius)?t.propObservables.radius():t.props.radius;f.circle(s,o,m),f.cut()};for(let t of a){if(pe(t)){n&&n.unsubscribe(),n=t.subscribe(s=>{for(let o of s.fullElements)u(o)});return}u(t)}};return ue(f=>{me(()=>{let{displayWidth:l,displayHeight:u}=f.componentInstance,t=+l(),s=+u();setTimeout(()=>{r.update(()=>t),i.update(()=>s)},0)})}),z(fe,{width:"100%",height:"100%",...c},z(N,{draw:d,alpha:.8,blur:80}),...a)}import*as q from"pixi.js";import{Container as ge,Graphics as Y,Sprite as J,h as C,signal as B}from"canvasengine";var ye=(l=>(l.LEFT="left",l.TOP="top",l.BOTTOM="bottom",l.RIGHT="right",l.TOP_LEFT="top_left",l.TOP_RIGHT="top_right",l.BOTTOM_LEFT="bottom_left",l.BOTTOM_RIGHT="bottom_right",l))(ye||{});function rt(c={}){let a=Object.assign({outerScale:{x:1,y:1},innerScale:{x:1,y:1}},c),e=70,r=10,i=.5,n=!1,d=null,f=0,l=B(0),u=B(0),t=B(i);function s(b){let h=b.x-0,p=b.y-0;return Math.min(1,Math.sqrt(h*h+p*p)/e)}function o(b){let h=Math.atan2(b.y,b.x);return h>=-Math.PI/8&&h<0||h>=0&&h<Math.PI/8?"right":h>=Math.PI/8&&h<3*Math.PI/8?"bottom_right":h>=3*Math.PI/8&&h<5*Math.PI/8?"bottom":h>=5*Math.PI/8&&h<7*Math.PI/8?"bottom_left":h>=7*Math.PI/8&&h<Math.PI||h>=-Math.PI&&h<-7*Math.PI/8?"left":h>=-7*Math.PI/8&&h<-5*Math.PI/8?"top_left":h>=-5*Math.PI/8&&h<-3*Math.PI/8?"top":"top_right"}function m(b){d=b.getLocalPosition(this),n=!0,t.set(1),a.onStart?.()}function g(){n&&(l.set(0),u.set(0),n=!1,t.set(i),a.onEnd?.())}function P(b){if(n==!1)return;let h=b.getLocalPosition(this),p=h.x-(d?.x??0),y=h.y-(d?.y??0),x=new q.Point(0,0),w=0;if(p==0&&y==0)return;let U=0;p*p+y*y>=e*e?U=e:U=e-r;let M="left";if(p==0){y>0?(x.set(0,y>e?e:y),w=270,M="bottom"):(x.set(0,-(Math.abs(y)>e?e:Math.abs(y))),w=90,M="top"),l.set(x.x),u.set(x.y),f=s(x),a.onChange?.({angle:w,direction:M,power:f});return}if(y==0){p>0?(x.set(Math.abs(p)>e?e:Math.abs(p),0),w=0,M="left"):(x.set(-(Math.abs(p)>e?e:Math.abs(p)),0),w=180,M="right"),l.set(x.x),u.set(x.y),f=s(x),a.onChange?.({angle:w,direction:M,power:f});return}let Q=Math.abs(y/p),k=Math.atan(Q);w=k*180/Math.PI;let R=0,_=0;p*p+y*y>=e*e?(R=e*Math.cos(k),_=e*Math.sin(k)):(R=Math.abs(p)>e?e:Math.abs(p),_=Math.abs(y)>e?e:Math.abs(y)),y<0&&(_=-Math.abs(_)),p<0&&(R=-Math.abs(R)),p>0&&y<0||(p<0&&y<0?w=180-w:p<0&&y>0?w=w+180:p>0&&y>0&&(w=360-w)),x.set(R,_),f=s(x),M=o(x),l.set(x.x),u.set(x.y),a.onChange?.({angle:w,direction:M,power:f})}let T,S;a.outer?S=C(J,{image:a.outer,anchor:{x:.5,y:.5},scale:a.outerScale}):S=C(Y,{draw:b=>{b.circle(0,0,e).fill(0)},alpha:.5});let L={scale:a.innerScale,x:l,y:u,alpha:t};return a.inner?T=C(J,{image:a.inner,anchor:{x:.5,y:.5},...L}):T=C(Y,{draw:b=>{b.circle(0,0,r*2.5).fill(0)},...L}),C(ge,{...c,pointerdown:m,pointerup:g,pointerupoutside:g,pointermove:P},S,T)}import{TiledLayerType as D,TiledParserFile as Ce}from"@rpgjs/tiled";import{loop as Oe,h as I,Container as G,TilingSprite as De,useProps as Le,effect as Ae,signal as K}from"canvasengine";import{CompositeTilemap as be,settings as xe}from"@canvasengine/tilemap";import{Layer as we}from"@rpgjs/tiled";import{createComponent as Pe,registerComponent as ve,DisplayObject as Me}from"canvasengine";import{AnimatedSprite as Te,groupD8 as O}from"pixi.js";var F=class c extends Te{constructor(e,r){super(c.getTextures(e,r));this.tile=e;this.tileSet=r;this.animations=[];this._x=0;this._y=0;this.properties={};this.animations=e.animations||[],this.properties=e.properties,this.textures=c.getTextures(e,r),this.texture=this.textures[0],this.flip()}static getTextures(e,r){let i=[];return e.animations&&e.animations.length?e.animations.forEach(n=>{i.push(r.textures[n.tileid])}):i.push(r.textures[e.gid-r.firstgid]),i}get z(){return this.properties.z??0}get gid(){return this.tile.gid}setAnimation(e){let r=this.animations.length;if(r>1){let i=(this.animations[1].tileid-this.animations[0].tileid)*this.width;e.tileAnimX(i,r)}}flip(){let e,r=0,i=n=>{r++,e?e=O.add(e,n):e=n};this.tile.horizontalFlip&&i(O.MIRROR_HORIZONTAL),this.tile.verticalFlip&&i(O.MIRROR_VERTICAL),this.tile.diagonalFlip&&(r%2==0?i(O.MAIN_DIAGONAL):i(O.REVERSE_DIAGONAL))}};xe.use32bitIndex=!0;var V=class c extends Me(be){constructor(){super(...arguments);this._tiles={};this.frameTile=0;this.frameRateAnimation=10}static findTileSet(e,r){let i;for(let n=r.length-1;n>=0&&(i=r[n],!(i.firstgid&&i.firstgid<=e));n--);return i}createTile(e,r,i={}){let{real:n,filter:d}=i,{tilewidth:f,tileheight:l,width:u}=this._layer;n&&(e=Math.floor(e/f),r=Math.floor(r/l));let t=e+r*u,s=this._layer.getTileByIndex(t);if(!s||s&&s.gid==0)return;let o=c.findTileSet(s.gid,this.tileSets);if(!o)return;let m=new F(s,o);if(m.x=e*f,m.y=r*l+(l-m.texture.height),m._x=e,m._y=r,o.tileoffset&&(m.x+=o.tileoffset.x??0,m.y+=o.tileoffset.y??0),!(d&&!d(m)))return m}_addFrame(e,r,i){let n=this.tile(e.texture,e.x,e.y,{rotate:e.texture.rotate});e.setAnimation(n),this._tiles[r+";"+i]=e}async onMount(e){let{props:r}=e;this.tileSets=r.tilesets,this._layer=new we({...r},this.tileSets);let i=r.context.tick;this.subscriptionTick=i.observable.subscribe(({value:n})=>{n.frame%this.frameRateAnimation==0&&(this.tileAnim=[this.frameTile,this.frameTile],this.frameTile++)}),super.onMount(e)}onUpdate(e){if(super.onUpdate(e),!!this.isMounted){e.tileheight&&(this._layer.tileheight=e.tileheight),e.tilewidth&&(this._layer.tilewidth=e.tilewidth),e.width&&(this._layer.width=e.width),e.height&&(this._layer.height=e.height),e.parallaxX&&(this._layer.parallaxX=e.parallaxx),e.parallaxY&&(this._layer.parallaxY=e.parallaxy),this.removeChildren();for(let r=0;r<this._layer.height;r++)for(let i=0;i<this._layer.width;i++){let n=this.createTile(i,r);n&&this._addFrame(n,i,r)}}}async onDestroy(e){this.subscriptionTick.unsubscribe(),await super.onDestroy(e)}};ve("CompositeTileLayer",V);function $(c){return Pe("CompositeTileLayer",c)}import{Tileset as Se}from"@rpgjs/tiled";import{Assets as Ie,Rectangle as Re,Texture as _e}from"pixi.js";var E=class extends Se{constructor(e){super(e);this.textures=[];this.tileGroups={}}loadGroup(){}async load(e){let r=await Ie.load(e);for(let i=this.margin;i<this.image.height;i+=this.tileheight+this.spacing)for(let n=this.margin;n<this.image.width;n+=this.tilewidth+this.spacing)this.textures.push(new _e({source:r.source,frame:new Re(+n,+i,+this.tilewidth,+this.tileheight)}));return this.loadGroup(),this}};function Fe(c,a,e){let r=[];for(let i of c){if(i.type!==D.Tile){r.push(i);continue}let n=new Map,d;if(Array.isArray(i.data))d=i.data.map(t=>typeof t=="number"?t:parseInt(String(t),10));else{r.push(i);continue}let f=0,l=0;for(let t=0;t<d.length;t++){let s=d[t];if(s===0)continue;f++;let o;for(let T=a.length-1;T>=0;T--)if(a[T].firstgid&&a[T].firstgid<=s){o=a[T];break}if(!o){n.has(0)||n.set(0,new Array(d.length).fill(0)),n.get(0)[t]=s;continue}let m=s-o.firstgid,g=o.tileset.tiles?.[m]?.properties,P=g?.z??0;g?.z!==void 0&&l++,n.has(P)||n.set(P,new Array(d.length).fill(0)),n.get(P)[t]=s}let u=Array.from(n.keys()).sort((t,s)=>t-s);for(let t of u){let s=n.get(t);if(s.some(o=>o!==0)){let o={...i,name:`${i.name}_z${t}`,data:s,properties:{...i.properties,z:t}};r.push(o)}}}return r.sort((i,n)=>{let d=i.properties?.z??.5,f=n.properties?.z??.5;return d-f}),r}function Ee(c){let{map:a,basePath:e,createLayersPerTilesZ:r}=Le(c,{createLayersPerTilesZ:!1,basePath:""}),i=K([]),n=c.objectLayer,d=[],f={},l=async(t,s="")=>typeof t!="string"?t:await new Ce(t,{basePath:"",staticDir:"",relativePath:s}).parseFilePromise({getOnlyBasename:!1});Ae(async()=>{let t=a();if(t){f=await l(t,e()),d=[];for(let o of f.tilesets)o.tile&&(o.tiles=o.tile),o.tiles||(o.tiles=[]),d.push(await new E(o).load(o.image.source));let s=f.layers;r()&&(s=Fe(f.layers,d,f)),i.set(s)}});let u=(t,s={})=>I(G,s,Oe(t,o=>{switch(o.type){case D.Tile:return I($,{tilewidth:f.tilewidth,tileheight:f.tileheight,width:f.width,height:f.height,...o,tilesets:d});case D.Image:let{width:m,height:g,source:P}=o.image;return I(De,{image:P,...o,width:o.repeatx?o.width*o.tilewidth:m,height:o.repeaty?o.height*o.tileheight:g});case D.Group:return u(K(o.layers),o);case D.ObjectGroup:let T=n?.(o);return I(G,o,T);default:return I(G)}}));return I(G,c,u(i))}import{tick as Ge,useProps as ke,h as Xe,Mesh as We,signal as v}from"canvasengine";import{Geometry as ze,Shader as Be,GlProgram as Ve,UniformGroup as Ue}from"pixi.js";var Ze=c=>{let{speed:a=v(.5),windDirection:e=v(0),windStrength:r=v(.2),density:i=v(180),resolution:n=v([1e3,1e3])}=ke(c),d=typeof a=="function"?a:v(a),f=typeof e=="function"?e:v(e),l=typeof r=="function"?r:v(r),u=typeof i=="function"?i:v(i),t=typeof n=="function"?n:v(n),s=`
           precision mediump float;
           attribute vec2 aPosition;
           attribute vec2 aUV;
@@ -820,11 +7,7 @@ var WeatherEffect = (options) => {
               vUV = aUV;
               gl_Position = vec4(aPosition, 0.0, 1.0);
           }
-      `
-  );
-  const fragmentSrc = (
-    /* glsl */
-    `
+      `,o=`
           precision mediump float;
           varying vec2 vUV;
           uniform float uTime;
@@ -904,53 +87,5 @@ var WeatherEffect = (options) => {
               
               gl_FragColor = vec4(rainColor * rain, rain * 0.8);
           }
-      `
-  );
-  const glProgram = new GlProgram({ vertex: vertexSrc, fragment: fragmentSrc });
-  const uniformGroup = new UniformGroup({
-    uTime: { value: 0, type: "f32" },
-    uResolution: { value: resolutionSignal(), type: "vec2<f32>" },
-    uRainSpeed: { value: speedSignal(), type: "f32" },
-    uWindDirection: { value: windDirectionSignal(), type: "f32" },
-    uWindStrength: { value: windStrengthSignal(), type: "f32" },
-    uRainDensity: { value: densitySignal(), type: "f32" }
-  });
-  const shader = new Shader({
-    glProgram,
-    resources: {
-      uniforms: uniformGroup
-    }
-  });
-  const geometry = new Geometry({
-    attributes: {
-      aPosition: [-1, -1, 1, -1, 1, 1, -1, 1],
-      aUV: [0, 0, 1, 0, 1, 1, 0, 1]
-    },
-    indexBuffer: [0, 1, 2, 0, 2, 3]
-  });
-  tick2(({ deltaTime }) => {
-    uniformGroup.uniforms.uTime += deltaTime;
-    uniformGroup.uniforms.uRainSpeed = speedSignal();
-    uniformGroup.uniforms.uWindDirection = windDirectionSignal();
-    uniformGroup.uniforms.uWindStrength = windStrengthSignal();
-    uniformGroup.uniforms.uRainDensity = densitySignal();
-    uniformGroup.uniforms.uResolution = resolutionSignal();
-  });
-  return h6(Mesh, {
-    geometry,
-    shader
-  });
-};
-var Weather = WeatherEffect;
-export {
-  Bar,
-  Direction,
-  Joystick,
-  LightSpot,
-  NightAmbiant,
-  Particle,
-  TiledMap,
-  Weather,
-  WeatherEffect
-};
+      `,m=new Ve({vertex:s,fragment:o}),g=new Ue({uTime:{value:0,type:"f32"},uResolution:{value:t(),type:"vec2<f32>"},uRainSpeed:{value:d(),type:"f32"},uWindDirection:{value:f(),type:"f32"},uWindStrength:{value:l(),type:"f32"},uRainDensity:{value:u(),type:"f32"}}),P=new Be({glProgram:m,resources:{uniforms:g}}),T=new ze({attributes:{aPosition:[-1,-1,1,-1,1,1,-1,1],aUV:[0,0,1,0,1,1,0,1]},indexBuffer:[0,1,2,0,2,3]});return Ge(({deltaTime:S})=>{g.uniforms.uTime+=S,g.uniforms.uRainSpeed=d(),g.uniforms.uWindDirection=f(),g.uniforms.uWindStrength=l(),g.uniforms.uRainDensity=u(),g.uniforms.uResolution=t()}),Xe(We,{geometry:T,shader:P})},Ot=Ze;export{He as Bar,ye as Direction,rt as Joystick,Qe as LightSpot,et as NightAmbiant,qe as Particle,Ee as TiledMap,Ot as Weather,Ze as WeatherEffect};
 //# sourceMappingURL=index.js.map