Spaces:

victor
/

tower-defense

Running

App Files Files Community

victor HF Staff commited on 8 days ago

Commit

b29710c

0 Parent(s):

Initial commit

Browse files

Files changed (14) hide show

.DS_Store +0 -0
index.html +53 -0
src/config/gameConfig.js +170 -0
src/entities/Enemy.js +157 -0
src/entities/Projectile.js +72 -0
src/entities/Tower.js +1140 -0
src/game/GameState.js +231 -0
src/main.js +592 -0
src/scene/PathBuilder.js +67 -0
src/scene/SceneSetup.js +151 -0
src/ui/UIManager.js +407 -0
src/utils/utils.js +82 -0
styles/theme.css +97 -0
styles/ui.css +254 -0

.DS_Store ADDED Viewed

Binary file (6.15 kB). View file

index.html ADDED Viewed

	@@ -0,0 +1,53 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Tower Defense</title>
+    <link rel="stylesheet" href="styles/theme.css">
+    <link rel="stylesheet" href="styles/ui.css">
+    <style>
+      body { margin: 0; overflow: hidden; }
+      canvas { display: block; }
+    </style>
+</head>
+<body>
+    <div class="hud">
+      <div class="panel panel--compact">
+        <div class="chips">
+          <span class="chip"><span class="chip__label">Money</span><b id="money">200</b></span>
+          <span class="chip"><span class="chip__label">Lives</span><b id="lives">10</b></span>
+          <span class="chip"><span class="chip__label">Wave</span><b id="wave">0</b>/<b id="wavesTotal">∞</b></span>
+        </div>
+        <div id="messages" class="message-bar hidden"></div>
+        <button id="restart" class="btn btn--primary hidden">Restart</button>
+      </div>
+      <div id="upgradePanel" class="upgrade-panel hidden">
+        <div class="panel-title">Selected Tower</div>
+        <div class="stat-grid">
+          <div class="stat-label">Level</div><div class="stat-value" id="t_level">1</div>
+          <div class="stat-label">Range</div><div class="stat-value" id="t_range">0</div>
+          <div class="stat-label">Fire Rate</div><div class="stat-value" id="t_rate">0</div>
+          <div class="stat-label">Damage</div><div class="stat-value" id="t_damage">0</div>
+          <div class="stat-label">Next Upgrade</div><div class="stat-value" id="t_nextCost">-</div>
+        </div>
+        <div class="u-flex u-gap-3">
+          <button id="upgradeBtn" class="btn btn--primary">Upgrade</button>
+          <button id="sellBtn" class="btn">Sell</button>
+        </div>
+      </div>
+    </div>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
+    <script type="module" src="src/main.js"></script>
+</body>
+</html>

src/config/gameConfig.js ADDED Viewed

	@@ -0,0 +1,170 @@

+import * as THREE from "three";
+// Game settings
+export const INITIAL_MONEY = 200;
+export const INITIAL_LIVES = 10;
+// Tower settings
+// Define multiple tower types, keeping the original as "basic"
+export const TOWER_TYPES = {
+  basic: {
+    key: "basic",
+    name: "Basic Tower",
+    type: "basic",
+    cost: 50,
+    range: 9,
+    fireRate: 1.0, // shots per second
+    damage: 6,
+  },
+  slow: {
+    key: "slow",
+    name: "Slow Tower",
+    type: "slow",
+    cost: 60,
+    range: 8.5,
+    fireRate: 0.9,
+    damage: 4,
+    // On-hit slow: 40% slow (mult 0.6) for 2.5s, refresh on re-hit
+    projectileEffect: {
+      type: "slow",
+      mult: 0.6,
+      duration: 2.5,
+      color: 0x80d8ff,
+      emissive: 0x104a70,
+    },
+  },
+  sniper: {
+    key: "sniper",
+    name: "Sniper Tower",
+    type: "sniper",
+    cost: 130,
+    // 2x the range of basic
+    range: 18,
+    // slow fire rate
+    fireRate: 0.7, // shots per second (reload ≈ 3.33s)
+    damage: 32, // high damage per shot
+    // Sniper specific parameters
+    aimTime: 0.8, // seconds to aim before firing
+    projectileSpeed: 40, // high-speed dart
+    // Targeting priority identifier
+    targetPriority: "closestToExit",
+    // If target moves out of this threshold (>= range) during aiming, cancel
+    cancelThreshold: 18,
+    // Optional chance to pierce; behavior can be extended later
+    pierceChance: 0.0,
+  },
+  electric: {
+    key: "electric",
+    name: "Electric Tower",
+    type: "electric",
+    cost: 200,
+    // Set to the smallest tower range (slow tower = 8.5)
+    range: 8.5, // world units (scene uses world units; 1 cell = 2 units, so ~4.25 cells)
+    fireRate: 1.0, // shots per second
+    damage: 25, // per target
+    maxTargets: 3,
+    // Persist electric arc visuals for 2 seconds
+    arcDurationMs: 2000,
+    // Visual tuning for arcs (can be read by Tower)
+    arc: {
+      color: 0x9ad6ff, // light electric blue
+      coreColor: 0xe6fbff,
+      thickness: 2,
+      jitter: 0.25,
+      segments: 10,
+    },
+    // Targeting priority
+    targetPriority: "closestToExit",
+  },
+};
+// Back-compat alias for existing code that expects TOWER_CONFIG
+export const TOWER_CONFIG = TOWER_TYPES.basic;
+// Projectile settings
+export const PROJECTILE_SPEED = 18;
+// Upgrade settings
+export const UPGRADE_MAX_LEVEL = 5;
+export const UPGRADE_START_COST = 40;
+export const UPGRADE_COST_SCALE = 1.6;
+export const UPGRADE_RANGE_SCALE = 1.1; // +10% per level
+export const UPGRADE_RATE_SCALE = 1.15; // +15% per level
+export const UPGRADE_DAMAGE_SCALE = 1.12; // +12% per level
+export const SELL_REFUND_RATE = 0.7;
+// Infinite wave scaling configuration (replaces static WAVES array)
+export const WAVE_SCALING = {
+  // base values (wave 1)
+  baseCount: 8,
+  baseHP: 12,
+  baseSpeed: 3.0,
+  baseReward: 5,
+  baseSpawnInterval: 0.8,
+  // per-wave growth (applied from wave 2 onward)
+  countPerWave: 3, // +3 enemies each wave
+  hpMultiplierPerWave: 1.15, // HP *= 1.18 each wave
+  speedIncrementPerWave: 0.025, // +0.05 speed per wave
+  rewardMultiplierPerWave: 1.03, // reward *= 1.03 each wave
+  spawnIntervalDecayPerWave: 0.01, // -0.02s per wave
+  // safeguards/limits
+  minSpawnInterval: 0.3,
+  maxSpeed: 5.5,
+  roundCountToInt: true,
+};
+// Compute wave parameters for a given wave number (1-based)
+export function getWaveParams(n) {
+  const w = WAVE_SCALING;
+  const waveNum = Math.max(1, Math.floor(n));
+  const countBase = w.baseCount + (waveNum - 1) * w.countPerWave;
+  const count = w.roundCountToInt
+    ? Math.max(1, Math.round(countBase))
+    : Math.max(1, countBase);
+  const hp = Math.max(
+    1,
+    Math.round(w.baseHP * Math.pow(w.hpMultiplierPerWave, waveNum - 1))
+  );
+  const speed = Math.min(
+    w.maxSpeed,
+    w.baseSpeed + (waveNum - 1) * w.speedIncrementPerWave
+  );
+  const reward = Math.max(
+    1,
+    Math.round(w.baseReward * Math.pow(w.rewardMultiplierPerWave, waveNum - 1))
+  );
+  const spawnInterval = Math.max(
+    w.minSpawnInterval,
+    w.baseSpawnInterval - (waveNum - 1) * w.spawnIntervalDecayPerWave
+  );
+  return { count, hp, speed, reward, spawnInterval };
+}
+// Path waypoints
+export const PATH_POINTS = [
+  new THREE.Vector3(-24, 0, -24),
+  new THREE.Vector3(-24, 0, 0),
+  new THREE.Vector3(0, 0, 0),
+  new THREE.Vector3(0, 0, 16),
+  new THREE.Vector3(20, 0, 16),
+  new THREE.Vector3(26, 0, 26),
+];
+// Grid settings
+export const GROUND_SIZE = 60;
+export const GRID_CELL_SIZE = 2;
+// Visual settings
+export const SCENE_BACKGROUND = 0x202432;
+// Road settings
+export const ROAD_HALF_WIDTH = 1.5;
+export const ROAD_BEVEL_SIZE = 1.2;
+export const ROAD_ARC_SEGMENTS = 16;

src/entities/Enemy.js ADDED Viewed

	@@ -0,0 +1,157 @@

