Add ship damage visuals, turn timer, detection ranges, and combat UX improvements

- Damaged ships now show flickering red/orange glow (intensity scales with damage)
- Ship icons sized by combat value (dreadnaughts/frigates visually larger)
- Turn timer shows elapsed time during player's turn (amber after 30s)
- Torpedo/nuke buttons disabled for non-warship ships with tooltip hint
- Detection range circle shown for selected ship (dashed line)
- Base detection ranges shown as subtle circles
- Combat overlay now shows total modifier with color coding (green/red/yellow)
- Counterattack warning label shown on targetable enemies

Author: rgilks

src/client/main.ts

@@ -45,6 +45,7 @@ class GameClient {
 
   // Turn timer
   private turnStartTime = 0;
+  private turnTimerInterval: number | null = null;
 
   constructor() {
     this.canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
@@ -192,7 +193,7 @@ class GameClient {
 
       case 'playing_astrogation':
         this.ui.showHUD();
-        this.turnStartTime = Date.now();
+        this.startTurnTimer();
         this.updateHUD();
         // Reset planning state
         this.renderer.planningState.selectedShipId = null;
@@ -234,17 +235,20 @@ class GameClient {
         break;
 
       case 'playing_movementAnim':
+        this.stopTurnTimer();
         this.ui.showHUD();
         this.ui.showMovementStatus();
         break;
 
       case 'playing_opponentTurn':
+        this.stopTurnTimer();
         this.ui.showHUD();
         this.updateHUD();
         this.renderer.frameOnShips();
         break;
 
       case 'gameOver':
+        this.stopTurnTimer();
         // gameOver overlay is shown via showGameOver
         break;
     }
@@ -646,6 +650,7 @@ class GameClient {
 
   private exitToMenu() {
     this.stopPing();
+    this.stopTurnTimer();
     this.ws?.close();
     this.ws = null;
     this.gameState = null;
@@ -941,6 +946,7 @@ class GameClient {
       cargoFree,
       cargoMax,
       objective,
+      stats?.canOverload ?? false,
     );
     // Update latency display (multiplayer only)
     const latencyEl = document.getElementById('latencyInfo')!;
@@ -996,6 +1002,28 @@ class GameClient {
     btn.classList.toggle('muted', m);
   }
 
+  private startTurnTimer() {
+    this.stopTurnTimer();
+    this.turnStartTime = Date.now();
+    const timerEl = document.getElementById('turnTimer')!;
+    this.turnTimerInterval = window.setInterval(() => {
+      const elapsed = Math.floor((Date.now() - this.turnStartTime) / 1000);
+      const mins = Math.floor(elapsed / 60);
+      const secs = elapsed % 60;
+      timerEl.textContent = mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `${secs}s`;
+      timerEl.className = 'turn-timer' + (elapsed >= 30 ? ' turn-timer-slow' : ' turn-timer-active');
+    }, 1000);
+  }
+
+  private stopTurnTimer() {
+    if (this.turnTimerInterval !== null) {
+      clearInterval(this.turnTimerInterval);
+      this.turnTimerInterval = null;
+    }
+    const timerEl = document.getElementById('turnTimer');
+    if (timerEl) timerEl.textContent = '';
+  }
+
   private logLandings(movements: ShipMovement[]) {
     if (!this.gameState) return;
     for (const m of movements) {

src/client/renderer.ts

@@ -9,7 +9,7 @@ import {
   hexVecLength,
 } from '../shared/hex';
 import type { GameState, Ship, ShipMovement, OrdnanceMovement, MovementEvent, SolarSystemMap, CelestialBody, CombatResult, PlayerState } from '../shared/types';
-import { MOVEMENT_ANIM_DURATION, CAMERA_LERP_SPEED, SHIP_STATS } from '../shared/constants';
+import { MOVEMENT_ANIM_DURATION, CAMERA_LERP_SPEED, SHIP_STATS, SHIP_DETECTION_RANGE, BASE_DETECTION_RANGE } from '../shared/constants';
 import { computeCourse, predictDestination } from '../shared/movement';
 import { computeOdds, computeRangeMod, computeVelocityMod, getCombatStrength, canAttack } from '../shared/combat';
 
@@ -436,6 +436,7 @@ export class Renderer {
       }
     }
     if (this.gameState && this.map) {
+      this.renderDetectionRanges(ctx, this.gameState, this.map);
       this.renderCourseVectors(ctx, this.gameState, this.map, now);
       this.renderOrdnance(ctx, this.gameState, now);
       this.renderTorpedoGuidance(ctx, this.gameState, now);
@@ -690,6 +691,56 @@ export class Renderer {
     ctx.fillText('▼ TARGET', p.x, p.y + r + 24);
   }
 
+  private renderDetectionRanges(ctx: CanvasRenderingContext2D, state: GameState, map: SolarSystemMap) {
+    if (this.animState) return;
+
+    // Show detection range for selected own ship
+    const selectedId = this.planningState.selectedShipId;
+    for (const ship of state.ships) {
+      if (ship.owner !== this.playerId || ship.destroyed) continue;
+      const isSelected = ship.id === selectedId;
+      if (!isSelected) continue; // Only show for selected ship to avoid clutter
+
+      const p = hexToPixel(ship.position, HEX_SIZE);
+      const detRange = SHIP_DETECTION_RANGE;
+      // Approximate circle radius from hex distance
+      const radius = detRange * HEX_SIZE * 1.73; // sqrt(3) * hex_size * range
+
+      ctx.strokeStyle = 'rgba(79, 195, 247, 0.08)';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 6]);
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Subtle label
+      ctx.fillStyle = 'rgba(79, 195, 247, 0.15)';
+      ctx.font = '7px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText('DETECTION', p.x, p.y - radius - 4);
+    }
+
+    // Show base detection ranges for own bases
+    const player = state.players[this.playerId];
+    if (player?.homeBody) {
+      for (const [key, hex] of map.hexes) {
+        if (!hex.base || hex.base.bodyName !== player.homeBody) continue;
+        const [q, r] = key.split(',').map(Number);
+        const p = hexToPixel({ q, r }, HEX_SIZE);
+        const radius = BASE_DETECTION_RANGE * HEX_SIZE * 1.73;
+
+        ctx.strokeStyle = 'rgba(79, 195, 247, 0.05)';
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 8]);
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, radius, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+    }
+  }
+
   private renderCourseVectors(ctx: CanvasRenderingContext2D, state: GameState, map: SolarSystemMap, now: number) {
     // During animation, don't show planning vectors
     if (this.animState) return;
@@ -976,7 +1027,7 @@ export class Renderer {
       // Disabled ships shown dimmer
       const isDisabled = ship.damage.disabledTurns > 0;
       const alpha = isDisabled ? 0.5 : 1.0;
-      this.drawShipIcon(ctx, pos.x, pos.y, ship.owner, alpha, heading);
+      this.drawShipIcon(ctx, pos.x, pos.y, ship.owner, alpha, heading, ship.damage.disabledTurns, ship.type);
 
       // Disabled indicator
       if (isDisabled && !this.animState) {
@@ -1008,12 +1059,28 @@ export class Renderer {
     }
   }
 
-  private drawShipIcon(ctx: CanvasRenderingContext2D, x: number, y: number, owner: number, alpha: number, heading: number) {
+  private drawShipIcon(ctx: CanvasRenderingContext2D, x: number, y: number, owner: number, alpha: number, heading: number, disabledTurns = 0, shipType = '') {
     const color = owner === 0 ? `rgba(79, 195, 247, ${alpha})` : `rgba(255, 152, 0, ${alpha})`;
-    const size = 8;
+    // Size based on ship type combat value
+    const stats = SHIP_STATS[shipType];
+    const combat = stats?.combat ?? 2;
+    const size = combat >= 15 ? 12 : combat >= 8 ? 10 : combat >= 4 ? 9 : 8;
 
     ctx.save();
     ctx.translate(x, y);
+
+    // Damage glow for disabled ships (flickering red/orange)
+    if (disabledTurns > 0) {
+      const flickerPhase = performance.now() / 200 + x * 0.1; // unique per ship
+      const intensity = 0.3 + 0.2 * Math.sin(flickerPhase) + 0.1 * Math.sin(flickerPhase * 2.7);
+      const glowColor = disabledTurns >= 4 ? `rgba(255, 50, 50, ${intensity})` : `rgba(255, 150, 50, ${intensity})`;
+      const glowRadius = 10 + disabledTurns;
+      ctx.fillStyle = glowColor;
+      ctx.beginPath();
+      ctx.arc(0, 0, glowRadius, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
     ctx.rotate(heading);
     ctx.fillStyle = color;
     ctx.beginPath();
@@ -1299,16 +1366,27 @@ export class Renderer {
       const odds = computeOdds(attackStr, defendStr);
       const rangeMod = computeRangeMod(myAttackers[0], target);
       const velMod = computeVelocityMod(myAttackers[0], target);
+      const totalMod = -(rangeMod + velMod);
 
       // Background box
-      const label = `${odds}  R-${rangeMod} V-${velMod}`;
+      const modStr = totalMod >= 0 ? `+${totalMod}` : `${totalMod}`;
+      const label = `${odds}  R-${rangeMod} V-${velMod}  (${modStr})`;
       ctx.font = 'bold 10px monospace';
       const textW = ctx.measureText(label).width;
       ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
       ctx.fillRect(targetPos.x - textW / 2 - 4, targetPos.y - 32, textW + 8, 16);
-      ctx.fillStyle = '#ff6666';
+      // Color code: green if favorable, red if unfavorable, yellow if neutral
+      ctx.fillStyle = totalMod > 0 ? '#88ff88' : totalMod < 0 ? '#ff6666' : '#ffdd57';
       ctx.textAlign = 'center';
       ctx.fillText(label, targetPos.x, targetPos.y - 20);
+
+      // Show counterattack warning if target can counterattack
+      const targetStats = SHIP_STATS[target.type];
+      if (targetStats && !targetStats.defensiveOnly && target.damage.disabledTurns === 0) {
+        ctx.fillStyle = 'rgba(255, 170, 0, 0.7)';
+        ctx.font = '7px monospace';
+        ctx.fillText('CAN COUNTER', targetPos.x, targetPos.y - 38);
+      }
     }
   }
 

src/client/ui.ts

@@ -191,7 +191,7 @@ export class UIManager {
     }
   }
 
-  updateHUD(turn: number, phase: string, isMyTurn: boolean, fuel: number, maxFuel: number, hasBurns = false, cargoFree = 0, cargoMax = 0, objective = '') {
+  updateHUD(turn: number, phase: string, isMyTurn: boolean, fuel: number, maxFuel: number, hasBurns = false, cargoFree = 0, cargoMax = 0, objective = '', isWarship = false) {
     document.getElementById('turnInfo')!.textContent = `Turn ${turn}`;
     document.getElementById('phaseInfo')!.textContent = isMyTurn ? phase.toUpperCase() : 'OPPONENT\'S TURN';
     document.getElementById('objective')!.textContent = objective;
@@ -217,17 +217,19 @@ export class UIManager {
     launchTorpedoBtn.style.display = showOrd ? 'inline-block' : 'none';
     launchNukeBtn.style.display = showOrd ? 'inline-block' : 'none';
     skipOrdnanceBtn.style.display = showOrd ? 'inline-block' : 'none';
-    // Disable buttons based on cargo capacity
+    // Disable buttons based on cargo capacity and warship status
     if (showOrd) {
       const canMine = cargoFree >= ORDNANCE_MASS.mine;
-      const canTorpedo = cargoFree >= ORDNANCE_MASS.torpedo;
-      const canNuke = cargoFree >= ORDNANCE_MASS.nuke;
+      const canTorpedo = isWarship && cargoFree >= ORDNANCE_MASS.torpedo;
+      const canNuke = isWarship && cargoFree >= ORDNANCE_MASS.nuke;
       launchMineBtn.disabled = !canMine;
       launchTorpedoBtn.disabled = !canTorpedo;
       launchNukeBtn.disabled = !canNuke;
       launchMineBtn.style.opacity = canMine ? '1' : '0.4';
       launchTorpedoBtn.style.opacity = canTorpedo ? '1' : '0.4';
       launchNukeBtn.style.opacity = canNuke ? '1' : '0.4';
+      launchTorpedoBtn.title = isWarship ? '' : 'Warships only';
+      launchNukeBtn.title = isWarship ? '' : 'Warships only';
     }
 
     const skipCombatBtn = document.getElementById('skipCombatBtn')!;

static/index.html

@@ -73,6 +73,7 @@ <h2>Game Created</h2>
       <span id="fleetStatus" class="fleet-status"></span>
       <span id="fuelGauge">Fuel: 20/20</span>
       <span id="objective" class="objective-text"></span>
+      <span id="turnTimer" class="turn-timer"></span>
       <span id="latencyInfo" class="latency-text"></span>
     </div>
     <div id="bottomBar" class="hud-bottom">

static/style.css

@@ -526,6 +526,21 @@ body {
   letter-spacing: 0.08em;
 }
 
+/* Turn timer in HUD */
+.turn-timer {
+  color: #888;
+  font-size: 0.65rem;
+  letter-spacing: 0.05em;
+}
+
+.turn-timer-active {
+  color: #b0bec5;
+}
+
+.turn-timer-slow {
+  color: #ffb74d;
+}
+
 /* Latency indicator in HUD */
 .latency-text {
   color: #888;