kiwiengine 0.0.1-alpha → 0.5.2

package/lib/dom/dom-animated-sprite.js

@@ -0,0 +1,121 @@
+import { DomGameObject } from './dom-game-object';
+import { domTextureLoader } from './dom-texture-loader';
+import { setStyle } from './dom-utils';
+export class DomAnimatedSpriteNode extends DomGameObject {
+    #src;
+    #atlas;
+    #animation;
+    #fps;
+    #loop;
+    #frames = [];
+    #frameDuration;
+    #textureScale = 1;
+    #elapsedTime = 0;
+    #currentFrameIdx = 0;
+    constructor(options) {
+        super(options);
+        this.#src = options.src;
+        this.#atlas = options.atlas;
+        this.#animation = options.animation;
+        this.#fps = options.fps;
+        this.#loop = options.loop ?? true;
+        this.#load();
+    }
+    async #load() {
+        let texture;
+        if (domTextureLoader.checkCached(this.#src)) {
+            texture = domTextureLoader.getCached(this.#src);
+        }
+        else {
+            console.info(`Dom texture not preloaded. Loading now: ${this.#src}`);
+            texture = await domTextureLoader.load(this.#src);
+        }
+        const S = this.#atlas.meta.scale === 'auto' ? 1 : Number(this.#atlas.meta.scale);
+        this.#frameDuration = 1 / this.#fps;
+        this.#frames = this.#atlas.animations?.[this.#animation] ?? [];
+        this.#textureScale = S;
+        const frameName = this.#frames[this.#currentFrameIdx];
+        const frame = this.#atlas.frames[frameName].frame;
+        setStyle(this.el, !frameName || !texture ? { backgroundImage: 'none' } : {
+            backgroundImage: `url(${this.#src})`,
+            width: `${frame.w * S}px`,
+            height: `${frame.h * S}px`,
+            backgroundSize: `${texture.width * S}px ${texture.height * S}px`,
+            backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+        });
+    }
+    render(dt) {
+        super.render(dt);
+        if (this.#frameDuration === undefined || this.#frames.length === 0)
+            return;
+        const lastIndex = this.#frames.length - 1;
+        if (!this.#loop && this.#currentFrameIdx === lastIndex)
+            return;
+        this.#elapsedTime += dt;
+        if (this.#elapsedTime < this.#frameDuration)
+            return;
+        while (this.#elapsedTime >= this.#frameDuration) {
+            this.#elapsedTime -= this.#frameDuration;
+            if (this.#currentFrameIdx === lastIndex) {
+                this.emit('animationend', this.#animation);
+                if (this.#loop) {
+                    this.#currentFrameIdx = 0;
+                }
+                else {
+                    this.#elapsedTime = 0;
+                    break;
+                }
+            }
+            else {
+                this.#currentFrameIdx++;
+            }
+        }
+        const S = this.#textureScale;
+        const frameName = this.#frames[this.#currentFrameIdx];
+        const frame = this.#atlas.frames[frameName].frame;
+        setStyle(this.el, {
+            width: `${frame.w * S}px`,
+            height: `${frame.h * S}px`,
+            backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`
+        });
+    }
+    set src(src) {
+        if (this.#src !== src) {
+            domTextureLoader.release(this.#src);
+            this.#src = src;
+            this.#load();
+        }
+    }
+    get src() { return this.#src; }
+    set atlas(atlas) {
+        if (this.#atlas !== atlas) {
+            domTextureLoader.release(this.#src);
+            this.#atlas = atlas;
+            this.#load();
+        }
+    }
+    get atlas() { return this.#atlas; }
+    set animation(animation) {
+        if (this.#animation !== animation) {
+            this.#animation = animation;
+            this.#frames = this.#atlas.animations?.[animation] ?? [];
+            this.#currentFrameIdx = 0;
+            this.#elapsedTime = 0;
+        }
+    }
+    get animation() { return this.#animation; }
+    set fps(fps) {
+        if (this.#fps !== fps) {
+            this.#fps = fps;
+            this.#frameDuration = 1 / fps;
+        }
+    }
+    get fps() { return this.#fps; }
+    set loop(loop) { this.#loop = loop; }
+    get loop() { return this.#loop; }
+    remove() {
+        domTextureLoader.release(this.#src);
+        super.remove();
+    }
+}
+//# sourceMappingURL=dom-animated-sprite.js.map

package/lib/dom/dom-animated-sprite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-animated-sprite.js","sourceRoot":"","sources":["../../src/dom/dom-animated-sprite.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventMap } from '@webtaku/event-emitter'\nimport { SpritesheetData } from 'pixi.js'\nimport { DomGameObject, DomGameObjectOptions } from './dom-game-object'\nimport { domTextureLoader } from './dom-texture-loader'\nimport { setStyle } from './dom-utils'\n\nexport type DomAnimatedSpriteNodeOptions = {\n  src: string\n  atlas: SpritesheetData\n  animation: string\n  fps: number\n  loop?: boolean\n} & DomGameObjectOptions\n\nexport class DomAnimatedSpriteNode<E extends EventMap = EventMap> extends DomGameObject<E & {\n  animationend: (animation: string) => void\n}> {\n  #src: string\n  #atlas: SpritesheetData\n  #animation: string\n  #fps: number\n  #loop: boolean\n\n  #frames: string[] = []\n  #frameDuration?: number\n  #textureScale = 1\n  #elapsedTime = 0\n  #currentFrameIdx = 0\n\n  constructor(options: DomAnimatedSpriteNodeOptions) {\n    super(options)\n    this.#src = options.src\n    this.#atlas = options.atlas\n    this.#animation = options.animation\n    this.#fps = options.fps\n    this.#loop = options.loop ?? true\n    this.#load()\n  }\n\n  async #load() {\n    let texture\n    if (domTextureLoader.checkCached(this.#src)) {\n      texture = domTextureLoader.getCached(this.#src)\n    } else {\n      console.info(`Dom texture not preloaded. Loading now: ${this.#src}`)\n      texture = await domTextureLoader.load(this.#src)\n    }\n\n    const S = this.#atlas.meta.scale === 'auto' ? 1 : Number(this.#atlas.meta.scale)\n\n    this.#frameDuration = 1 / this.#fps\n    this.#frames = this.#atlas.animations?.[this.#animation] ?? []\n    this.#textureScale = S\n\n    const frameName = this.#frames[this.#currentFrameIdx]\n    const frame = this.#atlas.frames[frameName].frame\n\n    setStyle(this.el, !frameName || !texture ? { backgroundImage: 'none' } : {\n      backgroundImage: `url(${this.#src})`,\n      width: `${frame.w * S}px`,\n      height: `${frame.h * S}px`,\n      backgroundSize: `${texture.width * S}px ${texture.height * S}px`,\n      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`\n    })\n  }\n\n  override render(dt: number) {\n    super.render(dt)\n\n    if (this.#frameDuration === undefined || this.#frames.length === 0) return\n\n    const lastIndex = this.#frames.length - 1\n    if (!this.#loop && this.#currentFrameIdx === lastIndex) return\n\n    this.#elapsedTime += dt\n    if (this.#elapsedTime < this.#frameDuration) return\n\n    while (this.#elapsedTime >= this.#frameDuration) {\n      this.#elapsedTime -= this.#frameDuration\n\n      if (this.#currentFrameIdx === lastIndex) {\n        (this as any).emit('animationend', this.#animation)\n\n        if (this.#loop) {\n          this.#currentFrameIdx = 0\n        } else {\n          this.#elapsedTime = 0\n          break\n        }\n      } else {\n        this.#currentFrameIdx++\n      }\n    }\n\n    const S = this.#textureScale\n    const frameName = this.#frames[this.#currentFrameIdx]\n    const frame = this.#atlas.frames[frameName].frame\n\n    setStyle(this.el, {\n      width: `${frame.w * S}px`,\n      height: `${frame.h * S}px`,\n      backgroundPosition: `-${frame.x * S}px -${frame.y * S}px`\n    })\n  }\n\n  set src(src) {\n    if (this.#src !== src) {\n      domTextureLoader.release(this.#src)\n      this.#src = src\n      this.#load()\n    }\n  }\n\n  get src() { return this.#src }\n\n  set atlas(atlas) {\n    if (this.#atlas !== atlas) {\n      domTextureLoader.release(this.#src)\n      this.#atlas = atlas\n      this.#load()\n    }\n  }\n\n  get atlas() { return this.#atlas }\n\n  set animation(animation) {\n    if (this.#animation !== animation) {\n      this.#animation = animation\n      this.#frames = this.#atlas.animations?.[animation] ?? []\n      this.#currentFrameIdx = 0\n      this.#elapsedTime = 0\n    }\n  }\n\n  get animation() { return this.#animation }\n\n  set fps(fps) {\n    if (this.#fps !== fps) {\n      this.#fps = fps\n      this.#frameDuration = 1 / fps\n    }\n  }\n\n  get fps() { return this.#fps }\n\n  set loop(loop) { this.#loop = loop }\n  get loop() { return this.#loop }\n\n  override remove() {\n    domTextureLoader.release(this.#src)\n    super.remove()\n  }\n}\n"]}

package/lib/dom/dom-game-object.js

@@ -0,0 +1,106 @@
+import { DirtyNumber } from '../node/core/dirty-number';
+import { GameNode } from '../node/core/game-node';
+import { isRenderableNode } from '../node/core/renderable';
+import { LocalTransform, WorldTransform } from '../node/core/transform';
+import { setStyle } from './dom-utils';
+class DomRootNode extends GameNode {
+    worldTransform = new WorldTransform();
+    worldAlpha = new DirtyNumber(1);
+    constructor() {
+        super();
+        this.worldTransform.x.v = 0;
+        this.worldTransform.y.v = 0;
+        this.worldTransform.resetDirty();
+    }
+}
+export class DomGameObject extends GameNode {
+    el = document.createElement('div');
+    #localTransform = new LocalTransform();
+    worldTransform = new WorldTransform();
+    alpha = 1;
+    worldAlpha = new DirtyNumber(1);
+    #useYSort = false;
+    constructor(options) {
+        super();
+        setStyle(this.el, {
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            zIndex: '1',
+            transform: 'translate(-50%, -50%)',
+        });
+        if (options) {
+            if (options.x !== undefined)
+                this.x = options.x;
+            if (options.y !== undefined)
+                this.y = options.y;
+            if (options.scale !== undefined)
+                this.scale = options.scale;
+            if (options.scaleX !== undefined)
+                this.scaleX = options.scaleX;
+            if (options.scaleY !== undefined)
+                this.scaleY = options.scaleY;
+            if (options.pivotX !== undefined)
+                this.pivotX = options.pivotX;
+            if (options.pivotY !== undefined)
+                this.pivotY = options.pivotY;
+            if (options.rotation !== undefined)
+                this.rotation = options.rotation;
+            if (options.alpha !== undefined)
+                this.alpha = options.alpha;
+            this.#useYSort = options.useYSort ?? false;
+        }
+    }
+    render(dt) {
+        this.update(dt);
+        this._updateWorldTransform();
+    }
+    _updateWorldTransform() {
+        const parent = this.parent;
+        if (parent && isRenderableNode(parent)) {
+            this.worldTransform.update(parent.worldTransform, this.#localTransform);
+            this.worldAlpha.v = parent.worldAlpha.v * this.alpha;
+        }
+        if (this.worldTransform.dirty) {
+            const wt = this.worldTransform;
+            this.el.style.transform = `
+        translate(
+          calc(-50% + ${wt.x.v}px),
+          calc(-50% + ${wt.y.v}px)
+        )
+        scale(${wt.scaleX.v}, ${wt.scaleY.v})
+        rotate(${wt.rotation.v}rad)
+      `;
+        }
+        if (this.worldAlpha.dirty)
+            this.el.style.opacity = this.worldAlpha.v.toString();
+        for (const child of this.children) {
+            if (isRenderableNode(child))
+                child._updateWorldTransform();
+        }
+        this.worldTransform.resetDirty();
+    }
+    attachTo(target) {
+        target.appendChild(this.el);
+        this.parent = new DomRootNode();
+        this._updateWorldTransform();
+        return this;
+    }
+    set x(v) { this.#localTransform.x = v; }
+    get x() { return this.#localTransform.x; }
+    set y(v) { this.#localTransform.y = v; }
+    get y() { return this.#localTransform.y; }
+    set scale(v) { this.#localTransform.scaleX = v; this.#localTransform.scaleY = v; }
+    get scale() { return this.#localTransform.scaleX; }
+    set scaleX(v) { this.#localTransform.scaleX = v; }
+    get scaleX() { return this.#localTransform.scaleX; }
+    set scaleY(v) { this.#localTransform.scaleY = v; }
+    get scaleY() { return this.#localTransform.scaleY; }
+    set pivotX(v) { this.#localTransform.pivotX = v; }
+    get pivotX() { return this.#localTransform.pivotX; }
+    set pivotY(v) { this.#localTransform.pivotY = v; }
+    get pivotY() { return this.#localTransform.pivotY; }
+    set rotation(v) { this.#localTransform.rotation = v; }
+    get rotation() { return this.#localTransform.rotation; }
+}
+//# sourceMappingURL=dom-game-object.js.map

package/lib/dom/dom-game-object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-game-object.js","sourceRoot":"","sources":["../../src/dom/dom-game-object.ts"],"names":[],"mappings":"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","sourcesContent":["import { EventMap } from '@webtaku/event-emitter'\nimport { DirtyNumber } from '../node/core/dirty-number'\nimport { GameNode } from '../node/core/game-node'\nimport { isRenderableNode } from '../node/core/renderable'\nimport { LocalTransform, WorldTransform } from '../node/core/transform'\nimport { setStyle } from './dom-utils'\n\nexport type DomGameObjectOptions = {\n  x?: number\n  y?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  pivotX?: number\n  pivotY?: number\n  rotation?: number\n\n  alpha?: number\n  useYSort?: boolean\n}\n\nclass DomRootNode extends GameNode<EventMap> {\n  worldTransform = new WorldTransform()\n  worldAlpha = new DirtyNumber(1)\n\n  constructor() {\n    super()\n    this.worldTransform.x.v = 0\n    this.worldTransform.y.v = 0\n    this.worldTransform.resetDirty()\n  }\n}\n\nexport class DomGameObject<E extends EventMap = EventMap> extends GameNode<E> {\n  protected el = document.createElement('div')\n\n  #localTransform = new LocalTransform()\n  worldTransform = new WorldTransform()\n  alpha = 1\n  worldAlpha = new DirtyNumber(1)\n  #useYSort = false\n\n  constructor(options?: DomGameObjectOptions) {\n    super()\n\n    setStyle(this.el, {\n      position: 'absolute',\n      left: '50%',\n      top: '50%',\n      zIndex: '1',\n      transform: 'translate(-50%, -50%)',\n    })\n\n    if (options) {\n      if (options.x !== undefined) this.x = options.x\n      if (options.y !== undefined) this.y = options.y\n      if (options.scale !== undefined) this.scale = options.scale\n      if (options.scaleX !== undefined) this.scaleX = options.scaleX\n      if (options.scaleY !== undefined) this.scaleY = options.scaleY\n      if (options.pivotX !== undefined) this.pivotX = options.pivotX\n      if (options.pivotY !== undefined) this.pivotY = options.pivotY\n      if (options.rotation !== undefined) this.rotation = options.rotation\n      if (options.alpha !== undefined) this.alpha = options.alpha\n\n      this.#useYSort = options.useYSort ?? false\n    }\n  }\n\n  render(dt: number) {\n    this.update(dt)\n    this._updateWorldTransform()\n  }\n\n  protected _updateWorldTransform() {\n    const parent = this.parent\n    if (parent && isRenderableNode(parent)) {\n      this.worldTransform.update(parent.worldTransform, this.#localTransform)\n      this.worldAlpha.v = parent.worldAlpha.v * this.alpha\n    }\n\n    if (this.worldTransform.dirty) {\n      const wt = this.worldTransform\n\n      this.el.style.transform = `\n        translate(\n          calc(-50% + ${wt.x.v}px),\n          calc(-50% + ${wt.y.v}px)\n        )\n        scale(${wt.scaleX.v}, ${wt.scaleY.v})\n        rotate(${wt.rotation.v}rad)\n      `\n    }\n    if (this.worldAlpha.dirty) this.el.style.opacity = this.worldAlpha.v.toString()\n\n    for (const child of this.children) {\n      if (isRenderableNode(child)) child._updateWorldTransform()\n    }\n    this.worldTransform.resetDirty()\n  }\n\n  attachTo(target: HTMLElement) {\n    target.appendChild(this.el)\n    this.parent = new DomRootNode()\n    this._updateWorldTransform()\n    return this\n  }\n\n  set x(v) { this.#localTransform.x = v }\n  get x() { return this.#localTransform.x }\n\n  set y(v) { this.#localTransform.y = v }\n  get y() { return this.#localTransform.y }\n\n  set scale(v) { this.#localTransform.scaleX = v; this.#localTransform.scaleY = v }\n  get scale() { return this.#localTransform.scaleX }\n\n  set scaleX(v) { this.#localTransform.scaleX = v }\n  get scaleX() { return this.#localTransform.scaleX }\n\n  set scaleY(v) { this.#localTransform.scaleY = v }\n  get scaleY() { return this.#localTransform.scaleY }\n\n  set pivotX(v) { this.#localTransform.pivotX = v }\n  get pivotX() { return this.#localTransform.pivotX }\n\n  set pivotY(v) { this.#localTransform.pivotY = v }\n  get pivotY() { return this.#localTransform.pivotY }\n\n  set rotation(v) { this.#localTransform.rotation = v }\n  get rotation() { return this.#localTransform.rotation }\n}\n"]}

package/lib/dom/dom-particle.js

@@ -0,0 +1,105 @@
+import { DomGameObject } from './dom-game-object';
+import { domTextureLoader } from './dom-texture-loader';
+import { setStyle } from './dom-utils';
+function random(min, max) {
+    return Math.random() * (max - min) + min;
+}
+export class DomParticleSystem extends DomGameObject {
+    #textureSrc;
+    #count;
+    #lifespan;
+    #angle;
+    #velocity;
+    #scale;
+    #startAlpha;
+    #fadeRate;
+    #orientToVelocity;
+    #blendMode;
+    #texture;
+    #loadTexturePromise;
+    #particles = [];
+    constructor(options) {
+        super(options);
+        this.el.style.pointerEvents = 'none';
+        this.#textureSrc = options.texture;
+        this.#count = options.count;
+        this.#lifespan = options.lifespan;
+        this.#angle = options.angle;
+        this.#velocity = options.velocity;
+        this.#scale = options.particleScale;
+        this.#startAlpha = options.startAlpha;
+        this.#fadeRate = options.fadeRate;
+        this.#orientToVelocity = options.orientToVelocity;
+        this.#blendMode = options.blendMode;
+        this.#loadTexturePromise = this.#loadTexture();
+    }
+    async #loadTexture() {
+        if (domTextureLoader.checkCached(this.#textureSrc)) {
+            this.#texture = domTextureLoader.getCached(this.#textureSrc);
+        }
+        else {
+            console.info(`Dom texture not preloaded. Loading now: ${this.#textureSrc}`);
+            this.#texture = await domTextureLoader.load(this.#textureSrc);
+        }
+    }
+    async burst({ x, y }) {
+        if (!this.#texture)
+            await this.#loadTexturePromise;
+        const count = random(this.#count.min, this.#count.max);
+        for (let i = 0; i < count; i++) {
+            const lifespan = random(this.#lifespan.min, this.#lifespan.max);
+            const angle = random(this.#angle.min, this.#angle.max);
+            const sin = Math.sin(angle);
+            const cos = Math.cos(angle);
+            const velocity = random(this.#velocity.min, this.#velocity.max);
+            const scale = random(this.#scale.min, this.#scale.max);
+            const el = document.createElement('div');
+            setStyle(el, {
+                position: 'absolute',
+                left: `${x}px`,
+                top: `${y}px`,
+                width: `${this.#texture.width}px`,
+                height: `${this.#texture.height}px`,
+                transform: `translate(-50%, -50%) scale(${scale})${this.#orientToVelocity ? ` rotate(${angle}rad)` : ''}`,
+                backgroundImage: `url(${this.#textureSrc})`,
+                backgroundSize: 'contain',
+                backgroundRepeat: 'no-repeat',
+                opacity: `${this.#startAlpha ?? 1}`,
+                mixBlendMode: this.#blendMode ?? 'normal',
+            });
+            this.#particles.push({
+                el,
+                age: 0,
+                lifespan,
+                velocityX: velocity * cos,
+                velocityY: velocity * sin,
+                fadeRate: this.#fadeRate,
+            });
+            this.el.appendChild(el);
+        }
+    }
+    update(dt) {
+        super.update(dt);
+        const ps = this.#particles;
+        for (let i = 0; i < ps.length; i++) {
+            const p = ps[i];
+            const e = p.el;
+            p.age += dt;
+            if (p.age > p.lifespan) {
+                e.remove();
+                ps.splice(i, 1);
+                i--;
+                continue;
+            }
+            const x = parseFloat(e.style.left) + p.velocityX * dt;
+            const y = parseFloat(e.style.top) + p.velocityY * dt;
+            const opacity = parseFloat(e.style.opacity) + p.fadeRate * dt;
+            setStyle(e, { left: `${x}px`, top: `${y}px`, opacity: `${opacity}` });
+        }
+    }
+    remove() {
+        domTextureLoader.release(this.#textureSrc);
+        super.remove();
+    }
+}
+//# sourceMappingURL=dom-particle.js.map

package/lib/dom/dom-particle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-particle.js","sourceRoot":"","sources":["../../src/dom/dom-particle.ts"],"names":[],"mappings":"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","sourcesContent":["import { BLEND_MODES } from 'pixi.js'\nimport { DomGameObject, DomGameObjectOptions } from './dom-game-object'\nimport { domTextureLoader } from './dom-texture-loader'\nimport { setStyle } from './dom-utils'\n\ntype RandomRange = { min: number, max: number }\n\nexport type DomParticleSystemOptions = {\n  texture: string\n\n  count: RandomRange\n  lifespan: RandomRange\n  angle: RandomRange\n  velocity: RandomRange\n  particleScale: RandomRange\n\n  startAlpha?: number\n  fadeRate: number\n  orientToVelocity: boolean\n\n  blendMode?: BLEND_MODES // ex) 'screen', 'multiply'\n} & DomGameObjectOptions\n\ninterface Particle {\n  el: HTMLDivElement\n\n  age: number\n  lifespan: number\n\n  velocityX: number\n  velocityY: number\n\n  fadeRate: number\n}\n\nfunction random(min: number, max: number) {\n  return Math.random() * (max - min) + min\n}\n\nexport class DomParticleSystem extends DomGameObject {\n  #textureSrc: string\n  #count: RandomRange\n  #lifespan: RandomRange\n  #angle: RandomRange\n  #velocity: RandomRange\n  #scale: RandomRange\n  #startAlpha?: number\n  #fadeRate: number\n  #orientToVelocity: boolean\n  #blendMode?: BLEND_MODES\n\n  #texture?: HTMLImageElement\n  #loadTexturePromise: Promise<void>\n  #particles: Particle[] = []\n\n  constructor(options: DomParticleSystemOptions) {\n    super(options)\n    this.el.style.pointerEvents = 'none'\n\n    this.#textureSrc = options.texture\n    this.#count = options.count\n    this.#lifespan = options.lifespan\n    this.#angle = options.angle\n    this.#velocity = options.velocity\n    this.#scale = options.particleScale\n    this.#startAlpha = options.startAlpha\n    this.#fadeRate = options.fadeRate\n    this.#orientToVelocity = options.orientToVelocity\n    this.#blendMode = options.blendMode\n\n    this.#loadTexturePromise = this.#loadTexture()\n  }\n\n  async #loadTexture() {\n    if (domTextureLoader.checkCached(this.#textureSrc)) {\n      this.#texture = domTextureLoader.getCached(this.#textureSrc)\n    } else {\n      console.info(`Dom texture not preloaded. Loading now: ${this.#textureSrc}`)\n      this.#texture = await domTextureLoader.load(this.#textureSrc)\n    }\n  }\n\n  async burst({ x, y }: { x: number; y: number }) {\n    if (!this.#texture) await this.#loadTexturePromise\n\n    const count = random(this.#count.min, this.#count.max)\n    for (let i = 0; i < count; i++) {\n      const lifespan = random(this.#lifespan.min, this.#lifespan.max)\n      const angle = random(this.#angle.min, this.#angle.max)\n      const sin = Math.sin(angle)\n      const cos = Math.cos(angle)\n      const velocity = random(this.#velocity.min, this.#velocity.max)\n      const scale = random(this.#scale.min, this.#scale.max)\n\n      const el = document.createElement('div')\n      setStyle(el, {\n        position: 'absolute',\n        left: `${x}px`,\n        top: `${y}px`,\n        width: `${this.#texture!.width}px`,\n        height: `${this.#texture!.height}px`,\n        transform: `translate(-50%, -50%) scale(${scale})${this.#orientToVelocity ? ` rotate(${angle}rad)` : ''}`,\n        backgroundImage: `url(${this.#textureSrc})`,\n        backgroundSize: 'contain',\n        backgroundRepeat: 'no-repeat',\n        opacity: `${this.#startAlpha ?? 1}`,\n        mixBlendMode: this.#blendMode ?? 'normal',\n      })\n\n      this.#particles.push({\n        el,\n        age: 0,\n        lifespan,\n        velocityX: velocity * cos,\n        velocityY: velocity * sin,\n        fadeRate: this.#fadeRate,\n      })\n\n      this.el.appendChild(el)\n    }\n  }\n\n  protected update(dt: number) {\n    super.update(dt)\n\n    const ps = this.#particles\n    for (let i = 0; i < ps.length; i++) {\n      const p = ps[i]\n      const e = p.el\n\n      p.age += dt\n      if (p.age > p.lifespan) {\n        e.remove()\n        ps.splice(i, 1)\n        i--\n        continue\n      }\n\n      const x = parseFloat(e.style.left) + p.velocityX * dt\n      const y = parseFloat(e.style.top) + p.velocityY * dt\n      const opacity = parseFloat(e.style.opacity) + p.fadeRate * dt\n\n      setStyle(e, { left: `${x}px`, top: `${y}px`, opacity: `${opacity}` })\n    }\n  }\n\n  override remove() {\n    domTextureLoader.release(this.#textureSrc)\n    super.remove()\n  }\n}\n"]}

package/lib/dom/dom-preload.js

@@ -0,0 +1,43 @@
+import { audioLoader } from '../asset/loaders/audio';
+import { fontFamilyLoader } from '../asset/loaders/font';
+import { domTextureLoader } from './dom-texture-loader';
+const loaderForPathMap = [
+    { check: (p) => /\.(png|jpe?g|gif|webp)$/.test(p), loader: domTextureLoader },
+    { check: (p) => /\.(mp3|wav|ogg)$/.test(p), loader: audioLoader },
+    { check: (p) => !p.includes('.'), loader: fontFamilyLoader }
+];
+function getLoaderForPath(path) {
+    return loaderForPathMap.find(({ check }) => check(path))?.loader;
+}
+async function loadAsset(asset) {
+    const loader = getLoaderForPath(asset);
+    if (!loader) {
+        console.warn(`No loader found for asset: ${asset}`);
+        return;
+    }
+    await loader.load(asset);
+}
+function releaseAsset(asset) {
+    const loader = getLoaderForPath(asset);
+    if (!loader) {
+        console.warn(`No loader found for asset: ${asset}`);
+        return;
+    }
+    loader.release(asset);
+}
+export async function domPreload(assets, progressCallback) {
+    let loaded = 0;
+    const total = assets.length;
+    await Promise.all(assets.map(async (asset) => {
+        try {
+            await loadAsset(asset);
+            loaded++;
+            progressCallback?.(loaded / total);
+        }
+        catch (err) {
+            console.error(`Failed to load asset:`, asset, err);
+        }
+    }));
+    return () => assets.forEach(releaseAsset);
+}
+//# sourceMappingURL=dom-preload.js.map

package/lib/dom/dom-preload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-preload.js","sourceRoot":"","sources":["../../src/dom/dom-preload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,gBAAgB,GAAqE;IACzF,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAC7E,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE;IACjE,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE;CAC7D,CAAA;AAED,SAAS,gBAAgB,CAAC,IAAY;IACpC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,CAAA;AAClE,CAAC;AAED,KAAK,UAAU,SAAS,CAAC,KAAa;IACpC,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACtC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CAAC,8BAA8B,KAAK,EAAE,CAAC,CAAA;QACnD,OAAM;IACR,CAAC;IACD,MAAM,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AAC1B,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,MAAM,MAAM,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAA;IACtC,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CAAC,8BAA8B,KAAK,EAAE,CAAC,CAAA;QACnD,OAAM;IACR,CAAC;IACD,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AACvB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAC9B,MAAgB,EAChB,gBAA6C;IAE7C,IAAI,MAAM,GAAG,CAAC,CAAA;IACd,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;IAE3B,MAAM,OAAO,CAAC,GAAG,CACf,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACzB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,KAAK,CAAC,CAAA;YACtB,MAAM,EAAE,CAAA;YACR,gBAAgB,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC,CAAA;QACpC,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,EAAE,GAAG,CAAC,CAAA;QACpD,CAAC;IACH,CAAC,CAAC,CACH,CAAA;IAED,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;AAC3C,CAAC","sourcesContent":["import { audioLoader } from '../asset/loaders/audio'\nimport { fontFamilyLoader } from '../asset/loaders/font'\nimport { Loader } from '../asset/loaders/loader'\nimport { domTextureLoader } from './dom-texture-loader'\n\nconst loaderForPathMap: Array<{ check: (path: string) => boolean, loader: Loader<any> }> = [\n  { check: (p) => /\\.(png|jpe?g|gif|webp)$/.test(p), loader: domTextureLoader },\n  { check: (p) => /\\.(mp3|wav|ogg)$/.test(p), loader: audioLoader },\n  { check: (p) => !p.includes('.'), loader: fontFamilyLoader }\n]\n\nfunction getLoaderForPath(path: string): Loader<any> | undefined {\n  return loaderForPathMap.find(({ check }) => check(path))?.loader\n}\n\nasync function loadAsset(asset: string): Promise<void> {\n  const loader = getLoaderForPath(asset)\n  if (!loader) {\n    console.warn(`No loader found for asset: ${asset}`)\n    return\n  }\n  await loader.load(asset)\n}\n\nfunction releaseAsset(asset: string): void {\n  const loader = getLoaderForPath(asset)\n  if (!loader) {\n    console.warn(`No loader found for asset: ${asset}`)\n    return\n  }\n  loader.release(asset)\n}\n\nexport async function domPreload(\n  assets: string[],\n  progressCallback?: (progress: number) => void\n): Promise<() => void> {\n  let loaded = 0\n  const total = assets.length\n\n  await Promise.all(\n    assets.map(async (asset) => {\n      try {\n        await loadAsset(asset)\n        loaded++\n        progressCallback?.(loaded / total)\n      } catch (err) {\n        console.error(`Failed to load asset:`, asset, err)\n      }\n    })\n  )\n\n  return () => assets.forEach(releaseAsset)\n}\n"]}

package/lib/dom/dom-sprite.js

@@ -0,0 +1,40 @@
+import { DomGameObject } from './dom-game-object';
+import { domTextureLoader } from './dom-texture-loader';
+import { setStyle } from './dom-utils';
+export class DomSpriteNode extends DomGameObject {
+    #src;
+    constructor(options) {
+        super(options);
+        this.#src = options.src;
+        this.#load();
+    }
+    async #load() {
+        let texture;
+        if (domTextureLoader.checkCached(this.#src)) {
+            texture = domTextureLoader.getCached(this.#src);
+        }
+        else {
+            console.info(`Dom texture not preloaded. Loading now: ${this.#src}`);
+            texture = await domTextureLoader.load(this.#src);
+        }
+        setStyle(this.el, !texture ? { backgroundImage: 'none' } : {
+            backgroundImage: `url(${this.#src})`,
+            width: `${texture.width}px`,
+            height: `${texture.height}px`,
+            backgroundSize: `${texture.width}px ${texture.height}px`,
+        });
+    }
+    set src(src) {
+        if (this.#src !== src) {
+            domTextureLoader.release(this.#src);
+            this.#src = src;
+            this.#load();
+        }
+    }
+    get src() { return this.#src; }
+    remove() {
+        domTextureLoader.release(this.#src);
+        super.remove();
+    }
+}
+//# sourceMappingURL=dom-sprite.js.map

package/lib/dom/dom-sprite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-sprite.js","sourceRoot":"","sources":["../../src/dom/dom-sprite.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAwB,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAMtC,MAAM,OAAO,aAA6C,SAAQ,aAAgB;IAChF,IAAI,CAAQ;IAEZ,YAAY,OAA6B;QACvC,KAAK,CAAC,OAAO,CAAC,CAAA;QACd,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,GAAG,CAAA;QACvB,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,KAAK,CAAC,KAAK;QACT,IAAI,OAAO,CAAA;QACX,IAAI,gBAAgB,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC5C,OAAO,GAAG,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACjD,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,2CAA2C,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;YACpE,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAClD,CAAC;QAED,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;YACzD,eAAe,EAAE,OAAO,IAAI,CAAC,IAAI,GAAG;YACpC,KAAK,EAAE,GAAG,OAAO,CAAC,KAAK,IAAI;YAC3B,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,IAAI;YAC7B,cAAc,EAAE,GAAG,OAAO,CAAC,KAAK,MAAM,OAAO,CAAC,MAAM,IAAI;SACzD,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,GAAG,CAAC,GAAG;QACT,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC;YACtB,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACnC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;YACf,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;IACH,CAAC;IAED,IAAI,GAAG,KAAK,OAAO,IAAI,CAAC,IAAI,CAAA,CAAC,CAAC;IAErB,MAAM;QACb,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACnC,KAAK,CAAC,MAAM,EAAE,CAAA;IAChB,CAAC;CACF","sourcesContent":["import { EventMap } from '@webtaku/event-emitter'\nimport { DomGameObject, DomGameObjectOptions } from './dom-game-object'\nimport { domTextureLoader } from './dom-texture-loader'\nimport { setStyle } from './dom-utils'\n\nexport type DomSpriteNodeOptions = {\n  src: string\n} & DomGameObjectOptions\n\nexport class DomSpriteNode<E extends EventMap = EventMap> extends DomGameObject<E> {\n  #src: string\n\n  constructor(options: DomSpriteNodeOptions) {\n    super(options)\n    this.#src = options.src\n    this.#load()\n  }\n\n  async #load() {\n    let texture\n    if (domTextureLoader.checkCached(this.#src)) {\n      texture = domTextureLoader.getCached(this.#src)\n    } else {\n      console.info(`Dom texture not preloaded. Loading now: ${this.#src}`)\n      texture = await domTextureLoader.load(this.#src)\n    }\n\n    setStyle(this.el, !texture ? { backgroundImage: 'none' } : {\n      backgroundImage: `url(${this.#src})`,\n      width: `${texture.width}px`,\n      height: `${texture.height}px`,\n      backgroundSize: `${texture.width}px ${texture.height}px`,\n    })\n  }\n\n  set src(src) {\n    if (this.#src !== src) {\n      domTextureLoader.release(this.#src)\n      this.#src = src\n      this.#load()\n    }\n  }\n\n  get src() { return this.#src }\n\n  override remove() {\n    domTextureLoader.release(this.#src)\n    super.remove()\n  }\n}\n"]}

package/lib/dom/dom-texture-loader.js

@@ -0,0 +1,36 @@
+import { Loader } from '../asset/loaders/loader';
+class DomTextureLoader extends Loader {
+    async doLoad(src) {
+        const loadingPromise = new Promise((resolve) => {
+            const image = new Image();
+            image.crossOrigin = 'anonymous';
+            image.src = src;
+            image.onload = () => {
+                this.loadingPromises.delete(src);
+                if (!this.hasActiveRef(src)) {
+                    resolve(undefined);
+                    return;
+                }
+                if (this.cachedAssets.has(src)) {
+                    console.error(`Dom texture already loaded: ${src}`);
+                    resolve(undefined);
+                    return;
+                }
+                this.cachedAssets.set(src, image);
+                resolve(image);
+            };
+            image.onerror = (error) => {
+                this.loadingPromises.delete(src);
+                console.error(`Failed to load dom texture: ${src}`, error);
+                resolve(undefined);
+            };
+        });
+        this.loadingPromises.set(src, loadingPromise);
+        return await loadingPromise;
+    }
+    cleanup(src, texture) {
+        texture.remove();
+    }
+}
+export const domTextureLoader = new DomTextureLoader();
+//# sourceMappingURL=dom-texture-loader.js.map

package/lib/dom/dom-texture-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-texture-loader.js","sourceRoot":"","sources":["../../src/dom/dom-texture-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAEhD,MAAM,gBAAiB,SAAQ,MAAwB;IAClC,KAAK,CAAC,MAAM,CAAC,GAAW;QACzC,MAAM,cAAc,GAAG,IAAI,OAAO,CAA+B,CAAC,OAAO,EAAE,EAAE;YAC3E,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;YACzB,KAAK,CAAC,WAAW,GAAG,WAAW,CAAA;YAC/B,KAAK,CAAC,GAAG,GAAG,GAAG,CAAA;YAEf,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;gBAClB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;gBAEhC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC5B,OAAO,CAAC,SAAS,CAAC,CAAA;oBAClB,OAAM;gBACR,CAAC;gBAED,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC/B,OAAO,CAAC,KAAK,CAAC,+BAA+B,GAAG,EAAE,CAAC,CAAA;oBACnD,OAAO,CAAC,SAAS,CAAC,CAAA;oBAClB,OAAM;gBACR,CAAC;gBAED,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAA;gBACjC,OAAO,CAAC,KAAK,CAAC,CAAA;YAChB,CAAC,CAAA;YAED,KAAK,CAAC,OAAO,GAAG,CAAC,KAAK,EAAE,EAAE;gBACxB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;gBAChC,OAAO,CAAC,KAAK,CAAC,+BAA+B,GAAG,EAAE,EAAE,KAAK,CAAC,CAAA;gBAC1D,OAAO,CAAC,SAAS,CAAC,CAAA;YACpB,CAAC,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE,cAAc,CAAC,CAAA;QAC7C,OAAO,MAAM,cAAc,CAAA;IAC7B,CAAC;IAEkB,OAAO,CAAC,GAAW,EAAE,OAAyB;QAC/D,OAAO,CAAC,MAAM,EAAE,CAAA;IAClB,CAAC;CACF;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,EAAE,CAAA","sourcesContent":["import { Loader } from '../asset/loaders/loader'\n\nclass DomTextureLoader extends Loader<HTMLImageElement> {\n  protected override async doLoad(src: string) {\n    const loadingPromise = new Promise<HTMLImageElement | undefined>((resolve) => {\n      const image = new Image()\n      image.crossOrigin = 'anonymous'\n      image.src = src\n\n      image.onload = () => {\n        this.loadingPromises.delete(src)\n\n        if (!this.hasActiveRef(src)) {\n          resolve(undefined)\n          return\n        }\n\n        if (this.cachedAssets.has(src)) {\n          console.error(`Dom texture already loaded: ${src}`)\n          resolve(undefined)\n          return\n        }\n\n        this.cachedAssets.set(src, image)\n        resolve(image)\n      }\n\n      image.onerror = (error) => {\n        this.loadingPromises.delete(src)\n        console.error(`Failed to load dom texture: ${src}`, error)\n        resolve(undefined)\n      }\n    })\n\n    this.loadingPromises.set(src, loadingPromise)\n    return await loadingPromise\n  }\n\n  protected override cleanup(src: string, texture: HTMLImageElement) {\n    texture.remove()\n  }\n}\n\nexport const domTextureLoader = new DomTextureLoader()\n"]}

package/lib/dom/dom-utils.js

@@ -0,0 +1,20 @@
+export function textStroke(target, width, color) {
+    let shadow = '';
+    for (let i = -width; i <= width; i++) {
+        for (let j = -width; j <= width; j++) {
+            if (i !== 0 || j !== 0) {
+                shadow += `${i}px ${j}px 0 ${color},`;
+            }
+        }
+    }
+    shadow = shadow.slice(0, -1); // Remove last comma
+    target.style.textShadow = shadow;
+    return target;
+}
+export function setStyle(el, styles) {
+    if (!el)
+        return;
+    Object.assign(el.style, styles);
+    return el;
+}
+//# sourceMappingURL=dom-utils.js.map

package/lib/dom/dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["../../src/dom/dom-utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,UAAU,CAAwB,MAAS,EAAE,KAAa,EAAE,KAAa;IACvF,IAAI,MAAM,GAAG,EAAE,CAAA;IACf,KAAK,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QACrC,KAAK,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBACvB,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC,QAAQ,KAAK,GAAG,CAAA;YACvC,CAAC;QACH,CAAC;IACH,CAAC;IACD,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA,CAAC,oBAAoB;IACjD,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAA;IAChC,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EAA2B,EAAE,MAAoC;IACxF,IAAI,CAAC,EAAE;QAAE,OAAM;IACf,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IAC/B,OAAO,EAAE,CAAA;AACX,CAAC","sourcesContent":["export function textStroke<T extends HTMLElement>(target: T, width: number, color: string) {\n  let shadow = ''\n  for (let i = -width; i <= width; i++) {\n    for (let j = -width; j <= width; j++) {\n      if (i !== 0 || j !== 0) {\n        shadow += `${i}px ${j}px 0 ${color},`\n      }\n    }\n  }\n  shadow = shadow.slice(0, -1) // Remove last comma\n  target.style.textShadow = shadow\n  return target\n}\n\nexport function setStyle(el: HTMLElement | undefined, styles: Partial<CSSStyleDeclaration>) {\n  if (!el) return\n  Object.assign(el.style, styles)\n  return el\n}\n"]}

package/lib/index copy.js

@@ -0,0 +1,16 @@
+export { preload } from './asset/preload';
+export { checkCollision } from './collision/check-collision';
+export { ColliderType } from './collision/colliders';
+export { enableDebug } from './debug';
+export { GameObject } from './node/core/game-object';
+export { AnimatedSpriteNode } from './node/ext/animated-sprite';
+export { CircleNode } from './node/ext/circle';
+export { DelayNode } from './node/ext/deplay';
+export { DomContainerNode } from './node/ext/dom-container';
+export { IntervalNode } from './node/ext/interval';
+export { RectangleNode } from './node/ext/rectangle';
+export { SpriteNode } from './node/ext/sprite';
+export { PhysicsObject } from './node/physics/physics-object';
+export { PhysicsWorld } from './node/physics/physics-world';
+export { Renderer, RendererOptions } from './renderer/renderer';
+//# sourceMappingURL=index%20copy.js.map

package/lib/index copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index copy.js","sourceRoot":"","sources":["../src/index copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAA4B,YAAY,EAAuD,MAAM,uBAAuB,CAAA;AACnI,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,UAAU,EAAqB,MAAM,yBAAyB,CAAA;AACvE,OAAO,EAAE,kBAAkB,EAA6B,MAAM,4BAA4B,CAAA;AAC1F,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,OAAO,EAAE,gBAAgB,EAA2B,MAAM,0BAA0B,CAAA;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAwB,MAAM,sBAAsB,CAAA;AAC1E,OAAO,EAAE,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,aAAa,EAAwB,MAAM,+BAA+B,CAAA;AACnF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA","sourcesContent":["export { AssetSource, preload } from './asset/preload'\nexport { checkCollision } from './collision/check-collision'\nexport { CircleCollider, Collider, ColliderType, EllipseCollider, PolygonCollider, RectangleCollider } from './collision/colliders'\nexport { enableDebug } from './debug'\nexport { GameObject, GameObjectOptions } from './node/core/game-object'\nexport { AnimatedSpriteNode, AnimatedSpriteNodeOptions } from './node/ext/animated-sprite'\nexport { CircleNode, CircleNodeOptions } from './node/ext/circle'\nexport { DelayNode } from './node/ext/deplay'\nexport { DomContainerNode, DomContainerNodeOptions } from './node/ext/dom-container'\nexport { IntervalNode } from './node/ext/interval'\nexport { RectangleNode, RectangleNodeOptions } from './node/ext/rectangle'\nexport { SpriteNode, SpriteNodeOptions } from './node/ext/sprite'\nexport { PhysicsObject, PhysicsObjectOptions } from './node/physics/physics-object'\nexport { PhysicsWorld } from './node/physics/physics-world'\nexport { Renderer, RendererOptions } from './renderer/renderer'\n\n"]}

package/lib/index.js

@@ -1,13 +1,38 @@
+// Core
+export { GameObject } from './node/core/game-object';
+// Renderer
+export { Renderer } from './renderer/renderer';
+export { Ticker } from './renderer/ticker';
+// Assets
 export { musicPlayer, sfxPlayer } from './asset/audio';
 export { preload } from './asset/preload';
-export { AnimatedSpriteObject } from './game-object-ext/animated-sprite';
-export { DomContainerObject } from './game-object-ext/dom-container';
-export { RectangleObject } from './game-object-ext/rect';
-export { SpineObject } from './game-object-ext/spine';
-export { SpriteObject } from './game-object-ext/sprite';
-export { TextObject } from './game-object-ext/text';
-export { GameObject } from './game-object/game-object';
-export { enableDebug } from './utils/debug';
-export { go } from './utils/go';
-export { World } from './world/world';
+// Collision
+export { checkCollision } from './collision/check-collision';
+export { ColliderType } from './collision/colliders';
+// Node Extensions
+export { AnimatedSpriteNode } from './node/ext/animated-sprite';
+export { BitmapTextNode } from './node/ext/bitmap-text';
+export { CircleNode } from './node/ext/circle';
+export { DelayNode } from './node/ext/deplay';
+export { DomContainerNode } from './node/ext/dom-container';
+export { IntervalNode } from './node/ext/interval';
+export { ParticleSystem } from './node/ext/particle';
+export { RectangleNode } from './node/ext/rectangle';
+export { SpineNode } from './node/ext/spine';
+export { SpriteNode } from './node/ext/sprite';
+// Physics
+export { PhysicsObject } from './node/physics/physics-object';
+export { PhysicsWorld } from './node/physics/physics-world';
+// DOM Nodes
+export { DomAnimatedSpriteNode } from './dom/dom-animated-sprite';
+export { DomParticleSystem } from './dom/dom-particle';
+export { domPreload } from './dom/dom-preload';
+export { DomSpriteNode } from './dom/dom-sprite';
+export { setStyle, textStroke } from './dom/dom-utils';
+// Input
+export { Joystick } from './input/joystick';
+// Utils
+export { isMobile } from './utils/device';
+// Debug
+export { debugMode, enableDebug } from './debug';
 //# sourceMappingURL=index.js.map