+import * as THREE from "three";
+export class Enemy {
+  constructor(hp, speed, reward, pathPoints, scene) {
+    this.hp = hp;
+    this.maxHp = hp;
+    // Keep original speed as baseSpeed; speed becomes derived
+    this.baseSpeed = speed;
+    this.reward = reward;
+    this.currentSeg = 0;
+    this.pathPoints = pathPoints;
+    this.scene = scene;
+    this.position = pathPoints[0].clone();
+    this.target = pathPoints[1].clone();
+    // Slow status (non-stacking, refreshes on re-hit)
+    this.slowMult = 1.0; // 0.6 means 40% slow
+    this.slowRemaining = 0.0; // seconds remaining
+    // Mesh
+    const geo = new THREE.ConeGeometry(0.6, 1.6, 6);
+    const mat = new THREE.MeshStandardMaterial({
+      color: 0xff5555,
+      roughness: 0.7,
+    });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.castShadow = true;
+    mesh.position.copy(this.position);
+    mesh.rotation.x = Math.PI;
+    // Health bar
+    const hbBgGeo = new THREE.PlaneGeometry(1.2, 0.15);
+    const hbBgMat = new THREE.MeshBasicMaterial({
+      color: 0x000000,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+      depthTest: false, // ensure bar not occluded by ground
+      transparent: true,
+      opacity: 0.8,
+    });
+    const hbBg = new THREE.Mesh(hbBgGeo, hbBgMat);
+    // Lift the bar higher so it's clearly above the enemy and ground
+    // Keep it centered in local Z; we'll face it to camera each frame
+    hbBg.position.set(0, 2.0, 0.0);
+    // Remove fixed -90deg pitch; use camera-facing billboard instead
+    hbBg.rotation.set(0, 0, 0);
+    // Billboard: always face the active camera
+    hbBg.onBeforeRender = (renderer, scene, camera) => {
+      hbBg.quaternion.copy(camera.quaternion);
+    };
+    const hbGeo = new THREE.PlaneGeometry(1.2, 0.15);
+    const hbMat = new THREE.MeshBasicMaterial({
+      color: 0x00ff00,
+      side: THREE.DoubleSide,
+      depthWrite: false,
+      depthTest: false, // ensure bar not occluded by ground
+      transparent: true,
+      opacity: 0.95,
+    });
+    const hb = new THREE.Mesh(hbGeo, hbMat);
+    // Slight offset to avoid z-fighting with bg
+    hb.position.set(0, 0.002, 0);
+    hbBg.add(hb);
+    mesh.add(hbBg);
+    // Ensure bars render above the enemy and ground
+    mesh.renderOrder = 1;
+    hbBg.renderOrder = 2000;
+    hb.renderOrder = 2001;
+    this.mesh = mesh;
+    this.hbBg = hbBg;
+    this.hb = hb;
+    // For validation: briefly show bars at spawn so we can confirm visibility.
+    // This will be overridden as soon as takeDamage() runs or update() enforces state.
+    this.hbBg.visible = true;
+    scene.add(mesh);
+  }
+  takeDamage(dmg) {
+    this.hp -= dmg;
+    this.hp = Math.max(this.hp, 0);
+    const ratio = Math.max(0, Math.min(1, this.hp / this.maxHp));
+    this.hb.scale.x = ratio;
+    this.hb.position.x = -0.6 * (1 - ratio) + 0; // anchor left
+    // Show bar only when not at full health and still alive
+    this.hbBg.visible = this.hp > 0 && this.hp < this.maxHp;
+  }
+  applySlow(mult, duration) {
+    // Non-stacking: overwrite multiplier and refresh duration
+    this.slowMult = mult;
+    this.slowRemaining = duration;
+  }
+  isDead() {
+    return this.hp <= 0;
+  }
+  update(dt) {
+    // Tick slow timer
+    if (this.slowRemaining > 0) {
+      this.slowRemaining -= dt;
+      if (this.slowRemaining <= 0) {
+        this.slowRemaining = 0;
+        this.slowMult = 1.0;
+      }
+    }
+    const toTarget = new THREE.Vector3().subVectors(this.target, this.position);
+    const dist = toTarget.length();
+    const epsilon = 0.01;
+    if (dist < epsilon) {
+      // Advance to next waypoint
+      this.currentSeg++;
+      if (this.currentSeg >= this.pathPoints.length - 1) {
+        // Reached end
+        return "end";
+      }
+      this.position.copy(this.target);
+      this.target = this.pathPoints[this.currentSeg + 1].clone();
+    } else {
+      toTarget.normalize();
+      const effectiveSpeed =
+        this.baseSpeed * (this.slowRemaining > 0 ? this.slowMult : 1.0);
+      this.position.addScaledVector(toTarget, effectiveSpeed * dt);
+    }
+    this.mesh.position.copy(this.position);
+    // Keep health bar visibility consistent (in case hp changes elsewhere)
+    if (this.hbBg) {
+      // Only show when damaged; if you don't see bars, they will appear after first damage.
+      this.hbBg.visible = this.hp > 0 && this.hp < this.maxHp;
+    }
+    // Face movement direction
+    if (toTarget.lengthSq() > 0.0001) {
+      const angle = Math.atan2(
+        this.target.x - this.position.x,
+        this.target.z - this.position.z
+      );
+      this.mesh.rotation.y = angle;
+    }
+    return "ok";
+  }
+  destroy() {
+    this.scene.remove(this.mesh);
+  }
+}

src/entities/Projectile.js ADDED Viewed

	@@ -0,0 +1,72 @@

+import * as THREE from "three";
+export class Projectile {
+  constructor(pos, target, speed, scene, projectileEffect = null) {
+    this.position = pos.clone();
+    this.target = target;
+    this.speed = speed;
+    this.scene = scene;
+    this.damage = 0; // Will be set by tower
+    this.projectileEffect = projectileEffect;
+    const geo = new THREE.SphereGeometry(0.15, 8, 8);
+    const mat = new THREE.MeshStandardMaterial({
+      color:
+        projectileEffect && projectileEffect.color
+          ? projectileEffect.color
+          : 0xffe082,
+      emissive:
+        projectileEffect && projectileEffect.emissive
+          ? projectileEffect.emissive
+          : 0x553300,
+    });
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.castShadow = true;
+    mesh.position.copy(this.position);
+    this.mesh = mesh;
+    scene.add(mesh);
+    this.alive = true;
+  }
+  update(dt, spawnHitEffect) {
+    if (!this.alive) return "dead";
+    if (!this.target || this.target.isDead()) {
+      this.alive = false;
+      return "dead";
+    }
+    const toTarget = new THREE.Vector3().subVectors(
+      this.target.mesh.position,
+      this.position
+    );
+    const dist = toTarget.length();
+    if (dist < 0.4) {
+      this.target.takeDamage(this.damage);
+      // Apply on-hit effect if any
+      if (
+        this.projectileEffect &&
+        this.projectileEffect.type === "slow" &&
+        this.target.applySlow
+      ) {
+        const mult = this.projectileEffect.mult ?? 1.0;
+        const duration = this.projectileEffect.duration ?? 0;
+        this.target.applySlow(mult, duration);
+      }
+      spawnHitEffect(this.position);
+      this.alive = false;
+      return "hit";
+    }
+    toTarget.normalize();
+    this.position.addScaledVector(toTarget, this.speed * dt);
+    this.mesh.position.copy(this.position);
+    return "ok";
+  }
+  destroy() {
+    this.scene.remove(this.mesh);
+  }
+}

src/entities/Tower.js ADDED Viewed

	@@ -0,0 +1,1140 @@

+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);
+  }
+}

src/game/GameState.js ADDED Viewed

	@@ -0,0 +1,231 @@

