Refactoring

src/base/Button.ts

@@ -6,26 +6,33 @@ export default class Button extends GameObject {
   private caption: string;
   private color: PIXI.Color;
   private buttonTexture: PIXI.Texture;
+  private enabled: boolean = true;
 
   setCaption(caption: string) {
     this.caption = caption;
-    this.drawButton();
+    this.draw();
   }
 
-  constructor(caption: string, bounds: PIXI.Rectangle, color: PIXI.Color) {
+  setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
+  constructor(
+    caption: string,
+    bounds: PIXI.Rectangle,
+    color: PIXI.Color,
+    enabled: boolean = true
+  ) {
     super(bounds);
     this.caption = caption;
     this.color = color;
     this.container.interactive = true;
     this.buttonTexture = Assets.ButtonTexture;
-    this.drawButton();
+    this.enabled = enabled;
+    this.draw();
   }
 
-  protected triggerBoundsChanged() {
+  protected draw() {
-    this.drawButton();
-  }
-
-  private drawButton() {
     console.log(
       `Drawing button ${this.caption} at ${JSON.stringify(this.bounds)}`
     );
@@ -60,6 +67,7 @@ export default class Button extends GameObject {
     this.container.x = this.bounds.x;
     this.container.y = this.bounds.y;
     this.container.on("click", () => {
+      if (!this.enabled) return;
       this.events.emit("click");
     });
   }

src/base/Game.ts

@@ -48,12 +48,12 @@ export default class Game extends GameObject {
   };
 
   protected triggerBoundsChanged(): void {
-    this.drawScene();
-  }
-
-  private drawScene() {
     if (this._currentScene) {
       this._currentScene.setBounds(0, 0, this.bounds.width, this.bounds.height);
     }
   }
+
+  protected draw() {
+    // Nothing to draw, scene is drawing itself.
+  }
 }

src/base/GameObject.ts

@@ -26,7 +26,11 @@ export default abstract class GameObject {
     return this._events;
   }
 
-  protected abstract triggerBoundsChanged();
+  protected triggerBoundsChanged() {
+    this.draw();
+  }
+
+  protected abstract draw(): void;
 
   constructor(bounds: PIXI.Rectangle) {
     this.bounds = bounds;

src/components/Grid.ts

@@ -1,5 +1,5 @@
 import * as PIXI from "pixi.js";
-import GameObject from "./GameObject.ts";
+import GameObject from "../base/GameObject";
 
 export enum CellType {
   Path,
@@ -13,9 +13,30 @@ export class Cell extends GameObject {
   constructor(bounds: PIXI.Rectangle, type: CellType) {
     super(bounds);
     this.type = type;
+    this.draw();
   }
-  protected triggerBoundsChanged() {
+
+  protected draw() {
     this.container.removeChildren();
+    let g = new PIXI.Graphics();
+    g.rect(0, 0, this.bounds.width, this.bounds.height);
+    switch (this.type) {
+      case CellType.Path:
+        g.fill(0x00ff00);
+        break;
+      case CellType.NoBuild:
+        g.fill(0xff0000);
+        break;
+      case CellType.Build:
+        g.fill(0x0000ff);
+        break;
+      case CellType.Undefined:
+        g.fill(0x000000);
+        break;
+    }
+    this.container.addChild(g);
+    this.container.x = this.bounds.x;
+    this.container.y = this.bounds.y;
   }
 }
 
@@ -23,6 +44,7 @@ export class Grid extends GameObject {
   public rows: number;
   public columns: number;
   public cells: Array<Cell>;
+
   constructor(bounds: PIXI.Rectangle, rows, columns) {
     super(bounds);
     this.rows = rows;
@@ -43,9 +65,7 @@ export class Grid extends GameObject {
     }
   }
 
-  protected triggerBoundsChanged() {
+  protected draw() {}
-    this.container.removeChildren();
-  }
 
   private getPixelScalingFactor() {
     const pixelScaleX = this.container.width / this.columns;

src/components/MissionStats.ts

@@ -0,0 +1,11 @@
+import GameObject from "../base/GameObject";
+import * as PIXI from "pixi.js";
+
+export default class MissionStats extends GameObject {
+  constructor(bounds: PIXI.Rectangle) {
+    super(bounds);
+    this.draw();
+  }
+
+  protected draw() {}
+}

src/scenes/GameScene.ts

@@ -13,6 +13,7 @@ export default class GameScene extends SceneBase {
     this._ticker.minFPS = 30;
     this._ticker.add(this.update);
     this._ticker.start();
+    this.draw();
   }
 
   public destroy() {
@@ -23,7 +24,7 @@ export default class GameScene extends SceneBase {
 
   public update() {}
 
-  protected createScene() {
+  protected draw() {
     console.log("Creating Game Scene ", this.bounds);
     this.container.removeChildren();
     this.container.x = this.bounds.x;

src/scenes/MainMenu.ts

@@ -8,9 +8,10 @@ export default class MainMenu extends SceneBase {
 
   constructor(bounds: PIXI.Rectangle) {
     super(bounds);
+    this.draw();
   }
 
-  protected createScene() {
+  protected draw() {
     console.log("Creating main menu scene", this.bounds);
     this.container.removeChildren();
     const g = new PIXI.Graphics();

src/scenes/MissionSelectMenu.ts

@@ -7,9 +7,10 @@ export default class MissionMenuSelect extends SceneBase {
 
   constructor(bounds: PIXI.Rectangle) {
     super(bounds);
+    this.draw();
   }
 
-  protected createScene() {
+  protected draw() {
     this.container.removeChildren();
     this._buttons = [];
     const g = new PIXI.Graphics();

src/scenes/SceneBase.ts

@@ -3,12 +3,5 @@ import GameObject from "../base/GameObject";
 export default abstract class SceneBase extends GameObject {
   constructor(bounds: PIXI.Rectangle) {
     super(bounds);
-    this.createScene();
   }
-
-  protected triggerBoundsChanged() {
-    this.createScene();
-  }
-
-  protected abstract createScene();
 }

src/scenes/SettingsMenu.ts

@@ -8,9 +8,10 @@ export default class SettingsMenu extends SceneBase {
 
   constructor(bounds: PIXI.Rectangle) {
     super(bounds);
+    this.draw();
   }
 
-  protected createScene() {
+  protected draw() {
     this.container.removeChildren();
     const g = new PIXI.Graphics();
     g.rect(0, 0, this.bounds.width, this.bounds.height);