add another "tower", totally not a reskin :)

public/assets/json/Towers.json

@@ -14,5 +14,21 @@
             "cost": 100,
             "range": 3
         }
+    },
+    {
+        "name": "Circle Tower",
+        "behaviour": "BasicTowerBehaviour",
+        "sprite": "circle_tower",
+        "texture": null,
+        "projectileTextures": [],
+        "projectileTexturesArrayLength": 4,
+        "description": "If you feel a little circular.",
+        "stats": {
+            "damage": 6,
+            "cooldown": 180,
+            "gemSlotsAmount": 3,
+            "cost": 125,
+            "range": 3
+        }
     }
 ]

src/classes/Assets.ts

@@ -22,10 +22,10 @@ export default class GameAssets {
     public static PauseIconTexture: PIXI.Texture;
     public static ExclamationIconTexture: PIXI.Texture;
     public static HomeIconTexture: PIXI.Texture;
+    public static HammerIconTexture: PIXI.Texture;
 
     public static Missions: MissionDefinition[];
     public static MissionBackgrounds: PIXI.Texture[] = [];
-    public static TowerSprites: PIXI.Texture[] = [];
     public static Towers: TowerDefinition[];
     public static Creeps: CreepDefinition[];
 
@@ -87,6 +87,7 @@ export default class GameAssets {
             this.Load('/assets/gui/icons/pause.png').then((texture) => (this.PauseIconTexture = texture)),
             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.LoadMissions(),
             this.LoadTowers(),
             this.LoadCreeps(),
@@ -120,21 +121,13 @@ export default class GameAssets {
         const res = await fetch('/assets/json/Towers.json');
         const towers = await res.json();
         this.Towers = towers;
-        console.log(this.Towers);
         for (let idx = 0; idx < this.Towers.length; idx++) {
             const tower = this.Towers[idx];
             for (let i = 0; i < tower.projectileTexturesArrayLength; i++) {
                 const texture = await this.Load(`/assets/projectiles/${tower.sprite}/${i}.png`);
                 tower.projectileTextures[i] = texture;
-                console.log(tower.projectileTextures);
             }
         }
-        towers.forEach(async (tower) => {
-            let index = this.TowerSprites.length - 1;
-            if (index == -1) index = 0;
-            this.TowerSprites[index] = await this.Load(`/assets/towers/${tower.sprite}.png`);
-            tower.texture = this.TowerSprites[index];
-        });
     }
 
     private static async LoadMission(missionUrl: string) {

src/classes/game/Grid.ts

@@ -56,9 +56,7 @@ export class Cell extends GameObject {
         });
         Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (_, row, col) => {
             if (row == this.row && col == this.column) {
-                console.log('SETTING');
-                this.setHasTowerPlaced(true);
-                console.log(this);
+                this.hasTowerPlaced = true;
                 this.rangePreview.clear();
             }
         });
@@ -68,9 +66,17 @@ export class Cell extends GameObject {
             }
         });
     }