+import {
+  INITIAL_MONEY,
+  INITIAL_LIVES,
+  getWaveParams,
+} from "../config/gameConfig.js";
+/**
+ * Minimal event emitter for local use.
+ * Backward-compatible and small-footprint; no external deps.
+ */
+class SimpleEventEmitter {
+  constructor() {
+    this._events = new Map();
+  }
+  on(type, handler) {
+    if (!this._events.has(type)) this._events.set(type, new Set());
+    this._events.get(type).add(handler);
+  }
+  off(type, handler) {
+    const set = this._events.get(type);
+    if (!set) return;
+    set.delete(handler);
+    if (set.size === 0) this._events.delete(type);
+  }
+  emit(type, ...args) {
+    const set = this._events.get(type);
+    if (!set) return;
+    // Copy to array to avoid mutation issues during emit
+    [...set].forEach((h) => {
+      try {
+        h(...args);
+      } catch {
+        // swallow to avoid breaking game loop
+      }
+    });
+  }
+}
+export class GameState {
+  constructor() {
+    // Internal event bus
+    this._events = new SimpleEventEmitter();
+    this.reset();
+  }
+  /**
+   * Subscribe to GameState events.
+   * Usage: gameState.on('moneyChanged', (newMoney, prevMoney) => {})
+   */
+  on(type, handler) {
+    this._events.on(type, handler);
+  }
+  /**
+   * Unsubscribe from GameState events.
+   */
+  off(type, handler) {
+    this._events.off(type, handler);
+  }
+  /**
+   * Convenience subscription helpers for moneyChanged event.
+   */
+  subscribeMoneyChanged(handler) {
+    this.on("moneyChanged", handler);
+  }
+  unsubscribeMoneyChanged(handler) {
+    this.off("moneyChanged", handler);
+  }
+  reset() {
+    this.money = INITIAL_MONEY;
+    this.lives = INITIAL_LIVES;
+    this.waveIndex = 0; // 0-based; wave number = waveIndex + 1
+    this.gameOver = false;
+    this.gameWon = false; // no longer used for wave completion, kept for compatibility
+    this.totalWaves = Infinity; // for compatibility with any UI that reads it
+    // Wave spawning state (accumulator-based; in seconds)
+    this.lastSpawnTime = 0; // kept for compatibility but unused by new accumulator
+    this.spawnAccum = 0;
+    this.spawnedThisWave = 0;
+    this.waveActive = false;
+    // Gameplay speed (1x or 2x)
+    this.gameSpeed = 1;
+    // Entity arrays
+    this.enemies = [];
+    this.towers = [];
+    this.projectiles = [];
+    // Selection state
+    this.selectedTower = null;
+  }
+  setGameSpeed(speed) {
+    const s = speed === 2 ? 2 : 1;
+    this.gameSpeed = s;
+  }
+  getGameSpeed() {
+    return this.gameSpeed;
+  }
+  startWave() {
+    if (this.gameOver) return false;
+    this.waveActive = true;
+    // reset accumulator timing
+    this.lastSpawnTime = performance.now() / 1000;
+    this.spawnAccum = 0;
+    this.spawnedThisWave = 0;
+    return true;
+  }
+  getCurrentWave() {
+    // wave number is 1-based
+    const waveNum = this.waveIndex + 1;
+    return getWaveParams(waveNum);
+  }
+  nextWave() {
+    this.waveIndex++;
+    // prepare next wave accumulator and state
+    this.spawnAccum = 0;
+    this.spawnedThisWave = 0;
+    this.waveActive = false;
+    // never set gameWon due to infinite waves
+  }
+  takeDamage(amount = 1) {
+    this.lives -= amount;
+    if (this.lives <= 0) {
+      this.gameOver = true;
+    }
+  }
+  /**
+   * Increment money and emit moneyChanged if value changed.
+   */
+  addMoney(amount) {
+    if (!amount) return;
+    const prev = this.money;
+    this.money += amount;
+    if (this.money !== prev) {
+      this._events.emit("moneyChanged", this.money, prev);
+    }
+  }
+  /**
+   * Spend money if enough funds; emits moneyChanged on success.
+   * Returns true if spent, false otherwise.
+   */
+  spendMoney(amount) {
+    if (this.money >= amount) {
+      const prev = this.money;
+      this.money -= amount;
+      if (this.money !== prev) {
+        this._events.emit("moneyChanged", this.money, prev);
+      }
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Set absolute money value; emits moneyChanged if changed.
+   */
+  setMoney(amount) {
+    const prev = this.money;
+    this.money = amount;
+    if (this.money !== prev) {
+      this._events.emit("moneyChanged", this.money, prev);
+    }
+  }
+  /**
+   * Returns whether there is enough money for amount.
+   */
+  canAfford(amount) {
+    return this.money >= amount;
+  }
+  // TODO(deprecation): Avoid direct assignments to `money` outside GameState.
+  // Migrate any external direct writes to use addMoney/spendMoney/setMoney.
+  addEnemy(enemy) {
+    this.enemies.push(enemy);
+  }
+  removeEnemy(enemy) {
+    const index = this.enemies.indexOf(enemy);
+    if (index > -1) {
+      this.enemies.splice(index, 1);
+    }
+  }
+  addTower(tower) {
+    this.towers.push(tower);
+  }
+  removeTower(tower) {
+    const index = this.towers.indexOf(tower);
+    if (index > -1) {
+      this.towers.splice(index, 1);
+    }
+  }
+  addProjectile(projectile) {
+    this.projectiles.push(projectile);
+  }
+  removeProjectile(projectile) {
+    const index = this.projectiles.indexOf(projectile);
+    if (index > -1) {
+      this.projectiles.splice(index, 1);
+    }
+  }
+  setSelectedTower(tower) {
+    this.selectedTower = tower;
+  }
+  isGameActive() {
+    return !this.gameOver;
+  }
+}

src/main.js ADDED Viewed

	@@ -0,0 +1,592 @@

+import * as THREE from "three";
+import { SceneSetup } from "./scene/SceneSetup.js";
+import { PathBuilder } from "./scene/PathBuilder.js";
+import { GameState } from "./game/GameState.js";
+import { UIManager } from "./ui/UIManager.js";
+import { Enemy } from "./entities/Enemy.js";
+import { Tower } from "./entities/Tower.js";
+import {
+  TOWER_TYPES,
+  PATH_POINTS,
+  PROJECTILE_SPEED,
+  GRID_CELL_SIZE,
+} from "./config/gameConfig.js";
+import {
+  snapToGrid,
+  isOnRoad,
+  EffectSystem,
+  worldToCell,
+  cellToWorldCenter,
+} from "./utils/utils.js";
+// Initialize game components
+const sceneSetup = new SceneSetup();
+const pathBuilder = new PathBuilder(sceneSetup.scene);
+const gameState = new GameState();
+const uiManager = new UIManager();
+const effectSystem = new EffectSystem(sceneSetup.scene);
+// Build the path
+pathBuilder.buildPath();
+// Initialize UI
+uiManager.setWavesTotal(gameState.totalWaves);
+uiManager.updateHUD(gameState);
+uiManager.setMessage(
+  "Click on the ground to place a tower. Press G to toggle grid."
+);
+// Initialize speed control UI
+if (typeof uiManager.initSpeedControls === "function") {
+  uiManager.initSpeedControls(gameState.getGameSpeed());
+}
+if (typeof uiManager.onSpeedChange === "function") {
+  uiManager.onSpeedChange((speed) => {
+    if (typeof gameState.setGameSpeed === "function") {
+      gameState.setGameSpeed(speed);
+    } else {
+      gameState.gameSpeed = speed === 2 ? 2 : 1;
+    }
+    if (typeof uiManager.updateSpeedControls === "function") {
+      uiManager.updateSpeedControls(
+        gameState.getGameSpeed ? gameState.getGameSpeed() : gameState.gameSpeed
+      );
+    }
+  });
+}
+/**
+ * Raycaster and pointer state
+ */
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+// Track hovered tower for outline toggle
+let hoveredTower = null;
+// Drag/rotation suppression to avoid triggering click after a drag
+let isPointerDown = false;
+let didDrag = false;
+let downPos = { x: 0, y: 0 };
+// pixels moved to consider it a drag (tuned to ignore minor jitter)
+const DRAG_SUPPRESS_PX = 8;
+// Hover highlight overlay (cell preview)
+const hoverMaterial = new THREE.MeshBasicMaterial({
+  color: 0x3a97ff,
+  transparent: true,
+  opacity: 0.25,
+  depthWrite: false,
+});
+const hoverGeo = new THREE.PlaneGeometry(GRID_CELL_SIZE, GRID_CELL_SIZE);
+const hoverMesh = new THREE.Mesh(hoverGeo, hoverMaterial);
+hoverMesh.rotation.x = -Math.PI / 2;
+hoverMesh.visible = false;
+sceneSetup.scene.add(hoverMesh);
+// Track last hovered center to reuse on click
+let lastHoveredCenter = null;
+function updateHover(e) {
+  // Track drag distance while pointer is down to suppress click-after-drag
+  if (isPointerDown) {
+    const dx = e.clientX - downPos.x;
+    const dy = e.clientY - downPos.y;
+    if (!didDrag && dx * dx + dy * dy >= DRAG_SUPPRESS_PX * DRAG_SUPPRESS_PX) {
+      didDrag = true;
+    }
+  }
+  if (!gameState.isGameActive()) {
+    hoverMesh.visible = false;
+    // clear tower hover when game inactive
+    if (hoveredTower) {
+      hoveredTower.setHovered(false);
+      hoveredTower = null;
+    }
+    return;
+  }
+  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+  raycaster.setFromCamera(mouse, sceneSetup.camera);
+  // 1) Tower hover detection via raycast
+  const towerMeshes = gameState.towers.map((t) => t.mesh);
+  const tHits = towerMeshes.length
+    ? raycaster.intersectObjects(towerMeshes, true)
+    : [];
+  if (tHits.length > 0) {
+    const hitObj = tHits[0].object;
+    const owner = gameState.towers.find(
+      (t) =>
+        hitObj === t.mesh ||
+        t.mesh.children.includes(hitObj) ||
+        t.head === hitObj ||
+        t.ring === hitObj ||
+        t.mesh.children.some((c) => c === hitObj)
+    );
+    if (owner) {
+      if (hoveredTower && hoveredTower !== owner) {
+        hoveredTower.setHovered(false);
+      }
+      hoveredTower = owner;
+      hoveredTower.setHovered(true);
+    }
+  } else {
+    if (hoveredTower) {
+      hoveredTower.setHovered(false);
+      hoveredTower = null;
+    }
+  }
+  // 2) Ground hover preview (existing behavior)
+  const intersects = raycaster.intersectObjects([sceneSetup.ground], false);
+  if (intersects.length === 0) {
+    hoverMesh.visible = false;
+    lastHoveredCenter = null;
+    return;
+  }
+  const p = intersects[0].point.clone();
+  p.y = 0;
+  // Convert to cell center
+  const { col, row } = worldToCell(p.x, p.z, GRID_CELL_SIZE);
+  const center = cellToWorldCenter(col, row, GRID_CELL_SIZE);
+  // Determine validity using existing constraints
+  const valid = canPlaceTowerAt(center);
+  hoverMesh.position.set(center.x, 0.01, center.z);
+  hoverMesh.material.color.setHex(valid ? 0x3a97ff : 0xff5555);
+  hoverMesh.visible = true;
+  lastHoveredCenter = center;
+}
+function canPlaceTowerAt(pos) {
+  if (isOnRoad(pos)) {
+    uiManager.setMessage("Can't place on the road!");
+    return false;
+  }
+  // Allow edge-adjacent placement: threshold based on grid size
+  const minSeparation = 0.9 * GRID_CELL_SIZE;
+  for (const t of gameState.towers) {
+    if (t.position.distanceTo(pos) < minSeparation) {
+      uiManager.setMessage("Too close to another tower.");
+      return false;
+    }
+  }
+  return true;
+}
+// Game functions
+function resetGame() {
+  // Clean up entities
+  gameState.enemies.forEach((e) => e.destroy());
+  gameState.towers.forEach((t) => t.destroy());
+  gameState.projectiles.forEach((p) => p.destroy());
+  // Reset game state
+  gameState.reset();
+  // Ensure speed is reset to x1 at the start of a new game
+  if (typeof gameState.setGameSpeed === "function") {
+    gameState.setGameSpeed(1);
+  } else {
+    gameState.gameSpeed = 1;
+  }
+  if (typeof uiManager.updateSpeedControls === "function") {
+    uiManager.updateSpeedControls(
+      gameState.getGameSpeed ? gameState.getGameSpeed() : gameState.gameSpeed
+    );
+  }
+  // Update UI
+  uiManager.setMessage(
+    "Click on the ground to place a tower. Press G to toggle grid."
+  );
+  uiManager.updateHUD(gameState);
+}
+function spawnEnemy(wave) {
+  const enemy = new Enemy(
+    wave.hp,
+    wave.speed,
+    wave.reward,
+    PATH_POINTS,
+    sceneSetup.scene
+  );
+  gameState.addEnemy(enemy);
+}
+function setSelectedTower(tower) {
+  // Clear old selection
+  if (gameState.selectedTower) {
+    gameState.selectedTower.setSelected(false);
+  }
+  gameState.setSelectedTower(tower);
+  if (tower) {
+    tower.setSelected(true);
+    uiManager.showUpgradePanel(tower, gameState.money);
+  } else {
+    uiManager.hideUpgradePanel();
+  }
+}
+// Event handlers
+function onClick(e) {
+  if (!gameState.isGameActive()) return;
+  // If a drag/rotate/pan occurred, suppress the click action entirely
+  if (didDrag) {
+    didDrag = false; // reset for next interaction
+    // Also clear any transient hover
+    if (hoveredTower) {
+      hoveredTower.setHovered(false);
+      hoveredTower = null;
+    }
+    return;
+  }
+  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
+  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
+  raycaster.setFromCamera(mouse, sceneSetup.camera);
+  // First, try to select a tower
+  const towerMeshes = gameState.towers.map((t) => t.mesh);
+  const tHits = raycaster.intersectObjects(towerMeshes, true);
+  if (tHits.length > 0) {
+    // Find owning tower
+    const hit = tHits[0].object;
+    const owner = gameState.towers.find(
+      (t) =>
+        hit === t.mesh ||
+        t.mesh.children.includes(hit) ||
+        t.head === hit ||
+        t.ring === hit ||
+        t.mesh.children.some((c) => c === hit)
+    );
+    if (owner) {
+      setSelectedTower(owner);
+      return;
+    }
+  }
+  // Otherwise, handle ground placement and deselection
+  const intersects = raycaster.intersectObjects([sceneSetup.ground], false);
+  if (intersects.length > 0) {
+    const p = intersects[0].point.clone();
+    p.y = 0;
+    // Deselect if clicking ground without Shift
+    if (!e.shiftKey) {
+      setSelectedTower(null);
+    }
+    // Compute exact cell center instead of intersection
+    const { col, row } = worldToCell(p.x, p.z, GRID_CELL_SIZE);
+    const pCenter = cellToWorldCenter(col, row, GRID_CELL_SIZE);
+    // Place constraints based on center
+    if (!canPlaceTowerAt(pCenter)) {
+      return;
+    }
+    // Build palette options based on affordability
+    const opts = [
+      {
+        key: "basic",
+        name: TOWER_TYPES.basic.name,
+        cost: TOWER_TYPES.basic.cost,
+        enabled: gameState.canAfford(TOWER_TYPES.basic.cost),
+        desc: "Balanced tower",
+        color: "#3a97ff",
+      },
+      {
+        key: "slow",
+        name: TOWER_TYPES.slow.name,
+        cost: TOWER_TYPES.slow.cost,
+        enabled: gameState.canAfford(TOWER_TYPES.slow.cost),
+        desc: "On-hit slow for 2.5s",
+        color: "#2fa8ff",
+      },
+      {
+        key: "sniper",
+        name: TOWER_TYPES.sniper.name,
+        cost: TOWER_TYPES.sniper.cost,
+        enabled: gameState.canAfford(TOWER_TYPES.sniper.cost),
+        desc: "Long range, slow fire, high damage; aims before firing",
+        color: "#ff3b30",
+      },
+      // New Electric tower option
+      ...(TOWER_TYPES.electric
+        ? [
+            {
+              key: "electric",
+              name: TOWER_TYPES.electric.name,
+              cost: TOWER_TYPES.electric.cost,
+              enabled: gameState.canAfford(TOWER_TYPES.electric.cost),
+              desc: "Electric arcs hit up to 3 enemies",
+              color: "#9ad6ff",
+            },
+          ]
+        : []),
+    ];
+    // Show palette near click
+    uiManager.showTowerPalette(e.clientX, e.clientY, opts);
+    // One-time handlers
+    const handleSelect = (key) => {
+      const def = TOWER_TYPES[key];
+      if (!def) return;
+      // Re-validate position and funds at selection time
+      if (!canPlaceTowerAt(pCenter)) return;
+      if (!gameState.canAfford(def.cost)) {
+        uiManager.setMessage("Not enough money!");
+        return;
+      }
+      gameState.spendMoney(def.cost);
+      uiManager.updateHUD(gameState);
+      const tower = new Tower(pCenter, def, sceneSetup.scene);
+      gameState.addTower(tower);
+      uiManager.setMessage(`${def.name} placed!`);
+    };
+    const handleCancel = () => {
+      // No-op, message can be preserved
+    };
+    uiManager.onPaletteSelect((key) => handleSelect(key));
+    uiManager.onPaletteCancel(() => handleCancel());
+  } else {
+    setSelectedTower(null);
+  }
+  // clear any hover state after processing click (prevents stuck outline)
+  if (hoveredTower) {
+    hoveredTower.setHovered(false);
+    hoveredTower = null;
+  }
+}
+/**
+ * Pointer handlers to detect drags (used to suppress click after rotate/pan)
+ */
+function onMouseDown(e) {
+  // Only consider primary or secondary buttons; ignore other cases
+  isPointerDown = true;
+  didDrag = false;
+  downPos.x = e.clientX;
+  downPos.y = e.clientY;
+}
+function onMouseUp() {
+  // End drag tracking; let click handler run, which will check didDrag
+  isPointerDown = false;
+}
+// Setup event listeners
+window.addEventListener("click", onClick);
+window.addEventListener("mousemove", updateHover);
+window.addEventListener("mousedown", onMouseDown);
+window.addEventListener("mouseup", onMouseUp);
+// Arrow key state tracking for smooth camera movement
+const keyState = {
+  ArrowUp: false,
+  ArrowDown: false,
+  ArrowLeft: false,
+  ArrowRight: false,
+};
+window.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") {
+    setSelectedTower(null);
+  }
+  if (e.key === "g" || e.key === "G") {
+    sceneSetup.grid.visible = !sceneSetup.grid.visible;
+    uiManager.setMessage(sceneSetup.grid.visible ? "Grid on" : "Grid off");
+  }
+  if (e.key in keyState) {
+    keyState[e.key] = true;
+  }
+});
+window.addEventListener("keyup", (e) => {
+  if (e.key in keyState) {
+    keyState[e.key] = false;
+  }
+});
+uiManager.onRestartClick(() => resetGame());
+uiManager.onUpgradeClick(() => {
+  const tower = gameState.selectedTower;
+  if (!tower) return;
+  if (!tower.canUpgrade) {
+    uiManager.setMessage("Tower is at max level.");
+    uiManager.showUpgradePanel(tower, gameState.money);
+    return;
+  }
+  if (!gameState.canAfford(tower.nextUpgradeCost)) {
+    uiManager.setMessage("Not enough money to upgrade.");
+    uiManager.showUpgradePanel(tower, gameState.money);
+    return;
+  }
+  gameState.spendMoney(tower.nextUpgradeCost);
+  const ok = tower.upgrade();
+  if (ok) {
+    uiManager.updateHUD(gameState);
+    uiManager.setMessage("Tower upgraded.");
+    uiManager.showUpgradePanel(tower, gameState.money);
+  }
+});
+uiManager.onSellClick(() => {
+  const tower = gameState.selectedTower;
+  if (!tower) return;
+  const refund = tower.getSellValue();
+  gameState.addMoney(refund);
+  uiManager.updateHUD(gameState);
+  tower.destroy();
+  gameState.removeTower(tower);
+  uiManager.setMessage(`Tower sold for ${refund}.`);
+  setSelectedTower(null);
+});
+// Wave spawning
+function updateSpawning(dt) {
+  if (!gameState.isGameActive()) return;
+  const wave = gameState.getCurrentWave();
+  if (!wave) return;
+  // Accumulate scaled time and spawn at intervals
+  if (gameState.spawnedThisWave < wave.count) {
+    gameState.spawnAccum += dt;
+    while (
+      gameState.spawnedThisWave < wave.count &&
+      gameState.spawnAccum >= wave.spawnInterval
+    ) {
+      spawnEnemy(wave);
+      gameState.spawnedThisWave++;
+      gameState.spawnAccum -= wave.spawnInterval;
+    }
+  } else {
+    // Wait until all enemies are cleared to progress
+    if (gameState.enemies.length === 0) {
+      gameState.nextWave();
+      uiManager.updateHUD(gameState);
+      // Infinite waves: always start the next wave
+      if (gameState.startWave()) {
+        uiManager.setMessage(`Wave ${gameState.waveIndex + 1} started!`);
+      }
+    }
+  }
+}
+// Main game loop
+let lastTime = performance.now() / 1000;
+function animate() {
+  requestAnimationFrame(animate);
+  const now = performance.now() / 1000;
+  const dtRaw = Math.min(0.05, now - lastTime);
+  lastTime = now;
+  // Scaled gameplay dt based on GameState speed
+  const speed =
+    typeof gameState.getGameSpeed === "function"
+      ? gameState.getGameSpeed()
+      : gameState.gameSpeed || 1;
+  const dt = dtRaw * speed;
+  // Camera movement via arrow keys should remain unscaled for consistent navigation
+  const moveDir = { x: 0, z: 0 };
+  if (keyState.ArrowUp) moveDir.z -= 1;
+  if (keyState.ArrowDown) moveDir.z += 1;
+  if (keyState.ArrowLeft) moveDir.x -= 1;
+  if (keyState.ArrowRight) moveDir.x += 1;
+  if (moveDir.x !== 0 || moveDir.z !== 0) {
+    sceneSetup.moveCamera(moveDir, dtRaw);
+  }
+  if (gameState.isGameActive()) {
+    // Spawning must use scaled dt to respect speed
+    updateSpawning(dt);
+    // Update enemies
+    for (let i = gameState.enemies.length - 1; i >= 0; i--) {
+      const enemy = gameState.enemies[i];
+      const status = enemy.update(dt);
+      if (enemy.isDead()) {
+        gameState.addMoney(enemy.reward);
+        uiManager.updateHUD(gameState);
+        enemy.destroy();
+        gameState.removeEnemy(enemy);
+        continue;
+      }
+      if (status === "end") {
+        gameState.takeDamage(1);
+        uiManager.updateHUD(gameState);
+        enemy.destroy();
+        gameState.removeEnemy(enemy);
+        if (gameState.gameOver) {
+          uiManager.setMessage("Game Over! Enemies broke through.");
+        }
+      }
+    }
+    // Update towers
+    for (const tower of gameState.towers) {
+      tower.tryFire(
+        dt,
+        gameState.enemies,
+        gameState.projectiles,
+        PROJECTILE_SPEED
+      );
+    }
+    // Keep upgrade panel in sync if selected
+    if (gameState.selectedTower) {
+      uiManager.showUpgradePanel(gameState.selectedTower, gameState.money);
+    }
+    // Update projectiles
+    for (let i = gameState.projectiles.length - 1; i >= 0; i--) {
+      const projectile = gameState.projectiles[i];
+      const status = projectile.update(dt, (pos) =>
+        effectSystem.spawnHitEffect(pos)
+      );
+      if (status !== "ok") {
+        projectile.destroy();
+        gameState.removeProjectile(projectile);
+      }
+    }
+    effectSystem.update(dt);
+  }
+  sceneSetup.render();
+}
+// Start the game
+setTimeout(() => {
+  if (gameState.startWave()) {
+    uiManager.setMessage(`Wave 1 started!`);
+  }
+}, 1200);
+animate();

