feat: Add block breaking, HUD, and inventory system for player

js/render.js

@@ -86,6 +86,11 @@ function render() {
         renderEntities(ctx, worldOffsetX, worldOffsetY);
     }
     
+    // Render breaking range indicator if player is breaking
+    if (player && player.isBreaking) {
+        renderBreakingIndicator(ctx, worldOffsetX, worldOffsetY);
+    }
+    
     // Draw cursor position and update debug info
     if (currentMouseX !== undefined && currentMouseY !== undefined) {
         const worldX = Math.floor(currentMouseX / PIXEL_SIZE) + worldOffsetX;
@@ -168,6 +173,33 @@ function displayDebugInfo() {
     ctx.restore();
 }
 
+// Render breaking indicator for player
+function renderBreakingIndicator(ctx, offsetX, offsetY) {
+    // Calculate position in front of player
+    const breakX = Math.floor(player.x + (player.direction * player.breakingRange));
+    const breakY = Math.floor(player.y);
+    
+    // Convert to screen coordinates
+    const screenX = (breakX - offsetX) * PIXEL_SIZE;
+    const screenY = (breakY - offsetY) * PIXEL_SIZE;
+    
+    // Draw breaking indicator
+    ctx.strokeStyle = '#ff0000';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(
+        screenX - PIXEL_SIZE/2, 
+        screenY - PIXEL_SIZE/2, 
+        PIXEL_SIZE, 
+        PIXEL_SIZE
+    );
+    
+    // Draw line from player to breaking point
+    ctx.beginPath();
+    ctx.moveTo((player.x - offsetX) * PIXEL_SIZE, (player.y - offsetY) * PIXEL_SIZE);
+    ctx.lineTo(screenX, screenY);
+    ctx.stroke();
+}
+
 // Render a chunk to an offscreen canvas and cache it
 function renderChunkToCache(chunkX, chunkY, key) {
     const chunk = chunks.get(key);