Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 15, 2025

Commit

9029f27

verified ·

1 Parent(s): 0c2386c

Manual changes saved

Browse files

Files changed (1) hide show

index.html +214 -277

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>BattleZone Royale - Mobile Controls & Medkit Hold</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
@@ -26,47 +26,98 @@
     .biome-selected { outline: 3px solid rgba(96,165,250,0.9); }
     /* Loading screen */
-    #loadingScreen { position: absolute; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; overflow: hidden; color: #fff; padding: 24px; box-sizing: border-box; }
-    /* Mobile controls */
-    #mobileControls {
       position: absolute;
-      bottom: 14px;
-      left: 14px;
-      right: 14px;
-      pointer-events: auto;
-      z-index: 60;
       display: none;
-      touch-action: none;
     }
-    .mobile-left, .mobile-right { display:flex; gap:10px; align-items:center; }
-    .dpad { width: 140px; height: 140px; position: relative; }
-    .dpad button {
-      position: absolute; width: 46px; height: 46px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.04); color:#fff; font-weight:700;
-      display:flex; align-items:center; justify-content:center; -webkit-user-select:none; user-select:none;
     }
-    .dpad button:active { background: rgba(255,255,255,0.10); }
-    .dpad .up { left: 50%; transform: translateX(-50%); top: 6px; }
-    .dpad .down { left: 50%; transform: translateX(-50%); bottom: 6px; }
-    .dpad .left { left: 6px; top: 50%; transform: translateY(-50%); }
-    .dpad .right { right: 6px; top: 50%; transform: translateY(-50%); }
-    .mobile-actions { position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; z-index:61; }
-    .action-btn { width:64px; height:64px; border-radius:12px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; }
-    .action-btn:active { background: rgba(255,255,255,0.10); }
-    .small-actions { display:flex; gap:8px; margin-top:8px; }
-    /* progress ring for medkit button */
-    .medkit-wrap { position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
-    .medkit-progress {
-      position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
-      opacity:0.95;
     }
-    /* Loading card styles (from previous) */
-    .loading-bg { position: absolute; inset: -20%; background: linear-gradient(120deg, #0b1220 0%, #123049 30%, #5b2a6a 60%, #2f4b2f 100%); filter: blur(20px) saturate(1.1); animation: bgShift 18s linear infinite; transform: scale(1.1); opacity: 0.85; }
-    @keyframes bgShift { 0% { filter: hue-rotate(0deg) blur(20px); transform: scale(1.06) rotate(0.01deg); } 25% { filter: hue-rotate(45deg) blur(18px); transform: scale(1.08) rotate(0.02deg); } 50% { filter: hue-rotate(90deg) blur(22px); transform: scale(1.04) rotate(-0.01deg); } 75% { filter: hue-rotate(180deg) blur(20px); transform: scale(1.07) rotate(0.01deg); } 100% { filter: hue-rotate(360deg) blur(20px); transform: scale(1.06) rotate(-0.02deg); } }
-    .loading-card { position: relative; z-index: 2; max-width: 880px; width: calc(100% - 48px); background: rgba(6,10,18,0.55); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 40px rgba(0,0,0,0.7); border-radius: 12px; padding: 20px; display:flex; gap:18px; align-items:center; }
   </style>
 </head>
 <body>
@@ -106,7 +157,7 @@
         <li><strong>WASD</strong> — Move</li>
         <li><strong>Mouse</strong> — Aim</li>
         <li><strong>Left Click</strong> — Shoot (if weapon equipped or in selected slot) or pickaxe melee</li>
-        <li><strong>E</strong> — Hold to use medkit (3s) OR tap to Interact / Loot</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
         <li><strong>R</strong> — Reload selected weapon</li>
         <li><strong>1-5</strong> — Select inventory slot (also equips it)</li>
@@ -207,38 +258,6 @@
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <div id="hudGear" aria-label="gear"></div>
         </div>
-        <!-- Mobile Controls -->
-        <div id="mobileControls" aria-hidden="true">
-          <div style="display:flex; justify-content:space-between;">
-            <div class="mobile-left">
-              <div class="dpad" id="dpad">
-                <button class="up" data-dir="up">▲</button>
-                <button class="down" data-dir="down">▼</button>
-                <button class="left" data-dir="left">◀</button>
-                <button class="right" data-dir="right">▶</button>
-              </div>
-            </div>
-            <div class="mobile-right" style="align-items:flex-end; gap:14px;">
-              <div style="display:flex; flex-direction:column; align-items:flex-end;">
-                <div class="mobile-actions" id="mobileActions">
-                  <div class="medkit-wrap">
-                    <canvas class="medkit-progress" id="medkitProgress" width="64" height="64" style="border-radius:12px;"></canvas>
-                    <button id="fireBtn" class="action-btn" style="width:64px;height:64px;">FIRE</button>
-                  </div>
-                  <div class="small-actions">
-                    <button id="interactBtn" class="action-btn" style="width:64px;height:44px;">USE</button>
-                    <button id="buildBtn" class="action-btn" style="width:64px;height:44px;">BUILD</button>
-                    <button id="reloadBtn" class="action-btn" style="width:64px;height:44px;">RLD</button>
-                    <button id="equipBtn" class="action-btn" style="width:64px;height:44px;">EQ</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -261,22 +280,13 @@
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
-    // Mobile controls elements
-    const mobileControls = document.getElementById('mobileControls');
-    const dpad = document.getElementById('dpad');
-    const fireBtn = document.getElementById('fireBtn');
-    const interactBtn = document.getElementById('interactBtn');
-    const buildBtn = document.getElementById('buildBtn');
-    const reloadBtn = document.getElementById('reloadBtn');
-    const equipBtn = document.getElementById('equipBtn');
-    const medkitCanvas = document.getElementById('medkitProgress');
-    const medkitCtx = medkitCanvas.getContext('2d');
-    // Loading screen elements and minimap
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
     const loadingProgressEl = document.getElementById('loadingProgress');
     const loadingTimerText = document.getElementById('loadingTimerText');
     const minimapCanvas = document.getElementById('minimapCanvas');
     const miniCtx = minimapCanvas.getContext('2d');
     let miniTerrainCache = null;
@@ -289,22 +299,14 @@
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
       minimapCanvas.width = 220;
       minimapCanvas.height = 140;
       cameraUpdate();
-      miniTerrainCache = null;
     }
     window.addEventListener('resize', resizeCanvas);
-    // Detect mobile/touch
-    const isMobile = ('ontouchstart' in window) || navigator.maxTouchPoints > 0;
-    if (isMobile){
-      mobileControls.style.display = 'block';
-      mobileControls.setAttribute('aria-hidden', 'false');
-      // hide cursor for better mobile feel
-      canvas.style.cursor = 'none';
-    }
     // Player
     const player = {
       id:'player', x: WORLD.width/2, y: WORLD.height/2, radius:16, angle:0, speed:220,
@@ -313,9 +315,8 @@
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
-      // medkit hold state
-      ePressStart: 0, // timestamp when E/use started (keyboard or touch)
-      ePressApplied: false // whether medkit has been applied for current press
     };
     // Input
@@ -326,42 +327,33 @@
     window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
-      if (k in keys) keys[k] = true;
-      // handle medkit hold start on keydown
-      if (k === 'e'){
-        player.ePressStart = performance.now();
-        player.ePressApplied = false;
-      }
-      if (['1','2','3','4','5'].includes(k)) {
-        const idx = parseInt(k)-1;
-        player.selectedSlot = idx;
-        equipSlot(idx);
-        updateHUD();
-      }
-      if (k === 'f') {
-        if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
-        else equipSlot(player.selectedSlot);
-        updateHUD();
       }
-      if (k === 'r') keys.r = true;
     });
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
-      // medkit / interact: if released quickly treat as tap interact, else if held long enough medkit already applied
-      if (k === 'e'){
-        const now = performance.now();
-        const held = player.ePressStart ? (now - player.ePressStart) : 0;
-        if (!player.ePressApplied){
-          if (held < 3000){
-            interactNearby();
-          } // else medkit applied automatically earlier
-        }
-        player.ePressStart = 0;
-        player.ePressApplied = false;
-      }
-      if (k === 'q') { keys.q = false; }
     });
     canvas.addEventListener('mousemove',(e)=>{
@@ -383,70 +375,7 @@
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
-    // Mobile controls touch handlers
-    function bindTouchButton(el, onStart, onEnd){
-      if (!el) return;
-      el.addEventListener('touchstart', (ev) => { ev.preventDefault(); onStart && onStart(ev); }, { passive:false });
-      el.addEventListener('touchend', (ev) => { ev.preventDefault(); onEnd && onEnd(ev); }, { passive:false });
-      el.addEventListener('touchcancel', (ev) => { ev.preventDefault(); onEnd && onEnd(ev); }, { passive:false });
-    }
-    // D-pad buttons
-    const dirButtons = dpad.querySelectorAll('button');
-    dirButtons.forEach(btn => {
-      const dir = btn.dataset.dir;
-      bindTouchButton(btn,
-        () => { // start
-          if (dir === 'up') keys.w = true;
-          if (dir === 'down') keys.s = true;
-          if (dir === 'left') keys.a = true;
-          if (dir === 'right') keys.d = true;
-        },
-        () => { // end
-          if (dir === 'up') keys.w = false;
-          if (dir === 'down') keys.s = false;
-          if (dir === 'left') keys.a = false;
-          if (dir === 'right') keys.d = false;
-        }
-      );
-    });
-    // FIRE: hold to fire (maps to mouse.down)
-    bindTouchButton(fireBtn, () => { mouse.down = true; }, () => { mouse.down = false; });
-    // INTERACT / USE: tap to interact, hold to use medkit
-    bindTouchButton(interactBtn,
-      (ev) => {
-        player.ePressStart = performance.now();
-        player.ePressApplied = false;
-      },
-      (ev) => {
-        const now = performance.now();
-        const held = player.ePressStart ? (now - player.ePressStart) : 0;
-        if (!player.ePressApplied){
-          if (held < 3000){
-            interactNearby();
-          }
-        }
-        player.ePressStart = 0;
-        player.ePressApplied = false;
-      }
-    );
-    // BUILD (Q)
-    bindTouchButton(buildBtn, null, () => { tryBuild(); });
-    // RELOAD (R)
-    bindTouchButton(reloadBtn, null, () => { reloadEquipped(); });
-    // EQUIP toggle (F)
-    bindTouchButton(equipBtn, null, () => {
-      if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
-      else equipSlot(player.selectedSlot);
-      updateHUD();
-    });
-    // Entities and world arrays
     const bullets = [];
     const chests = [];
     const objects = [];
@@ -483,9 +412,11 @@
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
     const VIEW_RANGE = 1200;
     const SPAWN_PROTECT_MS = 1200;
     function getObjectRadius(obj){
       if (!obj) return 18;
       if (obj.type === 'wall') return 28;
@@ -574,6 +505,7 @@
           tempTarget: null,
           tempTargetExpiry: 0,
           prioritizeChestsUntil: 0,
           usingMedkit: false, usingMedkitStart: 0, usingMedkitUntil: 0, usingMedkitSlot: -1
         };
@@ -617,13 +549,9 @@
     function updateHUD(){
       const now = performance.now();
       let healthText = `${Math.max(0,Math.floor(player.health))}%`;
-      // show medkit hold progress on HUD for keyboard or show "Healed" when applied
-      if (player.ePressStart && !player.ePressApplied){
-        const elapsed = Math.min(3000, now - player.ePressStart);
-        const remaining = Math.ceil((3000 - elapsed)/1000);
-        healthText += ` (Holding to use medkit: ${Math.max(0, (3000 - Math.floor(elapsed))/1000).toFixed(1)}s)`;
-      } else if (player.ePressApplied){
-        healthText += ' (Medkit used)';
       }
       hudHealthText.textContent = healthText;
       const slots = hudGear.querySelectorAll('.gear-slot');
@@ -705,10 +633,63 @@
       }
     }
-    // Player interact & medkit usage (refactored: hold to use for 3s; tap to interact)
     function interactNearby(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
@@ -737,19 +718,6 @@
       }
     }
