Add combat target selection UI with visual feedback

- Pulsing red rings on enemy ships during combat phase
- Attack lines drawn from player ships to selected target
- Odds preview box showing combat odds, range and velocity modifiers
- Combat results toast with color-coded outcomes
- ATTACK button appears when target selected, SKIP COMBAT always available
- Click enemy ship to target, click again or empty space to deselect

Author: rgilks

src/client/input.ts

@@ -140,12 +140,18 @@ export class InputHandler {
 
   private handleClick(screenX: number, screenY: number) {
     if (!this.gameState || !this.map) return;
-    if (this.gameState.phase !== 'astrogation') return;
     if (this.gameState.activePlayer !== this.playerId) return;
 
     const worldPos = this.camera.screenToWorld(screenX, screenY);
     const clickHex = pixelToHex(worldPos, HEX_SIZE);
 
+    if (this.gameState.phase === 'combat') {
+      this.handleCombatClick(clickHex);
+      return;
+    }
+
+    if (this.gameState.phase !== 'astrogation') return;
+
     // Check if clicking a burn direction arrow
     if (this.planningState.selectedShipId) {
       const ship = this.gameState.ships.find(s => s.id === this.planningState.selectedShipId);
@@ -181,4 +187,22 @@ export class InputHandler {
     // Clicked empty space — deselect
     this.planningState.selectedShipId = null;
   }
+
+  private handleCombatClick(clickHex: HexCoord) {
+    if (!this.gameState) return;
+
+    // Click an enemy ship to target it
+    for (const ship of this.gameState.ships) {
+      if (ship.owner === this.playerId || ship.destroyed) continue;
+      if (hexEqual(clickHex, ship.position)) {
+        // Toggle: click same target = deselect
+        this.planningState.combatTargetId =
+          this.planningState.combatTargetId === ship.id ? null : ship.id;
+        return;
+      }
+    }
+
+    // Clicked empty space — deselect target
+    this.planningState.combatTargetId = null;
+  }
 }

src/client/main.ts

@@ -1,4 +1,5 @@
-import type { GameState, S2C, AstrogationOrder, ShipMovement } from '../shared/types';
+import type { GameState, S2C, AstrogationOrder, CombatAttack } from '../shared/types';
+import { canAttack } from '../shared/combat';
 import { getSolarSystemMap } from '../shared/map-data';
 import { SHIP_STATS } from '../shared/constants';
 import { Renderer } from './renderer';
@@ -41,6 +42,7 @@ class GameClient {
     this.ui.onCreate = () => this.createGame();
     this.ui.onJoin = (code) => this.joinGame(code);
     this.ui.onConfirm = () => this.confirmOrders();
+    this.ui.onAttack = () => this.sendAttack();
     this.ui.onSkipCombat = () => this.sendSkipCombat();
     this.ui.onRematch = () => this.sendRematch();
     this.ui.onExit = () => this.exitToMenu();
@@ -95,6 +97,9 @@ class GameClient {
       case 'playing_combat':
         this.ui.showHUD();
         this.updateHUD();
+        this.renderer.planningState.combatTargetId = null;
+        this.ui.showAttackButton(false);
+        this.startCombatTargetWatch();
         break;
 
       case 'playing_movementAnim':
@@ -191,7 +196,8 @@ class GameClient {
         this.gameState = this.deserializeState(msg.state);
         this.renderer.setGameState(this.gameState);
         this.input.setGameState(this.gameState);
-        // After combat resolves, transition based on new state
+        this.renderer.showCombatResults(msg.results);
+        this.renderer.planningState.combatTargetId = null;
         this.transitionToPhase();
         break;
 
@@ -270,6 +276,36 @@ class GameClient {
     }
   }
 
+  private sendAttack() {
+    if (!this.gameState || this.state !== 'playing_combat') return;
+    const targetId = this.renderer.planningState.combatTargetId;
+    if (!targetId) return;
+
+    const attackerIds = this.gameState.ships
+      .filter(s => s.owner === this.playerId && !s.destroyed && canAttack(s))
+      .map(s => s.id);
+
+    if (attackerIds.length === 0) return;
+
+    const attacks: CombatAttack[] = [{ attackerIds, targetId }];
+    this.send({ type: 'combat', attacks });
+  }
+
+  private combatWatchInterval: number | null = null;
+
+  private startCombatTargetWatch() {
+    if (this.combatWatchInterval) clearInterval(this.combatWatchInterval);
+    this.combatWatchInterval = window.setInterval(() => {
+      if (this.state !== 'playing_combat') {
+        if (this.combatWatchInterval) clearInterval(this.combatWatchInterval);
+        this.combatWatchInterval = null;
+        return;
+      }
+      const hasTarget = this.renderer.planningState.combatTargetId !== null;
+      this.ui.showAttackButton(hasTarget);
+    }, 100);
+  }
+
   private sendSkipCombat() {
     if (!this.gameState || this.state !== 'playing_combat') return;
     this.send({ type: 'skipCombat' });

src/client/renderer.ts

@@ -8,9 +8,10 @@ import {
   HEX_DIRECTIONS,
   hexVecLength,
 } from '../shared/hex';
-import type { GameState, Ship, ShipMovement, SolarSystemMap, CelestialBody } from '../shared/types';
+import type { GameState, Ship, ShipMovement, SolarSystemMap, CelestialBody, CombatResult } from '../shared/types';
 import { MOVEMENT_ANIM_DURATION, CAMERA_LERP_SPEED } from '../shared/constants';
 import { computeCourse, predictDestination } from '../shared/movement';
+import { computeOdds, computeRangeMod, computeVelocityMod, getCombatStrength, canAttack } from '../shared/combat';
 
 // --- Camera ---
 
@@ -131,6 +132,7 @@ export interface AnimationState {
 export interface PlanningState {
   selectedShipId: string | null;
   burns: Map<string, number | null>; // shipId -> burn direction (or null for no burn)
+  combatTargetId: string | null; // enemy ship targeted for combat
 }
 
 // --- Renderer ---
@@ -146,7 +148,8 @@ export class Renderer {
   private gameState: GameState | null = null;
   private playerId = -1;
   private animState: AnimationState | null = null;
-  planningState: PlanningState = { selectedShipId: null, burns: new Map() };
+  planningState: PlanningState = { selectedShipId: null, burns: new Map(), combatTargetId: null };
+  private combatResults: { results: CombatResult[]; showUntil: number } | null = null;
   private lastTime = 0;
 
   constructor(canvas: HTMLCanvasElement) {
@@ -192,6 +195,10 @@ export class Renderer {
     }
   }
 
+  showCombatResults(results: CombatResult[]) {
+    this.combatResults = { results, showUntil: performance.now() + 3000 };
+  }
+
   isAnimating(): boolean {
     return this.animState !== null;
   }
@@ -269,10 +276,20 @@ export class Renderer {
     }
     if (this.gameState && this.map) {
       this.renderCourseVectors(ctx, this.gameState, this.map, now);
+      this.renderCombatOverlay(ctx, this.gameState, now);
       this.renderShips(ctx, this.gameState, now);
     }
 
     ctx.restore();
+
+    // Combat results toast (screen-space)
+    if (this.combatResults && this.gameState) {
+      if (now > this.combatResults.showUntil) {
+        this.combatResults = null;
+      } else {
+        this.renderCombatResultsToast(ctx, this.combatResults.results, now, w);
+      }
+    }
   }
 
   // --- Render layers ---
@@ -586,6 +603,120 @@ export class Renderer {
       y: from.y + (to.y - from.y) * segT,
     };
   }
+  private renderCombatOverlay(ctx: CanvasRenderingContext2D, state: GameState, now: number) {
+    if (state.phase !== 'combat' || state.activePlayer !== this.playerId) return;
+    if (this.animState) return;
+
+    const targetId = this.planningState.combatTargetId;
+    const target = targetId ? state.ships.find(s => s.id === targetId) : null;
+
+    // Highlight valid enemy targets
+    for (const ship of state.ships) {
+      if (ship.owner === this.playerId || ship.destroyed) continue;
+      const p = hexToPixel(ship.position, HEX_SIZE);
+      const isTarget = ship.id === targetId;
+
+      // Pulsing ring on enemies
+      const pulse = 0.5 + 0.3 * Math.sin(now / 300);
+      ctx.strokeStyle = isTarget
+        ? `rgba(255, 80, 80, ${0.8 + pulse * 0.2})`
+        : `rgba(255, 80, 80, ${0.2 + pulse * 0.15})`;
+      ctx.lineWidth = isTarget ? 2.5 : 1.5;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, isTarget ? 16 : 13, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    // Draw attack line and odds preview
+    if (target && !target.destroyed) {
+      const myAttackers = state.ships.filter(
+        s => s.owner === this.playerId && !s.destroyed && canAttack(s),
+      );
+      if (myAttackers.length === 0) return;
+
+      const targetPos = hexToPixel(target.position, HEX_SIZE);
+
+      // Attack lines from each attacker
+      for (const attacker of myAttackers) {
+        const attackerPos = hexToPixel(attacker.position, HEX_SIZE);
+        ctx.strokeStyle = 'rgba(255, 80, 80, 0.4)';
+        ctx.lineWidth = 1.5;
+        ctx.setLineDash([6, 4]);
+        ctx.beginPath();
+        ctx.moveTo(attackerPos.x, attackerPos.y);
+        ctx.lineTo(targetPos.x, targetPos.y);
+        ctx.stroke();
+        ctx.setLineDash([]);
+      }
+
+      // Odds preview at target
+      const attackStr = getCombatStrength(myAttackers);
+      const defendStr = getCombatStrength([target]);
+      const odds = computeOdds(attackStr, defendStr);
+      const rangeMod = computeRangeMod(myAttackers[0], target);
+      const velMod = computeVelocityMod(myAttackers[0], target);
+
+      // Background box
+      const label = `${odds}  R-${rangeMod} V-${velMod}`;
+      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';
+      ctx.textAlign = 'center';
+      ctx.fillText(label, targetPos.x, targetPos.y - 20);
+    }
+  }
+
+  private renderCombatResultsToast(ctx: CanvasRenderingContext2D, results: CombatResult[], now: number, screenW: number) {
+    if (results.length === 0) return;
+    const fadeStart = this.combatResults!.showUntil - 1000;
+    const alpha = now > fadeStart ? Math.max(0, (this.combatResults!.showUntil - now) / 1000) : 1;
+
+    ctx.save();
+    ctx.globalAlpha = alpha;
+
+    let y = 60;
+    for (const r of results) {
+      const text = formatCombatResult(r, this.gameState!);
+      ctx.font = 'bold 12px monospace';
+      const w = ctx.measureText(text).width;
+      const x = screenW / 2;
+
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
+      ctx.fillRect(x - w / 2 - 8, y - 12, w + 16, 20);
+      ctx.fillStyle = r.damageType === 'eliminated' ? '#ff4444'
+        : r.damageType === 'disabled' ? '#ffaa00'
+        : '#88ff88';
+      ctx.textAlign = 'center';
+      ctx.fillText(text, x, y + 2);
+      y += 26;
+
+      if (r.counterattack) {
+        const cText = formatCombatResult(r.counterattack, this.gameState!);
+        ctx.font = '11px monospace';
+        const cw = ctx.measureText(cText).width;
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
+        ctx.fillRect(x - cw / 2 - 8, y - 12, cw + 16, 18);
+        ctx.fillStyle = r.counterattack.damageType === 'eliminated' ? '#ff4444'
+          : r.counterattack.damageType === 'disabled' ? '#ffaa00'
+          : '#88ff88';
+        ctx.fillText(cText, x, y + 2);
+        y += 24;
+      }
+    }
+
+    ctx.restore();
+  }
+}
+
+function formatCombatResult(r: CombatResult, state: GameState): string {
+  const targetShip = state.ships.find(s => s.id === r.targetId);
+  const targetName = targetShip ? `${targetShip.type}` : r.targetId;
+  const result = r.damageType === 'eliminated' ? 'ELIMINATED'
+    : r.damageType === 'disabled' ? `DISABLED ${r.disabledTurns}T`
+    : 'MISS';
+  return `${r.odds} [${r.dieRoll}→${r.modifiedRoll}] ${targetName}: ${result}`;
 }
 
 // --- Utility ---

src/client/ui.ts

@@ -8,6 +8,7 @@ export class UIManager {
   onCreate: (() => void) | null = null;
   onJoin: ((code: string) => void) | null = null;
   onConfirm: (() => void) | null = null;
+  onAttack: (() => void) | null = null;
   onSkipCombat: (() => void) | null = null;
   onRematch: (() => void) | null = null;
   onExit: (() => void) | null = null;
@@ -45,6 +46,7 @@ export class UIManager {
     });
 
     document.getElementById('confirmBtn')!.addEventListener('click', () => this.onConfirm?.());
+    document.getElementById('attackBtn')!.addEventListener('click', () => this.onAttack?.());
     document.getElementById('skipCombatBtn')!.addEventListener('click', () => this.onSkipCombat?.());
     document.getElementById('rematchBtn')!.addEventListener('click', () => this.onRematch?.());
     document.getElementById('exitBtn')!.addEventListener('click', () => this.onExit?.());
@@ -107,6 +109,10 @@ export class UIManager {
     }
   }
 
+  showAttackButton(visible: boolean) {
+    document.getElementById('attackBtn')!.style.display = visible ? 'inline-block' : 'none';
+  }
+
   showMovementStatus() {
     const statusMsg = document.getElementById('statusMsg')!;
     statusMsg.textContent = 'Ships moving...';

static/index.html

@@ -42,6 +42,7 @@ <h2>Game Created</h2>
     </div>
     <div id="bottomBar" class="hud-bottom">
       <button id="confirmBtn" class="btn btn-confirm" style="display:none">CONFIRM</button>
+      <button id="attackBtn" class="btn btn-attack" style="display:none">ATTACK</button>
       <button id="skipCombatBtn" class="btn btn-confirm" style="display:none">SKIP COMBAT</button>
       <div id="statusMsg" class="status-msg"></div>
     </div>

static/style.css

@@ -108,6 +108,18 @@ body {
   background: rgba(102, 187, 106, 0.15);
 }
 
+.btn-attack {
+  border-color: #ff5252;
+  color: #ff5252;
+  padding: 0.6rem 2.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.15em;
+}
+
+.btn-attack:hover {
+  background: rgba(255, 82, 82, 0.15);
+}
+
 .divider {
   color: #555;
   margin: 1.2rem 0;