src/scene/PathBuilder.js ADDED Viewed

	@@ -0,0 +1,67 @@

+import * as THREE from "three";
+import {
+  PATH_POINTS,
+  ROAD_HALF_WIDTH,
+  GRID_CELL_SIZE,
+} from "../config/gameConfig.js";
+export class PathBuilder {
+  constructor(scene) {
+    this.scene = scene;
+    // Clone and snap path points to the grid to ensure alignment
+    this.pathPoints = PATH_POINTS.map((p) => {
+      const snapped = p.clone
+        ? p.clone()
+        : new THREE.Vector3(p.x, p.y ?? 0, p.z);
+      snapped.x = Math.round(snapped.x / GRID_CELL_SIZE) * GRID_CELL_SIZE;
+      snapped.z = Math.round(snapped.z / GRID_CELL_SIZE) * GRID_CELL_SIZE;
+      return snapped;
+    });
+    this.roadMeshes = [];
+    // Materials
+    this.roadMat = new THREE.MeshStandardMaterial({
+      color: 0x393c41,
+      metalness: 0.1,
+      roughness: 0.9,
+    });
+  }
+  buildPath() {
+    // Visualize path line
+    this.createPathLine();
+    // Build straight road segments only (no bevels or rounded corners)
+    for (let i = 0; i < this.pathPoints.length - 1; i++) {
+      this.addSegment(this.pathPoints[i], this.pathPoints[i + 1]);
+    }
+  }
+  createPathLine() {
+    const pathLineMat = new THREE.LineBasicMaterial({ color: 0xffff00 });
+    const pathLineGeo = new THREE.BufferGeometry().setFromPoints(
+      this.pathPoints
+    );
+    const pathLine = new THREE.Line(pathLineGeo, pathLineMat);
+    pathLine.position.y = 0.01;
+    this.scene.add(pathLine);
+  }
+  addSegment(a, b) {
+    const seg = new THREE.Vector3().subVectors(b, a);
+    const len = seg.length();
+    if (len <= 0.0001) return;
+    const mid = new THREE.Vector3().addVectors(a, b).multiplyScalar(0.5);
+    const roadGeo = new THREE.BoxGeometry(len, 0.1, ROAD_HALF_WIDTH * 2);
+    const road = new THREE.Mesh(roadGeo, this.roadMat);
+    road.castShadow = false;
+    road.receiveShadow = true;
+    road.position.set(mid.x, 0.05, mid.z);
+    const angle = Math.atan2(seg.z, seg.x);
+    road.rotation.y = -angle;
+    this.scene.add(road);
+    this.roadMeshes.push(road);
+  }
+}