-    function applyPlayerMedkitNow(){
-      const sel = player.selectedSlot;
-      const it = player.inventory[sel];
-      if (!it || it.type !== 'medkit' || it.amount <= 0) return false;
-      it.amount -= 1;
-      player.health = Math.min(100, player.health + 50);
-      if (it.amount <= 0) player.inventory[sel] = null;
-      player.ePressApplied = true;
-      player.ePressStart = 0;
-      updateHUD();
-      return true;
-    }
     function pickupCollect(p){
       if (p.type === 'weapon'){
         let merged=false;
@@ -779,7 +747,7 @@
       }
     }
-    // Enemy medkit helpers (unchanged)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
@@ -803,6 +771,7 @@
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
           e.nextHealTime = now + 5000;
           return true;
         }
@@ -876,6 +845,7 @@
           const it = e.inventory[s];
           if (it && it.type==='medkit'){ it.amount += p.amount;
             if (e.health < 60) {
               if (!e.usingMedkit) enemyStartMedkitUse(e, performance.now());
             }
             return;
@@ -910,6 +880,7 @@
       return true;
     }
     function hasLineOfSight(x1,y1,x2,y2){
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
@@ -946,6 +917,7 @@
       return closest;
     }
     function computeDetourWaypoint(fromX, fromY, blocker, goalX, goalY, padding = 12){
       if (!blocker) return null;
       let br = 0;
@@ -969,7 +941,7 @@
       return chosen;
     }
