working on actual game scene (gameplay)

src/base/Game.ts

@@ -1,10 +1,13 @@
 import MainMenu from "../scenes/MainMenu";
 import MissionMenuSelect from "../scenes/MissionSelectMenu";
+import GameScene from "../scenes/GameScene";
 import GameObject from "./GameObject";
 import * as PIXI from "pixi.js";
+import Scene from "../scenes/Base";
 
 export default class Game extends GameObject {
-  private _currentScene: GameObject | null = null;
+  private _currentScene: Scene | null = null;
+  public ticker: PIXI.Ticker | null = null;
 
   constructor(bounds: PIXI.Rectangle) {
     super(bounds);
@@ -23,6 +26,7 @@ export default class Game extends GameObject {
     const missionSelectScene = new MissionMenuSelect(this.bounds);
     missionSelectScene.events.on("mission", (mission) => {
       console.log("Mission selected", mission);
+      this.setScene(new GameScene(this.bounds));
     });
     missionSelectScene.events.on("back", () => {
       this.onMainMenu();
@@ -34,13 +38,31 @@ export default class Game extends GameObject {
     console.log("Settings");
   };
 
-  private setScene(scene: GameObject) {
+  private setScene(scene: Scene) {
     if (this._currentScene) {
       this.container.removeChild(this._currentScene.container);
     }
     this._currentScene = scene;
+    console.log(this._currentScene.constructor);
     this.container.addChild(scene.container);
-    this.drawScene();
+    if (this._currentScene.constructor.name == "GameScene") {
+      // dont change GameScene name XD
+      this.ticker = new PIXI.Ticker();
+      this.ticker.maxFPS = 60;
+      this.ticker.minFPS = 30;
+      this.ticker.add(this.update);
+      console.log(this._currentScene);
+      this.ticker.start();
+    } else {
+      if (this.ticker != null) {
+        this.ticker.stop();
+        this.ticker.destroy();
+      }
+    }
+  }
+
+  private update(time) {
+    this._currentScene.update();
   }
 
   protected triggerBoundsChanged(): void {

src/base/Grid.ts

@@ -0,0 +1,63 @@
+import * as PIXI from "pixi.js";
+import GameObject from "./GameObject.ts";
+
+export enum CellType {
+  Path,
+  NoBuild,
+  Build,
+  Undefined,
+}
+
+export class Cell extends GameObject {
+  public type: CellType;
+  constructor(bounds: PIXI.Rectangle, type: CellType) {
+    super(bounds);
+    this.type = type;
+  }
+  protected triggerBoundsChanged() {
+    this.container.removeChildren();
+  }
+}
+
+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;
+    this.columns = columns;
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < columns; x++) {
+        let cell = new Cell(
+          new PIXI.Rectangle(
+            x,
+            y,
+            this.gridUnitsToPixels(1),
+            this.gridUnitsToPixels(1)
+          ),
+          CellType.Undefined
+        );
+        this.cells.push(cell);
+      }
+    }
+  }
+
+  protected triggerBoundsChanged() {
+    this.container.removeChildren();
+  }
+
+  private getPixelScalingFactor() {
+    const pixelScaleX = this.container.width / this.columns;
+    const pixelScaleY = this.container.height / this.rows;
+    return pixelScaleX < pixelScaleY ? pixelScaleX : pixelScaleY;
+  }
+
+  public gridUnitsToPixels(amount: number): number {
+    return amount * this.getPixelScalingFactor();
+  }
+
+  public pixelsToGridUnits(pixels: number): number {
+    return pixels / this.getPixelScalingFactor();
+  }
+}

src/main.ts

@@ -8,6 +8,7 @@ import Assets from "./base/Assets";
     height: 360,
     resizeTo: document.body,
     backgroundColor: "white",
+    sharedTicker: true,
   });
 
   document.body.appendChild(app.canvas);

src/scenes/Base.ts

@@ -9,4 +9,6 @@ export default abstract class Scene extends GameObject {
     this.createScene();
   }
   protected abstract createScene();
+
+  public update() {}
 }

src/scenes/GameScene.ts

@@ -0,0 +1,20 @@
+import Button from "../base/Button";
+import Scene from "./Base";
+import * as PIXI from "pixi.js";
+
+export default class GameScene extends Scene {
+  private grid;
+  // DO NOT CHANGE NAME, WILL BREAK Game.ts
+  constructor(bounds: PIXI.Rectangle) {
+    super(bounds);
+  }
+
+  public update() {}
+
+  protected createScene() {
+    console.log("Creating Game Scene ", this.bounds);
+    this.container.removeChildren();
+    this.container.x = this.bounds.x;
+    this.container.y = this.bounds.y;
+  }
+}