HUD shield

spaceship_game/static/index.html

@@ -33,9 +33,32 @@
         #shield-status {
             margin-top: 6px;
             color: #00d5ff;
+            font-size: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        #shield-status-text {
             font-size: 18px;
         }
 
+        .shield-bar {
+            width: 220px;
+            height: 10px;
+            border: 1px solid rgba(0, 213, 255, 0.6);
+            border-radius: 8px;
+            overflow: hidden;
+            background: rgba(0, 20, 30, 0.6);
+        }
+
+        .shield-bar-fill {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, #00b7ff, #00ffdd);
+            transition: width 0.15s ease-out;
+        }
+
         #debug-info {
             position: fixed;
             bottom: 20px;
@@ -247,7 +270,12 @@
         <div>WAVE: <span id="wave">0</span></div>
         <div>SCORE: <span id="score">0</span></div>
         <div id="status">HP: <span style="color: #0f0">100</span></div>
-        <div id="shield-status">Shield: READY</div>
+        <div id="shield-status">
+            <div id="shield-status-text">Shield: READY</div>
+            <div class="shield-bar">
+                <div class="shield-bar-fill" id="shield-bar-fill"></div>
+            </div>
+        </div>
         <div>GOLD: <span id="gold">0</span></div>
     </div>
 

spaceship_game/static/main.js

@@ -1097,18 +1097,30 @@ function updateHUD() {
     const goldEl = document.getElementById('gold');
     if (goldEl) goldEl.textContent = playerGold;
 
-    const shieldStatusEl = document.getElementById('shield-status');
-    if (shieldStatusEl) {
+    const shieldStatusText = document.getElementById('shield-status-text');
+    const shieldBarFill = document.getElementById('shield-bar-fill');
+    if (shieldStatusText && shieldBarFill) {
         const now = Date.now();
+        let statusText = 'Shield: READY';
+        let progress = 1;
+
+        const cooldownWindow = Math.max(1, shieldCooldown || BASE_SHIELD_COOLDOWN);
+
         if (shieldActive) {
             const remaining = Math.max(0, shieldEndTime - now);
-            shieldStatusEl.textContent = `Shield: ACTIVE (${(remaining / 1000).toFixed(1)}s)`;
+            statusText = `Shield: ACTIVE (${(remaining / 1000).toFixed(1)}s)`;
+            progress = Math.max(0, Math.min(1, remaining / shieldDuration));
         } else if (now < shieldCooldownReadyAt) {
             const cd = Math.max(0, shieldCooldownReadyAt - now);
-            shieldStatusEl.textContent = `Shield: RECHARGE ${(cd / 1000).toFixed(1)}s`;
+            statusText = `Shield: RECHARGE ${(cd / 1000).toFixed(1)}s`;
+            progress = Math.max(0, Math.min(1, 1 - cd / cooldownWindow));
         } else {
-            shieldStatusEl.textContent = 'Shield: READY';
+            statusText = 'Shield: READY';
+            progress = 1;
         }
+
+        shieldStatusText.textContent = statusText;
+        shieldBarFill.style.width = `${Math.round(progress * 100)}%`;
     }
 
     // Check for game over