-    // Bullets update with collisions (player & enemy & terrain)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
@@ -982,10 +954,10 @@
         if (b.shooter !== 'player'){
           const dPlayer = Math.hypot(player.x - b.x, player.y - b.y);
           if (dPlayer < hitRadiusPlayer){
             player.health -= b.dmg;
-            // cancel medkit hold on taking damage
-            player.ePressStart = 0;
-            player.ePressApplied = false;
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1);
             continue;
@@ -998,9 +970,12 @@
           if (e.health <= 0) continue;
           const d = Math.hypot(e.x - b.x, e.y - b.y);
           if (d < 14 && b.shooter !== e.id){
             e.health -= b.dmg;
             e.lastAttackedTime = performance.now();
             if (e.usingMedkit){
               e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
             }
             if (e.health <= 0){
@@ -1022,10 +997,12 @@
           if (obj.dead) continue;
           const rr = getObjectRadius(obj);
           const d = Math.hypot(obj.x - b.x, obj.y - b.y);
           if (d < rr + 2){
             obj.hp -= b.dmg;
             if (obj.hp <= 0){
               obj.dead = true;
               if (b.shooter === 'player') player.materials += (obj.type === 'wood' ? 3 : 6);
             }
             hitObj = obj;
@@ -1037,7 +1014,7 @@
           continue;
         }
-        // 4) Hit chests
         for (const chest of chests){
           if (chest.opened) continue;
           const d = Math.hypot(chest.x - b.x, chest.y - b.y);
@@ -1059,6 +1036,7 @@
       }
     }
     function findNearestChest(e, maxDist = 1200){
       let best = null; let bd = Infinity;
       for (const c of chests){ if (c.opened) continue; const d = Math.hypot(c.x - e.x, c.y - e.y); if (d < bd && d <= maxDist){ bd = d; best = c; } }
@@ -1075,12 +1053,14 @@
       return best;
     }
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
         if (e.health <= 0) continue;
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
         for (const chest of chests){
           if (chest.opened) continue;
           const distChest = Math.hypot(chest.x - e.x, chest.y - e.y);
@@ -1099,16 +1079,20 @@
           }
         }
         if (e.usingMedkit){
           if (e.lastAttackedTime > e.usingMedkitStart){
             e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
           } else if (now >= e.usingMedkitUntil){
             applyEnemyMedkitUseNow(e);
           } else {
             continue;
           }
         }
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
@@ -1173,10 +1157,12 @@
           }
         }
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0) && !e.usingMedkit){
           if (enemyStartMedkitUse(e, now)){
             continue;
           }
@@ -1261,6 +1247,7 @@
           continue;
         }
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
@@ -1466,6 +1453,7 @@
       }
     }
     const storm = { maxRadius: 2400, radius:2400, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 0.6, active:false };
     let stormDamageAccumulator = 0;
     function playerInStorm(){ return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius; }