src/scene/SceneSetup.js ADDED Viewed

	@@ -0,0 +1,151 @@

+import * as THREE from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import {
+  SCENE_BACKGROUND,
+  GROUND_SIZE,
+  GRID_CELL_SIZE,
+} from "../config/gameConfig.js";
+export class SceneSetup {
+  constructor() {
+    // Basic scene setup
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(SCENE_BACKGROUND);
+    // Camera
+    this.camera = new THREE.PerspectiveCamera(
+      60,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      2000
+    );
+    this.camera.position.set(20, 22, 24);
+    // Renderer
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.shadowMap.enabled = true;
+    document.body.appendChild(this.renderer.domElement);
+    // Controls
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.target.set(0, 0, 0);
+    this.controls.enableDamping = true;
+    // Camera movement config
+    this.CAMERA_MOVE_SPEED = 18; // units per second in world-space
+    // Bounds relative to ground size, keep a small margin inside edges
+    const half = GROUND_SIZE / 2;
+    this.CAMERA_MIN_X = -half + 2;
+    this.CAMERA_MAX_X = half - 2;
+    this.CAMERA_MIN_Z = -half + 2;
+    this.CAMERA_MAX_Z = half - 2;
+    // Setup lighting
+    this.setupLighting();
+    // Setup ground
+    this.ground = this.setupGround();
+    // Setup grid
+    this.grid = this.setupGrid();
+    // Handle window resize
+    window.addEventListener("resize", () => this.onWindowResize());
+  }
+  setupLighting() {
+    const hemi = new THREE.HemisphereLight(0xffffff, 0x404040, 0.6);
+    this.scene.add(hemi);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    dirLight.position.set(8, 20, 8);
+    dirLight.castShadow = true;
+    dirLight.shadow.mapSize.set(1024, 1024);
+    this.scene.add(dirLight);
+  }
+  setupGround() {
+    const groundGeo = new THREE.PlaneGeometry(GROUND_SIZE, GROUND_SIZE);
+    const groundMat = new THREE.MeshStandardMaterial({ color: 0x1d6e2f });
+    const ground = new THREE.Mesh(groundGeo, groundMat);
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    ground.name = "ground";
+    this.scene.add(ground);
+    return ground;
+  }
+  setupGrid() {
+    const divisions = Math.floor(GROUND_SIZE / GRID_CELL_SIZE);
+    const grid = new THREE.GridHelper(
+      GROUND_SIZE,
+      divisions,
+      0x8ab4f8,
+      0x3a97ff
+    );
+    grid.position.y = 0.02; // avoid z-fighting with ground
+    grid.material.transparent = true;
+    grid.material.opacity = 0.35;
+    grid.renderOrder = 0;
+    this.scene.add(grid);
+    return grid;
+  }
+  clampToBounds(vec3) {
+    vec3.x = Math.min(this.CAMERA_MAX_X, Math.max(this.CAMERA_MIN_X, vec3.x));
+    vec3.z = Math.min(this.CAMERA_MAX_Z, Math.max(this.CAMERA_MIN_Z, vec3.z));
+    return vec3;
+  }
+  // Move camera and controls target horizontally in world space while keeping height
+  moveCamera(direction, deltaTime) {
+    // direction: {x: -1|0|1, z: -1|0|1}
+    if (!direction || (direction.x === 0 && direction.z === 0)) return;
+    // Compute normalized planar direction
+    const move = new THREE.Vector3(direction.x, 0, direction.z);
+    if (move.lengthSq() === 0) return;
+    move.normalize().multiplyScalar(this.CAMERA_MOVE_SPEED * deltaTime);
+    // Maintain current height
+    const currentY = this.camera.position.y;
+    // Move both camera and target so orbit feel is preserved
+    const newCamPos = this.camera.position.clone().add(move);
+    const newTarget = this.controls.target.clone().add(move);
+    // Clamp within bounds
+    this.clampToBounds(newCamPos);
+    this.clampToBounds(newTarget);
+    // Apply positions (preserve camera height)
+    newCamPos.y = currentY;
+    this.camera.position.copy(newCamPos);
+    this.controls.target.copy(newTarget);
+    // Let OrbitControls smoothing handle interpolation
+  }
+  onWindowResize() {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+  render(gameState) {
+    // Optionally pass gameState so we can update transient visuals like electric arcs
+    this.controls.update();
+    // Per-frame visual updates for towers (electric arcs fade/cleanup)
+    if (gameState && Array.isArray(gameState.towers)) {
+      const now = performance.now();
+      for (const t of gameState.towers) {
+        if (t?.updateElectricArcs) {
+          t.updateElectricArcs(now);
+        }
+      }
+    }
+    this.renderer.render(this.scene, this.camera);
+  }
+}

src/ui/UIManager.js ADDED Viewed

	@@ -0,0 +1,407 @@

+export class UIManager {
+  constructor() {
+    // HUD elements
+    this.moneyEl = document.getElementById("money");
+    this.livesEl = document.getElementById("lives");
+    this.waveEl = document.getElementById("wave");
+    this.wavesTotalEl = document.getElementById("wavesTotal");
+    this.messagesEl = document.getElementById("messages");
+    this.restartBtn = document.getElementById("restart");
+    // Upgrade panel elements
+    this.upgradePanel = document.getElementById("upgradePanel");
+    this.upgradeBtn = document.getElementById("upgradeBtn");
+    this.sellBtn = document.getElementById("sellBtn");
+    this.tLevelEl = document.getElementById("t_level");
+    this.tRangeEl = document.getElementById("t_range");
+    this.tRateEl = document.getElementById("t_rate");
+    this.tDamageEl = document.getElementById("t_damage");
+    this.tNextCostEl = document.getElementById("t_nextCost");
+    // Tower palette (floating)
+    this.palette = document.createElement("div");
+    this.palette.className = "palette hidden";
+    document.body.appendChild(this.palette);
+    this._paletteClickHandler = null;
+    this._outsideHandler = (ev) => {
+      if (this.palette.style.display === "none") return;
+      if (!this.palette.contains(ev.target)) {
+        this.hideTowerPalette();
+        if (this._paletteCancelCb) this._paletteCancelCb();
+      }
+    };
+    this._escHandler = (ev) => {
+      if (ev.key === "Escape" && this.palette.style.display !== "none") {
+        this.hideTowerPalette();
+        if (this._paletteCancelCb) this._paletteCancelCb();
+      }
+    };
+    window.addEventListener("mousedown", this._outsideHandler);
+    window.addEventListener("keydown", this._escHandler);
+    this._paletteSelectCb = null;
+    this._paletteCancelCb = null;
+    // Speed controls (top-right UI)
+    this._speedChangeCb = null;
+    this.speedContainer = null;
+    this.speedBtn1 = null;
+    this.speedBtn2 = null;
+    // Game state subscription placeholders
+    this._moneyChangedHandler = null;
+    this._gameStateForSubscriptions = null;
+    // Sync initial HUD visibility with new CSS classes
+    if (this.restartBtn) this.restartBtn.classList.add("hidden");
+    if (this.upgradePanel) this.upgradePanel.classList.add("hidden");
+  }
+  // Init and update for speed controls
+  initSpeedControls(initialSpeed = 1) {
+    if (this.speedContainer) return; // already initialized
+    const container = document.createElement("div");
+    container.className = "speed-controls";
+    const makeBtn = (label, pressed = false) => {
+      const b = document.createElement("button");
+      b.textContent = label;
+      b.className = "btn btn--toggle";
+      b.setAttribute("aria-pressed", pressed ? "true" : "false");
+      b.type = "button";
+      return b;
+    };
+    const b1 = makeBtn("x1", initialSpeed === 1);
+    const b2 = makeBtn("x2", initialSpeed === 2);
+    b1.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._setActiveSpeed(1);
+      if (this._speedChangeCb) this._speedChangeCb(1);
+    });
+    b2.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this._setActiveSpeed(2);
+      if (this._speedChangeCb) this._speedChangeCb(2);
+    });
+    container.appendChild(b1);
+    container.appendChild(b2);
+    document.body.appendChild(container);
+    this.speedContainer = container;
+    this.speedBtn1 = b1;
+    this.speedBtn2 = b2;
+    this.updateSpeedControls(initialSpeed);
+  }
+  onSpeedChange(callback) {
+    this._speedChangeCb = callback;
+  }
+  updateSpeedControls(currentSpeed = 1) {
+    if (!this.speedBtn1 || !this.speedBtn2) return;
+    this.speedBtn1.setAttribute(
+      "aria-pressed",
+      currentSpeed === 1 ? "true" : "false"
+    );
+    this.speedBtn2.setAttribute(
+      "aria-pressed",
+      currentSpeed === 2 ? "true" : "false"
+    );
+  }
+  _setActiveSpeed(s) {
+    this.updateSpeedControls(s);
+  }
+  /**
+   * Subscribe UI to GameState money changes and perform initial affordability update.
+   * Call this once during UI initialization when GameState instance is available.
+   */
+  initWithGameState(gameState) {
+    if (!gameState || this._gameStateForSubscriptions) return;
+    this._gameStateForSubscriptions = gameState;
+    // Bind once to keep reference for unsubscription
+    this._moneyChangedHandler = (newMoney /*, prevMoney */) => {
+      this.updateTowerAffordability(newMoney);
+    };
+    // Prefer dedicated helpers if available; fall back to generic on/off
+    if (typeof gameState.subscribeMoneyChanged === "function") {
+      gameState.subscribeMoneyChanged(this._moneyChangedHandler);
+    } else if (typeof gameState.on === "function") {
+      gameState.on("moneyChanged", this._moneyChangedHandler);
+    }
+    // Initial affordability update using current money
+    this.updateTowerAffordability(gameState.money);
+  }
+  /**
+   * Update HUD labels and also ensure tower affordability matches current money.
+   */
+  updateHUD(gameState) {
+    this.moneyEl.textContent = String(gameState.money);
+    this.livesEl.textContent = String(gameState.lives);
+    // Infinite waves: display current wave only
+    const currentWave = gameState.waveIndex + 1;
+    this.waveEl.textContent = String(currentWave);
+    // If total waves element exists, show infinity symbol
+    if (this.wavesTotalEl) {
+      this.wavesTotalEl.textContent = "∞";
+    }
+    if (gameState.gameOver || gameState.gameWon) {
+      this.restartBtn.classList.remove("hidden");
+    } else {
+      this.restartBtn.classList.add("hidden");
+    }
+    // Keep palette/button states in sync with current money on HUD updates too
+    this.updateTowerAffordability(gameState.money);
+  }
+  setMessage(text) {
+    this.messagesEl.textContent = text;
+  }
+  setWavesTotal(total) {
+    this.wavesTotalEl.textContent = String(total);
+  }
+  showUpgradePanel(tower, money) {
+    this.upgradePanel.classList.remove("hidden");
+    this.tLevelEl.textContent = String(tower.level);
+    this.tRangeEl.textContent = tower.range.toFixed(2);
+    this.tRateEl.textContent = tower.rate.toFixed(2);
+    this.tDamageEl.textContent = tower.damage.toFixed(2);
+    if (tower.canUpgrade) {
+      this.tNextCostEl.textContent = String(tower.nextUpgradeCost);
+      this.upgradeBtn.disabled = money < tower.nextUpgradeCost;
+    } else {
+      this.tNextCostEl.textContent = "Max";
+      this.upgradeBtn.disabled = true;
+    }
+    this.sellBtn.disabled = false;
+  }
+  hideUpgradePanel() {
+    this.upgradePanel.classList.add("hidden");
+  }
+  onRestartClick(callback) {
+    this.restartBtn.addEventListener("click", callback);
+  }
+  onUpgradeClick(callback) {
+    this.upgradeBtn.addEventListener("click", callback);
+  }
+  onSellClick(callback) {
+    this.sellBtn.addEventListener("click", callback);
+  }
+  // Palette API
+  onPaletteSelect(callback) {
+    this._paletteSelectCb = callback;
+  }
+  onPaletteCancel(callback) {
+    this._paletteCancelCb = callback;
+  }
+  // Utility: build default palette options using game config
+  _defaultTowerOptions() {
+    // Lazy import to avoid circular deps in some bundlers
+    const { TOWER_TYPES } = require("../config/gameConfig.js");
+    const opts = [];
+    const push = (t, extra = {}) => {
+      if (!t) return;
+      opts.push({
+        key: t.key,
+        name: t.name,
+        cost: t.cost,
+        enabled: true,
+        desc:
+          t.type === "slow"
+            ? "Applies slow on hit"
+            : t.type === "sniper"
+            ? "Long-range high damage"
+            : t.type === "electric"
+            ? "Electric arcs hit up to 3 enemies"
+            : "Basic all-round tower",
+        color:
+          t.type === "slow"
+            ? "#ff69b4"
+            : t.type === "sniper"
+            ? "#00ffff"
+            : t.type === "electric"
+            ? "#9ad6ff"
+            : "#3a97ff",
+        ...extra,
+      });
+    };
+    push(TOWER_TYPES.basic);
+    push(TOWER_TYPES.slow);
+    push(TOWER_TYPES.sniper);
+    // Ensure Electric shows in palette
+    if (TOWER_TYPES.electric) push(TOWER_TYPES.electric);
+    return opts;
+  }
+  /**
+   * Update tower selection UI items (currently palette items) based on affordability.
+   * Only adjusts enabled/disabled state and optional 'unaffordable' class.
+   */
+  updateTowerAffordability(currentMoney) {
+    // Current implementation creates palette items dynamically in showTowerPalette.
+    // When palette is open, update existing rendered items accordingly.
+    const list = this.palette.querySelector(".palette-list");
+    if (!list) return;
+    // Read costs from config
+    const { TOWER_TYPES } = require("../config/gameConfig.js");
+    const costByKey = {
+      basic: TOWER_TYPES.basic?.cost,
+      slow: TOWER_TYPES.slow?.cost,
+      sniper: TOWER_TYPES.sniper?.cost,
+      electric: TOWER_TYPES.electric?.cost,
+    };
+    // Iterate palette items in DOM (each item corresponds to one tower option)
+    const items = list.querySelectorAll(".palette-item");
+    items.forEach((item) => {
+      // Determine tower key for this item by reading its label text
+      // Labels are created as the first span with the tower name
+      const labelSpan = item.querySelector("span:first-child");
+      const name = labelSpan ? labelSpan.textContent : "";
+      // Map name back to key via config
+      let key = null;
+      for (const k of Object.keys(TOWER_TYPES)) {
+        if (TOWER_TYPES[k]?.name === name) {
+          key = k;
+          break;
+        }
+      }
+      if (!key) return;
+      const cost = costByKey[key];
+      const affordable =
+        typeof cost === "number" ? cost <= currentMoney : false;
+      // Disable/enable via aria-disabled like current structure uses
+      if (affordable) {
+        item.removeAttribute("aria-disabled");
+        item.classList.remove("unaffordable");
+      } else {
+        item.setAttribute("aria-disabled", "true");
+        // Optional class; safe to add/remove if styles define it
+        item.classList.add("unaffordable");
+      }
+    });
+  }
+  showTowerPalette(screenX, screenY, options) {
+    // options: [{key, name, cost, enabled, desc, color}]
+    this.palette.innerHTML = "";
+    const title = document.createElement("div");
+    title.textContent = "Choose a tower";
+    title.className = "palette-title";
+    this.palette.appendChild(title);
+    // If no options provided, build from config (includes Electric)
+    const opts =
+      Array.isArray(options) && options.length > 0
+        ? options
+        : this._defaultTowerOptions();
+    const list = document.createElement("div");
+    list.className = "palette-list";
+    opts.forEach((opt) => {
+      const item = document.createElement("div");
+      item.className = "palette-item";
+      if (!opt.enabled) {
+        item.setAttribute("aria-disabled", "true");
+      }
+      const label = document.createElement("span");
+      label.textContent = opt.name;
+      const cost = document.createElement("span");
+      cost.textContent = `${opt.cost}${opt.key === "electric" ? " ⚡" : ""}`;
+      cost.style.fontFamily = "var(--font-mono)";
+      if (opt.color) {
+        item.style.boxShadow = `inset 0 0 0 2px ${opt.color}33`;
+      }
+      item.title = opt.desc || "";
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        // Rely on live affordability state; opt.enabled may be stale after updates
+        if (!item.hasAttribute("aria-disabled")) {
+          this.hideTowerPalette();
+          if (this._paletteSelectCb) this._paletteSelectCb(opt.key);
+        }
+      });
+      item.appendChild(label);
+      item.appendChild(cost);
+      list.appendChild(item);
+    });
+    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";
+    this.palette.classList.remove("hidden");
+    // After rendering, ensure initial affordability reflects current money if subscribed
+    if (this._gameStateForSubscriptions) {
+      this.updateTowerAffordability(this._gameStateForSubscriptions.money);
+    }
+  }
+  hideTowerPalette() {
+    this.palette.classList.add("hidden");
+  }
+  /**
+   * Optional teardown to prevent leaks: unsubscribe from GameState events.
+   */
+  destroy() {
+    const gs = this._gameStateForSubscriptions;
+    if (gs && this._moneyChangedHandler) {
+      if (typeof gs.unsubscribeMoneyChanged === "function") {
+        gs.unsubscribeMoneyChanged(this._moneyChangedHandler);
+      } else if (typeof gs.off === "function") {
+        gs.off("moneyChanged", this._moneyChangedHandler);
+      }
+    }
+    this._gameStateForSubscriptions = null;
+    this._moneyChangedHandler = null;
+    // Existing global listeners cleanup as a best practice
+    window.removeEventListener("mousedown", this._outsideHandler);
+    window.removeEventListener("keydown", this._escHandler);
+  }
+}

