Upgrade to Pixi JS v8

.editorconfig

@@ -0,0 +1,3 @@
+[*.{js,ts}]
+indent_style = space
+indent_size = 4

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@types/node": "20.14.10",
-    "pixi.js": "6.0.4",
+    "pixi.js": "8.2.2",
     "ts-node": "10.9.2"
   },
   "devDependencies": {

src/core/Background.ts

@@ -1,11 +1,11 @@
-import { Container, Loader, Sprite, Texture } from "pixi.js";
+import { Assets, Container, Sprite, Texture } from "pixi.js";
 
 export default class Background {
     public readonly sprite: Container;
     private readonly texture: Texture;
 
-    constructor(loader: Loader) {
-        this.texture = loader.resources.atlas.textures!['BG.png'];
+    constructor() {
+        this.texture = Assets.get("atlas").textures["BG.png"];
         this.sprite = new Sprite(this.texture);
     }
 }

src/core/Game.ts

@@ -1,25 +1,28 @@
-import Loader from './Loader';
-import PlayButton from './PlayButton';
-import Background from './Background';
-import ReelsContainer from './ReelsContainer';
-import Scoreboard from './Scoreboard';
-import VictoryScreen from './VictoryScreen';
-import { Application } from 'pixi.js';
+import Loader from "./Loader";
+import PlayButton from "./PlayButton";
+import Background from "./Background";
+import ReelsContainer from "./ReelsContainer";
+import Scoreboard from "./Scoreboard";
+import VictoryScreen from "./VictoryScreen";
+import { Application } from "pixi.js";
 
 export default class Game {
     public app: Application;
+    private loader: Loader;
     private playBtn: PlayButton;
     private reelsContainer: ReelsContainer;
     private scoreboard: Scoreboard;
     private victoryScreen: VictoryScreen;
 
     constructor() {
-        this.app = new Application({ width: 960, height: 536 });
-        window.document.body.appendChild(this.app.view);
-        new Loader(this.app, this.init.bind(this));
+        this.app = new Application();
     }
 
-    private init() {
+    public async init() {
+        await this.app.init({ width: 960, height: 536 });
+        this.loader = new Loader(this.app);
+        window.document.body.appendChild(this.app.canvas);
+        await this.loader.loadAssets();
         this.createScene();
         this.createPlayButton();
         this.createReels();
@@ -28,7 +31,7 @@ export default class Game {
     }
 
     private createScene() {
-        const bg = new Background(this.app.loader);
+        const bg = new Background();
         this.app.stage.addChild(bg.sprite);
     }
 

src/core/Loader.ts

@@ -1,34 +1,39 @@
-import { Application, Loader as PixiLoader, Text, TextStyle } from "pixi.js"
+import { Application, Assets, Text, TextStyle } from "pixi.js"
 
 export default class Loader {
-    public loader: PixiLoader;
     private loadingScreen: Text;
+    private app: Application;
 
-    constructor(app: Application, onAssetsLoaded: () => void) {
-        this.loader = app.loader;
-        this.loadAssets();
-        this.loader.load(() => {
-            app.stage.removeChild(this.loadingScreen);
-            onAssetsLoaded();
-        });
-        this.generateLoadingScreen(app.screen.width, app.screen.height);
-        app.stage.addChild(this.loadingScreen);
+    constructor(app: Application) {
+        this.app = app;
+        this.loadingScreen = this.createLoadingScreen(app.screen.width, app.screen.height);
+    }
+
+    public showLoadingScreen() {
+        this.app.stage.addChild(this.loadingScreen);
+    }
+
+    public hideLoadingScreen() {
+        this.app.stage.removeChild(this.loadingScreen);
     }
 
-    private loadAssets() {
-        this.loader.add('atlas', './assets/atlas.json');
+    public async loadAssets() {
+        this.showLoadingScreen();
+        Assets.add({ alias: "atlas", src: "./assets/atlas.json" });
+        await Assets.load(["atlas"]);
+        this.hideLoadingScreen();
     }
 
-    private generateLoadingScreen(appWidth: number, appHeight: number) {
+    private createLoadingScreen(appWidth: number, appHeight: number): Text {
         const style = new TextStyle({
-            fontFamily: 'Arial',
+            fontFamily: "Arial",
             fontSize: 36,
-            fontWeight: 'bold',
-            fill: '#ffffff',
+            fontWeight: "bold",
+            fill: "#ffffff",
         });
-        const playText = new Text('Loading...', style);
+        const playText = new Text({ text: "Loading...", style });
         playText.x = (appWidth - playText.width) / 2;
         playText.y = (appHeight - playText.height) / 2;
-        this.loadingScreen = playText;
+        return playText;
     }
 }

src/core/PlayButton.ts

@@ -1,4 +1,4 @@
-import { Application, Sprite, Texture } from "pixi.js";
+import { Application, Assets, Sprite, Texture } from "pixi.js";
 
 export default class PlayButton {
     public readonly sprite: Sprite;
@@ -8,8 +8,8 @@ export default class PlayButton {
 
     constructor(app: Application, onClick: () => void) {
         this.onClick = onClick;
-        this.activeTexture = app.loader.resources.atlas.textures!['BTN_Spin.png'];
-        this.disabledTexture = app.loader.resources.atlas.textures!['BTN_Spin_d.png'];
+        this.activeTexture = Assets.get("atlas").textures["BTN_Spin.png"];
+        this.disabledTexture = Assets.get("atlas").textures["BTN_Spin_d.png"];
         this.sprite = new Sprite(this.activeTexture);
         this.init(app.screen.width, app.screen.height);
     }
@@ -28,7 +28,7 @@ export default class PlayButton {
         this.sprite.x = appWidth - (this.sprite.width + 37.25);
         this.sprite.y = (appHeight - this.sprite.height) / 2;
         this.sprite.interactive = true;
-        this.sprite.buttonMode = true;
-        this.sprite.addListener('pointerdown', this.onClick);
+        this.sprite.eventMode = "static";
+        this.sprite.addListener("pointerdown", this.onClick);
     }
 }

src/core/Reel.ts

@@ -1,4 +1,4 @@
-import { Application, Container, Sprite, Texture, Ticker } from "pixi.js";
+import { Application, Assets, Container, Sprite, Texture, Ticker } from "pixi.js";
 
 export default class Reel {
     public readonly container: Container;
@@ -11,13 +11,14 @@ export default class Reel {
         this.appHeight = app.screen.height;
         this.ticker = app.ticker;
         this.container = new Container();
+        const atlas = Assets.get("atlas");
         this.textures = [
-            app.loader.resources.atlas!.textures!['SYM1.png'],
-            app.loader.resources.atlas!.textures!['SYM2.png'],
-            app.loader.resources.atlas!.textures!['SYM3.png'],
-            app.loader.resources.atlas!.textures!['SYM4.png'],
-            app.loader.resources.atlas!.textures!['SYM5.png'],
-            app.loader.resources.atlas!.textures!['SYM6.png'],
+            atlas.textures["SYM1.png"],
+            atlas.textures["SYM2.png"],
+            atlas.textures["SYM3.png"],
+            atlas.textures["SYM4.png"],
+            atlas.textures["SYM5.png"],
+            atlas.textures["SYM6.png"],
         ];
         this.generate(position);
     }

src/core/ReelsContainer.ts

@@ -1,5 +1,5 @@
-import { Application, Container, Sprite } from 'pixi.js';
-import Reel from './Reel';
+import { Application, Container, Sprite } from "pixi.js";
+import Reel from "./Reel";
 
 export default class ReelsContainer {
     public readonly reels: Array<Reel> = [];
@@ -26,7 +26,7 @@ export default class ReelsContainer {
         const start = Date.now();
         const reelsToSpin = [...this.reels];
 
-        for await (let value of this.infiniteSpinning(reelsToSpin)) {
+        for await (let _ of this.infiniteSpinning(reelsToSpin)) {
             const shiftingWaitTime = (this.reels.length - reelsToSpin.length + 1) * shiftingDelay;
 
             if (Date.now() >= start + shiftingWaitTime) {
@@ -51,12 +51,12 @@ export default class ReelsContainer {
     }
 
     private checkForWin(symbols: Array<Sprite>): boolean {
-        // Set of strings: 'SYM1', 'SYM2', ...
+        // Set of strings: "SYM1", "SYM2", ...
         //
         const combination: Set<string> = new Set();
-        symbols.forEach(symbol => combination.add(symbol.texture.textureCacheIds[0].split('.')[0]));
-        if (combination.size === 1 && !combination.has('SYM1')) return true;
-        return combination.size === 2 && combination.has('SYM1');
+        symbols.forEach(symbol => combination.add(symbol.texture.label!.split(".")[0]));
+        if (combination.size === 1 && !combination.has("SYM1")) return true;
+        return combination.size === 2 && combination.has("SYM1");
     }
 
     private blessRNG() {

src/core/Scoreboard.ts

@@ -34,27 +34,26 @@ export default class Scoreboard {
 
     private generate(appWidth: number, appHeight: number) {
         const style = new TextStyle({
-            fontFamily: 'Arial',
+            fontFamily: "Arial",
             fontSize: 24,
-            fill: 'yellow',
+            fill: "yellow",
         });
 
-        this.moneyText = new Text(`money: $${this.money}`, style);
+        this.moneyText = new Text({ text: `money: $${this.money}`, style });
         this.moneyText.y = 5;
 
-        const betText = new Text(`bet: $${this.bet}`, style);
+        const betText = new Text({ text: `bet: $${this.bet}`, style });
         betText.y = this.moneyText.height + 10;
 
-        this.winAmountText = new Text(`win: $${this.winAmount}`, style);
+        this.winAmountText = new Text({ text: `win: $${this.winAmount}`, style });
         this.winAmountText.y = betText.y + betText.height + 5;
 
         betText.x = this.moneyText.x = this.winAmountText.x = 10;
 
-        const rect = new Graphics();
-        rect.beginFill(0x02474E, 0.8);
         const rectHeight = this.moneyText.height + betText.height + this.winAmountText.height + 25;
-        rect.drawRect(0, 0, 160, rectHeight);
-        rect.endFill();
+        const rect = new Graphics()
+            .rect(0, 0, 160, rectHeight)
+            .fill({ color: 0x02474E, alpha: 0.8 });
 
         this.container.x = appWidth - rect.width - 7;
         this.container.y = appHeight / 2 + 70;

src/core/VictoryScreen.ts

@@ -16,7 +16,7 @@ export default class VictoryScreen {
             window.clearTimeout(id);
             this.hide();
         };
-        this.overlay.addListener('pointerdown', handler.bind(this));
+        this.overlay.addListener("pointerdown", handler.bind(this));
     }
 
     hide() {
@@ -26,28 +26,27 @@ export default class VictoryScreen {
     private generate(appWidth: number, appHeight: number) {
         this.container.visible = false;
 
-        this.overlay = new Graphics();
-        this.overlay.beginFill(0xFFFFFF, 0.001);
-        this.overlay.drawRect(0, 0, appWidth, appHeight);
-        this.overlay.endFill();
+        this.overlay = new Graphics()
+            .rect(0, 0, appWidth, appHeight)
+            .fill({ color: 0xffffff, alpha: 0.001 });
+
         this.overlay.interactive = true;
-        this.overlay.buttonMode = true;
-        this.overlay.cursor = 'default';
+        this.overlay.eventMode = "static";
+        this.overlay.cursor = "default";
 
-        const rect = new Graphics();
-        rect.beginFill(0x02474E, 0.8);
-        rect.drawRect(0, 0, 717.5, 400);
+        const rect = new Graphics()
+            .rect(0, 0, 717.5, 400)
+            .fill({ color: 0x02474E, alpha: 0.8 });
         rect.x = 70;
         rect.y = (appHeight - rect.height) / 2;
-        rect.endFill();
 
         const style = new TextStyle({
-            fontFamily: 'Arial',
+            fontFamily: "Arial",
             fontSize: 96,
-            fill: 'yellow',
+            fill: "yellow",
         });
 
-        const text = new Text('YOU WON!', style);
+        const text = new Text({ text: "YOU WON!", style });
         text.x = 70 + (rect.width - text.width) / 2;
         text.y = (appHeight - text.height) / 2;
 

src/global.d.ts

@@ -0,0 +1,9 @@
+import Game from "./core/Game";
+
+declare global {
+    interface Window {
+        game: Game;
+    }
+}
+
+export {};

src/index.ts

@@ -1,3 +1,5 @@
-import Game from './core/Game';
+import Game from "./core/Game";
 
-new Game();
+const game = new Game();
+game.init();
+window.game = game;