@@ -1480,7 +1468,7 @@
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
-          player.ePressStart = 0; player.ePressApplied = false;
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
@@ -1505,7 +1493,8 @@
       }
     }
-    // Drawing functions (kept from prior code)
     function drawWorld(){
       const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
@@ -1713,7 +1702,7 @@
     function drawCrosshair(){}
-    // Minimap functions
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
@@ -1806,36 +1795,6 @@
       miniCtx.restore();
     }
-    // Medkit progress draw (mobile ring)
-    function drawMedkitProgress(){
-      const ctxm = medkitCtx;
-      ctxm.clearRect(0,0,64,64);
-      const now = performance.now();
-      let progress = 0;
-      if (player.ePressStart && !player.ePressApplied){
-        progress = Math.min(1, (now - player.ePressStart) / 3000);
-      } else if (player.ePressApplied){
-        progress = 1;
-      }
-      // background circle
-      ctxm.beginPath();
-      ctxm.arc(32,32,28,0,Math.PI*2);
-      ctxm.fillStyle = 'rgba(255,255,255,0.02)';
-      ctxm.fill();
-      // progress arc
-      ctxm.beginPath();
-      ctxm.strokeStyle = 'rgba(255,107,107,0.95)';
-      ctxm.lineWidth = 6;
-      ctxm.lineCap = 'round';
-      ctxm.arc(32,32,24,-Math.PI/2, -Math.PI/2 + (Math.PI*2*progress));
-      ctxm.stroke();
-      // center label
-      ctxm.fillStyle = '#fff';
-      ctxm.font = '10px monospace';
-      ctxm.textAlign = 'center';
-      ctxm.fillText('USE', 32, 36);
-    }
     // Main loop
     let lastTime = 0;
     function gameLoop(ts){
@@ -1863,11 +1822,8 @@
         if (isCollidingSolid(player.x, player.y, player.radius)){
           player.y = oldY;
         }
-        // If player moves while holding medkit, cancel the hold
-        if (player.ePressStart){
-          player.ePressStart = 0;
-          player.ePressApplied = false;
-        }
       }
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
@@ -1899,25 +1855,9 @@
       }
       if (keys.r) { reloadEquipped(); keys.r = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
-      // Handle player medkit hold: if holding and not applied and reached duration, apply automatically
-      if (player.ePressStart && !player.ePressApplied){
-        const now = performance.now();
-        const elapsed = now - player.ePressStart;
-        const sel = player.selectedSlot;
-        const it = player.inventory[sel];
-        if (it && it.type === 'medkit'){
-          if (elapsed >= 3000){
-            // apply medkit
-            applyPlayerMedkitNow();
-          }
-        } else {
-          // if not medkit in slot, cancel hold and treat as simple interact on release
-          // (we don't auto-interact here)
-        }
-      }
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
@@ -1939,10 +1879,6 @@
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
-      if (isMobile){
-        drawMedkitProgress();
-      }
       requestAnimationFrame(gameLoop);
     }
