begin inventory + gems

src/classes/Assets.ts

@@ -29,6 +29,7 @@ export default class GameAssets {
     public static HomeIconTexture: PIXI.Texture;
     public static HammerIconTexture: PIXI.Texture;
     public static XIconTexture: PIXI.Texture;
+    public static PlusIconTexture: PIXI.Texture;
     public static GemAmountIcons: PIXI.Texture[] = [];
 
     public static Missions: MissionDefinition[];
@@ -101,6 +102,7 @@ export default class GameAssets {
             this.Load('/assets/gui/icons/home.png').then((texture) => (this.HomeIconTexture = texture)),
             this.Load('/assets/gui/icons/hammer.png').then((texture) => (this.HammerIconTexture = texture)),
             this.Load('/assets/gui/icons/cross.png').then((texture) => (this.XIconTexture = texture)),
+            this.Load('/assets/gui/icons/plus.png').then((texture) => (this.PlusIconTexture = texture)),
             this.LoadMissions(),
             this.LoadTowers(),
             this.LoadCreeps(),

src/classes/Definitions.ts

@@ -72,18 +72,19 @@ export type TowerStatsDefinition = {
 
 export type PathDefinition = [[row: number, column: number]];
 
-export enum CreepType {
-    Basic = 0,
-    Quick = 1,
-    Tank = 2,
-}
-
 export enum TerrainType {
     Restricted = 0,
     Buildable = 1,
     Path = 9,
 }
 
+// Make sure to sync these with the respective JSON files.
+export enum CreepType {
+    Basic = 0,
+    Quick = 1,
+    Tank = 2,
+}
+
 export enum GemType {
     Fire = 0,
     Yeti = 1,

src/classes/game/Gem.ts

@@ -1 +1,9 @@
-export default class Gem {}
+import * as PIXI from 'pixi.js';
+import { GemType } from '../Definitions';
+export default class Gem {
+    public texture: PIXI.Texture;
+    public type: GemType;
+    public level: number = 1;
+    // TODO: create and load from Gems.json and also load gem textures
+    constructor(gemType) {}
+}

src/classes/game/Grid.ts

@@ -84,6 +84,8 @@ export class Cell extends GameObject {
         if (this.hasTowerPlaced) {
             const tower = Engine.TowerManager.GetTowerByRowAndCol(this.row, this.column);
             Engine.GameScene.towerPanel.Show(tower);
+        } else {
+            // TODO: hide the sidepanel somehow
         }
     }
     public checkIfCantPlace() {

src/classes/game/Inventory.ts

@@ -0,0 +1,5 @@
+import GameObject from '../GameObject';
+
+export default class Inventory extends GameObject {
+    public update() {}
+}

src/classes/gui/Tooltip.ts

@@ -105,7 +105,7 @@ export default class Tooltip extends GuiObject {
         });
         this.gemAmount = new PIXI.Text({
             x: 54,
-            y: 108,
+            y: 105,
             zIndex: 5,
             text: 'Something went wrong if you see this.',
             style: {

src/classes/gui/TowerPanel.ts

@@ -5,13 +5,48 @@ import { Engine } from '../Bastion';
 import GameUIConstants from '../GameUIConstants';
 import Button, { ButtonTexture } from './Button';
 import { Tower } from '../game/Tower';
+import Gem from '../game/Gem';
+
+class VisualGemSlot extends GuiObject {
+    private background: PIXI.Sprite;
+    private iconSprite: PIXI.Sprite;
+    private i: number = 0;
+    constructor(index: number, parent: PIXI.Container, gem: Gem | null) {
+        super(true);
+        let gtexture;
+        if (gem == null) {
+            gtexture = GameAssets.PlusIconTexture;
+        } else {
+            gtexture = gem.texture;
+        }
+        this.container.x = 10;
+        this.container.y = index * Engine.GridCellSize + 300;
+        this.background = new PIXI.Sprite({
+            texture: GameAssets.FrameInventory,
+        });
+        this.iconSprite = new PIXI.Sprite({
+            texture: gtexture,
+        });
+        this.background.width = Engine.GridCellSize;
+        this.background.height = Engine.GridCellSize;
+        this.iconSprite.x = Engine.GridCellSize / 2;
+        this.iconSprite.y = Engine.GridCellSize / 2;
+        this.iconSprite.width = Engine.GridCellSize / 2;
+        this.iconSprite.height = Engine.GridCellSize / 2;
+        this.iconSprite.anchor.set(0.5, 0.5);
+        this.container.addChild(this.background);
+        this.container.addChild(this.iconSprite);
+        parent.addChild(this.container);
+    }
+    public onClick(e: PIXI.FederatedPointerEvent): void {}
+}
 
 export default class TowerPanel extends GuiObject {
     private bounds: PIXI.Rectangle;
     private towerPanel: PIXI.NineSliceSprite;
     private closeBtn: Button;
     public isShown: boolean = false;
-    titleText: PIXI.Text;
+    public titleText: PIXI.Text;
 
     constructor(bounds: PIXI.Rectangle) {
         super(false);
@@ -64,10 +99,18 @@ export default class TowerPanel extends GuiObject {
         this.titleText.anchor.set(0.5, 0);
         this.container.addChild(this.titleText);
     }
+    private MakeSlots(tower: Tower) {
+        let amount = tower.definition.stats.gemSlotsAmount;
+        amount = 6;
+        for (let i = 0; i < amount; i++) {
+            const element = new VisualGemSlot(i, this.container, null);
+        }
+    }
     public Show(tower: Tower) {
         let mouseX = Engine.MouseX;
         this.isShown = true;
         this.SetContent(tower);
+        this.MakeSlots(tower);
         if (mouseX < 900) {
             this.ShowRight();
         } else {
@@ -81,7 +124,7 @@ export default class TowerPanel extends GuiObject {
         this.towerPanel.x = -100;
         this.container.x = 0;
         this.container.alpha = 1;
-        this.closeBtn.container.x = this.container.width - 150;
+        this.closeBtn.container.x = this.bounds.width - 150;
     }
     private ShowRight() {
         this.towerPanel.x = -10;