src/utils/utils.js ADDED Viewed

	@@ -0,0 +1,82 @@

+import * as THREE from "three";
+import { PATH_POINTS, GRID_CELL_SIZE } from "../config/gameConfig.js";
+// Snap value to grid (to nearest grid line)
+export function snapToGrid(value, size = GRID_CELL_SIZE) {
+  return Math.round(value / size) * size;
+}
+// Grid helpers to work with cell centers
+export function worldToCell(x, z, size = GRID_CELL_SIZE) {
+  // Map world coords to integer col/row indices
+  const col = Math.floor(x / size);
+  const row = Math.floor(z / size);
+  return { col, row };
+}
+export function cellToWorldCenter(col, row, size = GRID_CELL_SIZE) {
+  // Center of the tile: (col + 0.5, row + 0.5) * size
+  return new THREE.Vector3((col + 0.5) * size, 0, (row + 0.5) * size);
+}
+// Check if point is on road
+export function isOnRoad(p, pathPoints = PATH_POINTS) {
+  const halfWidth = 1.6;
+  for (let i = 0; i < pathPoints.length - 1; i++) {
+    const a = pathPoints[i];
+    const b = pathPoints[i + 1];
+    if (pointSegmentDistance2D(p, a, b) <= halfWidth) return true;
+  }
+  return false;
+}
+// Calculate distance from point to line segment in 2D
+export function pointSegmentDistance2D(p, a, b) {
+  const apx = p.x - a.x,
+    apz = p.z - a.z;
+  const abx = b.x - a.x,
+    abz = b.z - a.z;
+  const abLenSq = abx * abx + abz * abz;
+  let t = 0;
+  if (abLenSq > 0) t = (apx * abx + apz * abz) / abLenSq;
+  t = Math.max(0, Math.min(1, t));
+  const cx = a.x + t * abx,
+    cz = a.z + t * abz;
+  const dx = p.x - cx,
+    dz = p.z - cz;
+  return Math.hypot(dx, dz);
+}
+// Simple particle/hit effect system
+export class EffectSystem {
+  constructor(scene) {
+    this.scene = scene;
+    this.effects = [];
+  }
+  spawnHitEffect(pos) {
+    const geo = new THREE.SphereGeometry(0.2, 6, 6);
+    const mat = new THREE.MeshBasicMaterial({
+      color: 0xfff176,
+      transparent: true,
+      opacity: 0.9,
+    });
+    const m = new THREE.Mesh(geo, mat);
+    m.position.copy(pos);
+    this.scene.add(m);
+    this.effects.push({ mesh: m, life: 0.25 });
+  }
+  update(dt) {
+    for (let i = this.effects.length - 1; i >= 0; i--) {
+      const e = this.effects[i];
+      e.life -= dt;
+      e.mesh.scale.addScalar(6 * dt);
+      e.mesh.material.opacity = Math.max(0, e.life / 0.25);
+      if (e.life <= 0) {
+        this.scene.remove(e.mesh);
+        this.effects.splice(i, 1);
+      }
+    }
+  }
+}