-    private setHasTowerPlaced(v) {
-        console.log(' CALLLEd');
-        this.hasTowerPlaced = v;
+    public showRangePreview(invalid, range) {
+        let color = 0xffffff;
+        if (invalid) color = 0xff0000;
+        this.rangePreview.clear();
+        this.rangePreview.circle(Engine.GridCellSize / 2, Engine.GridCellSize / 2, range * Engine.GridCellSize);
+        this.rangePreview.fill({ color: color, alpha: 0.3 });
+    }
+    public checkIfCantPlace() {
+        return (
+            this.hasTowerPlaced || this.isPath || this.type == TerrainType.Path || this.type == TerrainType.Restricted
+        );
     }
     public gDraw() {
         this.g = new PIXI.Graphics({

src/classes/game/Projectile.ts

@@ -24,7 +24,7 @@ export default class Projectile extends GameObject {
         this.y = y;
         this.damage = damage;
         this.sprite = new PIXI.AnimatedSprite({ textures: textures, scale: 0.25, rotation: angle });
-        this.sprite.anchor.set(0.5);
+        this.sprite.anchor.set(0.5, 0.5);
         this.sprite.play();
         this.container.x = this.x;
         this.container.y = this.y;

src/classes/game/Tower.ts

@@ -51,6 +51,7 @@ 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,
@@ -63,25 +64,16 @@ export class Tower extends GameObject {
         this.parent.clickDetector.on('pointerenter', this.onParentCellEnter);
         this.parent.clickDetector.on('pointerleave', this.onParentCellLeave);
         Engine.GameMaster.currentScene.stage.addChild(this.graphics);
-        //this.showRangeDisplay();
     }
 
     private onParentCellEnter = (e) => {
-        this.showRangeDisplay();
+        if (!Engine.TowerManager.isPlacingTower) this.parent.showRangePreview(false, this.definition.stats.range);
     };
 
     private onParentCellLeave = (e) => {
         this.graphics.clear();
     };
 
-    public showRangeDisplay() {
-        this.graphics.circle(
-            this.column * Engine.GridCellSize + Engine.GridCellSize / 2,
-            this.row * Engine.GridCellSize + Engine.GridCellSize / 2,
-            this.definition.stats.range * Engine.GridCellSize
-        );
-        this.graphics.fill({ color: 0xffffff, alpha: 0.5 });
-    }
     public GetCreepsInRange() {
         let creeps = Engine.Grid.creeps;
         return creeps.filter((creep) => {

src/classes/game/TowerManager.ts

@@ -24,24 +24,14 @@ export default class TowerManager {
     constructor() {
         Engine.TowerManager = this;
         Engine.GameScene.events.on(GridEvents.CellMouseOver, (cell: Cell) => {
-            //console.log(`${cell.column}x${cell.row}, ${cell.type}, ${this.isPlacingTower}`);
             if (this.isPlacingTower) {
-                let cantPlace =
-                    this.GetTowerByRowAndCol(cell.row, cell.column) ||
-                    cell.hasTowerPlaced ||
-                    cell.isPath ||
-                    cell.type == TerrainType.Path ||
-                    cell.type == TerrainType.Restricted;
-                cell.rangePreview.circle(
-                    Engine.GridCellSize / 2,
-                    Engine.GridCellSize / 2,
-                    this.selectedTower.stats.range * Engine.GridCellSize
-                );
+                let cantPlace = cell.checkIfCantPlace();
                 if (cantPlace) {
-                    cell.rangePreview.fill({ color: 0xff0000, alpha: 0.4 });
+                    cell.rangePreview.clear();
+                    cell.showRangePreview(true, this.selectedTower.stats.range);
                     this.previewSprite.tint = 0xff0000;
                 } else {
-                    cell.rangePreview.fill({ color: 0xffffff, alpha: 0.4 });
+                    cell.showRangePreview(false, this.selectedTower.stats.range);
                     this.previewSprite.tint = 0xffffff;
                 }
                 this.previewSprite.x = cell.column * Engine.GridCellSize;
@@ -89,11 +79,7 @@ export default class TowerManager {
         return returnTower;
     }
     public PlaceTower(definition: TowerDefinition, row, column, behaviour: string, ignoreCost?) {
-        let idx = 0;
-        GameAssets.Towers.forEach((item, index) => {
-            if (item.sprite == definition.sprite) idx = index;
-        });
-        const sprite = GameAssets.TowerSprites[idx];
+        const sprite = this.selectedTower.texture;
         if (!Engine.GameScene.MissionStats.hasEnoughGold(definition.stats.cost) && !ignoreCost)
             return Engine.NotificationManager.Notify('Not enough gold.', 'warn');
         if (

src/classes/gui/TowerTab.ts

@@ -8,8 +8,9 @@ class TowerButton extends GuiObject {
     private frameSprite: PIXI.NineSliceSprite;
     private background: PIXI.Sprite;
     private towerName: string;
+    private iconSprite: PIXI.Sprite;
     private i: number = 0;
-    constructor(index: number, row, width, height, parent: PIXI.Container, backgroundTexture, towerName) {
+    constructor(index: number, row, width, height, parent: PIXI.Container, backgroundTexture, towerName, iconTexture) {
         if (index > 3 || row > 2 || index < 0 || row < 0) throw 'Index/row out of bounds for TowerButton.';
         super(true);
         this.towerName = towerName;
@@ -18,10 +19,18 @@ class TowerButton extends GuiObject {
         this.background = new PIXI.Sprite({
             texture: backgroundTexture,
         });
+        this.iconSprite = new PIXI.Sprite({
+            texture: iconTexture,
+        });
         this.background.width = width;
         this.background.height = height;
+        this.iconSprite.x = width / 2;
+        this.iconSprite.y = height / 2;
+        this.iconSprite.width = width / 2;
+        this.iconSprite.height = height / 2;
+        this.iconSprite.anchor.set(0.5, 0.5);
         this.container.addChild(this.background);
-
+        this.container.addChild(this.iconSprite);
         this.frameSprite = new PIXI.NineSliceSprite({
             texture: GameAssets.Frame02Texture,
             leftWidth: 100,
@@ -76,7 +85,25 @@ export default class TowerTab extends GuiObject {
         this.towerTabSprite.height = this.bounds.height;
         this.container.addChild(this.towerTabSprite);
 
-        new TowerButton(0, 0, 70, 70, this.container, GameAssets.RedBackground, 'Basic Tower');
-        new TowerButton(0, 1, 70, 70, this.container, GameAssets.GreenBackground, 'Basic Tower');
+        new TowerButton(
+            0,
+            0,
+            70,
+            70,
+            this.container,
+            GameAssets.RedBackground,
+            'Basic Tower',
+            GameAssets.HammerIconTexture
+        );
+        new TowerButton(
+            0,
+            1,
+            70,
+            70,
+            this.container,
+            GameAssets.GreenBackground,
+            'Circle Tower',
+            GameAssets.HomeIconTexture
+        );
     }
 }