feat: better health display and stronger shotgun

index.html

@@ -31,41 +31,107 @@
         
         .ui {
             position: fixed;
-            top: 20px;
+            bottom: 20px;
-            left: 20px;
+            right: 20px;
             color: white;
-            font-size: 18px;
+            font-size: 16px;
             z-index: 10;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+            font-family: 'Courier New', monospace;
         }
         
         .weapon-info {
-            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 20, 0.9) 100%);
+            background: rgba(64, 64, 64, 0.95);
-            padding: 15px 20px;
+            padding: 12px 16px;
-            border-radius: 10px;
+            border-radius: 8px;
-            border: 2px solid rgba(255, 255, 255, 0.1);
+            border: 3px solid #FFB000;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
             backdrop-filter: blur(5px);
+            min-width: 280px;
         }
         
         .weapon-info div {
-            margin: 5px 0;
+            margin: 4px 0;
             font-weight: bold;
         }
         
-        .weapon-info span {
+        .weapon-name {
-            color: #00ff88;
+            color: #FFB000;
-            text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
+            text-align: center;
+            font-size: 18px;
+            margin-bottom: 12px !important;
+            text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
+        }
+        
+        .stat-container {
+            position: relative;
+            margin: 0;
+        }
+        
+        .stat-label {
+            color: black;
+            font-size: 14px;
+            font-weight: bold;
+            position: absolute;
+            left: 6px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 5;
+            text-shadow: none;
+        }
+        
+        .health-bar {
+            width: 100%;
+            height: 24px;
+            background: #330000;
+            border: 2px solid #000;
+            border-radius: 4px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .health-fill {
+            height: 100%;
+            background: linear-gradient(to bottom, #ff4444, #cc0000);
+            transition: width 0.3s ease;
+            border-radius: 2px;
+        }
+        
+        .ammo-bar {
+            width: 100%;
+            height: 24px;
+            background: #000033;
+            border: 2px solid #000;
+            border-radius: 4px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .ammo-fill {
+            height: 100%;
+            background: linear-gradient(to bottom, #4488ff, #2266cc);
+            transition: width 0.3s ease;
+            border-radius: 2px;
+        }
+        
+        .ammo-infinite {
+            color: #4488ff;
+            font-size: 20px;
+            font-weight: bold;
+            text-align: center;
+            line-height: 24px;
+            text-shadow: 0 0 10px rgba(68, 136, 255, 0.8);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
         }
         
         #score {
-            color: #ffaa00 !important;
+            color: #FFB000;
-            text-shadow: 0 0 10px rgba(255, 170, 0, 0.5) !important;
+            text-align: center;
-        }
+            font-size: 16px;
-        
+            text-shadow: 0 0 10px rgba(255, 176, 0, 0.5);
-        #health {
-            color: #ff4444 !important;
-            text-shadow: 0 0 10px rgba(255, 68, 68, 0.5) !important;
         }
         
         .game-over-screen {
@@ -158,10 +224,24 @@
     <canvas id="gameCanvas"></canvas>
     <div class="ui">
         <div class="weapon-info">
-            <div>Weapon: <span id="weaponName">Pistol</span></div>
+            <div class="weapon-name" id="weaponName">Pistol</div>
-            <div>Ammo: <span id="ammoCount">∞</span></div>
+            
-            <div>Health: <span id="health">100</span></div>
+            <div class="stat-container">
-            <div>Score: <span id="score">0</span></div>
+                <div class="health-bar">
+                    <div class="stat-label" id="healthText">HP: 100</div>
+                    <div class="health-fill" id="healthFill"></div>
+                </div>
+            </div>
+            
+            <div class="stat-container">
+                <div class="ammo-bar" id="ammoBar">
+                    <div class="stat-label" id="ammoText">Ammo: ∞</div>
+                    <div class="ammo-fill" id="ammoFill"></div>
+                    <div class="ammo-infinite" id="ammoInfinite">∞</div>
+                </div>
+            </div>
+            
+            <div id="score">Score: 0</div>
         </div>
     </div>
     
@@ -272,7 +352,7 @@
                 damage: 40,
                 fireRate: 800,
                 spread: 0.5,
-                bulletsPerShot: 5,
+                bulletsPerShot: 20,
                 range: 200,
                 autoFire: false,
                 burstCount: 1,
@@ -1063,11 +1143,39 @@
         }
         
         function updateUI() {
+            // Update weapon name
             document.getElementById('weaponName').textContent = game.player.weapon.name;
-            document.getElementById('ammoCount').textContent = 
+            
-                game.player.weapon.ammo === Infinity ? '∞' : game.player.weapon.ammo;
+            // Update health bar
-            document.getElementById('health').textContent = game.player.health;
+            const healthPercent = (game.player.health / game.player.maxHealth) * 100;
-            document.getElementById('score').textContent = game.score;
+            document.getElementById('healthText').textContent = `HP: ${game.player.health}`;
+            document.getElementById('healthFill').style.width = `${healthPercent}%`;
+            
+            // Update ammo bar
+            const ammoBar = document.getElementById('ammoBar');
+            const ammoFill = document.getElementById('ammoFill');
+            const ammoText = document.getElementById('ammoText');
+            const ammoInfinite = document.getElementById('ammoInfinite');
+            
+            if (game.player.weapon.ammo === Infinity) {
+                // Show infinite symbol for pistol
+                ammoFill.style.width = '0%';
+                ammoText.style.display = 'none';
+                ammoInfinite.style.display = 'block';
+            } else {
+                // Show ammo bar for other weapons
+                const maxAmmo = weaponTypes[Object.keys(weaponTypes).find(key => 
+                    weaponTypes[key].name === game.player.weapon.name)].ammo;
+                const ammoPercent = (game.player.weapon.ammo / maxAmmo) * 100;
+                
+                ammoFill.style.width = `${ammoPercent}%`;
+                ammoText.style.display = 'block';
+                ammoText.textContent = `Ammo: ${game.player.weapon.ammo}`;
+                ammoInfinite.style.display = 'none';
+            }
+            
+            // Update score
+            document.getElementById('score').textContent = `Score: ${game.score}`;
         }
         
         function showGameOver() {