abstract pixi & implement eresize

src/tests/main.ts

@@ -1,12 +1,53 @@
-/* eslint-disable no-restricted-imports */
-import { Application } from 'pixi.js';
+import { Container, Text } from 'pixi.js';
+import { initPixi } from './utils/pixi';
 
-const app = new Application();
-
-app.init({
-    resizeTo: window,
-    background: 0x000000,
-}).then(() =>
+// eslint-disable-next-line no-new
+new class App
 {
-    document.body.appendChild(app.canvas as any);
-});
+    private view: Container;
+
+    constructor()
+    {
+        this.init();
+    }
+
+    private async init()
+    {
+        const pixiApp = await initPixi();
+
+        this.view = new Container();
+
+        pixiApp.stage.addChild(this.view);
+
+        this.createElements();
+
+        this.addSubscriptions();
+    }
+
+    private addSubscriptions()
+    {
+        window.addEventListener('resize', () => this.resize());
+        window.addEventListener('deviceorientation', () => this.resize());
+        this.resize();
+    }
+
+    private createElements()
+    {
+        const text = new Text({ text: 'Pixi 8' });
+
+        text.anchor.set(0.5);
+        text.style = {
+            fontSize: 100,
+            fill: 0xffffff
+        };
+
+        this.view.addChild(text);
+    }
+
+    private resize(width = window.innerWidth, height = window.innerHeight)
+    {
+        this.view.x = width / 2;
+        this.view.y = height / 2;
+    }
+}();
+

src/tests/utils/pixi.ts

@@ -0,0 +1,21 @@
+import { Application, ApplicationOptions } from 'pixi.js';
+
+export async function initPixi(options?: Partial<ApplicationOptions>): Promise<Application>
+{
+    const app = new Application();
+
+    await app.init({
+        resizeTo: window,
+        background: 0x000000,
+        ...options
+    });
+
+    document.body.appendChild(app.canvas as any);
+
+    // #v-ifdef MODE=production
+    // Pixi inspector
+    (globalThis as any).__PIXI_APP__ = app;
+    // #v-endif
+
+    return app;
+}