Refactor tower system and UI improvements

- Refactored tower system into modular architecture
- Fixed sniper tower visual upgrades
- Fixed UI menu positioning to stay within screen bounds
- Fixed upgrade button triggering tower placement menu
- Improved event handling for UI interactions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

.gitignore

@@ -0,0 +1 @@
+src/assets/music.mp3

src/config/gameConfig.js

@@ -4,6 +4,14 @@ import * as THREE from "three";
 export const INITIAL_MONEY = 200;
 export const INITIAL_LIVES = 10;
 
+// Audio settings
+export const AUDIO_CONFIG = {
+  musicVolume: 0.4, // Background music volume (0-1)
+  effectsVolume: 0.3, // Sound effects volume (0-1)
+  musicEnabled: true, // Enable/disable background music
+  effectsEnabled: true, // Enable/disable sound effects
+};
+
 // Tower settings
 // Define multiple tower types, keeping the original as "basic"
 export const TOWER_TYPES = {

src/entities/Tower.js

@@ -1,1140 +1 @@
-import * as THREE from "three";
-import { Projectile } from "./Projectile.js";
-import {
-  UPGRADE_MAX_LEVEL,
-  UPGRADE_START_COST,
-  UPGRADE_COST_SCALE,
-  UPGRADE_RANGE_SCALE,
-  UPGRADE_RATE_SCALE,
-  UPGRADE_DAMAGE_SCALE,
-  SELL_REFUND_RATE,
-} from "../config/gameConfig.js";
-
-// Visual-only tuning: per-level head height increment starting at level 2
-// Values are in world units; no gameplay effect intended.
-const VISUAL_TOP_INCREMENT = 0.08; // +0.08 per level (from level 2)
-const VISUAL_TOP_CAP = 0.4; // cap total extra height
-// Electric-only: small vertical lift per upgrade level for the ball
-const ELECTRIC_BALL_LIFT_PER_LEVEL = 0.08; // gentle raise per level
-const ELECTRIC_BALL_LIFT_CAP = 0.35; // cap total lift
-
-export class Tower {
-  constructor(pos, baseConfig, scene) {
-    this.position = pos.clone();
-    this.fireCooldown = 0;
-    this.scene = scene;
-
-    // type/config
-    this.type = baseConfig.type || "basic";
-    this.projectileEffect = baseConfig.projectileEffect || null;
-
-    // Slow tower per-level slow settings (multiplier lower = stronger)
-    // Applies only when this.type === "slow"
-    this.slowMultByLevel = baseConfig.slowMultByLevel || [0.75, 0.7, 0.65];
-    this.slowDuration = baseConfig.slowDuration || 1.5; // seconds
-
-    // Electric-specific fields
-    this.isElectric = this.type === "electric";
-    if (this.isElectric) {
-      // Configurable parameters for continuous DOT electric tower
-      this.maxTargets = baseConfig.maxTargets ?? 4;
-      this.damagePerSecond = baseConfig.damagePerSecond ?? 1;
-      this.visualRefreshRate = baseConfig.visualRefreshRate ?? 60; // Hz
-      this.visualRefreshInterval = 1 / Math.max(1, this.visualRefreshRate);
-      this.arcFadeDuration = baseConfig.arcFadeDuration ?? 0.2; // seconds
-      // Back-compat for any code expecting arcDurationMs (legacy fade driver)
-      this.arcDurationMs = Math.max(
-        1,
-        baseConfig.arcDurationMs ?? this.arcFadeDuration * 1000
-      );
-
-      this.arcStyle = {
-        color: baseConfig.arc?.color ?? 0x9ad6ff,
-        coreColor: baseConfig.arc?.coreColor ?? 0xe6fbff,
-        thickness: baseConfig.arc?.thickness ?? 2,
-        jitter: baseConfig.arc?.jitter ?? 0.25,
-        segments: baseConfig.arc?.segments ?? 10,
-      };
-
-      // Targeting priority explicitly configurable for electric
-      this.targetPriority =
-        baseConfig.targetPriorityMode ||
-        baseConfig.targetPriority ||
-        "closestToExit";
-
-      // Runtime state for continuous tracking/DOT and visuals
-      this.trackedTargets = new Map(); // enemy -> { arc, fadeInTimer, visible, lastEnd }
-      this.arcPool = []; // pooled { lineOuter, lineInner }
-      this._visualAccumulator = 0; // accumulate dt for throttled visual refresh
-
-      // Fade-out scheduler for pooled arcs (reuses legacy fade driver)
-      this.activeArcs = [];
-    }
-
-    // upgradeable stats
-    this.level = 1;
-    this.baseRange = baseConfig.range;
-    this.baseRate = baseConfig.fireRate;
-    this.baseDamage = baseConfig.damage;
-    this.range = this.baseRange;
-    this.rate = this.baseRate;
-    this.damage = this.baseDamage;
-
-    // Initialize per-level slow state for slow tower
-    if (this.type === "slow") {
-      const idx = Math.max(
-        0,
-        Math.min(this.slowMultByLevel.length - 1, this.level - 1)
-      );
-      // Create or extend projectileEffect to include slow at current level
-      const effect = this.projectileEffect || {};
-      this.projectileEffect = {
-        ...effect,
-        type: "slow",
-        mult: this.slowMultByLevel[idx],
-        duration: this.slowDuration,
-      };
-    }
-    this.nextUpgradeCost = UPGRADE_START_COST;
-    this.totalSpent = baseConfig.cost; // includes base cost for sell calculations
-
-    // Sniper-specific fields
-    this.isSniper = this.type === "sniper";
-    this.aimTime = baseConfig.aimTime ?? 0; // seconds
-    this.sniperProjectileSpeed = baseConfig.projectileSpeed ?? null;
-    this.cancelThreshold = baseConfig.cancelThreshold ?? this.range;
-    this.pierceChance = baseConfig.pierceChance ?? 0;
-    this.targetPriority = baseConfig.targetPriority || "nearest";
-    this.aiming = false;
-    this.aimingTimer = 0;
-    this.aimedTarget = null;
-    this.laserLine = null;
-
-    // Mesh
-    const baseGeo = new THREE.CylinderGeometry(0.9, 1.2, 1, 12);
-    const baseMat = new THREE.MeshStandardMaterial({
-      // Pink base for slow tower; steel-ish for sniper; blue for basic
-      color:
-        this.type === "slow" ? 0xff69b4 : this.isSniper ? 0x6d6f73 : 0x3a97ff,
-      metalness: this.isSniper ? 0.5 : 0.2,
-      roughness: this.isSniper ? 0.35 : 0.6,
-    });
-    const base = new THREE.Mesh(baseGeo, baseMat);
-    base.castShadow = true;
-    base.receiveShadow = true;
-    base.position.copy(this.position);
-
-    // Head geometry by type
-    let headGeo;
-    if (this.type === "slow") {
-      headGeo = new THREE.SphereGeometry(
-        0.55,
-        24,
-        16,
-        0,
-        Math.PI * 2,
-        Math.PI / 2,
-        Math.PI / 2
-      );
-    } else if (this.isSniper) {
-      // Triangular/pyramidal head: cone with 3 radial segments
-      headGeo = new THREE.ConeGeometry(0.7, 0.9, 3);
-    } else if (this.isElectric) {
-      // Electric aesthetic: ball held by a bar over the same base
-      // Build a thin vertical bar and a spherical "ball" emitter on top
-      headGeo = new THREE.SphereGeometry(0.45, 20, 16);
-    } else {
-      headGeo = new THREE.BoxGeometry(0.8, 0.4, 0.8);
-    }
-
-    const headMat = new THREE.MeshStandardMaterial({
-      color:
-        this.type === "slow"
-          ? 0xffb6c1
-          : this.isSniper
-          ? 0xb0bec5
-          : this.isElectric
-          ? 0x9ad6ff // brighter blue for electric ball
-          : 0x90caf9,
-      metalness: this.type === "slow" ? 0.15 : this.isSniper ? 0.35 : 0.18,
-      roughness: this.type === "slow" ? 0.35 : this.isSniper ? 0.4 : 0.45,
-      emissive: this.isSniper
-        ? 0x330000
-        : this.type === "slow"
-        ? 0x4a0a2a
-        : this.isElectric
-        ? 0x153a6b
-        : 0x000000,
-      emissiveIntensity: this.isSniper
-        ? 0.4
-        : this.type === "slow"
-        ? 0.4
-        : this.isElectric
-        ? 0.85
-        : 0.6,
-      side: THREE.DoubleSide,
-    });
-
-    // Assemble head group so electric can have bar + ball
-    const head = new THREE.Mesh(headGeo, headMat);
-    head.castShadow = true;
-
-    if (this.type === "slow") {
-      head.position.set(0, 0.8, 0);
-      base.add(head);
-    } else if (this.isSniper) {
-      head.position.set(0, 0.95, 0);
-      head.rotation.x = 0; // point up; we will yaw the base as usual
-      base.add(head);
-    } else if (this.isElectric) {
-      // Create a mini-assembly: a thin bar and the ball on top
-      const headGroup = new THREE.Group();
-
-      // Bar: thin cylinder rising from base toward the ball
-      const barHeight = 0.9;
-      const barGeo = new THREE.CylinderGeometry(0.08, 0.08, barHeight, 16);
-      const barMat = new THREE.MeshStandardMaterial({
-        color: 0x1b1f24,
-        metalness: 0.4,
-        roughness: 0.6,
-      });
-      const bar = new THREE.Mesh(barGeo, barMat);
-      bar.castShadow = true;
-      bar.receiveShadow = true;
-      // Position: center the bar; cylinder is centered, so raise by half height
-      bar.position.set(0, 0.5 + barHeight * 0.5, 0);
-
-      // Ball: sit atop the bar (baseline; apply per-level lift later)
-      head.position.set(0, 0.5 + barHeight + 0.25, 0); // radius ~0.45; raise slightly
-      // Slight scale for a rounder silhouette
-      head.scale.set(1.0, 1.0, 1.0);
-
-      headGroup.add(bar);
-      headGroup.add(head);
-
-      // Optionally add a subtle glow ring under the ball for readability
-      const haloGeo = new THREE.TorusGeometry(0.38, 0.02, 8, 24);
-      const haloMat = new THREE.MeshStandardMaterial({
-        color: 0x80e1ff,
-        emissive: 0x206a99,
-        emissiveIntensity: 0.4,
-        metalness: 0.2,
-        roughness: 0.6,
-      });
-      const halo = new THREE.Mesh(haloGeo, haloMat);
-      halo.rotation.x = Math.PI / 2;
-      halo.position.set(0, head.position.y - 0.22, 0);
-      halo.castShadow = false;
-      halo.receiveShadow = false;
-      headGroup.add(halo);
-
-      // Attach to base
-      base.add(headGroup);
-
-      // For electric, define the emitter (headTopY) at ball center for better arc spawn
-      // Keep original headTopY logic but update below after we add to base.
-    } else {
-      head.position.set(0, 0.8, 0);
-      base.add(head);
-    }
-
-    // Range ring
-    const ringGeo = new THREE.RingGeometry(this.range - 0.05, this.range, 48);
-    const ringMat = new THREE.MeshBasicMaterial({
-      // Improve visibility; give sniper a high-contrast cyan ring
-      color:
-        this.type === "slow" ? 0xff69b4 : this.isSniper ? 0x00ffff : 0x3a97ff,
-      transparent: true,
-      // Slightly higher opacity for clearer visibility
-      opacity: this.isSniper ? 0.32 : 0.2,
-      side: THREE.DoubleSide,
-      // Avoid z-write so the ring isn't lost due to terrain depth artifacts
-      depthWrite: false,
-      depthTest: true,
-    });
-    const ring = new THREE.Mesh(ringGeo, ringMat);
-    ring.rotation.x = -Math.PI / 2;
-    // Lift slightly more to avoid any z-fighting with terrain across all types (incl. sniper)
-    ring.position.y = 0.03;
-    base.add(ring);
-    // Explicitly ensure range ring is visible for all towers
-    ring.visible = true;
-
-    // Hover outline (thin torus hugging the base), initially hidden
-    const outlineGeo = new THREE.TorusGeometry(1.05, 0.04, 8, 32);
-    const outlineMat = new THREE.MeshBasicMaterial({
-      color: 0xffff66,
-      transparent: true,
-      opacity: 0.85,
-      depthWrite: false,
-    });
-    const outline = new THREE.Mesh(outlineGeo, outlineMat);
-    outline.rotation.x = Math.PI / 2;
-    outline.position.y = 0.52; // slightly above ground to avoid z-fight with base bottom
-    outline.visible = false;
-    outline.name = "tower_hover_outline";
-    base.add(outline);
-
-    this.mesh = base;
-    this.baseMesh = base;
-    this.headMesh = head;
-    this.head = head;
-    this.ring = ring;
-    this.hoverOutline = outline;
-    this.levelRing = null;
-    // compute headTopY (slightly different for sniper head height)
-    const headTopOffset = this.isSniper ? 0.55 : 0.4;
-    this.headTopY = this.mesh.position.y + head.position.y + headTopOffset;
-
-    // If electric, immediately apply level-based visual offset to lift the ball slightly
-    if (this.isElectric) {
-      // reuse the same function used on upgrade for consistent behavior
-      this.applyVisualLevel();
-    }
-
-    scene.add(base);
-  }
-
-  get canUpgrade() {
-    return this.level < UPGRADE_MAX_LEVEL;
-  }
-
-  getSellValue() {
-    return Math.floor(this.totalSpent * SELL_REFUND_RATE);
-  }
-
-  upgrade() {
-    if (!this.canUpgrade) return false;
-
-    // Apply scaling
-    this.level += 1;
-    this.range *= UPGRADE_RANGE_SCALE;
-    this.rate *= UPGRADE_RATE_SCALE;
-    this.damage *= UPGRADE_DAMAGE_SCALE;
-
-    // Update slow magnitude for slow tower per level
-    if (this.type === "slow") {
-      const idx = Math.max(
-        0,
-        Math.min(this.slowMultByLevel.length - 1, this.level - 1)
-      );
-      const effect = this.projectileEffect || {};
-      this.projectileEffect = {
-        ...effect,
-        type: "slow",
-        mult: this.slowMultByLevel[idx],
-        duration: this.slowDuration,
-      };
-    }
-
-    // Sniper-specific upgrades
-    if (this.isSniper) {
-      // Reduce aim time per level (cap at 40% of original to avoid 0)
-      const minAimTime = (this.aimTime ?? 0) * 0.4;
-      this.aimTime = Math.max(minAimTime, (this.aimTime ?? 0) * 0.9);
-      // Slightly increase pierce chance (cap small)
-      this.pierceChance = Math.min(0.15, (this.pierceChance ?? 0) + 0.03);
-    }
-
-    // Rebuild range ring geometry
-    const newGeo = new THREE.RingGeometry(this.range - 0.05, this.range, 48);
-    this.ring.geometry.dispose();
-    this.ring.geometry = newGeo;
-
-    // Cost bookkeeping
-    this.totalSpent += this.nextUpgradeCost;
-    this.nextUpgradeCost = Math.round(
-      this.nextUpgradeCost * UPGRADE_COST_SCALE
-    );
-
-    // Apply visual changes
-    this.applyVisualLevel();
-
-    return true;
-  }
-
-  applyVisualLevel() {
-    const lvl = this.level;
-    const head = this.headMesh;
-    if (!head) return;
-
-    const baseMat = this.baseMesh?.material;
-    const headMat = head.material;
-
-    // Remove previous ring if any
-    if (this.levelRing) {
-      this.scene.remove(this.levelRing);
-      this.levelRing.geometry.dispose();
-      if (this.levelRing.material?.dispose) this.levelRing.material.dispose();
-      this.levelRing = null;
-    }
-
-    // Compute visual-only extra height based on level (starts at level 2)
-    const extraRaw = Math.max(0, (lvl - 1) * VISUAL_TOP_INCREMENT);
-    const visualExtra = Math.min(VISUAL_TOP_CAP, extraRaw);
-
-    if (lvl <= 1) {
-      // Default look
-      if (baseMat) {
-        baseMat.color?.set?.(this.type === "slow" ? 0xff69b4 : 0x5c6bc0);
-        baseMat.emissive?.set?.(0x000000);
-        baseMat.emissiveIntensity = 0.0;
-      }
-
-      if (this.type === "slow") {
-        // Keep dome proportions; baseline dome
-        head.scale.set(1, 1, 1);
-        head.position.y = 0.8 + visualExtra;
-        this.headTopY =
-          (this.mesh?.position.y ?? 0.25) + head.position.y + 0.55;
-      } else if (this.isElectric) {
-        // Electric level 1: keep ball shape; apply per-level lift (starts at 0)
-        const liftRaw = Math.max(0, (lvl - 1) * ELECTRIC_BALL_LIFT_PER_LEVEL);
-        const lift = Math.min(ELECTRIC_BALL_LIFT_CAP, liftRaw);
-        // Base y for electric ball at level 1 is determined in constructor; adjust relatively
-        head.position.y = head.position.y + lift;
-        this.headTopY =
-          (this.mesh?.position.y ?? 0.25) + head.position.y + 0.45;
-      } else {
-        // Box head baseline
-        head.scale.set(1, 1, 1);
-        // Raise slightly with visualExtra even at level 1 if any (should be 0)
-        head.position.y = 0.65 + visualExtra;
-        this.headTopY = (this.mesh?.position.y ?? 0.25) + head.position.y + 0.4;
-      }
-
-      headMat.color?.set?.(this.type === "slow" ? 0xffb6c1 : 0x90caf9);
-      headMat.emissive?.set?.(0x4a0a2a);
-      headMat.emissiveIntensity = 0.2;
-    } else {
-      // Level 2+ look
-      if (baseMat) {
-        baseMat.color?.set?.(this.type === "slow" ? 0xff5ea8 : 0x6f7bd6);
-        baseMat.emissive?.set?.(0x2a0a1a);
-        baseMat.emissiveIntensity = 0.08;
-      }
-
-      if (this.type === "slow") {
-        // Slightly larger dome; raise by visualExtra
-        head.scale.set(1.1, 1.15, 1.1);
-        head.position.y = 0.9 + visualExtra;
-        this.headTopY = (this.mesh?.position.y ?? 0.25) + head.position.y + 0.6;
-      } else if (this.isElectric) {
-        // Electric level 2+: keep ball, lift a bit per level
-        const liftRaw = Math.max(0, (lvl - 1) * ELECTRIC_BALL_LIFT_PER_LEVEL);
-        const lift = Math.min(ELECTRIC_BALL_LIFT_CAP, liftRaw);
-        head.scale.set(1.0, 1.0, 1.0);
-        // Baseline in constructor; add visualExtra only for non-electric, so use lift only here
-        head.position.y = head.position.y + lift;
-        this.headTopY =
-          (this.mesh?.position.y ?? 0.25) + head.position.y + 0.45;
-      } else {
-        // Taller box; raise by visualExtra
-        head.scale.set(1, 2, 1);
-        head.position.y = 0.65 + 0.4 + visualExtra;
-        this.headTopY = (this.mesh?.position.y ?? 0.25) + head.position.y + 0.8;
-      }
-
-      headMat.color?.set?.(this.type === "slow" ? 0xffc6d9 : 0xa5d6ff);
-      headMat.emissive?.set?.(0x9a135a);
-      headMat.emissiveIntensity = 0.35;
-
-      // Optional thin ring on top
-      const ringGeom = new THREE.TorusGeometry(0.45, 0.035, 8, 24);
-      const ringMat = new THREE.MeshStandardMaterial({
-        color: this.type === "slow" ? 0xff8fc2 : 0x3aa6ff,
-        emissive: 0xe01a6b,
-        emissiveIntensity: 0.55,
-        metalness: 0.3,
-        roughness: 0.45,
-      });
-      const ring = new THREE.Mesh(ringGeom, ringMat);
-      ring.castShadow = false;
-      ring.receiveShadow = false;
-
-      const topY = this.headTopY ?? head.position.y + 0.8;
-      ring.position.set(
-        this.mesh.position.x,
-        topY + 0.02,
-        this.mesh.position.z
-      );
-      ring.rotation.x = Math.PI / 2;
-      ring.name = "tower_level_ring";
-
-      this.levelRing = ring;
-      this.scene.add(ring);
-    }
-  }
-
-  // -------- Targeting helpers (shared) --------
-
-  // Default nearest-within-range or closestToExit for sniper/electric
-  findTarget(enemies) {
-    if (
-      (this.isSniper || this.isElectric) &&
-      this.targetPriority === "closestToExit"
-    ) {
-      return this.findTargetClosestToExit(enemies);
-    }
-
-    // default: nearest within range
-    let nearest = null;
-    let nearestDistSq = Infinity;
-
-    for (const e of enemies) {
-      const dSq = e.mesh.position.distanceToSquared(this.position);
-      if (dSq <= this.range * this.range && dSq < nearestDistSq) {
-        nearest = e;
-        nearestDistSq = dSq;
-      }
-    }
-
-    return nearest;
-  }
-
-  // Electric: return ALL targets in range, ordered by priority (no cap)
-  findMultipleTargets(enemies) {
-    const rangeSq = this.range * this.range;
-    const inRange = [];
-    for (const e of enemies) {
-      const dSq = e.mesh.position.distanceToSquared(this.position);
-      if (dSq <= rangeSq) inRange.push(e);
-    }
-    if (inRange.length === 0) return [];
-
-    if (this.targetPriority === "closestToExit") {
-      const towerPos = this.position;
-      inRange.sort((a, b) => {
-        const segA = a.currentSeg ?? 0;
-        const segB = b.currentSeg ?? 0;
-        if (segA !== segB) return segB - segA; // higher first
-        const remA = a.target
-          ? a.target.distanceTo(a.position ?? a.mesh.position)
-          : Infinity;
-        const remB = b.target
-          ? b.target.distanceTo(b.position ?? b.mesh.position)
-          : Infinity;
-        if (remA !== remB) return remA - remB; // shorter first
-        const da = (a.mesh?.position || a.position).distanceTo(towerPos);
-        const db = (b.mesh?.position || b.position).distanceTo(towerPos);
-        return da - db;
-      });
-    } else {
-      // nearest by distance to tower
-      const towerPos = this.position;
-      inRange.sort((a, b) => {
-        const da = (a.mesh?.position || a.position).distanceTo(towerPos);
-        const db = (b.mesh?.position || b.position).distanceTo(towerPos);
-        return da - db;
-      });
-    }
-
-    return inRange; // No limiting: attack all in range
-  }
-
-  // Sniper priority: higher currentSeg first, then remaining distance to enemy.target, then distance to tower
-  findTargetClosestToExit(enemies) {
-    const inRange = [];
-    const rangeSq = this.range * this.range;
-    for (const e of enemies) {
-      const dSq = e.mesh.position.distanceToSquared(this.position);
-      if (dSq <= rangeSq) {
-        inRange.push(e);
-      }
-    }
-    if (inRange.length === 0) return null;
-
-    const towerPos = this.position;
-    inRange.sort((a, b) => {
-      const segA = a.currentSeg ?? 0;
-      const segB = b.currentSeg ?? 0;
-      if (segA !== segB) return segB - segA; // higher first
-
-      // remaining distance to current segment target
-      const remA = a.target
-        ? a.target.distanceTo(a.position ?? a.mesh.position)
-        : Infinity;
-      const remB = b.target
-        ? b.target.distanceTo(b.position ?? b.mesh.position)
-        : Infinity;
-      if (remA !== remB) return remA - remB; // shorter first
-
-      // tie-breaker: distance to tower
-      const da = (a.mesh?.position || a.position).distanceTo(towerPos);
-      const db = (b.mesh?.position || b.position).distanceTo(towerPos);
-      return da - db;
-    });
-
-    return inRange[0] || null;
-  }
-
-  // -------- Visual helpers (laser and electric arc creation/fade) --------
-
-  createLaser(start, end) {
-    const points = [start.clone(), end.clone()];
-    const geometry = new THREE.BufferGeometry().setFromPoints(points);
-    const material = new THREE.LineBasicMaterial({
-      color: 0xff3b30,
-      transparent: true,
-      opacity: 0.9,
-      linewidth: 2,
-    });
-    const line = new THREE.Line(geometry, material);
-    // raise slightly to avoid z-fighting with terrain
-    line.position.y += 0.01;
-    this.scene.add(line);
-    return line;
-  }
-
-  // Electric: create a jagged arc polyline with jitter (outer + inner)
-  createElectricArc(start, end) {
-    const style = this.arcStyle || {};
-    const segs = Math.max(2, style.segments ?? 10);
-    const jitter = style.jitter ?? 0.25;
-
-    const dir = new THREE.Vector3().subVectors(end, start);
-    const len = dir.length();
-    if (len < 1e-4) dir.set(0, 0, 1);
-    else dir.normalize();
-
-    // Build perpendicular basis for 3D jitter
-    const up = new THREE.Vector3(0, 1, 0);
-    let right = new THREE.Vector3().crossVectors(dir, up);
-    if (right.lengthSq() < 1e-6) {
-      right = new THREE.Vector3(1, 0, 0); // fallback if parallel
-    } else {
-      right.normalize();
-    }
-    const binorm = new THREE.Vector3().crossVectors(dir, right).normalize();
-
-    const points = [];
-    for (let i = 0; i <= segs; i++) {
-      const t = i / segs;
-      const base = new THREE.Vector3()
-        .copy(start)
-        .addScaledVector(dir, len * t);
-      const amp = jitter * (1 - Math.abs(0.5 - t) * 2); // less jitter near ends
-      const offR = (Math.random() * 2 - 1) * amp;
-      const offB = (Math.random() * 2 - 1) * amp;
-      base.addScaledVector(right, offR).addScaledVector(binorm, offB);
-      // slight upward lift to avoid z-fighting
-      base.y += 0.01;
-      points.push(base);
-    }
-
-    const geometry = new THREE.BufferGeometry().setFromPoints(points);
-    const matOuter = new THREE.LineBasicMaterial({
-      color: style.color ?? 0x9ad6ff,
-      transparent: true,
-      opacity: 0.5,
-      linewidth: (style.thickness ?? 2) * 1.8,
-      depthWrite: false,
-    });
-    const matInner = new THREE.LineBasicMaterial({
-      color: style.coreColor ?? 0xe6fbff,
-      transparent: true,
-      opacity: 0.95,
-      linewidth: style.thickness ?? 2,
-      depthWrite: false,
-    });
-
-    const lineOuter = new THREE.Line(geometry, matOuter);
-    const lineInner = new THREE.Line(geometry.clone(), matInner);
-
-    this.scene.add(lineOuter);
-    this.scene.add(lineInner);
-
-    lineOuter.visible = true;
-    lineInner.visible = true;
-
-    return {
-      lineOuter,
-      lineInner,
-      createdAt: performance.now(),
-      duration: this.arcDurationMs ?? 120,
-    };
-  }
-
-  // Fade driver for pooled arcs scheduled for fade-out
-  updateElectricArcs(nowMs = performance.now()) {
-    if (!this.activeArcs || this.activeArcs.length === 0) return;
-    const remain = [];
-    for (const arc of this.activeArcs) {
-      const t = Math.max(
-        0,
-        Math.min(1, (nowMs - arc.createdAt) / arc.duration)
-      );
-      const fade = 1.0 - t;
-      if (arc.lineOuter?.material) {
-        arc.lineOuter.material.opacity = 0.5 * fade;
-        arc.lineOuter.material.needsUpdate = true;
-      }
-      if (arc.lineInner?.material) {
-        arc.lineInner.material.opacity = 0.95 * fade;
-        arc.lineInner.material.needsUpdate = true;
-      }
-      if (t < 1) {
-        remain.push(arc);
-      } else {
-        // finished fading: return to pool (keep geometry/material for reuse)
-        if (arc.lineOuter || arc.lineInner) {
-          this.arcPool ||= [];
-          if (arc.lineOuter) arc.lineOuter.visible = false;
-          if (arc.lineInner) arc.lineInner.visible = false;
-          this.arcPool.push({
-            lineOuter: arc.lineOuter,
-            lineInner: arc.lineInner,
-          });
-        }
-      }
-    }
-    this.activeArcs = remain;
-  }
-
-  updateLaser(line, start, end) {
-    const positions = line.geometry.attributes.position;
-    positions.setXYZ(0, start.x, start.y, start.z);
-    positions.setXYZ(1, end.x, end.y, end.z);
-    positions.needsUpdate = true;
-  }
-
-  removeLaser() {
-    if (this.laserLine) {
-      this.scene.remove(this.laserLine);
-      if (this.laserLine.geometry) this.laserLine.geometry.dispose();
-      if (this.laserLine.material?.dispose) this.laserLine.material.dispose();
-      this.laserLine = null;
-    }
-  }
-
-  // -------- Electric continuous DOT system (targeting, DOT, visuals) --------
-
-  // Acquire or refresh the top-N targets deterministically
-  _refreshElectricTargets(enemies) {
-    const desired = this.findMultipleTargets(enemies, this.maxTargets || 4);
-    const prev = this.trackedTargets || new Map();
-
-    // Build sets for enter/exit detection
-    const desiredSet = new Set(desired);
-    const currentSet = new Set(prev.keys());
-
-    // Exits (stop DOT, schedule fade, remove from map)
-    for (const e of currentSet) {
-      if (!desiredSet.has(e)) {
-        const info = prev.get(e);
-        if (info?.arc) {
-          const now = performance.now();
-          const durMs = Math.max(1, (this.arcFadeDuration || 0.2) * 1000);
-          this.activeArcs ||= [];
-          this.activeArcs.push({
-            lineOuter: info.arc.lineOuter,
-            lineInner: info.arc.lineInner,
-            createdAt: now,
-            duration: durMs,
-          });
-        }
-        prev.delete(e);
-      }
-    }
-
-    // Entries (start tracking, will create arc on visual update)
-    for (const e of desired) {
-      if (!prev.has(e)) {
-        prev.set(e, {
-          arc: null,
-          fadeInTimer: 0,
-          lastEnd: null,
-          visible: false,
-        });
-      }
-    }
-
-    this.trackedTargets = prev;
-    return desired;
-  }
-
-  // Acquire an arc from pool or create a new one
-  _getArcInstance(start, end) {
-    if (this.arcPool && this.arcPool.length > 0) {
-      const pooled = this.arcPool.pop();
-      this._updateArcGeometry(pooled, start, end, true);
-      if (pooled.lineOuter) pooled.lineOuter.visible = true;
-      if (pooled.lineInner) pooled.lineInner.visible = true;
-      return {
-        lineOuter: pooled.lineOuter,
-        lineInner: pooled.lineInner,
-        createdAt: performance.now(),
-        duration: (this.arcFadeDuration || 0.2) * 1000,
-      };
-    }
-    return this.createElectricArc(start, end);
-  }
-
-  // Update arc lines to follow moving target, optionally rebuild points
-  _updateArcGeometry(arc, start, end, rebuild = true) {
-    if (!arc?.lineOuter || !arc?.lineInner) return;
-
-    if (rebuild) {
-      // Rebuild jittered polyline to add life to the arc
-      const style = this.arcStyle || {};
-      const segs = Math.max(2, style.segments ?? 10);
-      const jitter = style.jitter ?? 0.25;
-
-      const dir = new THREE.Vector3().subVectors(end, start);
-      const len = dir.length();
-      if (len < 1e-4) dir.set(0, 0, 1);
-      else dir.normalize();
-
-      const up = new THREE.Vector3(0, 1, 0);
-      let right = new THREE.Vector3().crossVectors(dir, up);
-      if (right.lengthSq() < 1e-6) right = new THREE.Vector3(1, 0, 0);
-      else right.normalize();
-      const binorm = new THREE.Vector3().crossVectors(dir, right).normalize();
-
-      const points = [];
-      for (let i = 0; i <= segs; i++) {
-        const t = i / segs;
-        const base = new THREE.Vector3()
-          .copy(start)
-          .addScaledVector(dir, len * t);
-        const amp = jitter * (1 - Math.abs(0.5 - t) * 2);
-        const offR = (Math.random() * 2 - 1) * amp;
-        const offB = (Math.random() * 2 - 1) * amp;
-        base.addScaledVector(right, offR).addScaledVector(binorm, offB);
-        base.y += 0.01;
-        points.push(base);
-      }
-
-      const newGeo = new THREE.BufferGeometry().setFromPoints(points);
-      const oldOuter = arc.lineOuter.geometry;
-      const oldInner = arc.lineInner.geometry;
-      arc.lineOuter.geometry = newGeo;
-      arc.lineInner.geometry = newGeo.clone();
-      oldOuter?.dispose?.();
-      oldInner?.dispose?.();
-    } else {
-      // simple 2-point update (not used with jittered arcs)
-      const positions = arc.lineOuter.geometry.attributes.position;
-      positions.setXYZ(0, start.x, start.y, start.z);
-      positions.setXYZ(positions.count - 1, end.x, end.y, end.z);
-      positions.needsUpdate = true;
-      const positions2 = arc.lineInner.geometry.attributes.position;
-      positions2.setXYZ(0, start.x, start.y, start.z);
-      positions2.setXYZ(positions2.count - 1, end.x, end.y, end.z);
-      positions2.needsUpdate = true;
-    }
-  }
-
-  // Electric per-frame update: targets, DOT, and visuals
-  updateElectric(dt, enemies) {
-    // Refresh target list first to avoid DOT on out-of-range
-    const current = this._refreshElectricTargets(enemies);
-    if (!current.length) {
-      // no targets: fades scheduled separately; nothing to do
-      return;
-    }
-
-    // Aim toward primary target for coherence
-    const primary = current[0];
-    if (primary?.mesh?.position) {
-      const dir = new THREE.Vector3().subVectors(
-        primary.mesh.position,
-        this.position
-      );
-      const yaw = Math.atan2(dir.x, dir.z);
-      this.mesh.rotation.y = yaw;
-    }
-
-    // Apply DPS per tracked target, frame-rate independent
-    const dps = this.damagePerSecond ?? 1;
-    for (const enemy of current) {
-      // guard against removed/destroyed enemies
-      if (!enemy || enemy.isDead?.()) continue;
-      enemy.takeDamage?.(dps * dt);
-    }
-
-    // Visual follow with throttled refresh
-    this._visualAccumulator += dt;
-    const doRefresh = this._visualAccumulator >= this.visualRefreshInterval;
-    if (doRefresh) this._visualAccumulator = 0;
-
-    const start = this.position
-      .clone()
-      .add(new THREE.Vector3(0, this.headTopY ?? 0.9, 0));
-    for (const enemy of current) {
-      const info = this.trackedTargets.get(enemy);
-      const end = (enemy.mesh?.position || enemy.position)?.clone?.();
-      if (!end) continue;
-
-      // create or update arc
-      if (!info.arc) {
-        info.arc = this._getArcInstance(start, end);
-        // fade in
-        if (info.arc?.lineOuter?.material)
-          info.arc.lineOuter.material.opacity = 0.0;
-        if (info.arc?.lineInner?.material)
-          info.arc.lineInner.material.opacity = 0.0;
-        info.fadeInTimer = this.arcFadeDuration ?? 0.2;
-      }
-      // update position occasionally to reduce cost
-      if (doRefresh) this._updateArcGeometry(info.arc, start, end, true);
-
-      // fade in progression
-      if (typeof info.fadeInTimer === "number" && info.fadeInTimer > 0) {
-        info.fadeInTimer = Math.max(0, info.fadeInTimer - dt);
-        const denom = this.arcFadeDuration || 0.2;
-        const t = denom > 0 ? 1 - info.fadeInTimer / denom : 1;
-        const outer = info.arc.lineOuter ? info.arc.lineOuter.material : null;
-        const inner = info.arc.lineInner ? info.arc.lineInner.material : null;
-        if (outer) {
-          outer.opacity = 0.5 * Math.min(1, t);
-          outer.needsUpdate = true;
-        }
-        if (inner) {
-          inner.opacity = 0.95 * Math.min(1, t);
-          inner.needsUpdate = true;
-        }
-      }
-
-      info.visible = true;
-      info.lastEnd = end;
-    }
-  }
-
-  // -------- Audio hooks (safe no-ops if not wired) --------
-  playAimingTone() {
-    if (
-      typeof window !== "undefined" &&
-      window.UIManager &&
-      window.UIManager.playAimingTone
-    ) {
-      try {
-        window.UIManager.playAimingTone(this);
-      } catch {}
-    }
-  }
-  stopAimingTone() {
-    if (
-      typeof window !== "undefined" &&
-      window.UIManager &&
-      window.UIManager.stopAimingTone
-    ) {
-      try {
-        window.UIManager.stopAimingTone(this);
-      } catch {}
-    }
-  }
-
-  playFireCrack() {
-    if (
-      typeof window !== "undefined" &&
-      window.UIManager &&
-      window.UIManager.playFireCrack
-    ) {
-      try {
-        window.UIManager.playFireCrack(this);
-      } catch {}
-    }
-  }
-
-  // -------- Main per-frame firing/logic entry --------
-  tryFire(dt, enemies, projectiles, projectileSpeed) {
-    this.fireCooldown -= dt;
-
-    if (this.isSniper) {
-      // If currently aiming, update aim
-      if (this.aiming) {
-        const t = this.aimedTarget;
-        const targetPos = t?.mesh?.position || t?.position;
-        const alive = t && !t.isDead();
-        const within =
-          alive &&
-          targetPos?.distanceToSquared(this.position) <=
-            this.cancelThreshold * this.cancelThreshold;
-
-        if (!alive || !within) {
-          // cancel aiming
-          this.removeLaser();
-          this.stopAimingTone();
-          this.aiming = false;
-          this.aimedTarget = null;
-        } else {
-          // rotate toward target
-          const dir = new THREE.Vector3().subVectors(targetPos, this.position);
-          const yaw = Math.atan2(dir.x, dir.z);
-          this.mesh.rotation.y = yaw;
-
-          // update laser
-          const start = this.position
-            .clone()
-            .add(new THREE.Vector3(0, this.headTopY, 0));
-          const end = targetPos.clone();
-          if (this.laserLine) this.updateLaser(this.laserLine, start, end);
-
-          // countdown
-          this.aimingTimer -= dt;
-          if (this.aimingTimer <= 0) {
-            // fire a single dart
-            const spawnY =
-              typeof this.headTopY === "number" ? this.headTopY - 0.1 : 0.9;
-            const proj = new Projectile(
-              this.position.clone().add(new THREE.Vector3(0, spawnY, 0)),
-              t,
-              this.sniperProjectileSpeed ?? projectileSpeed,
-              this.scene,
-              null
-            );
-            proj.damage = this.damage;
-            projectiles.push(proj);
-
-            // cleanup
-            this.removeLaser();
-            this.stopAimingTone();
-            this.playFireCrack();
-
-            // cooldown
-            this.fireCooldown = 1 / this.rate;
-
-            // exit aiming
-            this.aiming = false;
-            this.aimedTarget = null;
-          }
-        }
-        return; // handled aiming
-      }
-
-      // Not aiming: respect cooldown, then acquire and start aiming
-      if (this.fireCooldown > 0) return;
-
-      const target = this.findTarget(enemies);
-      if (!target) return;
-
-      // rotate immediately to target
-      const dir = new THREE.Vector3().subVectors(
-        target.mesh.position,
-        this.position
-      );
-      const yaw = Math.atan2(dir.x, dir.z);
-      this.mesh.rotation.y = yaw;
-
-      // begin aiming
-      this.aimedTarget = target;
-      this.aiming = true;
-      this.aimingTimer = Math.max(0.01, this.aimTime || 0.01);
-
-      const start = this.position
-        .clone()
-        .add(new THREE.Vector3(0, this.headTopY, 0));
-      const end = target.mesh.position.clone();
-      this.laserLine = this.createLaser(start, end);
-      this.playAimingTone();
-
-      return;
-    }
-
-    // Electric: continuous DOT and visual tracking every frame
-    if (this.isElectric) {
-      this.updateElectric(dt, enemies);
-      // advance any scheduled arc fades
-      this.updateElectricArcs();
-      return;
-    }
-
-    // Default non-sniper behavior (cooldown-based projectile)
-    if (this.fireCooldown > 0) return;
-
-    const target = this.findTarget(enemies);
-    if (!target) return;
-
-    // Aim head towards target
-    const dir = new THREE.Vector3().subVectors(
-      target.mesh.position,
-      this.position
-    );
-    const yaw = Math.atan2(dir.x, dir.z);
-    this.mesh.rotation.y = yaw;
-
-    // Fire
-    this.fireCooldown = 1 / this.rate;
-
-    // Create projectile (spawn just below headTopY for better alignment)
-    const spawnY =
-      typeof this.headTopY === "number" ? this.headTopY - 0.1 : 0.9;
-    const proj = new Projectile(
-      this.position.clone().add(new THREE.Vector3(0, spawnY, 0)),
-      target,
-      projectileSpeed,
-      this.scene,
-      this.projectileEffect || null
-    );
-    proj.damage = this.damage;
-    projectiles.push(proj);
-  } // close tryFire
-
-  // -------- Selection/Hover UI --------
-  setSelected(selected) {
-    this.selected = !!selected;
-    if (this.hoverOutline) {
-      // Selection forces outline visible
-      this.hoverOutline.visible = this.selected || !!this.hovered;
-      // Optional: make selection a bit brighter
-      this.hoverOutline.material.opacity = this.selected ? 0.95 : 0.85;
-    }
-  }
-
-  // Hover toggle (kept separate from selection)
-  setHovered(hovered) {
-    this.hovered = !!hovered;
-    if (this.hoverOutline) {
-      // Only hide if not selected
-      this.hoverOutline.visible = this.selected || this.hovered;
-    }
-  }
-
-  // -------- Cleanup --------
-  destroy() {
-    // cleanup sniper visual if any
-    this.removeLaser?.();
-
-    const disposeArc = (arcObj) => {
-      if (!arcObj) return;
-      const { lineOuter, lineInner } = arcObj;
-      if (lineOuter) {
-        this.scene.remove(lineOuter);
-        lineOuter.geometry?.dispose?.();
-        lineOuter.material?.dispose?.();
-      }
-      if (lineInner) {
-        this.scene.remove(lineInner);
-        lineInner.geometry?.dispose?.();
-        lineInner.material?.dispose?.();
-      }
-    };
-
-    // cleanup electric arcs and pool if any
-    if (this.activeArcs && this.activeArcs.length) {
-      for (const arc of this.activeArcs) disposeArc(arc);
-      this.activeArcs = [];
-    }
-
-    if (this.trackedTargets && this.trackedTargets.size) {
-      for (const info of this.trackedTargets.values()) {
-        if (info.arc) disposeArc(info.arc);
-      }
-      this.trackedTargets.clear();
-    }
-
-    if (this.arcPool && this.arcPool.length) {
-      for (const pooled of this.arcPool) disposeArc(pooled);
-      this.arcPool.length = 0;
-    }
-
-    if (this.levelRing) {
-      this.scene.remove(this.levelRing);
-      this.levelRing.geometry.dispose();
-      if (this.levelRing.material?.dispose) this.levelRing.material.dispose();
-      this.levelRing = null;
-    }
-    this.scene.remove(this.mesh);
-  }
-}
+export { Tower } from './towers/Tower.js';

src/entities/towers/Tower.js

@@ -0,0 +1,285 @@
+import * as THREE from "three";
+import {
+  UPGRADE_MAX_LEVEL,
+  UPGRADE_START_COST,
+  UPGRADE_COST_SCALE,
+  UPGRADE_RANGE_SCALE,
+  UPGRADE_RATE_SCALE,
+  UPGRADE_DAMAGE_SCALE,
+  SELL_REFUND_RATE,
+} from "../../config/gameConfig.js";
+import { KINDS } from "./kinds/index.js";
+
+export class Tower {
+  constructor(pos, baseConfig, scene) {
+    this.position = pos.clone();
+    this.fireCooldown = 0;
+    this.scene = scene;
+
+    this.type = baseConfig.type || "basic";
+    this.projectileEffect = baseConfig.projectileEffect || null;
+
+    this.slowMultByLevel = baseConfig.slowMultByLevel || [0.75, 0.7, 0.65];
+    this.slowDuration = baseConfig.slowDuration || 1.5;
+
+    this.isElectric = this.type === "electric";
+    if (this.isElectric) {
+      this.maxTargets = baseConfig.maxTargets ?? 4;
+      this.damagePerSecond = baseConfig.damagePerSecond ?? 1;
+      this.visualRefreshRate = baseConfig.visualRefreshRate ?? 60;
+      this.visualRefreshInterval = 1 / Math.max(1, this.visualRefreshRate);
+      this.arcFadeDuration = baseConfig.arcFadeDuration ?? 0.2;
+      this.arcDurationMs = Math.max(
+        1,
+        baseConfig.arcDurationMs ?? this.arcFadeDuration * 1000
+      );
+
+      this.arcStyle = {
+        color: baseConfig.arc?.color ?? 0x9ad6ff,
+        coreColor: baseConfig.arc?.coreColor ?? 0xe6fbff,
+        thickness: baseConfig.arc?.thickness ?? 2,
+        jitter: baseConfig.arc?.jitter ?? 0.25,
+        segments: baseConfig.arc?.segments ?? 10,
+      };
+
+      this.targetPriority =
+        baseConfig.targetPriorityMode ||
+        baseConfig.targetPriority ||
+        "closestToExit";
+    }
+
+    this.level = 1;
+    this.baseRange = baseConfig.range;
+    this.baseRate = baseConfig.fireRate;
+    this.baseDamage = baseConfig.damage;
+    this.range = this.baseRange;
+    this.rate = this.baseRate;
+    this.damage = this.baseDamage;
+
+    if (this.type === "slow") {
+      const idx = Math.max(
+        0,
+        Math.min(this.slowMultByLevel.length - 1, this.level - 1)
+      );
+      const effect = this.projectileEffect || {};
+      this.projectileEffect = {
+        ...effect,
+        type: "slow",
+        mult: this.slowMultByLevel[idx],
+        duration: this.slowDuration,
+      };
+    }
+    this.nextUpgradeCost = UPGRADE_START_COST;
+    this.totalSpent = baseConfig.cost;
+
+    this.isSniper = this.type === "sniper";
+    this.aimTime = baseConfig.aimTime ?? 0;
+    this.sniperProjectileSpeed = baseConfig.projectileSpeed ?? null;
+    this.cancelThreshold = baseConfig.cancelThreshold ?? this.range;
+    this.pierceChance = baseConfig.pierceChance ?? 0;
+    this.targetPriority = baseConfig.targetPriority || (this.isSniper ? "closestToExit" : "nearest");
+    this.aiming = false;
+    this.aimingTimer = 0;
+    this.aimedTarget = null;
+    this.laserLine = null;
+
+    const baseGeo = new THREE.CylinderGeometry(0.9, 1.2, 1, 12);
+    const baseMat = new THREE.MeshStandardMaterial({
+      color:
+        this.type === "slow" ? 0xff69b4 : this.isSniper ? 0x6d6f73 : 0x3a97ff,
+      metalness: this.isSniper ? 0.5 : 0.2,
+      roughness: this.isSniper ? 0.35 : 0.6,
+    });
+    const base = new THREE.Mesh(baseGeo, baseMat);
+    base.castShadow = true;
+    base.receiveShadow = true;
+    base.position.copy(this.position);
+
+    this.mesh = base;
+    this.baseMesh = base;
+
+    this.kind = KINDS[this.type] || KINDS.basic;
+    this.kind.buildHead(this, scene);
+
+    const ringGeo = new THREE.RingGeometry(this.range - 0.05, this.range, 48);
+    const ringMat = new THREE.MeshBasicMaterial({
+      color:
+        this.type === "slow" ? 0xff69b4 : this.isSniper ? 0x00ffff : 0x3a97ff,
+      transparent: true,
+      opacity: this.isSniper ? 0.32 : 0.2,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+      depthTest: true,
+    });
+    const ring = new THREE.Mesh(ringGeo, ringMat);
+    ring.rotation.x = -Math.PI / 2;
+    ring.position.y = 0.03;
+    base.add(ring);
+    ring.visible = true;
+
+    const outlineGeo = new THREE.TorusGeometry(1.05, 0.04, 8, 32);
+    const outlineMat = new THREE.MeshBasicMaterial({
+      color: 0xffff66,
+      transparent: true,
+      opacity: 0.85,
+      depthWrite: false,
+    });
+    const outline = new THREE.Mesh(outlineGeo, outlineMat);
+    outline.rotation.x = Math.PI / 2;
+    outline.position.y = 0.52;
+    outline.visible = false;
+    outline.name = "tower_hover_outline";
+    base.add(outline);
+
+    this.ring = ring;
+    this.hoverOutline = outline;
+    this.levelRing = null;
+
+    if (this.isElectric) {
+      this.applyVisualLevel();
+    }
+
+    scene.add(base);
+  }
+
+  get canUpgrade() {
+    return this.level < UPGRADE_MAX_LEVEL;
+  }
+
+  getSellValue() {
+    return Math.floor(this.totalSpent * SELL_REFUND_RATE);
+  }
+
+  upgrade() {
+    if (!this.canUpgrade) return false;
+
+    this.level += 1;
+    this.range *= UPGRADE_RANGE_SCALE;
+    this.rate *= UPGRADE_RATE_SCALE;
+    this.damage *= UPGRADE_DAMAGE_SCALE;
+
+    if (this.type === "slow") {
+      const idx = Math.max(
+        0,
+        Math.min(this.slowMultByLevel.length - 1, this.level - 1)
+      );
+      const effect = this.projectileEffect || {};
+      this.projectileEffect = {
+        ...effect,
+        type: "slow",
+        mult: this.slowMultByLevel[idx],
+        duration: this.slowDuration,
+      };
+    }
+
+    if (this.isSniper) {
+      const minAimTime = (this.aimTime ?? 0) * 0.4;
+      this.aimTime = Math.max(minAimTime, (this.aimTime ?? 0) * 0.9);
+      this.pierceChance = Math.min(0.15, (this.pierceChance ?? 0) + 0.03);
+    }
+
+    const newGeo = new THREE.RingGeometry(this.range - 0.05, this.range, 48);
+    this.ring.geometry.dispose();
+    this.ring.geometry = newGeo;
+
+    this.totalSpent += this.nextUpgradeCost;
+    this.nextUpgradeCost = Math.round(
+      this.nextUpgradeCost * UPGRADE_COST_SCALE
+    );
+
+    this.applyVisualLevel();
+
+    return true;
+  }
+
+  applyVisualLevel() {
+    this.kind.applyVisualLevel(this);
+  }
+
+  tryFire(dt, enemies, projectiles, projectileSpeed) {
+    return this.kind.tryFire(this, dt, enemies, projectiles, projectileSpeed);
+  }
+
+  updateElectricArcs(now) {
+    if (this.kind.updateElectricArcs) {
+      this.kind.updateElectricArcs(this, now);
+    }
+  }
+
+  playShootSound() {
+    if (
+      typeof window !== "undefined" &&
+      window.UIManager &&
+      window.UIManager.playTowerSound
+    ) {
+      try {
+        window.UIManager.playTowerSound(this);
+      } catch {}
+    }
+  }
+
+  playAimingTone() {
+    if (
+      typeof window !== "undefined" &&
+      window.UIManager &&
+      window.UIManager.playAimingTone
+    ) {
+      try {
+        window.UIManager.playAimingTone(this);
+      } catch {}
+    }
+  }
+  
+  stopAimingTone() {
+    if (
+      typeof window !== "undefined" &&
+      window.UIManager &&
+      window.UIManager.stopAimingTone
+    ) {
+      try {
+        window.UIManager.stopAimingTone(this);
+      } catch {}
+    }
+  }
+
+  playFireCrack() {
+    if (
+      typeof window !== "undefined" &&
+      window.UIManager &&
+      window.UIManager.playFireCrack
+    ) {
+      try {
+        window.UIManager.playFireCrack(this);
+      } catch {}
+    }
+  }
+
+  setSelected(selected) {
+    this.selected = !!selected;
+    if (this.hoverOutline) {
+      this.hoverOutline.visible = this.selected || !!this.hovered;
+      this.hoverOutline.material.opacity = this.selected ? 0.95 : 0.85;
+    }
+  }
+
+  setHovered(hovered) {
+    this.hovered = !!hovered;
+    if (this.hoverOutline) {
+      this.hoverOutline.visible = this.selected || this.hovered;
+    }
+  }
+
+  destroy() {
+    if (this.kind.onDestroy) {
+      this.kind.onDestroy(this);
+    }
+
+    if (this.levelRing) {
+      this.scene.remove(this.levelRing);
+      this.levelRing.geometry.dispose();
+      if (this.levelRing.material?.dispose) this.levelRing.material.dispose();
+      this.levelRing = null;
+    }
+    this.scene.remove(this.mesh);
+  }
+}

src/entities/towers/common/targeting.js

@@ -0,0 +1,85 @@
+export function findNearestWithinRange(tower, enemies) {
+  let nearest = null;
+  let nearestDistSq = Infinity;
+
+  for (const e of enemies) {
+    const dSq = e.mesh.position.distanceToSquared(tower.position);
+    if (dSq <= tower.range * tower.range && dSq < nearestDistSq) {
+      nearest = e;
+      nearestDistSq = dSq;
+    }
+  }
+
+  return nearest;
+}
+
+export function findClosestToExitInRange(tower, enemies) {
+  const inRange = [];
+  const rangeSq = tower.range * tower.range;
+  for (const e of enemies) {
+    const dSq = e.mesh.position.distanceToSquared(tower.position);
+    if (dSq <= rangeSq) {
+      inRange.push(e);
+    }
+  }
+  if (inRange.length === 0) return null;
+
+  const towerPos = tower.position;
+  inRange.sort((a, b) => {
+    const segA = a.currentSeg ?? 0;
+    const segB = b.currentSeg ?? 0;
+    if (segA !== segB) return segB - segA;
+
+    const remA = a.target
+      ? a.target.distanceTo(a.position ?? a.mesh.position)
+      : Infinity;
+    const remB = b.target
+      ? b.target.distanceTo(b.position ?? b.mesh.position)
+      : Infinity;
+    if (remA !== remB) return remA - remB;
+
+    const da = (a.mesh?.position || a.position).distanceTo(towerPos);
+    const db = (b.mesh?.position || b.position).distanceTo(towerPos);
+    return da - db;
+  });
+
+  return inRange[0] || null;
+}
+
+export function findMultipleInRangeOrdered(tower, enemies, priority = "nearest") {
+  const rangeSq = tower.range * tower.range;
+  const inRange = [];
+  for (const e of enemies) {
+    const dSq = e.mesh.position.distanceToSquared(tower.position);
+    if (dSq <= rangeSq) inRange.push(e);
+  }
+  if (inRange.length === 0) return [];
+
+  if (priority === "closestToExit") {
+    const towerPos = tower.position;
+    inRange.sort((a, b) => {
+      const segA = a.currentSeg ?? 0;
+      const segB = b.currentSeg ?? 0;
+      if (segA !== segB) return segB - segA;
+      const remA = a.target
+        ? a.target.distanceTo(a.position ?? a.mesh.position)
+        : Infinity;
+      const remB = b.target
+        ? b.target.distanceTo(b.position ?? b.mesh.position)
+        : Infinity;
+      if (remA !== remB) return remA - remB;
+      const da = (a.mesh?.position || a.position).distanceTo(towerPos);
+      const db = (b.mesh?.position || b.position).distanceTo(towerPos);
+      return da - db;
+    });
+  } else {
+    const towerPos = tower.position;
+    inRange.sort((a, b) => {
+      const da = (a.mesh?.position || a.position).distanceTo(towerPos);
+      const db = (b.mesh?.position || b.position).distanceTo(towerPos);
+      return da - db;
+    });
+  }
+
+  return inRange;
+}

src/entities/towers/kinds/basic.js

@@ -0,0 +1,135 @@
+import * as THREE from "three";
+import { Projectile } from "../../Projectile.js";
+import { findNearestWithinRange } from "../common/targeting.js";
+
+const VISUAL_TOP_INCREMENT = 0.08;
+const VISUAL_TOP_CAP = 0.4;
+
+export default {
+  key: "basic",
+
+  buildHead(tower) {
+    const headGeo = new THREE.BoxGeometry(0.8, 0.4, 0.8);
+    const headMat = new THREE.MeshStandardMaterial({
+      color: 0x90caf9,
+      metalness: 0.18,
+      roughness: 0.45,
+      emissive: 0x000000,
+      emissiveIntensity: 0.6,
+      side: THREE.DoubleSide,
+    });
+
+    const head = new THREE.Mesh(headGeo, headMat);
+    head.castShadow = true;
+    head.position.set(0, 0.8, 0);
+    tower.baseMesh.add(head);
+
+    tower.headMesh = head;
+    tower.head = head;
+    tower.headTopY = tower.mesh.position.y + head.position.y + 0.4;
+  },
+
+  tryFire(tower, dt, enemies, projectiles, projectileSpeed) {
+    tower.fireCooldown -= dt;
+    if (tower.fireCooldown > 0) return;
+
+    const target = findNearestWithinRange(tower, enemies);
+    if (!target) return;
+
+    const dir = new THREE.Vector3().subVectors(
+      target.mesh.position,
+      tower.position
+    );
+    const yaw = Math.atan2(dir.x, dir.z);
+    tower.mesh.rotation.y = yaw;
+
+    tower.fireCooldown = 1 / tower.rate;
+
+    const spawnY =
+      typeof tower.headTopY === "number" ? tower.headTopY - 0.1 : 0.9;
+    const proj = new Projectile(
+      tower.position.clone().add(new THREE.Vector3(0, spawnY, 0)),
+      target,
+      projectileSpeed,
+      tower.scene,
+      tower.projectileEffect || null
+    );
+    proj.damage = tower.damage;
+    projectiles.push(proj);
+
+    tower.playShootSound();
+  },
+
+  applyVisualLevel(tower) {
+    const lvl = tower.level;
+    const head = tower.headMesh;
+    if (!head) return;
+
+    const baseMat = tower.baseMesh?.material;
+    const headMat = head.material;
+
+    if (tower.levelRing) {
+      tower.scene.remove(tower.levelRing);
+      tower.levelRing.geometry.dispose();
+      if (tower.levelRing.material?.dispose) tower.levelRing.material.dispose();
+      tower.levelRing = null;
+    }
+
+    const extraRaw = Math.max(0, (lvl - 1) * VISUAL_TOP_INCREMENT);
+    const visualExtra = Math.min(VISUAL_TOP_CAP, extraRaw);
+
+    if (lvl <= 1) {
+      if (baseMat) {
+        baseMat.color?.set?.(0x5c6bc0);
+        baseMat.emissive?.set?.(0x000000);
+        baseMat.emissiveIntensity = 0.0;
+      }
+
+      head.scale.set(1, 1, 1);
+      head.position.y = 0.65 + visualExtra;
+      tower.headTopY = (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.4;
+
+      headMat.color?.set?.(0x90caf9);
+      headMat.emissive?.set?.(0x4a0a2a);
+      headMat.emissiveIntensity = 0.2;
+    } else {
+      if (baseMat) {
+        baseMat.color?.set?.(0x6f7bd6);
+        baseMat.emissive?.set?.(0x2a0a1a);
+        baseMat.emissiveIntensity = 0.08;
+      }
+
+      head.scale.set(1, 2, 1);
+      head.position.y = 0.65 + 0.4 + visualExtra;
+      tower.headTopY = (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.8;
+
+      headMat.color?.set?.(0xa5d6ff);
+      headMat.emissive?.set?.(0x9a135a);
+      headMat.emissiveIntensity = 0.35;
+
+      const ringGeom = new THREE.TorusGeometry(0.45, 0.035, 8, 24);
+      const ringMat = new THREE.MeshStandardMaterial({
+        color: 0x3aa6ff,
+        emissive: 0xe01a6b,
+        emissiveIntensity: 0.55,
+        metalness: 0.3,
+        roughness: 0.45,
+      });
+      const ring = new THREE.Mesh(ringGeom, ringMat);
+      ring.castShadow = false;
+      ring.receiveShadow = false;
+
+      const topY = tower.headTopY ?? head.position.y + 0.8;
+      ring.position.set(
+        tower.mesh.position.x,
+        topY + 0.02,
+        tower.mesh.position.z
+      );
+      ring.rotation.x = Math.PI / 2;
+      ring.name = "tower_level_ring";
+
+      tower.levelRing = ring;
+      tower.scene.add(ring);
+    }
+  },
+};

src/entities/towers/kinds/electric.js

@@ -0,0 +1,433 @@
+import * as THREE from "three";
+import { findMultipleInRangeOrdered } from "../common/targeting.js";
+
+const ELECTRIC_BALL_LIFT_PER_LEVEL = 0.08;
+const ELECTRIC_BALL_LIFT_CAP = 0.35;
+
+export default {
+  key: "electric",
+
+  buildHead(tower) {
+    const headGroup = new THREE.Group();
+
+    const barHeight = 0.9;
+    const barGeo = new THREE.CylinderGeometry(0.08, 0.08, barHeight, 16);
+    const barMat = new THREE.MeshStandardMaterial({
+      color: 0x1b1f24,
+      metalness: 0.4,
+      roughness: 0.6,
+    });
+    const bar = new THREE.Mesh(barGeo, barMat);
+    bar.castShadow = true;
+    bar.receiveShadow = true;
+    bar.position.set(0, 0.5 + barHeight * 0.5, 0);
+
+    const headGeo = new THREE.SphereGeometry(0.45, 20, 16);
+    const headMat = new THREE.MeshStandardMaterial({
+      color: 0x9ad6ff,
+      metalness: 0.18,
+      roughness: 0.45,
+      emissive: 0x153a6b,
+      emissiveIntensity: 0.85,
+      side: THREE.DoubleSide,
+    });
+
+    const head = new THREE.Mesh(headGeo, headMat);
+    head.castShadow = true;
+    head.position.set(0, 0.5 + barHeight + 0.25, 0);
+    head.scale.set(1.0, 1.0, 1.0);
+
+    headGroup.add(bar);
+    headGroup.add(head);
+
+    const haloGeo = new THREE.TorusGeometry(0.38, 0.02, 8, 24);
+    const haloMat = new THREE.MeshStandardMaterial({
+      color: 0x80e1ff,
+      emissive: 0x206a99,
+      emissiveIntensity: 0.4,
+      metalness: 0.2,
+      roughness: 0.6,
+    });
+    const halo = new THREE.Mesh(haloGeo, haloMat);
+    halo.rotation.x = Math.PI / 2;
+    halo.position.set(0, head.position.y - 0.22, 0);
+    halo.castShadow = false;
+    halo.receiveShadow = false;
+    headGroup.add(halo);
+
+    tower.baseMesh.add(headGroup);
+
+    tower.headMesh = head;
+    tower.head = head;
+    tower.headTopY = tower.mesh.position.y + head.position.y + 0.45;
+
+    tower.trackedTargets = new Map();
+    tower.arcPool = [];
+    tower._visualAccumulator = 0;
+    tower.activeArcs = [];
+  },
+
+  tryFire(tower, dt, enemies) {
+    this.updateElectric(tower, dt, enemies);
+    this.updateElectricArcs(tower);
+  },
+
+  updateElectric(tower, dt, enemies) {
+    const current = this._refreshElectricTargets(tower, enemies);
+    if (!current.length) {
+      return;
+    }
+
+    const primary = current[0];
+    if (primary?.mesh?.position) {
+      const dir = new THREE.Vector3().subVectors(
+        primary.mesh.position,
+        tower.position
+      );
+      const yaw = Math.atan2(dir.x, dir.z);
+      tower.mesh.rotation.y = yaw;
+    }
+
+    const dps = tower.damagePerSecond ?? 1;
+    for (const enemy of current) {
+      if (!enemy || enemy.isDead?.()) continue;
+      enemy.takeDamage?.(dps * dt);
+    }
+
+    tower._visualAccumulator += dt;
+    const doRefresh = tower._visualAccumulator >= tower.visualRefreshInterval;
+    if (doRefresh) tower._visualAccumulator = 0;
+
+    const start = tower.position
+      .clone()
+      .add(new THREE.Vector3(0, tower.headTopY ?? 0.9, 0));
+    for (const enemy of current) {
+      const info = tower.trackedTargets.get(enemy);
+      const end = (enemy.mesh?.position || enemy.position)?.clone?.();
+      if (!end) continue;
+
+      if (!info.arc) {
+        info.arc = this._getArcInstance(tower, start, end);
+        if (info.arc?.lineOuter?.material)
+          info.arc.lineOuter.material.opacity = 0.0;
+        if (info.arc?.lineInner?.material)
+          info.arc.lineInner.material.opacity = 0.0;
+        info.fadeInTimer = tower.arcFadeDuration ?? 0.2;
+      }
+      if (doRefresh) this._updateArcGeometry(tower, info.arc, start, end, true);
+
+      if (typeof info.fadeInTimer === "number" && info.fadeInTimer > 0) {
+        info.fadeInTimer = Math.max(0, info.fadeInTimer - dt);
+        const denom = tower.arcFadeDuration || 0.2;
+        const t = denom > 0 ? 1 - info.fadeInTimer / denom : 1;
+        const outer = info.arc.lineOuter ? info.arc.lineOuter.material : null;
+        const inner = info.arc.lineInner ? info.arc.lineInner.material : null;
+        if (outer) {
+          outer.opacity = 0.5 * Math.min(1, t);
+          outer.needsUpdate = true;
+        }
+        if (inner) {
+          inner.opacity = 0.95 * Math.min(1, t);
+          inner.needsUpdate = true;
+        }
+      }
+
+      info.visible = true;
+      info.lastEnd = end;
+    }
+  },
+
+  _refreshElectricTargets(tower, enemies) {
+    const desired = findMultipleInRangeOrdered(
+      tower,
+      enemies,
+      tower.targetPriority || "closestToExit"
+    ).slice(0, tower.maxTargets || 4);
+    const prev = tower.trackedTargets || new Map();
+
+    const desiredSet = new Set(desired);
+    const currentSet = new Set(prev.keys());
+
+    for (const e of currentSet) {
+      if (!desiredSet.has(e)) {
+        const info = prev.get(e);
+        if (info?.arc) {
+          const now = performance.now();
+          const durMs = Math.max(1, (tower.arcFadeDuration || 0.2) * 1000);
+          tower.activeArcs ||= [];
+          tower.activeArcs.push({
+            lineOuter: info.arc.lineOuter,
+            lineInner: info.arc.lineInner,
+            createdAt: now,
+            duration: durMs,
+          });
+        }
+        prev.delete(e);
+      }
+    }
+
+    let hasNewTargets = false;
+    for (const e of desired) {
+      if (!prev.has(e)) {
+        prev.set(e, {
+          arc: null,
+          fadeInTimer: 0,
+          lastEnd: null,
+          visible: false,
+        });
+        hasNewTargets = true;
+      }
+    }
+    
+    if (hasNewTargets && desired.length > 0) {
+      tower.playShootSound();
+    }
+
+    tower.trackedTargets = prev;
+    return desired;
+  },
+
+  _getArcInstance(tower, start, end) {
+    if (tower.arcPool && tower.arcPool.length > 0) {
+      const pooled = tower.arcPool.pop();
+      this._updateArcGeometry(tower, pooled, start, end, true);
+      if (pooled.lineOuter) pooled.lineOuter.visible = true;
+      if (pooled.lineInner) pooled.lineInner.visible = true;
+      return {
+        lineOuter: pooled.lineOuter,
+        lineInner: pooled.lineInner,
+        createdAt: performance.now(),
+        duration: (tower.arcFadeDuration || 0.2) * 1000,
+      };
+    }
+    return this.createElectricArc(tower, start, end);
+  },
+
+  createElectricArc(tower, start, end) {
+    const style = tower.arcStyle || {};
+    const segs = Math.max(2, style.segments ?? 10);
+    const jitter = style.jitter ?? 0.25;
+
+    const dir = new THREE.Vector3().subVectors(end, start);
+    const len = dir.length();
+    if (len < 1e-4) dir.set(0, 0, 1);
+    else dir.normalize();
+
+    const up = new THREE.Vector3(0, 1, 0);
+    let right = new THREE.Vector3().crossVectors(dir, up);
+    if (right.lengthSq() < 1e-6) {
+      right = new THREE.Vector3(1, 0, 0);
+    } else {
+      right.normalize();
+    }
+    const binorm = new THREE.Vector3().crossVectors(dir, right).normalize();
+
+    const points = [];
+    for (let i = 0; i <= segs; i++) {
+      const t = i / segs;
+      const base = new THREE.Vector3()
+        .copy(start)
+        .addScaledVector(dir, len * t);
+      const amp = jitter * (1 - Math.abs(0.5 - t) * 2);
+      const offR = (Math.random() * 2 - 1) * amp;
+      const offB = (Math.random() * 2 - 1) * amp;
+      base.addScaledVector(right, offR).addScaledVector(binorm, offB);
+      base.y += 0.01;
+      points.push(base);
+    }
+
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const matOuter = new THREE.LineBasicMaterial({
+      color: style.color ?? 0x9ad6ff,
+      transparent: true,
+      opacity: 0.5,
+      linewidth: (style.thickness ?? 2) * 1.8,
+      depthWrite: false,
+    });
+    const matInner = new THREE.LineBasicMaterial({
+      color: style.coreColor ?? 0xe6fbff,
+      transparent: true,
+      opacity: 0.95,
+      linewidth: style.thickness ?? 2,
+      depthWrite: false,
+    });
+
+    const lineOuter = new THREE.Line(geometry, matOuter);
+    const lineInner = new THREE.Line(geometry.clone(), matInner);
+
+    tower.scene.add(lineOuter);
+    tower.scene.add(lineInner);
+
+    lineOuter.visible = true;
+    lineInner.visible = true;
+
+    return {
+      lineOuter,
+      lineInner,
+      createdAt: performance.now(),
+      duration: tower.arcDurationMs ?? 120,
+    };
+  },
+
+  _updateArcGeometry(tower, arc, start, end, rebuild = true) {
+    if (!arc?.lineOuter || !arc?.lineInner) return;
+
+    if (rebuild) {
+      const style = tower.arcStyle || {};
+      const segs = Math.max(2, style.segments ?? 10);
+      const jitter = style.jitter ?? 0.25;
+
+      const dir = new THREE.Vector3().subVectors(end, start);
+      const len = dir.length();
+      if (len < 1e-4) dir.set(0, 0, 1);
+      else dir.normalize();
+
+      const up = new THREE.Vector3(0, 1, 0);
+      let right = new THREE.Vector3().crossVectors(dir, up);
+      if (right.lengthSq() < 1e-6) right = new THREE.Vector3(1, 0, 0);
+      else right.normalize();
+      const binorm = new THREE.Vector3().crossVectors(dir, right).normalize();
+
+      const points = [];
+      for (let i = 0; i <= segs; i++) {
+        const t = i / segs;
+        const base = new THREE.Vector3()
+          .copy(start)
+          .addScaledVector(dir, len * t);
+        const amp = jitter * (1 - Math.abs(0.5 - t) * 2);
+        const offR = (Math.random() * 2 - 1) * amp;
+        const offB = (Math.random() * 2 - 1) * amp;
+        base.addScaledVector(right, offR).addScaledVector(binorm, offB);
+        base.y += 0.01;
+        points.push(base);
+      }
+
+      const newGeo = new THREE.BufferGeometry().setFromPoints(points);
+      const oldOuter = arc.lineOuter.geometry;
+      const oldInner = arc.lineInner.geometry;
+      arc.lineOuter.geometry = newGeo;
+      arc.lineInner.geometry = newGeo.clone();
+      oldOuter?.dispose?.();
+      oldInner?.dispose?.();
+    } else {
+      const positions = arc.lineOuter.geometry.attributes.position;
+      positions.setXYZ(0, start.x, start.y, start.z);
+      positions.setXYZ(positions.count - 1, end.x, end.y, end.z);
+      positions.needsUpdate = true;
+      const positions2 = arc.lineInner.geometry.attributes.position;
+      positions2.setXYZ(0, start.x, start.y, start.z);
+      positions2.setXYZ(positions2.count - 1, end.x, end.y, end.z);
+      positions2.needsUpdate = true;
+    }
+  },
+
+  updateElectricArcs(tower, nowMs = performance.now()) {
+    if (!tower.activeArcs || tower.activeArcs.length === 0) return;
+    const remain = [];
+    for (const arc of tower.activeArcs) {
+      const t = Math.max(
+        0,
+        Math.min(1, (nowMs - arc.createdAt) / arc.duration)
+      );
+      const fade = 1.0 - t;
+      if (arc.lineOuter?.material) {
+        arc.lineOuter.material.opacity = 0.5 * fade;
+        arc.lineOuter.material.needsUpdate = true;
+      }
+      if (arc.lineInner?.material) {
+        arc.lineInner.material.opacity = 0.95 * fade;
+        arc.lineInner.material.needsUpdate = true;
+      }
+      if (t < 1) {
+        remain.push(arc);
+      } else {
+        if (arc.lineOuter || arc.lineInner) {
+          tower.arcPool ||= [];
+          if (arc.lineOuter) arc.lineOuter.visible = false;
+          if (arc.lineInner) arc.lineInner.visible = false;
+          tower.arcPool.push({
+            lineOuter: arc.lineOuter,
+            lineInner: arc.lineInner,
+          });
+        }
+      }
+    }
+    tower.activeArcs = remain;
+  },
+
+  applyVisualLevel(tower) {
+    const lvl = tower.level;
+    const head = tower.headMesh;
+    if (!head) return;
+
+    const liftRaw = Math.max(0, (lvl - 1) * ELECTRIC_BALL_LIFT_PER_LEVEL);
+    const lift = Math.min(ELECTRIC_BALL_LIFT_CAP, liftRaw);
+    head.position.y = head.position.y + lift;
+    tower.headTopY =
+      (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.45;
+
+    if (lvl > 1) {
+      head.material.color?.set?.(0xa5d6ff);
+      head.material.emissive?.set?.(0x9a135a);
+      head.material.emissiveIntensity = 0.35;
+
+      const ringGeom = new THREE.TorusGeometry(0.45, 0.035, 8, 24);
+      const ringMat = new THREE.MeshStandardMaterial({
+        color: 0x3aa6ff,
+        emissive: 0xe01a6b,
+        emissiveIntensity: 0.55,
+        metalness: 0.3,
+        roughness: 0.45,
+      });
+      const ring = new THREE.Mesh(ringGeom, ringMat);
+      ring.castShadow = false;
+      ring.receiveShadow = false;
+
+      const topY = tower.headTopY ?? head.position.y + 0.8;
+      ring.position.set(
+        tower.mesh.position.x,
+        topY + 0.02,
+        tower.mesh.position.z
+      );
+      ring.rotation.x = Math.PI / 2;
+      ring.name = "tower_level_ring";
+
+      tower.levelRing = ring;
+      tower.scene.add(ring);
+    }
+  },
+
+  onDestroy(tower) {
+    const disposeArc = (arcObj) => {
+      if (!arcObj) return;
+      const { lineOuter, lineInner } = arcObj;
+      if (lineOuter) {
+        tower.scene.remove(lineOuter);
+        lineOuter.geometry?.dispose?.();
+        lineOuter.material?.dispose?.();
+      }
+      if (lineInner) {
+        tower.scene.remove(lineInner);
+        lineInner.geometry?.dispose?.();
+        lineInner.material?.dispose?.();
+      }
+    };
+
+    if (tower.activeArcs && tower.activeArcs.length) {
+      for (const arc of tower.activeArcs) disposeArc(arc);
+      tower.activeArcs = [];
+    }
+
+    if (tower.trackedTargets && tower.trackedTargets.size) {
+      for (const info of tower.trackedTargets.values()) {
+        if (info.arc) disposeArc(info.arc);
+      }
+      tower.trackedTargets.clear();
+    }
+
+    if (tower.arcPool && tower.arcPool.length) {
+      for (const pooled of tower.arcPool) disposeArc(pooled);
+      tower.arcPool.length = 0;
+    }
+  },
+};

src/entities/towers/kinds/index.js

@@ -0,0 +1,11 @@
+import basic from './basic.js';
+import slow from './slow.js';
+import sniper from './sniper.js';
+import electric from './electric.js';
+
+export const KINDS = { 
+  basic, 
+  slow, 
+  sniper, 
+  electric 
+};

src/entities/towers/kinds/slow.js

@@ -0,0 +1,144 @@
+import * as THREE from "three";
+import { Projectile } from "../../Projectile.js";
+import { findNearestWithinRange } from "../common/targeting.js";
+
+const VISUAL_TOP_INCREMENT = 0.08;
+const VISUAL_TOP_CAP = 0.4;
+
+export default {
+  key: "slow",
+
+  buildHead(tower) {
+    const headGeo = new THREE.SphereGeometry(
+      0.55,
+      24,
+      16,
+      0,
+      Math.PI * 2,
+      Math.PI / 2,
+      Math.PI / 2
+    );
+    const headMat = new THREE.MeshStandardMaterial({
+      color: 0xffb6c1,
+      metalness: 0.15,
+      roughness: 0.35,
+      emissive: 0x4a0a2a,
+      emissiveIntensity: 0.4,
+      side: THREE.DoubleSide,
+    });
+
+    const head = new THREE.Mesh(headGeo, headMat);
+    head.castShadow = true;
+    head.position.set(0, 0.8, 0);
+    tower.baseMesh.add(head);
+
+    tower.headMesh = head;
+    tower.head = head;
+    tower.headTopY = tower.mesh.position.y + head.position.y + 0.4;
+  },
+
+  tryFire(tower, dt, enemies, projectiles, projectileSpeed) {
+    tower.fireCooldown -= dt;
+    if (tower.fireCooldown > 0) return;
+
+    const target = findNearestWithinRange(tower, enemies);
+    if (!target) return;
+
+    const dir = new THREE.Vector3().subVectors(
+      target.mesh.position,
+      tower.position
+    );
+    const yaw = Math.atan2(dir.x, dir.z);
+    tower.mesh.rotation.y = yaw;
+
+    tower.fireCooldown = 1 / tower.rate;
+
+    const spawnY =
+      typeof tower.headTopY === "number" ? tower.headTopY - 0.1 : 0.9;
+    const proj = new Projectile(
+      tower.position.clone().add(new THREE.Vector3(0, spawnY, 0)),
+      target,
+      projectileSpeed,
+      tower.scene,
+      tower.projectileEffect || null
+    );
+    proj.damage = tower.damage;
+    projectiles.push(proj);
+
+    tower.playShootSound();
+  },
+
+  applyVisualLevel(tower) {
+    const lvl = tower.level;
+    const head = tower.headMesh;
+    if (!head) return;
+
+    const baseMat = tower.baseMesh?.material;
+    const headMat = head.material;
+
+    if (tower.levelRing) {
+      tower.scene.remove(tower.levelRing);
+      tower.levelRing.geometry.dispose();
+      if (tower.levelRing.material?.dispose) tower.levelRing.material.dispose();
+      tower.levelRing = null;
+    }
+
+    const extraRaw = Math.max(0, (lvl - 1) * VISUAL_TOP_INCREMENT);
+    const visualExtra = Math.min(VISUAL_TOP_CAP, extraRaw);
+
+    if (lvl <= 1) {
+      if (baseMat) {
+        baseMat.color?.set?.(0xff69b4);
+        baseMat.emissive?.set?.(0x000000);
+        baseMat.emissiveIntensity = 0.0;
+      }
+
+      head.scale.set(1, 1, 1);
+      head.position.y = 0.8 + visualExtra;
+      tower.headTopY =
+        (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.55;
+
+      headMat.color?.set?.(0xffb6c1);
+      headMat.emissive?.set?.(0x4a0a2a);
+      headMat.emissiveIntensity = 0.2;
+    } else {
+      if (baseMat) {
+        baseMat.color?.set?.(0xff5ea8);
+        baseMat.emissive?.set?.(0x2a0a1a);
+        baseMat.emissiveIntensity = 0.08;
+      }
+
+      head.scale.set(1.1, 1.15, 1.1);
+      head.position.y = 0.9 + visualExtra;
+      tower.headTopY = (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.6;
+
+      headMat.color?.set?.(0xffc6d9);
+      headMat.emissive?.set?.(0x9a135a);
+      headMat.emissiveIntensity = 0.35;
+
+      const ringGeom = new THREE.TorusGeometry(0.45, 0.035, 8, 24);
+      const ringMat = new THREE.MeshStandardMaterial({
+        color: 0xff8fc2,
+        emissive: 0xe01a6b,
+        emissiveIntensity: 0.55,
+        metalness: 0.3,
+        roughness: 0.45,
+      });
+      const ring = new THREE.Mesh(ringGeom, ringMat);
+      ring.castShadow = false;
+      ring.receiveShadow = false;
+
+      const topY = tower.headTopY ?? head.position.y + 0.8;
+      ring.position.set(
+        tower.mesh.position.x,
+        topY + 0.02,
+        tower.mesh.position.z
+      );
+      ring.rotation.x = Math.PI / 2;
+      ring.name = "tower_level_ring";
+
+      tower.levelRing = ring;
+      tower.scene.add(ring);
+    }
+  },
+};

src/entities/towers/kinds/sniper.js

@@ -0,0 +1,246 @@
+import * as THREE from "three";
+import { Projectile } from "../../Projectile.js";
+import { findClosestToExitInRange } from "../common/targeting.js";
+
+const VISUAL_TOP_INCREMENT = 0.08;
+const VISUAL_TOP_CAP = 0.4;
+
+export default {
+  key: "sniper",
+
+  buildHead(tower) {
+    const headGeo = new THREE.ConeGeometry(0.7, 0.9, 3);
+    const headMat = new THREE.MeshStandardMaterial({
+      color: 0xb0bec5,
+      metalness: 0.35,
+      roughness: 0.4,
+      emissive: 0x330000,
+      emissiveIntensity: 0.4,
+      side: THREE.DoubleSide,
+    });
+
+    const head = new THREE.Mesh(headGeo, headMat);
+    head.castShadow = true;
+    head.position.set(0, 0.95, 0);
+    head.rotation.x = 0;
+    tower.baseMesh.add(head);
+
+    tower.headMesh = head;
+    tower.head = head;
+    const headTopOffset = 0.55;
+    tower.headTopY = tower.mesh.position.y + head.position.y + headTopOffset;
+  },
+
+  tryFire(tower, dt, enemies, projectiles, projectileSpeed) {
+    tower.fireCooldown -= dt;
+
+    if (tower.aiming) {
+      const t = tower.aimedTarget;
+      const targetPos = t?.mesh?.position || t?.position;
+      const alive = t && !t.isDead();
+      const within =
+        alive &&
+        targetPos?.distanceToSquared(tower.position) <=
+          tower.cancelThreshold * tower.cancelThreshold;
+
+      if (!alive || !within) {
+        this.removeLaser(tower);
+        tower.stopAimingTone();
+        tower.aiming = false;
+        tower.aimedTarget = null;
+      } else {
+        const dir = new THREE.Vector3().subVectors(targetPos, tower.position);
+        const yaw = Math.atan2(dir.x, dir.z);
+        tower.mesh.rotation.y = yaw;
+
+        const start = tower.position
+          .clone()
+          .add(new THREE.Vector3(0, tower.headTopY, 0));
+        const end = targetPos.clone();
+        if (tower.laserLine) this.updateLaser(tower.laserLine, start, end);
+
+        tower.aimingTimer -= dt;
+        if (tower.aimingTimer <= 0) {
+          const spawnY =
+            typeof tower.headTopY === "number" ? tower.headTopY - 0.1 : 0.9;
+          const proj = new Projectile(
+            tower.position.clone().add(new THREE.Vector3(0, spawnY, 0)),
+            t,
+            tower.sniperProjectileSpeed ?? projectileSpeed,
+            tower.scene,
+            null
+          );
+          proj.damage = tower.damage;
+          projectiles.push(proj);
+
+          this.removeLaser(tower);
+          tower.stopAimingTone();
+          tower.playFireCrack();
+
+          tower.fireCooldown = 1 / tower.rate;
+
+          tower.aiming = false;
+          tower.aimedTarget = null;
+        }
+      }
+      return;
+    }
+
+    if (tower.fireCooldown > 0) return;
+
+    const target = findClosestToExitInRange(tower, enemies);
+    if (!target) return;
+
+    const dir = new THREE.Vector3().subVectors(
+      target.mesh.position,
+      tower.position
+    );
+    const yaw = Math.atan2(dir.x, dir.z);
+    tower.mesh.rotation.y = yaw;
+
+    tower.aimedTarget = target;
+    tower.aiming = true;
+    tower.aimingTimer = Math.max(0.01, tower.aimTime || 0.01);
+
+    const start = tower.position
+      .clone()
+      .add(new THREE.Vector3(0, tower.headTopY, 0));
+    const end = target.mesh.position.clone();
+    tower.laserLine = this.createLaser(tower, start, end);
+    tower.playAimingTone();
+  },
+
+  createLaser(tower, start, end) {
+    const points = [start.clone(), end.clone()];
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({
+      color: 0xff3b30,
+      transparent: true,
+      opacity: 0.9,
+      linewidth: 2,
+    });
+    const line = new THREE.Line(geometry, material);
+    line.position.y += 0.01;
+    tower.scene.add(line);
+    return line;
+  },
+
+  updateLaser(line, start, end) {
+    const positions = line.geometry.attributes.position;
+    positions.setXYZ(0, start.x, start.y, start.z);
+    positions.setXYZ(1, end.x, end.y, end.z);
+    positions.needsUpdate = true;
+  },
+
+  removeLaser(tower) {
+    if (tower.laserLine) {
+      tower.scene.remove(tower.laserLine);
+      if (tower.laserLine.geometry) tower.laserLine.geometry.dispose();
+      if (tower.laserLine.material?.dispose) tower.laserLine.material.dispose();
+      tower.laserLine = null;
+    }
+  },
+
+  applyVisualLevel(tower) {
+    const lvl = tower.level;
+    const head = tower.headMesh;
+    if (!head) return;
+
+    const baseMat = tower.baseMesh?.material;
+    const headMat = head.material;
+
+    // Remove previous ring if any
+    if (tower.levelRing) {
+      tower.scene.remove(tower.levelRing);
+      tower.levelRing.geometry.dispose();
+      if (tower.levelRing.material?.dispose) tower.levelRing.material.dispose();
+      tower.levelRing = null;
+    }
+
+    // Compute visual-only extra height based on level (starts at level 2)
+    const extraRaw = Math.max(0, (lvl - 1) * VISUAL_TOP_INCREMENT);
+    const visualExtra = Math.min(VISUAL_TOP_CAP, extraRaw);
+
+    if (lvl <= 1) {
+      // Default look for sniper
+      if (baseMat) {
+        baseMat.color?.set?.(0x6d6f73);
+        baseMat.emissive?.set?.(0x000000);
+        baseMat.emissiveIntensity = 0.0;
+        baseMat.metalness = 0.5;
+        baseMat.roughness = 0.35;
+      }
+
+      // Sniper cone head baseline
+      head.scale.set(1, 1, 1);
+      head.position.y = 0.95 + visualExtra;
+      tower.headTopY = (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.55;
+
+      headMat.color?.set?.(0xb0bec5);
+      headMat.emissive?.set?.(0x330000);
+      headMat.emissiveIntensity = 0.4;
+      headMat.metalness = 0.35;
+      headMat.roughness = 0.4;
+    } else {
+      // Level 2+ look for sniper
+      if (baseMat) {
+        baseMat.color?.set?.(0x5d5f63);
+        baseMat.emissive?.set?.(0x2a0a1a);
+        baseMat.emissiveIntensity = 0.08;
+        baseMat.metalness = 0.55;
+        baseMat.roughness = 0.3;
+      }
+
+      // Slightly larger cone; raise by visualExtra
+      head.scale.set(1.1, 1.2, 1.1);
+      head.position.y = 0.95 + visualExtra;
+      tower.headTopY = (tower.mesh?.position.y ?? 0.25) + head.position.y + 0.6;
+
+      headMat.color?.set?.(0x90a4ae);
+      headMat.emissive?.set?.(0x550000);
+      headMat.emissiveIntensity = 0.5;
+      headMat.metalness = 0.4;
+      headMat.roughness = 0.35;
+
+      // Optional thin ring on top (same as basic tower)
+      const ringGeom = new THREE.TorusGeometry(0.45, 0.035, 8, 24);
+      const ringMat = new THREE.MeshStandardMaterial({
+        color: 0x00ffff, // Cyan for sniper
+        emissive: 0xe01a6b,
+        emissiveIntensity: 0.55,
+        metalness: 0.3,
+        roughness: 0.45,
+      });
+      const ring = new THREE.Mesh(ringGeom, ringMat);
+      ring.castShadow = false;
+      ring.receiveShadow = false;
+
+      const topY = tower.headTopY ?? head.position.y + 0.8;
+      ring.position.set(
+        tower.mesh.position.x,
+        topY + 0.02,
+        tower.mesh.position.z
+      );
+      ring.rotation.x = Math.PI / 2;
+      ring.name = "tower_level_ring";
+
+      tower.levelRing = ring;
+      tower.scene.add(ring);
+    }
+
+    // Update headTopY after position changes
+    const headTopOffset = 0.55;
+    tower.headTopY = tower.mesh.position.y + head.position.y + headTopOffset;
+
+    // Sniper-specific upgrades
+    if (lvl > 1) {
+      const minAimTime = (tower.aimTime ?? 0) * 0.4;
+      tower.aimTime = Math.max(minAimTime, (tower.aimTime ?? 0) * 0.9);
+      tower.pierceChance = Math.min(0.15, (tower.pierceChance ?? 0) + 0.03);
+    }
+  },
+
+  onDestroy(tower) {
+    this.removeLaser(tower);
+  },
+};

src/main.js

@@ -26,6 +26,9 @@ const gameState = new GameState();
 const uiManager = new UIManager();
 const effectSystem = new EffectSystem(sceneSetup.scene);
 
+// Make UIManager globally accessible for tower sound system
+window.UIManager = uiManager;
+
 // Build the path
 pathBuilder.buildPath();
 
@@ -238,6 +241,11 @@ function setSelectedTower(tower) {
 function onClick(e) {
   if (!gameState.isGameActive()) return;
 
+  // Ignore clicks on UI elements
+  if (e.target.tagName !== 'CANVAS') {
+    return;
+  }
+
   // If a drag/rotate/pan occurred, suppress the click action entirely
   if (didDrag) {
     didDrag = false; // reset for next interaction

src/ui/UIManager.js

@@ -1,3 +1,5 @@
+import { AUDIO_CONFIG } from "../config/gameConfig.js";
+
 export class UIManager {
   constructor() {
     // HUD elements
@@ -23,6 +25,13 @@ export class UIManager {
     this.palette.className = "palette hidden";
     document.body.appendChild(this.palette);
 
+    // Audio system
+    this.audioCache = {};
+    this.backgroundMusic = null;
+    this.musicVolume = AUDIO_CONFIG.musicVolume;
+    this.effectsVolume = AUDIO_CONFIG.effectsVolume;
+    this.initAudio();
+
     this._paletteClickHandler = null;
     this._outsideHandler = (ev) => {
       if (this.palette.style.display === "none") return;
@@ -204,11 +213,17 @@ export class UIManager {
   }
 
   onUpgradeClick(callback) {
-    this.upgradeBtn.addEventListener("click", callback);
+    this.upgradeBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      callback();
+    });
   }
 
   onSellClick(callback) {
-    this.sellBtn.addEventListener("click", callback);
+    this.sellBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      callback();
+    });
   }
 
   // Palette API
@@ -385,17 +400,44 @@ export class UIManager {
 
     this.palette.appendChild(list);
 
-    // Position palette; nudge to keep on-screen
-    const pad = 8;
-    const rectW = 200;
-    this.palette.style.left =
-      Math.min(window.innerWidth - rectW - pad, Math.max(pad, screenX + 10)) +
-      "px";
-    this.palette.style.top =
-      Math.min(window.innerHeight - 160 - pad, Math.max(pad, screenY + 10)) +
-      "px";
-    this.palette.style.width = rectW + "px";
+    // Position palette initially to measure its size
+    this.palette.style.width = "200px";
     this.palette.classList.remove("hidden");
+    
+    // Get actual dimensions after rendering
+    const rect = this.palette.getBoundingClientRect();
+    const menuWidth = rect.width;
+    const menuHeight = rect.height;
+    
+    // Calculate position with proper bounds checking
+    const pad = 8;
+    let left = screenX + 10;
+    let top = screenY + 10;
+    
+    // Ensure menu stays within viewport horizontally
+    if (left + menuWidth + pad > window.innerWidth) {
+      left = window.innerWidth - menuWidth - pad;
+    }
+    if (left < pad) {
+      left = pad;
+    }
+    
+    // Ensure menu stays within viewport vertically
+    if (top + menuHeight + pad > window.innerHeight) {
+      // Try placing above the click point instead
+      top = screenY - menuHeight - 10;
+      if (top < pad) {
+        // If still doesn't fit, just cap at bottom of screen
+        top = window.innerHeight - menuHeight - pad;
+      }
+    }
+    if (top < pad) {
+      top = pad;
+    }
+    
+    // Apply calculated position
+    this.palette.style.left = left + "px";
+    this.palette.style.top = top + "px";
 
     // After rendering, ensure initial affordability reflects current money if subscribed
     if (this._gameStateForSubscriptions) {
@@ -407,6 +449,150 @@ export class UIManager {
     this.palette.classList.add("hidden");
   }
 
+  // Audio initialization
+  initAudio() {
+    // Load sound effects
+    const soundFiles = {
+      basic: "./src/assets/basic.mp3",
+      slow: "./src/assets/slow.mp3",
+      sniper: "./src/assets/sniper.mp3",
+      electric: "./src/assets/electric.mp3"
+    };
+
+    for (const [type, path] of Object.entries(soundFiles)) {
+      try {
+        const audio = new Audio(path);
+        audio.volume = this.effectsVolume;
+        audio.preload = "auto";
+        this.audioCache[type] = audio;
+      } catch (e) {
+        console.warn(`Failed to load sound for ${type}:`, e);
+      }
+    }
+
+    // Load and start background music
+    if (AUDIO_CONFIG.musicEnabled) {
+      try {
+        console.log("Loading background music...");
+        this.backgroundMusic = new Audio("./src/assets/music.mp3");
+        this.backgroundMusic.volume = this.musicVolume;
+        this.backgroundMusic.loop = true;
+        this.backgroundMusic.preload = "auto";
+        
+        // Add multiple event listeners for debugging
+        this.backgroundMusic.addEventListener('loadstart', () => {
+          console.log("Music load started");
+        });
+        
+        this.backgroundMusic.addEventListener('canplay', () => {
+          console.log("Music can play");
+        });
+        
+        this.backgroundMusic.addEventListener('error', (e) => {
+          console.error("Music load error:", e);
+        });
+        
+        // Start playing music when it's loaded
+        this.backgroundMusic.addEventListener('canplaythrough', () => {
+          console.log("Music loaded, attempting to play...");
+          this.backgroundMusic.play().then(() => {
+            console.log("Music playing successfully!");
+          }).catch(e => {
+            console.log("Music autoplay blocked, will play on user interaction", e);
+            // Fallback: play on first user interaction
+            const playOnInteraction = () => {
+              console.log("Attempting to play music on user interaction...");
+              this.backgroundMusic.play().then(() => {
+                console.log("Music started after user interaction!");
+              }).catch((err) => {
+                console.error("Failed to play music:", err);
+              });
+              document.removeEventListener('click', playOnInteraction);
+              document.removeEventListener('keydown', playOnInteraction);
+            };
+            document.addEventListener('click', playOnInteraction);
+            document.addEventListener('keydown', playOnInteraction);
+          });
+        }, { once: true });
+        
+        // Force load
+        this.backgroundMusic.load();
+      } catch (e) {
+        console.warn("Failed to load background music:", e);
+      }
+    } else {
+      console.log("Music is disabled in config");
+    }
+  }
+
+  // Play shooting sound for a tower
+  playTowerSound(tower) {
+    if (!tower || !tower.type || !AUDIO_CONFIG.effectsEnabled) return;
+    
+    const audio = this.audioCache[tower.type];
+    if (audio) {
+      try {
+        // Clone and play to allow overlapping sounds
+        const audioClone = audio.cloneNode();
+        audioClone.volume = this.effectsVolume;
+        audioClone.play().catch(() => {});
+      } catch (e) {
+        // Fallback to direct play if cloning fails
+        audio.currentTime = 0;
+        audio.volume = this.effectsVolume;
+        audio.play().catch(() => {});
+      }
+    }
+  }
+
+  // Sniper aiming tone (optional, can be extended)
+  playAimingTone(tower) {
+    // Could play a subtle aiming sound if desired
+  }
+
+  // Stop aiming tone
+  stopAimingTone(tower) {
+    // Stop any aiming sound if implemented
+  }
+
+  // Sniper fire crack sound
+  playFireCrack(tower) {
+    // Use the sniper sound for fire crack
+    if (tower && tower.type === "sniper") {
+      this.playTowerSound(tower);
+    }
+  }
+
+  // Volume control methods
+  setMusicVolume(volume) {
+    this.musicVolume = Math.max(0, Math.min(1, volume));
+    if (this.backgroundMusic) {
+      this.backgroundMusic.volume = this.musicVolume;
+    }
+  }
+
+  setEffectsVolume(volume) {
+    this.effectsVolume = Math.max(0, Math.min(1, volume));
+    // Update all cached sound effects
+    for (const audio of Object.values(this.audioCache)) {
+      if (audio) audio.volume = this.effectsVolume;
+    }
+  }
+
+  toggleMusic() {
+    if (this.backgroundMusic) {
+      if (this.backgroundMusic.paused) {
+        this.backgroundMusic.play().catch(() => {});
+      } else {
+        this.backgroundMusic.pause();
+      }
+    }
+  }
+
+  toggleEffects() {
+    AUDIO_CONFIG.effectsEnabled = !AUDIO_CONFIG.effectsEnabled;
+  }
+
   /**
    * Optional teardown to prevent leaks: unsubscribe from GameState events.
    */