enough today, im happy

src/base/Assets.ts

@@ -0,0 +1,11 @@
+import * as PIXI from "pixi.js";
+
+export default class Assets {
+  public static async LoadAssets() {
+    Assets.ButtonTexture = await PIXI.Assets.load({
+      src: "/assets/gui/button_02.png",
+    });
+  }
+
+  public static ButtonTexture: PIXI.Texture;
+}

src/base/Button.ts

@@ -1,4 +1,5 @@
 import GameObject from "./GameObject";
+import Assets from "./Assets";
 import * as PIXI from "pixi.js";
 
 export default class Button extends GameObject {
@@ -16,7 +17,7 @@ export default class Button extends GameObject {
     this.caption = caption;
     this.color = color;
     this.container.interactive = true;
-    this.buttonTexture = PIXI.Texture.from("/assets/gui/button02.png");
+    this.buttonTexture = Assets.ButtonTexture;
     this.createButton();
   }
 
@@ -26,18 +27,24 @@ export default class Button extends GameObject {
 
   private createButton() {
     this.container.removeChildren();
-    const button = new PIXI.Graphics();
-    button.rect(0, 0, this.bounds.width, this.bounds.height);
-    button.fill(this.color);
+    // const button = new PIXI.Graphics();
+    // button.rect(0, 0, this.bounds.width, this.bounds.height);
+    // button.fill(this.color);
+    console.log(this.buttonTexture);
+    const button = new PIXI.Sprite(this.buttonTexture); // TODO: sliced texture
+    button.x = 0;
+    button.y = 0;
+    button.width = this.bounds.width;
+    button.height = this.bounds.height;
     this.container.addChild(button);
     const text = new PIXI.Text({ text: this.caption });
     this.container.addChild(text);
     text.anchor.set(0.5, 0.5);
     text.x = this.bounds.width / 2;
     text.y = this.bounds.height / 2;
-    this._container.x = this.bounds.x;
-    this._container.y = this.bounds.y;
-    this._container.on("click", () => {
+    this.container.x = this.bounds.x;
+    this.container.y = this.bounds.y;
+    this.container.on("click", () => {
       this.events.emit("click");
     });
   }

src/main.ts

@@ -1,5 +1,6 @@
 import * as PIXI from "pixi.js";
 import Game from "./base/Game";
+import Assets from "./base/Assets";
 (async () => {
   const app = new PIXI.Application();
   await app.init({
@@ -10,6 +11,7 @@ import Game from "./base/Game";
   });
 
   document.body.appendChild(app.canvas);
+  await Assets.LoadAssets();
   const game = new Game(app.screen);
   app.stage.addChild(game.container);
   window.addEventListener("resize", () => {

src/scenes/MainMenu.ts

@@ -20,9 +20,9 @@ export default class MainMenu extends Scene {
     this._newGameButton = new Button(
       "New Game",
       new PIXI.Rectangle(
-        100,
+        this.bounds.width / 2 - 300 / 2,
         this.bounds.height / 2 - 80,
-        this.bounds.width - 200,
+        300,
         60
       ),
       new PIXI.Color("blue")
@@ -35,9 +35,9 @@ export default class MainMenu extends Scene {
     this._settingsButton = new Button(
       "Settings",
       new PIXI.Rectangle(
-        100,
+        this.bounds.width / 2 - 300 / 2,
         this.bounds.height / 2 + 20,
-        this.bounds.width - 200,
+        300,
         60
       ),
       new PIXI.Color("gray")