we are getting somewhere, but i dont know where. also i apologise for my comments since they make no sense

src/classes/Assets.ts

@@ -28,11 +28,11 @@ export default class GameAssets {
         GameAssets.Frame02Texture = await PIXI.Assets.load({
             src: '/assets/gui/frame_02.png',
         });
-        GameAssets.FrameGreenTexture = await PIXI.Assets.load({
-            src: '/assets/gui/frame_green.png',
+        GameAssets.FrameBackground = await PIXI.Assets.load({
+            src: '/assets/gui/background_01.png',
         });
-        GameAssets.FrameRedTexture = await PIXI.Assets.load({
-            src: '/assets/gui/frame_red.png',
+        GameAssets.FrameTowerTab = await PIXI.Assets.load({
+            src: '/assets/gui/background_02.png',
         });
         GameAssets.FrameVioletTexture = await PIXI.Assets.load({
             src: '/assets/gui/frame_violet.png',
@@ -87,8 +87,8 @@ export default class GameAssets {
 
     public static Frame01Texture: PIXI.Texture;
     public static Frame02Texture: PIXI.Texture;
-    public static FrameGreenTexture: PIXI.Texture;
-    public static FrameRedTexture: PIXI.Texture;
+    public static FrameBackground: PIXI.Texture;
+    public static FrameTowerTab: PIXI.Texture;
     public static FrameVioletTexture: PIXI.Texture;
     public static Button01Texture: PIXI.Texture;
     public static Button02Texture: PIXI.Texture;

src/classes/game/Grid.ts

@@ -10,6 +10,7 @@ export class Cell extends GameObject {
     public row: number;
     public column: number;
     public isPath: boolean = false;
+    private g: PIXI.Graphics;
 
     constructor(type: TerrainType, row: number, column: number, isPath: boolean) {
         super();
@@ -22,23 +23,9 @@ export class Cell extends GameObject {
         this.bb.width = 64;
         this.bb.height = 64;
         Globals.Grid.container.addChild(this.container);
-        let g = new PIXI.Graphics();
-        g.rect(0, 0, this.bb.width, this.bb.height);
-        switch (this.type) {
-            case TerrainType.Restricted:
-                g.fill(0xff0000);
-                break;
-            case TerrainType.Path:
-                g.fill(0xff00ff);
-                break;
-            case TerrainType.Buildable:
-                g.stroke(0x00ff00);
-                break;
-        }
-        this.container.addChild(g);
         this.container.x = this.bb.x;
         this.container.y = this.bb.y;
-        // if (!GameAssets.DebuggingEnabled) return;
+        if (!GameAssets.DebuggingEnabled) return;
         const text = new PIXI.Text({
             text: `${this.row}|${this.column}`,
             style: new PIXI.TextStyle({
@@ -53,6 +40,28 @@ export class Cell extends GameObject {
         text.y = this.bb.height / 2;
         if (this.isPath) text.text += 'P';
     }
+    public gDraw() {
+        this.g = new PIXI.Graphics();
+        this.g.rect(0, 0, this.bb.width, this.bb.height);
+        switch (this.type) {
+            case TerrainType.Restricted:
+                this.g.fill({ color: 0x222222, alpha: 0.5 });
+                break;
+            case TerrainType.Path:
+                this.g.fill({ color: 0x222222, alpha: 0.5 });
+                break;
+            case TerrainType.Buildable:
+                this.g.stroke({ color: 0x00ff00, alpha: 0.1 });
+                break;
+        }
+        this.container.addChild(this.g);
+    }
+    public gClear() {
+        if (this.g != null) {
+            this.container.removeChild(this.g);
+            this.g.destroy();
+        }
+    }
     public update() {}
 }
 
@@ -60,6 +69,7 @@ export class Grid extends GameObject {
     private gameMap: GameMapDefinition;
     private cells: Cell[] = [];
     public creeps: Creep[] = [];
+    public gridShown: boolean = false;
 
     constructor(map: GameMapDefinition, missionIndex) {
         super();
@@ -90,6 +100,17 @@ export class Grid extends GameObject {
             }
         }
     }
+    public toggleGrid() {
+        this.cells.forEach((cell) => {
+            if (this.gridShown) {
+                cell.gClear();
+            } else {
+                cell.gDraw();
+            }
+            // smort
+            this.gridShown = !this.gridShown;
+        });
+    }
     public addCreep(creep: Creep) {
         console.log('ADD CREEP');
         this.creeps.push(creep);

src/classes/game/MissionStats.ts

@@ -15,17 +15,17 @@ export default class MissionStats extends GameObject {
 
     public setHP(hp: number) {
         this.hp = hp;
-        this.healthText.text = 'HP: ' + this.hp;
+        this.healthText.text = this.hp;
     }
 
     public takeDamage(damage: number) {
         this.hp -= damage;
-        this.healthText.text = 'HP: ' + this.hp;
+        this.healthText.text = this.hp;
     }
 
     public setGold(gold: number) {
         this.gold = gold;
-        this.goldText.text = 'Gold: ' + this.gold;
+        this.goldText.text = this.gold;
     }
 
     constructor(initialHP: number, initialGold: number) {
@@ -36,38 +36,40 @@ export default class MissionStats extends GameObject {
         this.container.y = 20;
         Globals.app.stage.addChild(this.container);
         this.healthText = new PIXI.Text({
-            text: `HP: ${this.hp}`,
+            text: `${this.hp}`,
             style: new PIXI.TextStyle({
-                fill: 'white',
-                fontSize: 24,
+                fill: 'red',
+                fontSize: 36,
                 fontWeight: 'bold',
                 dropShadow: true,
             }),
         });
-        this.healthText.x = 200;
         this.goldText = new PIXI.Text({
-            text: `Gold: ${this.gold}`,
+            text: `${this.gold}`,
             style: new PIXI.TextStyle({
-                fill: 'white',
-                fontSize: 24,
+                fill: 'gold',
+                fontSize: 36,
                 fontWeight: 'bold',
                 dropShadow: true,
             }),
         });
-        this.goldText.x = 200;
-        this.goldText.y = 30;
-
         const healthSprite = new PIXI.Sprite(Assets.HealthTexture);
-        healthSprite.x = 165;
-        healthSprite.width = 30;
-        healthSprite.height = 26;
-        healthSprite.y = 1;
-
         const goldSprite = new PIXI.Sprite(Assets.GoldTexture);
-        goldSprite.x = 165;
-        goldSprite.width = 30;
-        goldSprite.height = 26;
-        goldSprite.y = 30;
+
+        this.healthText.x = 200;
+        this.healthText.y = -15;
+        healthSprite.x = 160;
+        healthSprite.width = 36;
+        healthSprite.height = 32;
+        healthSprite.y = -10;
+
+        this.goldText.x = 200;
+        this.goldText.y = 20;
+        goldSprite.x = 150;
+        goldSprite.width = 56;
+        goldSprite.height = 56;
+        goldSprite.y = 15;
+
         this.container.addChild(this.healthText);
         this.container.addChild(this.goldText);
         this.container.addChild(healthSprite);

src/classes/gui/GemTab.ts

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

src/classes/gui/Sidebar.ts

@@ -1,10 +1,14 @@
 import * as PIXI from 'pixi.js';
 import GuiObject from '../GuiObject';
 import GameAssets from '../Assets';
+import TowerTab from './TowerTab';
+import GemTab from './GemTab';
 
 export default class Sidebar extends GuiObject {
     private bounds: PIXI.Rectangle;
     private sidebarSprite: PIXI.NineSliceSprite;
+    private towerTab: TowerTab;
+    private gemTab: GemTab;
 
     constructor(bounds: PIXI.Rectangle) {
         super(false);
@@ -21,7 +25,16 @@ export default class Sidebar extends GuiObject {
         this.sidebarSprite.x = 40;
         this.sidebarSprite.y = -40;
         this.sidebarSprite.width = this.bounds.width + 40;
-        this.sidebarSprite.height = this.bounds.height + 41;
+        this.sidebarSprite.height = this.bounds.height + 80;
+
         this.container.addChild(this.sidebarSprite);
+
+        const towerTabRect = new PIXI.Rectangle(60, 20, this.bounds.width - 65, 150);
+        this.towerTab = new TowerTab(towerTabRect);
+        this.container.addChild(this.towerTab.container);
+
+        const gemTabRect = new PIXI.Rectangle(60, 180, this.bounds.width - 65, this.bounds.height - 280);
+        this.gemTab = new GemTab(gemTabRect);
+        this.container.addChild(this.gemTab.container);
     }
 }

src/classes/gui/TowerTab.ts

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

src/scenes/Game.ts

@@ -42,8 +42,8 @@ export class GameScene extends Scene {
         this.ticker.minFPS = 30;
         this.ticker.add(() => this.update(this.ticker.elapsedMS)); // bruh
         this.ticker.start();
-        const SidebarRect = new PIXI.Rectangle(64 * 30 - 350, 0, 350, Globals.app.canvas.height);
-        const changeRoundButtonRect = new PIXI.Rectangle(50, Globals.app.canvas.height - 100, 300, 100);
+        const SidebarRect = new PIXI.Rectangle(64 * 30 - 360, 0, 360, Globals.app.canvas.height);
+        const changeRoundButtonRect = new PIXI.Rectangle(50, Globals.app.canvas.height - 100, 310, 100);
         new Grid(this.mission.gameMap, this.missionIndex);
         new WaveManager(this.mission.rounds, this.mission.gameMap.paths);
         Globals.WaveManager.events.on(WaveManagerEvents.CreepSpawned, (creep: Creep) => {