@@ -1980,7 +1916,7 @@
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
       player.inventory = [null,null,null,null,null];
       player.selectedSlot = 0; player.equippedIndex = -1; player.lastShot = 0; player.lastMelee = 0;
-      player.ePressStart = 0; player.ePressApplied = false;
       populateWorld();
       initHUD();
@@ -2028,7 +1964,8 @@
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
-      player.ePressStart = 0; player.ePressApplied = false;
       deathScreen.classList.remove('hidden');
     }
@@ -2036,7 +1973,7 @@
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
-    // Loading tips
     const loadingTips = [
       "Stick to cover when approaching buildings — open areas get you killed.",
       "Loot chests quickly and move — enemies can hear opening animations.",

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Minimap Added</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
     .biome-selected { outline: 3px solid rgba(96,165,250,0.9); }
     /* Loading screen */
+    #loadingScreen {
       position: absolute;
+      inset: 0;
+      z-index: 80;
       display: none;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      color: #fff;
+      padding: 24px;
+      box-sizing: border-box;
+    }
+    /* animated gradient background */
+    .loading-bg {
+      position: absolute;
+      inset: -20%;
+      background: linear-gradient(120deg, #0b1220 0%, #123049 30%, #5b2a6a 60%, #2f4b2f 100%);
+      filter: blur(20px) saturate(1.1);
+      animation: bgShift 18s linear infinite;
+      transform: scale(1.1);
+      opacity: 0.85;
+    }
+    @keyframes bgShift {
+      0% { filter: hue-rotate(0deg) blur(20px); transform: scale(1.06) rotate(0.01deg); }
+      25% { filter: hue-rotate(45deg) blur(18px); transform: scale(1.08) rotate(0.02deg); }
+      50% { filter: hue-rotate(90deg) blur(22px); transform: scale(1.04) rotate(-0.01deg); }
+      75% { filter: hue-rotate(180deg) blur(20px); transform: scale(1.07) rotate(0.01deg); }
+      100% { filter: hue-rotate(360deg) blur(20px); transform: scale(1.06) rotate(-0.02deg); }
+    }
+    .loading-card {
+      position: relative;
+      z-index: 2;
+      max-width: 880px;
+      width: calc(100% - 48px);
+      background: rgba(6,10,18,0.55);
+      border: 1px solid rgba(255,255,255,0.06);
+      box-shadow: 0 12px 40px rgba(0,0,0,0.7);
+      border-radius: 12px;
+      padding: 20px;
+      display:flex;
+      gap:18px;
+      align-items:center;
+    }
+    .loading-left {
+      flex: 1;
+      min-width: 260px;
+      display:flex; flex-direction:column; gap:10px;
+    }
+    .loading-right {
+      width: 260px;
+      display:flex; flex-direction:column; gap:12px; align-items:center;
+    }
+    .loader-spinner {
+      width: 84px; height:84px; border-radius:50%; position:relative;
+      display:flex; align-items:center; justify-content:center;
     }
+    .ring {
+      position:absolute; inset:0; border-radius:50%; box-shadow: inset 0 0 24px rgba(255,255,255,0.02);
+      border: 6px solid rgba(255,255,255,0.06);
+      animation: ringRotate 1.8s linear infinite;
     }
+    .ring::after {
+      content:'';
+      position:absolute; width:16px; height:16px; right:8px; top:50%; transform: translateY(-50%);
+      background: linear-gradient(90deg,#ffd86b,#8ef0ff);
+      border-radius:50%;
     }
+    @keyframes ringRotate { to { transform: rotate(360deg); } }
+    .loader-dots { display:flex; gap:6px; }
+    .dot { width:10px; height:10px; border-radius:50%; background:#ffd86b; opacity:0.6; animation: dotPulse 1.2s infinite; }
+    .dot:nth-child(2){ animation-delay: 0.15s; background:#8ef0ff; }
+    .dot:nth-child(3){ animation-delay: 0.3s; background:#ff9fb8; }
+    @keyframes dotPulse { 0%{ transform: scale(.8); opacity:0.4 } 50%{ transform: scale(1.2); opacity:1 } 100%{ transform: scale(.8); opacity:0.4 } }
+    .tips { font-size:14px; color:#e8eef7; background: rgba(0,0,0,0.18); padding:10px; border-radius:8px; line-height:1.3; }
+    .loading-title { font-size:18px; font-weight:800; color:#ffd86b; display:flex; align-items:center; gap:8px; }
+    .progress-wrap { width:100%; background: rgba(255,255,255,0.04); height:14px; border-radius:8px; overflow:hidden; }
+    .progress-bar { height:100%; width:0%; background: linear-gradient(90deg,#ffd86b,#8ef0ff); transition: width 0.12s linear; }
+    .loading-count { font-size:12px; color:#dfe9f9; }
+    .disabled-pane { pointer-events: none; opacity: 0.6; filter: grayscale(12%); }
+    @media (max-width: 820px){
+      .loading-card { flex-direction:column; align-items:center; text-align:center; }
+      .loading-right { width:100%; }
+    }
   </style>
 </head>
 <body>
         <li><strong>WASD</strong> — Move</li>
         <li><strong>Mouse</strong> — Aim</li>
         <li><strong>Left Click</strong> — Shoot (if weapon equipped or in selected slot) or pickaxe melee</li>
+        <li><strong>E</strong> — Use medkit in selected slot OR Interact / Loot</li>
         <li><strong>Q</strong> — Build (costs 10 materials)</li>
         <li><strong>R</strong> — Reload selected weapon</li>
         <li><strong>1-5</strong> — Select inventory slot (also equips it)</li>
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <div id="hudGear" aria-label="gear"></div>
         </div>
       </div>
     </div>
   </div>
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
+    // Loading screen elements
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
     const loadingProgressEl = document.getElementById('loadingProgress');
     const loadingTimerText = document.getElementById('loadingTimerText');
+    // Minimap elements and cache
     const minimapCanvas = document.getElementById('minimapCanvas');
     const miniCtx = minimapCanvas.getContext('2d');
     let miniTerrainCache = null;
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
+      // keep minimap internal pixel buffer consistent
       minimapCanvas.width = 220;
       minimapCanvas.height = 140;
       cameraUpdate();
+      miniTerrainCache = null; // rebuild on resize
     }
     window.addEventListener('resize', resizeCanvas);
     // Player
     const player = {
       id:'player', x: WORLD.width/2, y: WORLD.height/2, radius:16, angle:0, speed:220,
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
+      // medkit usage state
+      usingMedkit: false, usingMedkitUntil: 0, usingMedkitStart: 0, usingMedkitTimeout: null
     };
     // Input
     window.addEventListener('keydown',(e)=>{
       const k = e.key.toLowerCase();
+      if (gameActive){
+        if (k in keys) keys[k] = true;
+        if (['1','2','3','4','5'].includes(k)) {
+          const idx = parseInt(k)-1;
+          player.selectedSlot = idx;
+          equipSlot(idx);
+          updateHUD();
+        }
+        if (k === 'f') {
+          if (player.equippedIndex === player.selectedSlot) equipSlot(-1);
+          else equipSlot(player.selectedSlot);
+          updateHUD();
+        }
+        if (k === 'r') keys.r = true;
+      } else {
+        if (['1','2','3','4','5'].includes(k)) {
+          player.selectedSlot = parseInt(k)-1;
+          updateHUD();
+        }
       }
     });
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
+      if (k === 'e') keys.e = true;
+      if (k === 'q') keys.q = true;
     });
     canvas.addEventListener('mousemove',(e)=>{
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
+    // Entities
     const bullets = [];
     const chests = [];
     const objects = [];
       return { type:'weapon', weapon: weapons[randInt(0, weapons.length)] };
     }
+    // Behaviour tuning
     const VIEW_RANGE = 1200;
     const SPAWN_PROTECT_MS = 1200;
+    // collision helpers
     function getObjectRadius(obj){
       if (!obj) return 18;
       if (obj.type === 'wall') return 28;
           tempTarget: null,
           tempTargetExpiry: 0,
           prioritizeChestsUntil: 0,
+          // medkit state for enemies
           usingMedkit: false, usingMedkitStart: 0, usingMedkitUntil: 0, usingMedkitSlot: -1
         };
     function updateHUD(){
       const now = performance.now();
       let healthText = `${Math.max(0,Math.floor(player.health))}%`;
+      if (player.usingMedkit){
+        const remaining = Math.max(0, Math.ceil((player.usingMedkitUntil - now)/1000));
+        healthText += ` (Healing ${remaining}s)`;
       }
       hudHealthText.textContent = healthText;
       const slots = hudGear.querySelectorAll('.gear-slot');
       }
     }
+    // Player interact & medkit usage
+    function attemptUseOrInteract(){
+      const sel = player.selectedSlot;
+      const selItem = player.inventory[sel];
+      if (selItem && selItem.type === 'medkit'){
+        // toggle or start medkit usage
+        if (player.usingMedkit){
+          cancelPlayerMedkitUse();
+        } else {
+          startPlayerMedkitUse(sel);
+        }
+      } else {
+        interactNearby();
+      }
+    }
+    function startPlayerMedkitUse(slot){
+      const it = player.inventory[slot];
+      if (!it || it.type !== 'medkit' || it.amount <= 0) return;
+      if (player.usingMedkit) return;
+      const now = performance.now();
+      player.usingMedkit = true;
+      player.usingMedkitStart = now;
+      player.usingMedkitUntil = now + 3000; // 3 seconds
+      // set a timeout to apply heal
+      player.usingMedkitTimeout = setTimeout(()=> {
+        // ensure still using and item present
+        if (!player.usingMedkit) return;
+        const cur = player.inventory[slot];
+        if (cur && cur.type === 'medkit'){
+          cur.amount -= 1;
+          player.health = Math.min(100, player.health + 50);
+          if (cur.amount <= 0) player.inventory[slot] = null;
+        }
+        player.usingMedkit = false;
+        player.usingMedkitTimeout = null;
+        updateHUD();
+      }, 3000);
+      updateHUD();
+    }
+    function cancelPlayerMedkitUse(){
+      if (!player.usingMedkit) return;
+      player.usingMedkit = false;
+      player.usingMedkitStart = 0;
+      player.usingMedkitUntil = 0;
+      if (player.usingMedkitTimeout){
+        clearTimeout(player.usingMedkitTimeout);
+        player.usingMedkitTimeout = null;
+      }
+      updateHUD();
+    }
     function interactNearby(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
+      // medkit immediate use removed — now 3s usage handled above
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
       }
     }
     function pickupCollect(p){
       if (p.type === 'weapon'){
         let merged=false;
       }
     }
+    // Enemy helpers (medkit usage now takes 3s)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
+          // set nextHealTime to prevent immediate re-trigger
           e.nextHealTime = now + 5000;
           return true;
         }
           const it = e.inventory[s];
           if (it && it.type==='medkit'){ it.amount += p.amount;
             if (e.health < 60) {
+              // start medkit use if not already using
               if (!e.usingMedkit) enemyStartMedkitUse(e, performance.now());
             }
             return;
       return true;
     }
+    // LOS helpers
     function hasLineOfSight(x1,y1,x2,y2){
       const vx = x2 - x1, vy = y2 - y1;
       const vlen2 = vx*vx + vy*vy;
       return closest;
     }
+    // New helper: compute detour waypoint around blocker
     function computeDetourWaypoint(fromX, fromY, blocker, goalX, goalY, padding = 12){
       if (!blocker) return null;
       let br = 0;
       return chosen;
     }
+    // Bullets update (rewritten for consistent collision handling)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
         if (b.shooter !== 'player'){
           const dPlayer = Math.hypot(player.x - b.x, player.y - b.y);
           if (dPlayer < hitRadiusPlayer){
+            // apply damage
             player.health -= b.dmg;
+            // cancel medkit usage if player is healing
+            if (player.usingMedkit) cancelPlayerMedkitUse();
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1);
             continue;
           if (e.health <= 0) continue;
           const d = Math.hypot(e.x - b.x, e.y - b.y);
           if (d < 14 && b.shooter !== e.id){
+            // apply damage
             e.health -= b.dmg;
             e.lastAttackedTime = performance.now();
+            // cancel enemy medkit if they are healing
             if (e.usingMedkit){
+              // if they were using medkit, cancel it when hit
               e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
             }
             if (e.health <= 0){
           if (obj.dead) continue;
           const rr = getObjectRadius(obj);
           const d = Math.hypot(obj.x - b.x, obj.y - b.y);
+          // use a small tolerance so bullets clearly collide
           if (d < rr + 2){
             obj.hp -= b.dmg;
             if (obj.hp <= 0){
               obj.dead = true;
+              // reward materials if player shot the object
               if (b.shooter === 'player') player.materials += (obj.type === 'wood' ? 3 : 6);
             }
             hitObj = obj;
           continue;
         }
+        // 4) Hit chests (if wanted bullets can open chests) — keep old behaviour
         for (const chest of chests){
           if (chest.opened) continue;
           const d = Math.hypot(chest.x - b.x, chest.y - b.y);
       }
     }
+    // Helpers to find nearest
     function findNearestChest(e, maxDist = 1200){
       let best = null; let bd = Infinity;
       for (const c of chests){ if (c.opened) continue; const d = Math.hypot(c.x - e.x, c.y - e.y); if (d < bd && d <= maxDist){ bd = d; best = c; } }
       return best;
     }
+    // Enemy AI (with medkit use delay)
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
         if (e.health <= 0) continue;
         if (!e.spawnSafeUntil) e.spawnSafeUntil = performance.now() + SPAWN_PROTECT_MS;
+        // Auto-open chests on proximity
         for (const chest of chests){
           if (chest.opened) continue;
           const distChest = Math.hypot(chest.x - e.x, chest.y - e.y);
           }
         }
+        // Handle enemy medkit usage finishing/cancelling
         if (e.usingMedkit){
+          // if they were attacked while using, cancel
           if (e.lastAttackedTime > e.usingMedkitStart){
             e.usingMedkit = false; e.usingMedkitSlot = -1; e.usingMedkitStart = 0; e.usingMedkitUntil = 0;
           } else if (now >= e.usingMedkitUntil){
             applyEnemyMedkitUseNow(e);
           } else {
+            // still using medkit; don't do other heavy actions
             continue;
           }
         }
+        // STORM behavior (unchanged)
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
           }
         }
+        // NORMAL behavior
         if (now - e.lastAttackedTime < 4000) e.state = 'combat';
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0) && !e.usingMedkit){
+          // start medkit use (3s) if possible
           if (enemyStartMedkitUse(e, now)){
             continue;
           }
           continue;
         }
+        // Combat logic remains (omitted here for brevity but preserved)
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
       }
     }
