From d75ea2427c8ad204a4c035ea0e266abf291ba137 Mon Sep 17 00:00:00 2001
From: koneko <67551503+koneko@users.noreply.github.com>
Date: Sat, 18 Jan 2025 14:01:18 +0100
Subject: [PATCH] render range preview above cells

---
 src/classes/game/Grid.ts         | 26 ++++++++++++++++----------
 src/classes/game/TowerManager.ts |  1 -
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/classes/game/Grid.ts b/src/classes/game/Grid.ts
index 5b3da79..377988e 100644
--- a/src/classes/game/Grid.ts
+++ b/src/classes/game/Grid.ts
@@ -18,7 +18,6 @@ export class Cell extends GameObject {
     public g: PIXI.Graphics;
     public hasTowerPlaced: boolean = false;
     public clickDetector: PIXI.Graphics;
-    public rangePreview: PIXI.Graphics;
 
     constructor(type: TerrainType, row: number, column: number, isPath: boolean) {
         super();
@@ -39,9 +38,7 @@ export class Cell extends GameObject {
             interactive: true,
         });
         // ? TODO: make range preview 1 global graphics obj, child. fix
-        this.rangePreview = new PIXI.Graphics({
-            zIndex: 10,
-        });
+
         this.g = new PIXI.Graphics({
             zIndex: 5,
         });
@@ -49,7 +46,6 @@ export class Cell extends GameObject {
         this.clickDetector.fill({ color: 0xff0000, alpha: 0 });
         this.container.addChild(this.clickDetector);
         this.container.addChild(this.g);
-        this.container.addChild(this.rangePreview);
         this.clickDetector.on('pointerup', (e) => {
             Engine.Grid.onGridCellClicked(row, column);
         });
@@ -57,12 +53,12 @@ export class Cell extends GameObject {
             Engine.GameScene.events.emit(GridEvents.CellMouseOver, this);
         });
         this.clickDetector.on('pointerleave', (e) => {
-            this.rangePreview.clear();
+            Engine.Grid.rangePreview.clear();
         });
         Engine.GameScene.events.on(TowerEvents.TowerPlacedEvent, (_, row, col) => {
             if (row == this.row && col == this.column) {
                 this.hasTowerPlaced = true;
-                this.rangePreview.clear();
+                Engine.Grid.rangePreview.clear();
             }
         });
         Engine.GameScene.events.on(TowerEvents.TowerSoldEvent, (_, row, col) => {
@@ -74,9 +70,13 @@ export class Cell extends GameObject {
     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 });
+        Engine.Grid.rangePreview.clear();
+        Engine.Grid.rangePreview.circle(
+            this.column * Engine.GridCellSize + Engine.GridCellSize / 2,
+            this.row * Engine.GridCellSize + Engine.GridCellSize / 2,
+            range * Engine.GridCellSize
+        );
+        Engine.Grid.rangePreview.fill({ color: color, alpha: 0.3 });
     }
     public checkIfCantPlace() {
         return (
@@ -104,6 +104,7 @@ export class Cell extends GameObject {
 export class Grid extends GameObject {
     private gameMap: GameMapDefinition;
     private cells: Cell[] = [];
+    public rangePreview: PIXI.Graphics;
     public creeps: Creep[] = [];
     public gridShown: boolean = false;
 
@@ -115,6 +116,7 @@ export class Grid extends GameObject {
         this.bb.y = 0;
         this.bb.width = Engine.GridCellSize * Engine.GridColumns;
         this.bb.height = Engine.GridCellSize * Engine.GridRows;
+
         Engine.GameMaster.currentScene.stage.addChild(this.container);
 
         let background = new PIXI.Sprite(GameAssets.MissionBackgrounds[missionIndex]);
@@ -130,6 +132,10 @@ export class Grid extends GameObject {
                 this.cells.push(cell);
             }
         }
+        this.rangePreview = new PIXI.Graphics({
+            zIndex: 10,
+        });
+        this.container.addChild(this.rangePreview);
     }
     public toggleGrid(force?: 'hide' | 'show') {
         this.cells.forEach((cell) => {
diff --git a/src/classes/game/TowerManager.ts b/src/classes/game/TowerManager.ts
index ea19e29..c5f2d29 100644
--- a/src/classes/game/TowerManager.ts
+++ b/src/classes/game/TowerManager.ts
@@ -27,7 +27,6 @@ export default class TowerManager {
             if (this.isPlacingTower) {
                 let cantPlace = cell.checkIfCantPlace();
                 if (cantPlace) {
-                    cell.rangePreview.clear();
                     cell.showRangePreview(true, this.selectedTower.stats.range);
                     this.previewSprite.tint = 0xff0000;
                 } else {