Add phase transition banner, enemy focus shortcut, and visual polish

- Phase change banner: brief centered overlay ('YOUR TURN', 'COMBAT', 'ORDNANCE')
  with fade in/out animation on canvas
- 'E' key focuses camera on nearest detected enemy ship
- Added E key to help overlay controls reference

Author: rgilks

src/client/main.ts

@@ -1,5 +1,5 @@
 import type { GameState, S2C, AstrogationOrder, OrdnanceLaunch, CombatAttack, ShipMovement } from '../shared/types';
-import { pixelToHex, hexEqual, hexVecLength } from '../shared/hex';
+import { pixelToHex, hexToPixel, hexEqual, hexVecLength } from '../shared/hex';
 import { canAttack, getCombatStrength, computeOdds, computeRangeMod, computeVelocityMod } from '../shared/combat';
 import { getSolarSystemMap, SCENARIOS, findBaseHex } from '../shared/map-data';
 import { SHIP_STATS, ORDNANCE_MASS } from '../shared/constants';
@@ -130,6 +130,10 @@ class GameClient {
       } else if (e.key === '0' && this.state === 'playing_astrogation') {
         // 0 to clear burn
         this.clearSelectedBurn();
+      } else if (e.key.toLowerCase() === 'e' && this.gameState &&
+          (this.state === 'playing_astrogation' || this.state === 'playing_ordnance' || this.state === 'playing_combat' || this.state === 'playing_opponentTurn')) {
+        // Focus camera on nearest enemy
+        this.focusNearestEnemy();
       } else if (e.key.toLowerCase() === 'w' || e.key === 'ArrowUp') {
         this.renderer.camera.pan(0, 40);
       } else if (e.key.toLowerCase() === 's' || e.key === 'ArrowDown') {
@@ -580,12 +584,15 @@ class GameClient {
 
     if (this.gameState.phase === 'combat' && isMyTurn) {
       this.setState('playing_combat');
+      this.renderer.showPhaseBanner('COMBAT');
       playPhaseChange();
     } else if (this.gameState.phase === 'ordnance' && isMyTurn) {
       this.setState('playing_ordnance');
+      this.renderer.showPhaseBanner('ORDNANCE');
       playPhaseChange();
     } else if (this.gameState.phase === 'astrogation' && isMyTurn) {
       this.setState('playing_astrogation');
+      this.renderer.showPhaseBanner('YOUR TURN');
       playPhaseChange();
     } else {
       this.setState('playing_opponentTurn');
@@ -966,6 +973,31 @@ class GameClient {
     this.updateHUD();
   }
 
+  private focusNearestEnemy() {
+    if (!this.gameState) return;
+    const enemies = this.gameState.ships.filter(s =>
+      s.owner !== this.playerId && !s.destroyed && s.detected,
+    );
+    if (enemies.length === 0) {
+      this.ui.showToast('No detected enemies', 'info');
+      return;
+    }
+    // Find the one nearest to current camera center
+    let nearest = enemies[0];
+    let bestDist = Infinity;
+    for (const e of enemies) {
+      const p = hexToPixel(e.position, HEX_SIZE);
+      const dx = p.x - this.renderer.camera.x;
+      const dy = p.y - this.renderer.camera.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < bestDist) {
+        bestDist = dist;
+        nearest = e;
+      }
+    }
+    this.renderer.centerOnHex(nearest.position);
+  }
+
   // --- Burn shortcuts ---
 
   private setBurnDirection(dir: number) {

src/client/renderer.ts

@@ -182,6 +182,7 @@ export class Renderer {
   private combatEffects: CombatEffect[] = [];
   private hexFlashes: HexFlash[] = [];
   private movementEvents: { events: MovementEvent[]; showUntil: number } | null = null;
+  private phaseBanner: { text: string; showUntil: number } | null = null;
   private lastTime = 0;
 
   constructor(canvas: HTMLCanvasElement) {
@@ -349,6 +350,13 @@ export class Renderer {
     });
   }
 
+  showPhaseBanner(text: string) {
+    this.phaseBanner = {
+      text,
+      showUntil: performance.now() + 1500,
+    };
+  }
+
   isAnimating(): boolean {
     return this.animState !== null;
   }
@@ -467,6 +475,15 @@ export class Renderer {
       }
     }
 
+    // Phase banner (screen-space, center)
+    if (this.phaseBanner) {
+      if (now > this.phaseBanner.showUntil) {
+        this.phaseBanner = null;
+      } else {
+        this.renderPhaseBanner(ctx, this.phaseBanner.text, now, this.phaseBanner.showUntil, w, h);
+      }
+    }
+
     // Minimap (screen-space, bottom-right)
     if (this.map && this.gameState) {
       this.renderMinimap(ctx, w, h);
@@ -1605,6 +1622,43 @@ export class Renderer {
     ctx.restore();
   }
 
+  private renderPhaseBanner(ctx: CanvasRenderingContext2D, text: string, now: number, showUntil: number, screenW: number, screenH: number) {
+    const elapsed = 1500 - (showUntil - now);
+    // Fade in over 200ms, stay for 1000ms, fade out over 300ms
+    let alpha: number;
+    if (elapsed < 200) {
+      alpha = elapsed / 200;
+    } else if (elapsed < 1200) {
+      alpha = 1;
+    } else {
+      alpha = 1 - (elapsed - 1200) / 300;
+    }
+    alpha = Math.max(0, Math.min(1, alpha));
+
+    ctx.save();
+    ctx.globalAlpha = alpha * 0.9;
+    ctx.font = 'bold 22px monospace';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    // Background bar
+    const metrics = ctx.measureText(text);
+    const barW = metrics.width + 60;
+    const barH = 40;
+    const barX = screenW / 2 - barW / 2;
+    const barY = screenH * 0.35 - barH / 2;
+    ctx.fillStyle = 'rgba(10, 10, 40, 0.7)';
+    ctx.beginPath();
+    ctx.roundRect(barX, barY, barW, barH, 6);
+    ctx.fill();
+
+    // Text
+    ctx.fillStyle = '#4fc3f7';
+    ctx.fillText(text, screenW / 2, screenH * 0.35);
+
+    ctx.restore();
+  }
+
   private renderMinimap(ctx: CanvasRenderingContext2D, screenW: number, screenH: number) {
     if (!this.map || !this.gameState) return;
 

static/index.html

@@ -146,6 +146,7 @@ <h3>Combat</h3>
       </div>
       <div class="help-section">
         <h3>Other</h3>
+        <div class="help-row"><span class="help-key">E</span> Focus nearest enemy</div>
         <div class="help-row"><span class="help-key">M</span> Toggle sound</div>
         <div class="help-row"><span class="help-key">?</span> Toggle this help</div>
       </div>