initial

utils/PixiHtmlContainer.js

@@ -0,0 +1,28 @@
+import { Container, Transform } from 'pixi.js';
+import { div } from './htmlUtils.js';
+import {Locator} from "@popiplay/slot-game-kit";
+
+export class PixiHtmlContainer extends Container {
+  constructor(parentDom, className, style = {}) {
+    super();
+    this.element = div(className);
+    this.domTransform = new Transform();
+    Object.assign(this.element.style, style);
+    parentDom?.append(this.element);
+
+    Locator.viewport.on('resize', this.updateTransform, this);
+  }
+
+  updateTransform() {
+    super.updateTransform();
+    const globalTransform = this.parent.transform.worldTransform;
+    const decomposition = globalTransform.decompose(this.domTransform);
+    let transform = `scale(${decomposition.scale.x}, ${decomposition.scale.y}) translate(-50%, -50%)`
+    this.element.style.transform = transform;
+  }
+
+  destroy(...args) {
+    Locator.viewport.off('resize', this.updateTransform, this);
+    super.destroy(...args);
+  }
+}