i am sick, fix me

public/style.css

@@ -7,7 +7,7 @@ html {
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    background-color: red;
+    background-color: black;
     display: flex;
     flex-direction: row;
     align-items: center;

src/classes/Bastion.ts

@@ -13,7 +13,7 @@ export class environment {
 
 export default class GameMaster {
     public currentScene: Scene;
-    private GameObjects: GameObject[];
+    private GameObjects: GameObject[] = [];
     private ticker: PIXI.Ticker;
 
     constructor() {

src/classes/GameObject.ts

@@ -26,7 +26,6 @@ export default abstract class GameObject {
     public abstract update(elapsedMS): void;
 
     constructor() {
-        // Define stuff that goes into this.container (visual elements), then call super().
         environment.GameMaster._CreateGameObject(this);
     }
 }

src/classes/GuiObject.ts

@@ -8,7 +8,7 @@ export default abstract class GuiObject {
 
     protected _events: PIXI.EventEmitter = new PIXI.EventEmitter();
 
-    protected enabled: boolean;
+    protected enabled: boolean = true;
 
     public destroy() {
         this._events.removeAllListeners();

src/classes/gui/Sidebar.ts

@@ -0,0 +1,29 @@
+import * as PIXI from 'pixi.js';
+import GuiObject from '../GuiObject';
+import Assets from '../Assets';
+
+export default class Sidebar extends GuiObject {
+    private bounds: PIXI.Rectangle;
+    private sidebarSprite: PIXI.NineSliceSprite;
+
+    constructor(bounds: PIXI.Rectangle) {
+        super(false);
+        this.bounds = bounds;
+        this.container.x = this.bounds.x;
+        this.container.y = this.bounds.y;
+        this.container.width = this.bounds.width;
+        this.container.height = this.bounds.height;
+        this.sidebarSprite = new PIXI.NineSliceSprite({
+            texture: Assets.Frame01Texture,
+            leftWidth: 100,
+            topHeight: 100,
+            rightWidth: 100,
+            bottomHeight: 100,
+        });
+        this.sidebarSprite.x = 40;
+        this.sidebarSprite.y = -40;
+        this.sidebarSprite.width = this.bounds.width + 40;
+        this.sidebarSprite.height = this.bounds.height + 80;
+        this.container.addChild(this.sidebarSprite);
+    }
+}

src/classes/gui/Topbar.ts

@@ -0,0 +1,29 @@
+import * as PIXI from 'pixi.js';
+import GuiObject from '../GuiObject';
+import Assets from '../Assets';
+
+export default class Topbar extends GuiObject {
+    private bounds: PIXI.Rectangle;
+    private sidebarSprite: PIXI.NineSliceSprite;
+
+    constructor(bounds: PIXI.Rectangle) {
+        super(false);
+        this.bounds = bounds;
+        this.container.x = this.bounds.x;
+        this.container.y = this.bounds.y;
+        this.container.width = this.bounds.width;
+        this.container.height = this.bounds.height;
+        this.sidebarSprite = new PIXI.NineSliceSprite({
+            texture: Assets.Frame01Texture,
+            leftWidth: 100,
+            topHeight: 100,
+            rightWidth: 100,
+            bottomHeight: 100,
+        });
+        this.sidebarSprite.x = -40;
+        this.sidebarSprite.y = -40;
+        this.sidebarSprite.width = this.bounds.width + 40;
+        this.sidebarSprite.height = this.bounds.height;
+        this.container.addChild(this.sidebarSprite);
+    }
+}

src/main.ts

@@ -1,6 +1,8 @@
 import * as PIXI from 'pixi.js';
 import GameMaster, { environment } from './classes/Bastion';
 import Assets from './classes/Assets';
+import { MainScene } from './scenes/Main';
+import { GameScene } from './scenes/Game';
 
 (async () => {
     const app = new PIXI.Application();
@@ -16,13 +18,17 @@ import Assets from './classes/Assets';
     await app.init({
         width: width,
         height: height,
-        backgroundColor: 'white',
+        backgroundColor: 'gray',
         sharedTicker: true,
         preference: 'webgl',
     });
     document.body.appendChild(app.canvas);
     await Assets.LoadAssets();
     new GameMaster();
+    environment.GameMaster.changeScene(new MainScene());
+    let params = new URLSearchParams(location.href);
+    if (params.entries().next().value[1] == 'game') environment.GameMaster.changeScene(new GameScene('Mission 1'));
+
     window.addEventListener('resize', () => {
         const newWidth = Math.min(window.innerWidth * 0.75, window.innerHeight * aspectRatio);
         const newHeight = newWidth / aspectRatio;

src/scenes/Game.ts

@@ -0,0 +1,24 @@
+import Assets from '../classes/Assets';
+import { environment } from '../classes/Bastion';
+import { MissionDefinition } from '../classes/Definitions';
+import Sidebar from '../classes/gui/Sidebar';
+import Topbar from '../classes/gui/Topbar';
+import Scene from './Scene';
+import * as PIXI from 'pixi.js';
+
+export class GameScene extends Scene {
+    public mission: MissionDefinition;
+    constructor(name: string) {
+        super();
+        Assets.Missions.forEach((mission) => {
+            if (mission.name == name) this.mission = mission;
+        });
+    }
+    public init() {
+        const SidebarRect = new PIXI.Rectangle(environment.WindowWidth - 400, 0, 400, environment.WindowHeight);
+        const TopbarRect = new PIXI.Rectangle(0, 0, environment.WindowWidth, 150);
+
+        new Topbar(TopbarRect);
+        new Sidebar(SidebarRect);
+    }
+}

src/scenes/Main.ts

@@ -1,9 +1,28 @@
-import Button from '../classes/gui/Button';
+import { environment } from '../classes/Bastion';
+import Button, { ButtonTexture } from '../classes/gui/Button';
+import { MissionPickerScene } from './MissionPicker';
 import Scene from './Scene';
 import * as PIXI from 'pixi.js';
 
 export class MainScene extends Scene {
     public init() {
-        new Button(new PIXI.Bounds(0, 0, 200, 200));
+        const NewGameButton = {
+            caption: 'New Game',
+            rect: new PIXI.Rectangle(environment.WindowWidth / 2 - 300 / 2, environment.WindowHeight / 2 - 80, 300, 60),
+            texture: ButtonTexture.Button01,
+        };
+
+        const SettingsButton = {
+            caption: 'Settings',
+            rect: new PIXI.Rectangle(environment.WindowWidth / 2 - 300 / 2, environment.WindowHeight / 2 + 20, 300, 60),
+            texture: ButtonTexture.Button01,
+        };
+
+        const button01 = new Button(NewGameButton.rect, NewGameButton.caption, NewGameButton.texture, true);
+        button01.onClick = (e) => {
+            environment.GameMaster.changeScene(new MissionPickerScene());
+        };
+
+        new Button(SettingsButton.rect, SettingsButton.caption, SettingsButton.texture, true);
     }
 }

src/scenes/MissionPicker.ts

@@ -0,0 +1,26 @@
+import Assets from '../classes/Assets';
+import { environment } from '../classes/Bastion';
+import Button, { ButtonTexture } from '../classes/gui/Button';
+import { GameScene } from './Game';
+import Scene from './Scene';
+import * as PIXI from 'pixi.js';
+
+export class MissionPickerScene extends Scene {
+    public init() {
+        Assets.Missions.forEach((mission, index) => {
+            const button = new Button(
+                new PIXI.Rectangle(
+                    environment.WindowWidth / 2 - 300 / 2,
+                    environment.WindowHeight / 5 + index * 80,
+                    300,
+                    60
+                ),
+                mission.name,
+                ButtonTexture.Button01
+            );
+            button.onClick = (e) => {
+                environment.GameMaster.changeScene(new GameScene(mission.name));
+            };
+        });
+    }
+}

src/scenes/Scene.ts

@@ -1,7 +1,7 @@
 import GuiObject from '../classes/GuiObject';
 
 export default class Scene {
-    public gui: GuiObject[];
+    public gui: GuiObject[] = [];
     public destroy() {
         this.gui.forEach((element) => {
             element.destroy();