add assets

src/base/Assets.ts

@@ -7,10 +7,12 @@ export default class Assets {
         Assets.ButtonTexture = await PIXI.Assets.load({
             src: '/assets/gui/button_02.png',
         });
+        Assets.SidebarTexture = await PIXI.Assets.load({
+            src: '/assets/gui/frame.png',
+        });
         Assets.BasicCreepTexture = await PIXI.Assets.load({
             src: '/assets/creeps/basic.jpg',
         });
-        console.log('Loading Missions');
         await this.LoadMissions();
         await this.LoadCreepStats();
     }
@@ -40,9 +42,11 @@ export default class Assets {
         });
     }
 
-    public static ButtonTexture: PIXI.Texture;
     public static BasicCreepTexture: PIXI.Texture;
 
+    public static ButtonTexture: PIXI.Texture;
+    public static SidebarTexture: PIXI.Texture;
+
     public static MissionBackgrounds: PIXI.Texture[] = [];
     public static Missions: MissionDefinition[];
     public static CreepStats: CreepStats[];

src/components/Grid.ts

@@ -101,10 +101,6 @@ export class Grid extends GameObject {
     protected draw() {
         console.log('Drawing Grid', this.bounds);
         this.container.removeChildren();
-        // let g = new PIXI.Graphics();
-        // g.rect(0, 0, this.bounds.width, this.bounds.height + 100);
-        // g.fill(0xffffff);
-        // this.container.addChild(g);
         let background = new PIXI.Sprite(Assets.MissionBackgrounds[this.gameScene.missionIndex]);
         background.x = 0;
         background.y = 0;
@@ -113,8 +109,8 @@ export class Grid extends GameObject {
         this.container.addChild(background);
         for (let cell of this.cells) {
             cell.setBounds(
-                this.gridUnitsToPixels(cell.column),
+                parseFloat(this.gridUnitsToPixels(cell.column).toFixed(2)),
-                this.gridUnitsToPixels(cell.row),
+                parseFloat(this.gridUnitsToPixels(cell.row).toFixed(2)),
                 this.gridUnitsToPixels(1),
                 this.gridUnitsToPixels(1)
             );

src/components/Sidebar.ts

@@ -0,0 +1,27 @@
+import * as PIXI from 'pixi.js';
+import GameObject from '../base/GameObject';
+import GameScene from '../scenes/GameScene';
+import Assets from '../base/Assets';
+
+export default class Sidebar extends GameObject {
+    private gameScene: GameScene;
+    constructor(gameScene: GameScene, bounds?: PIXI.Rectangle) {
+        super(bounds);
+        this.gameScene = gameScene;
+    }
+    protected draw() {
+        this.container.removeChildren();
+        const sprite = new PIXI.NineSliceSprite({
+            texture: Assets.SidebarTexture,
+            leftWidth: 100,
+            topHeight: 100,
+            rightWidth: 100,
+            bottomHeight: 100,
+        });
+        sprite.width = this.bounds.width;
+        sprite.height = this.bounds.height;
+        this.container.addChild(sprite);
+        this.container.x = this.bounds.x;
+        this.container.y = this.bounds.y;
+    }
+}

src/scenes/GameScene.ts

@@ -3,6 +3,7 @@ import { MissionDefinition } from '../base/Definitions';
 import Creep, { CreepEvents } from '../components/Creep';
 import { Grid } from '../components/Grid';
 import MissionStats from '../components/MissionStats';
+import Sidebar from '../components/Sidebar';
 import WaveManager, { WaveManagerEvents } from '../components/WaveManager';
 import SceneBase from './SceneBase';
 import * as PIXI from 'pixi.js';
@@ -17,6 +18,7 @@ export default class GameScene extends SceneBase {
     private ticker: PIXI.Ticker;
     private stats: MissionStats;
     private waveManager: WaveManager;
+    private sidebar: Sidebar;
     private roundMode = RoundMode.Purchase;
     private changeRoundButton: Button;
     private currentRound: number = 0;
@@ -36,6 +38,7 @@ export default class GameScene extends SceneBase {
         });
         this.stats = new MissionStats(100, 200);
         this.grid = new Grid(mission.gameMap, this);
+        this.sidebar = new Sidebar(this);
         this.gridWidth = mission.mapImage.width;
         this.gridHeight = mission.mapImage.height;
         this.ticker = new PIXI.Ticker();
@@ -108,7 +111,9 @@ export default class GameScene extends SceneBase {
         this.container.addChild(g);
         this.stats.setBounds(this.getStatusBounds());
         this.grid.setBounds(this.getGridBounds());
+        this.sidebar.setBounds(this.getSidebarBounds());
         this.changeRoundButton.setBounds(this.getChangeRoundButtonBounds());
+        this.container.addChild(this.sidebar.container);
         this.container.addChild(this.stats.container);
         this.container.addChild(this.grid.container);
         this.container.addChild(this.changeRoundButton.container);
@@ -116,6 +121,9 @@ export default class GameScene extends SceneBase {
         this.container.y = this.bounds.y;
     }
 
+    private getSidebarBounds(): PIXI.Rectangle {
+        return new PIXI.Rectangle(this.bounds.width - 350, 0, 350, this.bounds.height);
+    }
     private getStatusBounds(): PIXI.Rectangle {
         // Top / Center
         return new PIXI.Rectangle(this.bounds.width / 2 - 200 / 2, 0, 200, 100);
@@ -123,8 +131,6 @@ export default class GameScene extends SceneBase {
 
     private getGridBounds(): PIXI.Rectangle {
         // Center / Center
-        let width = 600;
-        let height = 600;
         return new PIXI.Rectangle(
             this.bounds.width / 2 - this.gridWidth / 2,
             this.bounds.height / 2 - this.gridHeight / 2,
@@ -134,7 +140,7 @@ export default class GameScene extends SceneBase {
     }
     private getChangeRoundButtonBounds(): PIXI.Rectangle {
         // Center / Center
-        let width = 300;
+        let width = 350;
         let height = 150;
         return new PIXI.Rectangle(this.bounds.width - width, this.bounds.height - height, width, height);
     }