add more visual feedback to slotting gems

src/classes/Assets.ts

@@ -7,6 +7,7 @@ export default class GameAssets {
     public static Frame02Texture: PIXI.Texture;
     public static Frame03Texture: PIXI.Texture;
     public static Frame04Texture: PIXI.Texture;
+    public static Frame05Texture: PIXI.Texture;
     public static FrameInventory: PIXI.Texture;
     public static FrameBackground: PIXI.Texture;
     public static FrameTowerTab: PIXI.Texture;
@@ -86,6 +87,7 @@ export default class GameAssets {
             this.Load('./assets/gui/frame_02.png').then((texture) => (this.Frame02Texture = texture)),
             this.Load('./assets/gui/frame_03.png').then((texture) => (this.Frame03Texture = texture)),
             this.Load('./assets/gui/frame_04.png').then((texture) => (this.Frame04Texture = texture)),
+            this.Load('./assets/gui/frame_05.png').then((texture) => (this.Frame05Texture = texture)),
             this.Load('./assets/gui/frame_inv.png').then((texture) => (this.FrameInventory = texture)),
             this.Load('./assets/gui/background_01.png').then((texture) => (this.FrameBackground = texture)),
             this.Load('./assets/gui/background_02.png').then((texture) => (this.FrameTowerTab = texture)),

src/classes/Bastion.ts

@@ -9,6 +9,8 @@ import { GameScene } from '../scenes/Game';
 import { AnimationManager } from './game/AnimationManager';
 import NotificationManager from './game/NotificationManager';
 import Gem from './game/Gem';
+import GameAssets from './Assets';
+import { GemType } from './Definitions';
 
 export class Engine {
     public static app: PIXI.Application;
@@ -27,9 +29,12 @@ export class Engine {
     public static MouseX: number = 0;
     public static MouseY: number = 0;
 
-    public static gemTest() {
+    public static TestSuite() {
-        for (let i = 0; i < 2; i++) {
+        Engine.NotificationManager.Notify('Loaded testing suite.', 'danger');
-            this.GameScene.MissionStats.giveGem(new Gem(0));
+        Engine.TowerManager.ToggleChoosingTowerLocation('RESET');
+        Engine.TowerManager.PlaceTower(GameAssets.Towers[1], 10, 15, GameAssets.Towers[0].behaviour, true);
+        for (let i = 0; i < 16; i++) {
+            this.GameScene.MissionStats.giveGem(new Gem(GemType.Fire), true);
         }
     }
 }

src/classes/game/Gem.ts

@@ -8,7 +8,7 @@ export default class Gem {
     public texture: PIXI.Texture;
     public level: number = 1;
     public definition: GemDefinition;
-    private id;
+    public id;
     constructor(gemType: GemType) {
         this.definition = GameAssets.Gems[gemType];
         this.texture = this.definition.textures[0];

src/classes/game/NotificationManager.ts

@@ -55,7 +55,7 @@ export default class NotificationManager extends GameObject {
         this.bb.x = Engine.app.canvas.width / 2;
         this.bb.y = 40;
         this.copyBBToContainer();
-        this.container.zIndex = 100;
+        this.container.zIndex = 200;
         Engine.app.stage.addChild(this.container);
     }
     public Notify(text, type: NotificationType) {
@@ -74,7 +74,7 @@ export default class NotificationManager extends GameObject {
             if (this.ticks >= notif.ticksToFadeAway && !notif.animating) {
                 notif.animating = true;
                 Engine.AnimationManager.Animate(
-                    new FadeInOut('out', 240, notif.textObj, () => {
+                    new FadeInOut('out', 300, notif.textObj, () => {
                         notif.destroy();
                     })
                 );

src/classes/game/Tower.ts

@@ -64,8 +64,15 @@ export class Tower extends GameObject {
     public UnslotGem(index) {
         const gem = this.slottedGems.splice(index, 1)[0];
         Engine.GameScene.MissionStats.giveGem(gem, true);
+        for (let i = index; i < this.slottedGems.length - 1; i++) {
+            if (this.slottedGems[i] == null) {
+                this.slottedGems[i] = this.slottedGems[i + 1];
+                this.slottedGems[i + 1] = null;
+            }
+        }
+        this.slottedGems = this.slottedGems.filter((gem) => gem != null);
         Engine.NotificationManager.Notify(
-            `Gem Lv. ${gem.level} ${gem.definition.name} unslotted from ${this.name} and placed back in your inventory.`,
+            `Lv. ${gem.level} ${gem.definition.name} unslotted and placed back in your inventory.`,
             'info'
         );
     }
@@ -111,7 +118,7 @@ export class Tower extends GameObject {
         }
     }
 
-    override destroy(): void {
+    public destroy(): void {
         super.destroy();
         this.parent.clickDetector.off('pointerenter', this.onParentCellEnter);
         this.parent.clickDetector.off('pointerleave', this.onParentCellLeave);

src/classes/game/TowerManager.ts

@@ -88,7 +88,7 @@ export default class TowerManager {
         return returnTower;
     }
     public PlaceTower(definition: TowerDefinition, row, column, behaviour: string, ignoreCost?) {
-        const sprite = this.selectedTower.texture;
+        const sprite = definition.texture;
         if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
             return Engine.NotificationManager.Notify('Not enough gold.', 'warn');
         if (
@@ -96,7 +96,7 @@ export default class TowerManager {
             Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Path &&
             Engine.Grid.getCellByRowAndCol(row, column).type != TerrainType.Restricted
         ) {
-            Engine.GameScene.MissionStats.spendGold(definition.stats.cost);
+            if (!ignoreCost) Engine.GameScene.MissionStats.spendGold(definition.stats.cost);
             let tower = new Tower(row, column, sprite, definition, behaviour);
             this.towers.push(tower);
             this.ToggleChoosingTowerLocation('RESET');

src/classes/gui/GemTab.ts

@@ -37,12 +37,12 @@ export default class GemTab extends GuiObject {
             this.RebuildInventoryVisual();
         });
     }
+    // TODO: add more visual clarity
     public TowerPanelSelectingGem(gem: Gem, index: number, tower: Tower) {
-        console.log(this);
+        console.log('TOWER PANEL SELECTING GEM ' + index);
-        if (this.isSelectingGem) {
+        if (index < 0) console.error('TOWER PANEL SELECTING GEM INDEX IS LESS THAN 0, ', index);
-            this.isSelectingGem = false;
+        // index = Engine.GameScene.towerPanel.vGems.indexOf(gem);
-            this.selectingGemSlotIndex = -1;
+        if (!this.isSelectingGem) {
-        } else {
             this.isSelectingGem = true;
             if (gem == null) {
                 // Want to select gem to slot in, already checked if player has a Gem.
@@ -58,6 +58,13 @@ export default class GemTab extends GuiObject {
                 this.RebuildInventoryVisual();
                 Engine.GameScene.towerPanel.Hide();
                 Engine.GameScene.towerPanel.Show(tower);
+                this.isSelectingGem = false;
+                this.selectingGemSlotIndex = -1;
+                this.selectingGemTowerObject = null;
+            }
+        } else {
+            if (gem == null) {
+                this.isSelectingGem = false;
                 this.selectingGemSlotIndex = -1;
                 this.selectingGemTowerObject = null;
             }
@@ -69,8 +76,8 @@ export default class GemTab extends GuiObject {
         Engine.GameScene.MissionStats.getInventory().forEach((gem, index) => {
             let vGem = new VisualGemSlot(0, this.container, gem);
 
-            let vGemYCoord = 5;
+            let vGemYCoord = 10;
-            let vGemXCoord = (index % 4) * 64 + 20;
+            let vGemXCoord = (index % 4) * 70 + 10;
             let vGemYIdx = index;
             while (true) {
                 if (vGemYIdx <= 3) break;

src/classes/gui/TowerPanel.ts

@@ -11,17 +11,17 @@ import { GemEvents } from '../Events';
 export class VisualGemSlot extends GuiObject {
     public iconSprite: PIXI.Sprite;
     private background: PIXI.Sprite;
-    private gem: Gem;
+    private frame: PIXI.Sprite;
-    private i: number = 0;
+    public i: number = 0;
     constructor(index: number, parent: PIXI.Container, gem: Gem | null) {
         super(true);
         let gtexture;
+        this.i = index;
         this.container.x = 10;
-        this.container.y = index * Engine.GridCellSize + 300;
+        this.container.y = index * (Engine.GridCellSize + 6) + 300;
         this.background = new PIXI.Sprite({
-            texture: GameAssets.FrameInventory,
+            texture: GameAssets.Frame01Texture,
         });
-        this.gem = gem;
         if (gem == null) {
             gtexture = GameAssets.PlusIconTexture;
         } else {
@@ -45,18 +45,47 @@ export class VisualGemSlot extends GuiObject {
             this.iconSprite.width = Engine.GridCellSize - 8;
             this.iconSprite.height = Engine.GridCellSize - 8;
         }
+        this.frame = new PIXI.Sprite({
+            texture: GameAssets.Frame05Texture,
+            width: 64,
+            height: 64,
+        });
+
         this.container.addChild(this.background);
         this.container.addChild(this.iconSprite);
+        this.container.addChild(this.frame);
+        if (Engine.latestCommit == 'DEVELOPMENT') {
+            let txt = gem ? gem.id : '';
+            let dbgText = new PIXI.Text({
+                text: txt,
+                zIndex: 11,
+                style: {
+                    fill: 'white',
+                    stroke: {
+                        color: 0x000000,
+                        width: 5,
+                    },
+                },
+            });
+            this.container.addChild(dbgText);
+        }
         parent.addChild(this.container);
     }
-    public onClick(e: PIXI.FederatedPointerEvent): void {}
+
+    public setTint(color) {
+        this.frame.tint = color;
+    }
+
+    public resetTint() {
+        this.frame.tint = 0xffffff;
+    }
 }
 
 export default class TowerPanel extends GuiObject {
     private bounds: PIXI.Rectangle;
     private towerPanel: PIXI.NineSliceSprite;
     private closeBtn: Button;
-    private vGems: VisualGemSlot[] = [];
+    public vGems: VisualGemSlot[] = [];
     public isShown: boolean = false;
     public titleText: PIXI.Text;
 
@@ -119,10 +148,11 @@ export default class TowerPanel extends GuiObject {
         let amount = tower.definition.stats.gemSlotsAmount;
         // amount = 6;
         for (let i = 0; i < amount; i++) {
+            console.log('BUILDING TOWER PANEL ' + i);
             let gem = tower.slottedGems[i];
-            console.log(gem);
             if (!gem) gem = null;
             const vGem = new VisualGemSlot(i, this.container, gem);
+            vGem.resetTint();
             this.vGems.push(vGem);
             vGem.container.onpointermove = () => {
                 if (!gem) return;
@@ -134,8 +164,10 @@ export default class TowerPanel extends GuiObject {
             };
             vGem.onClick = () => {
                 Engine.GameScene.tooltip.Hide();
-                console.log('MAKESLOTS ', gem);
+                console.warn('EMITTING TOWER PANEL SELECT GEM', gem, vGem.i, i, tower);
-                Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, i, tower);
+                Engine.GameScene.events.emit(GemEvents.TowerPanelSelectGem, gem, vGem.i, tower);
+                if (!gem && Engine.GameScene.sidebar.gemTab.isSelectingGem) vGem.setTint(0x00ffff);
+                else vGem.resetTint();
             };
         }
     }

src/main.ts

@@ -67,4 +67,5 @@ import GameUIConstants from './classes/GameUIConstants';
         window.onbeforeunload = () => {
             return 'You are about to leave.';
         };
+    else Engine.TestSuite();
 })();

src/scenes/Game.ts

@@ -114,15 +114,17 @@ export class GameScene extends Scene {
                         'You require atleast 1 Gem in your inventory to slot it in a Gem slot.',
                         'warn'
                     );
-                console.log(gem);
-                this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower);
-            } else {
-                this.sidebar.gemTab.TowerPanelSelectingGem(gem, -1, tower);
             }
+            this.sidebar.gemTab.TowerPanelSelectingGem(gem, index, tower);
         });
         this.ticker = new PIXI.Ticker();
         this.ticker.maxFPS = 60;
         this.ticker.minFPS = 30;
+        // fix tooltip behaving weirdly for some reason
+        this.tooltip.SetContentTower(0, 0, 0, 0);
+        this.tooltip.Show(Engine.MouseX, Engine.MouseY);
+        this.tooltip.Hide();
+
         this.ticker.add(() => {
             if (this.update) this.update(this.ticker.elapsedMS);
         });