styles/theme.css ADDED Viewed

	@@ -0,0 +1,97 @@

+/* Military/Tech Tactical Theme Tokens */
+@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Roboto+Mono:wght@400;700&family=Inter:wght@400;600&display=swap');
+:root {
+  /* Palette */
+  --bg-0: #0c0f10;           /* canvas background */
+  --bg-1: #111517;           /* base panel */
+  --bg-2: #151b1e;           /* elevated panel */
+  --bg-3: #0b1114;           /* deep panel */
+  --panel-border: #243039;
+  --panel-glow: #0aa39b33;
+  /* Accents */
+  --accent: #0aa39b;         /* teal accent */
+  --accent-600: #08877f;
+  --accent-700: #066d67;
+  --accent-300: #3bc6bf;
+  --accent-200: #69ddd7;
+  /* Status */
+  --ok: #12b886;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+  /* Text */
+  --text-1: #e6edf3;
+  --text-2: #b6c2cc;
+  --text-3: #8a99a7;
+  /* Grid / Texture */
+  --grid-line: #1a2228;
+  --scanline: #0e1417;
+  /* Shadows */
+  --shadow-1: 0 6px 18px rgba(0,0,0,.35);
+  --shadow-2: 0 10px 24px rgba(0,0,0,.4);
+  --inset-1: inset 0 0 0 1px var(--panel-border);
+  --glow-1: 0 0 0 2px var(--panel-glow);
+  /* Radii */
+  --r-1: 6px;
+  --r-2: 8px;
+  --r-3: 12px;
+  /* Spacing scale */
+  --s-1: 4px;
+  --s-2: 6px;
+  --s-3: 8px;
+  --s-4: 10px;
+  --s-5: 12px;
+  --s-6: 16px;
+  --s-7: 20px;
+  /* Typography */
+  --font-display: "Rajdhani", system-ui, sans-serif;
+  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --fs-10: 10px;
+  --fs-12: 12px;
+  --fs-14: 14px;
+  --fs-16: 16px;
+  /* Transitions */
+  --t-fast: 120ms ease-out;
+  --t-med: 180ms ease-out;
+  --t-slow: 260ms cubic-bezier(.22,1,.36,1);
+}
+/* Global baseline */
+html, body {
+  height: 100%;
+  background: var(--bg-0);
+  color: var(--text-1);
+  font-family: var(--font-body);
+}
+.game-grid-bg {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--scanline) 1px, transparent 1px) 0 0 / 100% 3px,
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 100%,
+    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 24px;
+  opacity: .25;
+  z-index: 0;
+}
+/* Utility */
+.u-flex { display: flex; }
+.u-center { display: flex; align-items: center; justify-content: center; }
+.u-gap-2 { gap: var(--s-3); }
+.u-gap-3 { gap: var(--s-4); }
+.u-muted { color: var(--text-3); }
+.hidden { display: none !important; }

