feat: add keyboard shortcuts, wind indicator, battery stats — Phase 1 complete

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: WomB0ComB0

src/ResQ.Viz.Web/wwwroot/css/viz.css

@@ -157,3 +157,12 @@ select {
     color: #8b949e;
     margin-bottom: 2px;
 }
+
+#wind-indicator {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    text-align: center;
+}
+#wind-canvas { display: block; }
+#wind-label { font-size: 10px; color: #8b949e; margin-top: 2px; }

src/ResQ.Viz.Web/wwwroot/index.html

@@ -94,7 +94,12 @@ <h3>Fault Injection</h3>
             </div>
         </section>
     </div>
+    <div id="wind-indicator">
+        <canvas id="wind-canvas" width="60" height="60"></canvas>
+        <div id="wind-label">N</div>
+    </div>
     <div id="stats">
+        <span id="avg-battery">Bat: --</span> |
         <span id="fps">FPS: --</span> |
         <span id="drone-count">Drones: 0</span> |
         <span id="sim-time">T: 0.0s</span>

src/ResQ.Viz.Web/wwwroot/js/app.js

@@ -7,6 +7,37 @@ import { DroneManager } from './drones.js';
 import { EffectsManager } from './effects.js';
 import { ControlPanel } from './controls.js';
 
+function drawWindArrow(degrees) {
+    const canvas = document.getElementById('wind-canvas');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const cx = 30, cy = 30, r = 22;
+    ctx.clearRect(0, 0, 60, 60);
+
+    // Circle
+    ctx.strokeStyle = 'rgba(139, 148, 158, 0.5)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // Arrow
+    const rad = (degrees - 90) * Math.PI / 180;
+    ctx.strokeStyle = '#58a6ff';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);
+    ctx.lineTo(cx + Math.cos(rad) * r * 0.8, cy + Math.sin(rad) * r * 0.8);
+    ctx.stroke();
+
+    // N marker
+    ctx.fillStyle = '#8b949e';
+    ctx.font = '8px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('N', cx, cy - r - 4);
+}
+drawWindArrow(0); // Initial draw
+
 const container = document.getElementById('scene-container');
 const statusEl = document.getElementById('connection-status');
 const fpsEl = document.getElementById('fps');
@@ -30,11 +61,18 @@ const connection = new signalR.HubConnectionBuilder()
     .build();
 
 connection.on('ReceiveFrame', (frame) => {
-    droneManager.update(frame.drones ?? []);
+    const drones = frame.drones ?? [];
+    droneManager.update(drones);
     effectsManager.update(frame);
-    controlPanel.updateDroneList(frame.drones ?? []);
+    controlPanel.updateDroneList(drones);
     droneCountEl.textContent = `Drones: ${droneManager.count}`;
     simTimeEl.textContent = `T: ${frame.time?.toFixed(1) ?? '0.0'}s`;
+
+    const avgBattery = drones.length > 0
+        ? (drones.reduce((s, d) => s + (d.battery ?? 100), 0) / drones.length).toFixed(0)
+        : '--';
+    const battEl = document.getElementById('avg-battery');
+    if (battEl) battEl.textContent = `Bat: ${avgBattery}%`;
 });
 
 connection.onreconnecting(() => {

src/ResQ.Viz.Web/wwwroot/js/controls.js

@@ -5,6 +5,7 @@ export class ControlPanel {
     constructor() {
         this._bindButtons();
         this._bindSliders();
+        this._bindKeyboard();
     }
 
     // Call each time a new frame arrives to keep drone select lists current
@@ -35,6 +36,33 @@ export class ControlPanel {
         if (ids.includes(current)) sel.value = current;
     }
 
+    _bindKeyboard() {
+        document.addEventListener('keydown', async (e) => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
+            switch (e.code) {
+                case 'Space':
+                    e.preventDefault();
+                    await this._post('/api/sim/stop');
+                    break;
+                case 'KeyR':
+                    await this._post('/api/sim/reset');
+                    break;
+                case 'Digit1':
+                    await this._post('/api/sim/scenario/single');
+                    break;
+                case 'Digit2':
+                    await this._post('/api/sim/scenario/swarm-5');
+                    break;
+                case 'Digit3':
+                    await this._post('/api/sim/scenario/swarm-20');
+                    break;
+                case 'Digit4':
+                    await this._post('/api/sim/scenario/sar');
+                    break;
+            }
+        });
+    }
+
     _bindButtons() {
         this._on('btn-start', () => this._post('/api/sim/start'));
         this._on('btn-stop', () => this._post('/api/sim/stop'));