From 05f375a45e288a5d70323a536b72bfc0a978e38c Mon Sep 17 00:00:00 2001
From: elioat <elioat@tilde.institute>
Date: Wed, 9 Apr 2025 21:17:13 -0400
Subject: *

---
 html/space/renderer.js | 153 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 142 insertions(+), 11 deletions(-)

(limited to 'html')

diff --git a/html/space/renderer.js b/html/space/renderer.js
index 3df55a7..475304f 100644
--- a/html/space/renderer.js
+++ b/html/space/renderer.js
@@ -12,6 +12,14 @@ const stars = [];
 const NUM_STARS = 2000;  // Increased from 1000
 const STAR_FIELD_DEPTH = 20000;  // Increased from 2000
 
+// HUD constants
+const HUD_COLOR = '#00ff00';
+const HUD_ALPHA = 0.7;
+const RADAR_RADIUS = 100;
+const RADAR_CENTER_X = 100;
+const RADAR_CENTER_Y = 100;
+const RADAR_SCALE = 0.1; // Scale factor for radar display
+
 // Initialize the renderer
 export function initRenderer() {
     canvas = document.createElement('canvas');
@@ -72,6 +80,136 @@ function projectPoint(point, player) {
     };
 }
 
+// Draw radar/minimap
+function drawRadar(player, gameState) {
+    // Save context
+    ctx.save();
+    
+    // Set radar style
+    ctx.strokeStyle = HUD_COLOR;
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.lineWidth = 1;
+    
+    // Draw radar background
+    ctx.beginPath();
+    ctx.arc(RADAR_CENTER_X, RADAR_CENTER_Y, RADAR_RADIUS, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    
+    // Draw radar grid
+    ctx.beginPath();
+    ctx.moveTo(RADAR_CENTER_X - RADAR_RADIUS, RADAR_CENTER_Y);
+    ctx.lineTo(RADAR_CENTER_X + RADAR_RADIUS, RADAR_CENTER_Y);
+    ctx.moveTo(RADAR_CENTER_X, RADAR_CENTER_Y - RADAR_RADIUS);
+    ctx.lineTo(RADAR_CENTER_X, RADAR_CENTER_Y + RADAR_RADIUS);
+    ctx.stroke();
+    
+    // Draw objects on radar
+    ctx.fillStyle = HUD_COLOR;
+    
+    // Draw planets
+    gameState.planets.forEach(planet => {
+        const dx = (planet.position.x - player.position.x) * RADAR_SCALE;
+        const dy = (planet.position.z - player.position.z) * RADAR_SCALE;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < RADAR_RADIUS) {
+            ctx.beginPath();
+            ctx.arc(
+                RADAR_CENTER_X + dx,
+                RADAR_CENTER_Y + dy,
+                5,
+                0,
+                Math.PI * 2
+            );
+            ctx.fill();
+        }
+    });
+    
+    // Draw enemy ships
+    gameState.enemyShips.forEach(ship => {
+        const dx = (ship.position.x - player.position.x) * RADAR_SCALE;
+        const dy = (ship.position.z - player.position.z) * RADAR_SCALE;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < RADAR_RADIUS) {
+            ctx.beginPath();
+            ctx.arc(
+                RADAR_CENTER_X + dx,
+                RADAR_CENTER_Y + dy,
+                3,
+                0,
+                Math.PI * 2
+            );
+            ctx.fill();
+        }
+    });
+    
+    // Restore context
+    ctx.restore();
+}
+
+// Draw speed and direction indicators
+function drawSpeedIndicator(player) {
+    ctx.save();
+    ctx.fillStyle = HUD_COLOR;
+    ctx.font = '14px monospace';
+    
+    // Calculate speed
+    const speed = Math.sqrt(
+        player.velocity.x * player.velocity.x +
+        player.velocity.y * player.velocity.y +
+        player.velocity.z * player.velocity.z
+    );
+    
+    // Draw speed
+    ctx.fillText(`Speed: ${speed.toFixed(2)}`, 20, height - 40);
+    
+    // Draw direction
+    const direction = Math.atan2(player.velocity.x, player.velocity.z);
+    ctx.fillText(`Heading: ${(direction * 180 / Math.PI).toFixed(1)}°`, 20, height - 20);
+    
+    ctx.restore();
+}
+
+// Draw enhanced targeting reticle
+function drawTargetingReticle() {
+    ctx.save();
+    ctx.strokeStyle = HUD_COLOR;
+    ctx.lineWidth = 1;
+    
+    // Outer circle
+    ctx.beginPath();
+    ctx.arc(width/2, height/2, 20, 0, Math.PI * 2);
+    ctx.stroke();
+    
+    // Inner crosshair
+    ctx.beginPath();
+    ctx.moveTo(width/2 - 10, height/2);
+    ctx.lineTo(width/2 + 10, height/2);
+    ctx.moveTo(width/2, height/2 - 10);
+    ctx.lineTo(width/2, height/2 + 10);
+    ctx.stroke();
+    
+    // Target brackets
+    ctx.beginPath();
+    ctx.moveTo(width/2 - 30, height/2 - 30);
+    ctx.lineTo(width/2 - 20, height/2 - 30);
+    ctx.lineTo(width/2 - 20, height/2 - 20);
+    ctx.moveTo(width/2 + 30, height/2 - 30);
+    ctx.lineTo(width/2 + 20, height/2 - 30);
+    ctx.lineTo(width/2 + 20, height/2 - 20);
+    ctx.moveTo(width/2 - 30, height/2 + 30);
+    ctx.lineTo(width/2 - 20, height/2 + 30);
+    ctx.lineTo(width/2 - 20, height/2 + 20);
+    ctx.moveTo(width/2 + 30, height/2 + 30);
+    ctx.lineTo(width/2 + 20, height/2 + 30);
+    ctx.lineTo(width/2 + 20, height/2 + 20);
+    ctx.stroke();
+    
+    ctx.restore();
+}
+
 // Main render function
 export function render() {
     const player = getPlayerState();
@@ -157,15 +295,8 @@ export function render() {
         }
     });
 
-    // Draw cockpit overlay
-    ctx.strokeStyle = '#ffffff';
-    ctx.lineWidth = 2;
-    
-    // Center crosshair
-    ctx.beginPath();
-    ctx.moveTo(width/2 - 10, height/2);
-    ctx.lineTo(width/2 + 10, height/2);
-    ctx.moveTo(width/2, height/2 - 10);
-    ctx.lineTo(width/2, height/2 + 10);
-    ctx.stroke();
+    // Draw HUD elements
+    drawRadar(player, gameState);
+    drawSpeedIndicator(player);
+    drawTargetingReticle();
 } 
\ No newline at end of file
-- 
cgit 1.4.1-2-gfad0