styles/ui.css ADDED Viewed

	@@ -0,0 +1,254 @@

+/* Components styled using tokens from styles/theme.css */
+/* Layout layers */
+.ui-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+.hud {
+  pointer-events: none;
+  position: fixed;
+  top: var(--s-6);
+  left: var(--s-6);
+  right: var(--s-6);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-6);
+  z-index: 20;
+}
+/* Panels */
+.panel {
+  pointer-events: auto;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-1), var(--inset-1);
+  border: 1px solid var(--panel-border);
+}
+.panel--compact {
+  padding: var(--s-4) var(--s-5);
+}
+.panel--std {
+  padding: var(--s-6);
+}
+.panel-title {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: var(--fs-14);
+  letter-spacing: .04em;
+  color: var(--text-2);
+  text-transform: uppercase;
+  margin-bottom: var(--s-4);
+}
+/* Chips */
+.chips {
+  display: flex;
+  gap: var(--s-3);
+  align-items: center;
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-2) var(--s-4);
+  border-radius: var(--r-1);
+  background: var(--bg-3);
+  border: 1px solid var(--panel-border);
+  box-shadow: var(--inset-1);
+  font-family: var(--font-mono);
+  font-size: var(--fs-12);
+  color: var(--text-1);
+}
+.chip__label {
+  font-family: var(--font-display);
+  font-size: var(--fs-12);
+  letter-spacing: .06em;
+  color: var(--text-3);
+  text-transform: uppercase;
+}
+/* Speed Controls */
+.speed-controls {
+  pointer-events: auto;
+  position: fixed;
+  top: var(--s-6);
+  right: var(--s-6);
+  display: flex;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border-radius: var(--r-2);
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border: 1px solid var(--panel-border);
+  box-shadow: var(--shadow-1), var(--inset-1);
+  z-index: 30;
+}
+.btn {
+  appearance: none;
+  border: 1px solid var(--panel-border);
+  background: #0f1518;
+  color: var(--text-1);
+  padding: var(--s-2) var(--s-4);
+  border-radius: var(--r-1);
+  font-size: var(--fs-12);
+  font-family: var(--font-display);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
+  min-width: 44px;
+}
+.btn:active {
+  transform: translateY(1px);
+  background: #0e1518;
+}
+.btn:disabled,
+.btn[disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+}
+.btn--primary {
+  background: linear-gradient(180deg, var(--accent-300), var(--accent));
+  color: #041012;
+  border-color: var(--accent-700);
+  box-shadow: 0 2px 0 0 rgba(0,0,0,.3) inset;
+}
+.btn--primary:hover {
+  box-shadow: 0 0 0 2px var(--accent-200)55 inset, var(--glow-1);
+}
+.btn--toggle[aria-pressed="true"] {
+  background: var(--accent);
+  color: #041012;
+  box-shadow: 0 0 0 2px var(--accent-200)55 inset;
+  border-color: var(--accent-700);
+}
+/* Upgrade Panel */
+.upgrade-panel {
+  pointer-events: auto;
+  position: fixed;
+  bottom: var(--s-6);
+  left: var(--s-6);
+  right: var(--s-6);
+  max-width: 560px;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border: 1px solid var(--panel-border);
+  border-radius: var(--r-3);
+  box-shadow: var(--shadow-2), var(--inset-1);
+  padding: var(--s-6);
+  z-index: 20;
+}
+.stat-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--s-3) var(--s-6);
+  align-items: center;
+  margin-bottom: var(--s-6);
+}
+.stat-label {
+  color: var(--text-3);
+  font-family: var(--font-display);
+  font-size: var(--fs-12);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+}
+.stat-value {
+  font-family: var(--font-mono);
+  font-size: var(--fs-14);
+}
+/* Tower Palette (floating menu) */
+.palette {
+  pointer-events: auto;
+  position: fixed;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border: 1px solid var(--panel-border);
+  border-radius: var(--r-2);
+  padding: var(--s-5);
+  color: var(--text-1);
+  box-shadow: var(--shadow-2), var(--inset-1);
+  width: 200px;
+  z-index: 1000;
+}
+.palette-title {
+  font-family: var(--font-display);
+  font-size: var(--fs-12);
+  color: var(--text-3);
+  letter-spacing: .06em;
+  text-transform: uppercase;
+  margin-bottom: var(--s-4);
+}
+.palette-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+.palette-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border-radius: var(--r-1);
+  border: 1px solid var(--panel-border);
+  background: #122026;
+  color: var(--text-1);
+  cursor: pointer;
+  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
+}
+.palette-item:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--glow-1);
+  background: #14262c;
+}
+.palette-item[aria-disabled="true"] {
+  opacity: .5;
+}
+/* Messages bar */
+.message-bar {
+  pointer-events: none;
+  position: fixed;
+  top: calc(48px + var(--s-6));
+  left: 50%;
+  transform: translateX(-50%);
+  min-width: 320px;
+  max-width: 70vw;
+  text-align: center;
+  background: var(--bg-3);
+  border: 1px solid var(--panel-border);
+  border-radius: var(--r-2);
+  padding: var(--s-3) var(--s-5);
+  color: var(--text-2);
+  box-shadow: var(--shadow-1), var(--inset-1);
+  z-index: 15;
+}
+/* Focus ring for accessibility */
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #000 inset, 0 0 0 3px var(--accent-300);
+  border-radius: var(--r-1);
+}