+    // Storm
     const storm = { maxRadius: 2400, radius:2400, centerX: WORLD.width/2, centerY: WORLD.height/2, damagePerSecond:1, closingSpeed: 0.6, active:false };
     let stormDamageAccumulator = 0;
     function playerInStorm(){ return Math.hypot(player.x - storm.centerX, player.y - storm.centerY) > storm.radius; }
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
+          if (player.usingMedkit) cancelPlayerMedkitUse();
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
       }
     }
+    // Drawing functions (unchanged, omitted here for brevity)...
+    // (All draw functions from the previous code remain unchanged and are present below.)
     function drawWorld(){
       const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
     function drawCrosshair(){}
+    // Minimap functions (unchanged)
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
       miniCtx.restore();
     }
     // Main loop
     let lastTime = 0;
     function gameLoop(ts){
         if (isCollidingSolid(player.x, player.y, player.radius)){
           player.y = oldY;
         }
+        // If player moves while using medkit, cancel use
+        if (player.usingMedkit && (dx !== 0 || dy !== 0)) cancelPlayerMedkitUse();
       }
       player.x = Math.max(16, Math.min(WORLD.width-16, player.x));
       player.y = Math.max(16, Math.min(WORLD.height-16, player.y));
       }
       if (keys.r) { reloadEquipped(); keys.r = false; }
+      if (keys.e){ attemptUseOrInteract(); keys.e = false; }
       if (keys.q){ tryBuild(); keys.q = false; }
       updateEnemies(dt, performance.now());
       bulletsUpdate(dt);
       if (storm.active && playerInStorm()) stormWarning.classList.remove('hidden'); else stormWarning.classList.add('hidden');
       requestAnimationFrame(gameLoop);
     }
       player.health = 100; player.armor = 0; player.kills = 0; player.materials = 0;
       player.inventory = [null,null,null,null,null];
       player.selectedSlot = 0; player.equippedIndex = -1; player.lastShot = 0; player.lastMelee = 0;
+      player.usingMedkit = false; player.usingMedkitTimeout = null;
       populateWorld();
       initHUD();
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
+      // cancel medkit use on death
+      cancelPlayerMedkitUse();
       deathScreen.classList.remove('hidden');
     }
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
+    // Loading screen logic (unchanged)
     const loadingTips = [
       "Stick to cover when approaching buildings — open areas get you killed.",
       "Loot chests quickly and move — enemies can hear opening animations.",