Change crosshair targeting sprite

src/scenes/systems/TargetingSystem.ts

@@ -2,6 +2,7 @@ import Phaser from "phaser";
 import type { World, CombatantActor, Item, Vec2, EntityId } from "../../core/types";
 import { TILE_SIZE } from "../../core/constants";
 import { GAME_CONFIG } from "../../core/config/GameConfig";
+import { UI_CONFIG } from "../../core/config/ui";
 import { traceProjectile, getClosestVisibleEnemy } from "../../engine/gameplay/CombatLogic";
 import type { EntityManager } from "../../engine/EntityManager";
 
@@ -11,12 +12,20 @@ import type { EntityManager } from "../../engine/EntityManager";
  */
 export class TargetingSystem {
   private graphics: Phaser.GameObjects.Graphics;
+  private crosshairSprite: Phaser.GameObjects.Sprite;
   private active: boolean = false;
   private targetingItemId: string | null = null;
   private cursor: Vec2 | null = null;
 
-  constructor(graphics: Phaser.GameObjects.Graphics) {
-    this.graphics = graphics;
+  constructor(scene: Phaser.Scene) {
+    this.graphics = scene.add.graphics();
+    this.graphics.setDepth(2000); // High depth to draw over world
+    
+    // Create crosshair sprite but hide it initially
+    this.crosshairSprite = scene.add.sprite(0, 0, UI_CONFIG.targeting.crosshair.textureKey, UI_CONFIG.targeting.crosshair.frame);
+    this.crosshairSprite.setDepth(2001); // On top of line
+    this.crosshairSprite.setVisible(false);
+    this.crosshairSprite.setAlpha(0.8);
   }
 
   /**
@@ -27,7 +36,8 @@ export class TargetingSystem {
     playerPos: Vec2,
     world: World,
     seenArray: Uint8Array,
-    worldWidth: number
+    worldWidth: number,
+    initialTargetPos?: Vec2
   ): void {
     this.targetingItemId = itemId;
     this.active = true;
@@ -37,11 +47,14 @@ export class TargetingSystem {
 
     if (closest) {
       this.cursor = closest;
+    } else if (initialTargetPos) {
+      this.cursor = { ...initialTargetPos };
     } else {
-      this.cursor = null;
+      // Default to existing cursor or player pos
+      this.cursor = this.cursor ? { ...this.cursor } : { ...playerPos };
     }
 
-    this.drawLine(playerPos);
+    this.updateVisuals(playerPos);
     console.log("Targeting Mode: ON");
   }
 
@@ -52,7 +65,7 @@ export class TargetingSystem {
     if (!this.active) return;
 
     this.cursor = { x: worldPos.x, y: worldPos.y };
-    this.drawLine(playerPos);
+    this.updateVisuals(playerPos);
   }
 
   /**
@@ -110,6 +123,7 @@ export class TargetingSystem {
     this.targetingItemId = null;
     this.cursor = null;
     this.graphics.clear();
+    this.crosshairSprite.setVisible(false);
     console.log("Targeting cancelled");
   }
 
@@ -135,15 +149,17 @@ export class TargetingSystem {
   }
 
   /**
-   * Draw targeting line from player to cursor
+   * Draw targeting line and update crosshair
    */
-  private drawLine(playerPos: Vec2): void {
+  private updateVisuals(playerPos: Vec2): void {
     if (!this.cursor) {
       this.graphics.clear();
+      this.crosshairSprite.setVisible(false);
       return;
     }
 
     this.graphics.clear();
+    this.crosshairSprite.setVisible(true);
 
     const startX = playerPos.x * TILE_SIZE + TILE_SIZE / 2;
     const startY = playerPos.y * TILE_SIZE + TILE_SIZE / 2;
@@ -151,18 +167,15 @@ export class TargetingSystem {
     const endX = this.cursor.x * TILE_SIZE + TILE_SIZE / 2;
     const endY = this.cursor.y * TILE_SIZE + TILE_SIZE / 2;
 
+    // Update crosshair position
+    this.crosshairSprite.setPosition(endX, endY);
+
+    // Draw Line
     this.graphics.lineStyle(
       GAME_CONFIG.ui.targetingLineWidth,
       GAME_CONFIG.ui.targetingLineColor,
       GAME_CONFIG.ui.targetingLineAlpha
     );
     this.graphics.lineBetween(startX, startY, endX, endY);
-
-    this.graphics.strokeRect(
-      this.cursor.x * TILE_SIZE,
-      this.cursor.y * TILE_SIZE,
-      TILE_SIZE,
-      TILE_SIZE
-    );
   }
 }