tower panel begin

package.json

@@ -4,7 +4,7 @@
     "version": "0.0.0",
     "type": "module",
     "scripts": {
-        "dev": "vite",
+        "dev": "vite --host",
         "build": "tsc && vite build",
         "preview": "vite preview"
     },

src/classes/Assets.ts

@@ -28,6 +28,7 @@ export default class GameAssets {
     public static ExclamationIconTexture: PIXI.Texture;
     public static HomeIconTexture: PIXI.Texture;
     public static HammerIconTexture: PIXI.Texture;
+    public static XIconTexture: PIXI.Texture;
     public static GemAmountIcons: PIXI.Texture[] = [];
 
     public static Missions: MissionDefinition[];
@@ -99,6 +100,7 @@ export default class GameAssets {
             this.Load('/assets/gui/icons/exclamation.png').then((texture) => (this.ExclamationIconTexture = texture)),
             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.LoadMissions(),
             this.LoadTowers(),
             this.LoadCreeps(),

src/classes/game/Gem.ts

@@ -0,0 +1 @@
+export default class Gem {}

src/classes/game/Grid.ts

@@ -38,7 +38,6 @@ export class Cell extends GameObject {
             zIndex: 99,
             interactive: true,
         });
-        // ? TODO: make range preview 1 global graphics obj, child. fix
 
         this.g = new PIXI.Graphics({
             zIndex: 5,
@@ -83,6 +82,8 @@ export class Cell extends GameObject {
     }
     public OpenSelectedTowerPanel() {
         if (this.hasTowerPlaced) {
+            const tower = Engine.TowerManager.GetTowerByRowAndCol(this.row, this.column);
+            Engine.GameScene.towerPanel.Show(tower);
         }
     }
     public checkIfCantPlace() {

src/classes/game/Tower.ts

@@ -5,28 +5,13 @@ import { TowerDefinition } from '../Definitions';
 import { Cell } from './Grid';
 import { TowerBehaviours } from './TowerManager';
 import Projectile, { calculateAngleToPoint } from './Projectile';
-import GameAssets from '../Assets';
 import Creep from './Creep';
+import Gem from './Gem';
 
 function distance(x1, y1, x2, y2) {
     return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
 }
 
-export type TowerInstance = {
-    row: number;
-    column: number;
-    sprite: PIXI.Sprite;
-    projectiles: Array<any>;
-    baseDamage: number;
-    damage: number;
-    cooldown: number;
-    ticksToFireAt: number;
-    slottedGems: Array<any>;
-    cost: number;
-    baseRange: number;
-    range: number;
-};
-
 export enum TowerEvents {
     TowerPlacedEvent = 'towerPlacedEvent',
     TowerSoldEvent = 'towerSoldEvent',
@@ -35,9 +20,11 @@ export enum TowerEvents {
 export class Tower extends GameObject {
     public row: number;
     public column: number;
+    public definition: TowerDefinition;
+    public slottedGems: Array<Gem>;
+    public damageDealt: number = 0;
     private projectiles: Projectile[] = [];
     private behaviour: string;
-    private definition: TowerDefinition;
     private sprite: PIXI.Sprite;
     private ticksUntilNextShot: number;
     private graphics: PIXI.Graphics = new PIXI.Graphics();
@@ -51,7 +38,6 @@ export class Tower extends GameObject {
         this.definition = definition;
         this.ticksUntilNextShot = 0;
         this.parent = Engine.Grid.getCellByRowAndCol(row, column);
-        console.log(texture);
         this.sprite = new PIXI.Sprite({
             texture: texture,
             height: Engine.GridCellSize,
@@ -97,6 +83,7 @@ export class Tower extends GameObject {
     public update(elapsedMS: any): void {
         this.projectiles.forEach((proj) => {
             if (proj.deleteMe) {
+                this.damageDealt += this.definition.stats.damage;
                 this.projectiles.splice(this.projectiles.indexOf(proj), 1);
                 proj = null;
             } else proj.update(elapsedMS);

src/classes/game/TowerManager.ts

@@ -71,7 +71,7 @@ export default class TowerManager {
                     'TowerManager.selectedTower is null when trying to place tower.',
                     'danger'
                 );
-                throw console.warn('TowerManager.selectedTower is null when trying to place tower.');
+                return console.warn('TowerManager.selectedTower is null when trying to place tower.');
             }
             this.PlaceTower(this.selectedTower, row, column, this.selectedTower.behaviour);
         }

src/classes/gui/SelectedTowerPanel.ts

@@ -1,32 +0,0 @@
-import * as PIXI from 'pixi.js';
-import GuiObject from '../GuiObject';
-import GameAssets from '../Assets';
-import { Engine } from '../Bastion';
-
-// ! TODO NEXT!
-
-export default class SelectedTowerPanel extends GuiObject {
-    private bounds: PIXI.Rectangle;
-    private towerPanel: PIXI.NineSliceSprite;
-
-    constructor(bounds: PIXI.Rectangle) {
-        super(false);
-        this.bounds = bounds;
-        this.container.x = this.bounds.x;
-        this.container.y = this.bounds.y;
-        this.towerPanel = new PIXI.NineSliceSprite({
-            texture: GameAssets.FrameTowerTab,
-            leftWidth: 1000,
-            topHeight: 1000,
-            rightWidth: 1000,
-            bottomHeight: 1000,
-        });
-        this.towerPanel.x = -300;
-        this.towerPanel.y = -300;
-        this.towerPanel.width = this.bounds.width;
-        this.towerPanel.height = this.bounds.height;
-
-        this.container.addChild(this.towerPanel);
-        Engine.GameMaster.currentScene.stage.addChild(this.container);
-    }
-}

src/classes/gui/TowerPanel.ts

@@ -0,0 +1,97 @@
+import * as PIXI from 'pixi.js';
+import GuiObject from '../GuiObject';
+import GameAssets from '../Assets';
+import { Engine } from '../Bastion';
+import GameUIConstants from '../GameUIConstants';
+import Button, { ButtonTexture } from './Button';
+import { Tower } from '../game/Tower';
+
+export default class TowerPanel extends GuiObject {
+    private bounds: PIXI.Rectangle;
+    private towerPanel: PIXI.NineSliceSprite;
+    private closeBtn: Button;
+    public isShown: boolean = false;
+    titleText: PIXI.Text;
+
+    constructor(bounds: PIXI.Rectangle) {
+        super(false);
+        this.bounds = bounds;
+        this.towerPanel = new PIXI.NineSliceSprite({
+            texture: GameAssets.Frame03Texture,
+            leftWidth: 100,
+            topHeight: 100,
+            rightWidth: 100,
+            bottomHeight: 100,
+        });
+        this.towerPanel.width = this.bounds.width;
+        this.towerPanel.height = this.bounds.height - this.bounds.height / 3.5;
+        this.closeBtn = new Button(new PIXI.Rectangle(-20, -20, 60, 60), '', ButtonTexture.Button01, true);
+        this.closeBtn.container.removeFromParent();
+        // Added custom button logic to still keep all the regular events for the button, just have an icon instead of text.
+        // TODO: maybe make this better? add like a seperate class for icon buttons or smth
+        this.closeBtn.CustomButtonLogic = () => {
+            this.closeBtn.buttonIcon = new PIXI.Sprite({
+                texture: GameAssets.XIconTexture,
+                x: this.closeBtn.container.width / 2,
+                y: this.closeBtn.container.height / 2,
+                scale: 0.2,
+            });
+            this.closeBtn.buttonIcon.anchor.set(0.5, 0.5);
+            this.closeBtn.container.addChild(this.closeBtn.buttonIcon);
+        };
+        this.closeBtn.onClick = () => {
+            this.Hide();
+        };
+        this.Hide();
+        this.closeBtn.CustomButtonLogic();
+        this.container.y = Engine.app.canvas.height / 2 - Engine.app.canvas.height / 2.7;
+        this.container.addChild(this.towerPanel);
+        this.container.addChild(this.closeBtn.container);
+        Engine.GameMaster.currentScene.stage.addChild(this.container);
+
+        this.titleText = new PIXI.Text({
+            x: this.bounds.width / 3,
+            y: 50,
+            zIndex: 5,
+            style: new PIXI.TextStyle({
+                fill: 0xffffff,
+                stroke: {
+                    color: 0x000000,
+                    width: 2,
+                },
+            }),
+        });
+        this.titleText.anchor.set(0.5, 0);
+        this.container.addChild(this.titleText);
+    }
+    public Show(tower: Tower) {
+        let mouseX = Engine.MouseX;
+        this.isShown = true;
+        this.SetContent(tower);
+        if (mouseX < 900) {
+            this.ShowRight();
+        } else {
+            this.ShowLeft();
+        }
+    }
+    private SetContent(tower: Tower) {
+        this.titleText.text = tower.definition.name;
+    }
+    private ShowLeft() {
+        this.towerPanel.x = -100;
+        this.container.x = 0;
+        this.container.alpha = 1;
+        this.closeBtn.container.x = this.container.width - 150;
+    }
+    private ShowRight() {
+        this.towerPanel.x = -10;
+        this.container.x = GameUIConstants.SidebarRect.x - 210;
+        this.closeBtn.container.x = -20;
+        this.container.alpha = 1;
+    }
+    public Hide() {
+        this.isShown = false;
+        this.container.alpha = 0;
+        this.container.x = GameUIConstants.SidebarRect.x + 10;
+    }
+}

src/classes/gui/TowerTab.ts

@@ -76,6 +76,7 @@ class TowerButton extends GuiObject {
             Engine.GameScene.sidebar.towerTab.resetTint();
             Engine.TowerManager.ResetChooseTower();
         }
+        Engine.GameScene.towerPanel.Hide();
         Engine.GameScene.tooltip.Hide();
         if (this.frameSprite.tint == 0x00ff00) {
             this.frameSprite.tint = 0xffffff;

src/scenes/Game.ts

@@ -13,6 +13,7 @@ import TowerManager from '../classes/game/TowerManager';
 import { MissionPickerScene } from './MissionPicker';
 import GameUIConstants from '../classes/GameUIConstants';
 import Tooltip from '../classes/gui/Tooltip';
+import TowerPanel from '../classes/gui/TowerPanel';
 
 enum RoundMode {
     Purchase = 0,
@@ -29,6 +30,7 @@ export class GameScene extends Scene {
     public changeRoundButton: Button;
     public sidebar: Sidebar;
     public tooltip: Tooltip;
+    public towerPanel: TowerPanel;
     private currentRound: number = 0;
     private isWaveManagerFinished: boolean = false;
     private playerWon: boolean = false;
@@ -72,6 +74,7 @@ export class GameScene extends Scene {
         this.events.on(CreepEvents.Died, (playerAward, creepThatDied) => {
             this.MissionStats.earnGold(playerAward);
         });
+        this.towerPanel = new TowerPanel(GameUIConstants.SidebarRect);
         this.sidebar = new Sidebar(GameUIConstants.SidebarRect);
         this.tooltip = new Tooltip(new PIXI.Rectangle(0, 0, 350, 160));
         this.changeRoundButton = new Button(GameUIConstants.ChangeRoundButtonRect, '', ButtonTexture.Button01, true);