Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 15, 2025

Commit

0329574

verified ·

1 Parent(s): 3408a9f

Manual changes saved

Browse files

Files changed (1) hide show

index.html +167 -99

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 - Full</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
@@ -137,6 +137,13 @@
       -webkit-user-select:none;
       user-select:none;
     }
     .mobile-joystick .thumb {
       width:58px; height:58px; border-radius:50%;
       background: rgba(255,255,255,0.08);
@@ -144,6 +151,8 @@
       transform: translate(0,0);
       transition: transform 0.06s linear;
     }
     /* Buttons now reside left of pickaxe slot in HUD; this container is shown only on mobile */
     .mobile-buttons-hud {
       display:flex;
@@ -173,6 +182,11 @@
       .mobile-controls { display:none !important; }
       .mobile-buttons-hud { display:none !important; } /* hide HUD buttons on desktop too */
     }
   </style>
 </head>
 <body>
@@ -212,7 +226,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> — 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>
@@ -322,11 +336,14 @@
           <div id="hudGear" aria-label="gear"></div>
         </div>
-        <!-- Mobile Controls (joystick only) -->
         <div id="mobileControls" class="mobile-controls hidden" aria-hidden="true">
           <div id="mobileJoystick" class="mobile-joystick" role="application" aria-label="Movement joystick">
             <div id="joystickThumb" class="thumb"></div>
           </div>
         </div>
       </div>
@@ -334,6 +351,9 @@
   </div>
   <script>
     // DOM references
     const landingScreen = document.getElementById('landingScreen');
     const gameScreen = document.getElementById('gameScreen');
@@ -349,11 +369,9 @@
     const victoryScreen = document.getElementById('victoryScreen');
     const goHomeBtn = document.getElementById('goHomeBtn');
     const continueBtn = document.getElementById('continueBtn');
-    const biomeGrid = document.getElementById('biomeGrid');
     // Mobile button references (in HUD)
     const mobileButtonsHud = document.getElementById('mobileButtonsHud');
-    // Joystick container
     const mobileControls = document.getElementById('mobileControls');
     // Loading screen elements
@@ -375,9 +393,14 @@
       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
     }
@@ -391,8 +414,7 @@
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
-      // medkit usage state
-      usingMedkit: false, usingMedkitUntil: 0, usingMedkitStart: 0, usingMedkitTimeout: null
     };
     // Input
@@ -428,7 +450,10 @@
     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;
     });
@@ -451,12 +476,10 @@
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
-    // Touch support for mobile: update aim based on canvas touches (does not auto-shoot)
-    // Also, we wire separate on-screen shoot button to control mouse.down.
     (function addCanvasTouchHandlers(){
       let canvasTouchId = null;
       canvas.addEventListener('touchstart', (ev) => {
-        // find first touch that's inside canvas and not used by joystick/buttons
         for (const t of ev.changedTouches){
           const rect = canvas.getBoundingClientRect();
           const x = t.clientX - rect.left, y = t.clientY - rect.top;
@@ -667,10 +690,6 @@
     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');
       slots.forEach(s => {
@@ -751,63 +770,33 @@
       }
     }
-    // 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;
@@ -865,7 +854,7 @@
       }
     }
-    // Enemy helpers (medkit usage now takes 3s)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
@@ -889,7 +878,6 @@
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
-          // set nextHealTime to prevent immediate re-trigger
           e.nextHealTime = now + 5000;
           return true;
         }
@@ -963,7 +951,6 @@
           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;
@@ -1059,7 +1046,7 @@
       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];
@@ -1074,8 +1061,6 @@
           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;
@@ -1093,7 +1078,6 @@
             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){
@@ -1115,12 +1099,10 @@
           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;
@@ -1132,7 +1114,7 @@
           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);
@@ -1154,7 +1136,7 @@
       }
     }
-    // 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; } }
@@ -1171,7 +1153,7 @@
       return best;
     }
-    // Enemy AI (with medkit use delay)
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
@@ -1199,18 +1181,16 @@
         // 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){
@@ -1280,7 +1260,6 @@
         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;
           }
@@ -1365,7 +1344,7 @@
           continue;
         }
-        // Combat logic remains (omitted here for brevity but preserved)
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
@@ -1538,7 +1517,7 @@
         }
       }
-      // Separation
       for (let i = 0; i < enemies.length; i++){
         const a = enemies[i];
         if (!a || a.health <= 0) continue;
@@ -1586,7 +1565,6 @@
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
-          if (player.usingMedkit) cancelPlayerMedkitUse();
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
@@ -1611,8 +1589,7 @@
       }
     }
-    // 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);
@@ -1820,7 +1797,7 @@
     function drawCrosshair(){}
-    // Minimap functions (unchanged)
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
@@ -1921,6 +1898,7 @@
       const dt = Math.min(0.05, (ts - lastTime)/1000);
       lastTime = ts;
       let dx=0, dy=0;
       if (keys.w) dy -= 1; if (keys.s) dy += 1; if (keys.a) dx -= 1; if (keys.d) dx += 1;
       if (dx !== 0 || dy !== 0){
@@ -1940,8 +1918,7 @@
         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));
@@ -1973,7 +1950,6 @@
       }
       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());
@@ -2034,7 +2010,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.usingMedkit = false; player.usingMedkitTimeout = null;
       populateWorld();
       initHUD();
@@ -2082,8 +2058,6 @@
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
-      // cancel medkit use on death
-      cancelPlayerMedkitUse();
       deathScreen.classList.remove('hidden');
     }
@@ -2157,7 +2131,7 @@
       });
     });
-    // Mobile controls wiring (only show on mobile devices)
     (function setupMobileControls(){
       const joystick = document.getElementById('mobileJoystick');
       const thumb = document.getElementById('joystickThumb');
@@ -2166,8 +2140,10 @@
       const buildBtn = document.getElementById('buildBtn');
       const reloadBtn = document.getElementById('reloadBtn');
-      const isMobile = ('ontouchstart' in window) || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-      if (!isMobile) {
         mobileControls.classList.add('hidden');
         if (mobileButtonsHud) mobileButtonsHud.classList.add('hidden');
         return;
@@ -2176,7 +2152,7 @@
       mobileControls.setAttribute('aria-hidden','false');
       if (mobileButtonsHud) { mobileButtonsHud.classList.remove('hidden'); mobileButtonsHud.setAttribute('aria-hidden','false'); }
-      // Joystick state
       let joyTouchId = null;
       let joyCenter = null;
       const maxRadius = 52; // thumb allowed radius
@@ -2205,12 +2181,10 @@
           ny = dy / dist * maxRadius;
         }
         thumb.style.transform = `translate(${nx}px, ${ny}px)`;
-        // map to directional keys
         if (dist < deadzone){
           keys.w = keys.a = keys.s = keys.d = false;
           return;
         }
-        // use axis threshold approach
         keys.w = (dy < -10);
         keys.s = (dy > 10);
         keys.a = (dx < -10);
@@ -2223,10 +2197,8 @@
         resetJoystick();
       }
-      // Touch handlers for joystick
       joystick.addEventListener('touchstart', (ev) => {
         for (const t of ev.changedTouches){
-          // only accept first active joystick touch
           if (joyTouchId === null){
             handleJoyStart(t);
             ev.preventDefault();
@@ -2273,12 +2245,14 @@
             if (shootTouchId === null){
               shootTouchId = t.identifier;
               mouse.down = true;
-              // set aim to center of canvas for quick shots if not touching canvas
-              const rect = canvas.getBoundingClientRect();
-              mouse.canvasX = rect.width * 0.6;
-              mouse.canvasY = rect.height * 0.5;
-              mouse.worldX = mouse.canvasX + camera.x;
-              mouse.worldY = mouse.canvasY + camera.y;
               e.preventDefault();
               break;
             }
@@ -2335,6 +2309,100 @@
       [shootBtn, interactBtn, buildBtn, reloadBtn].forEach(b => {
         b.addEventListener('touchmove', (ev)=> ev.preventDefault(), { passive:false });
       });
     })();
     // Initialize UI state

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>BattleZone Royale - Mobile Improvements</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
       -webkit-user-select:none;
       user-select:none;
     }
+    .mobile-joystick.aim {
+      right: 12px;
+      left: auto;
+    }
+    .mobile-joystick.small {
+      width:110px; height:110px;
+    }
     .mobile-joystick .thumb {
       width:58px; height:58px; border-radius:50%;
       background: rgba(255,255,255,0.08);
       transform: translate(0,0);
       transition: transform 0.06s linear;
     }
+    .mobile-joystick.small .thumb { width:44px; height:44px; }
     /* Buttons now reside left of pickaxe slot in HUD; this container is shown only on mobile */
     .mobile-buttons-hud {
       display:flex;
       .mobile-controls { display:none !important; }
       .mobile-buttons-hud { display:none !important; } /* hide HUD buttons on desktop too */
     }
+    /* Make minimap smaller on narrow/mobile */
+    @media (max-width: 900px){
+      #minimap { width:120px; height:78px; right:8px; top:8px; padding:5px; }
+    }
   </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 (press once)</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="hudGear" aria-label="gear"></div>
         </div>
+        <!-- Mobile Controls: left joystick (movement) and right joystick (aim) -->
         <div id="mobileControls" class="mobile-controls hidden" aria-hidden="true">
           <div id="mobileJoystick" class="mobile-joystick" role="application" aria-label="Movement joystick">
             <div id="joystickThumb" class="thumb"></div>
           </div>
+          <div id="mobileJoystickAim" class="mobile-joystick aim small" role="application" aria-label="Aiming joystick">
+            <div id="joystickThumbAim" class="thumb"></div>
+          </div>
         </div>
       </div>
   </div>
   <script>
+    // Global mobile detection
+    const IS_MOBILE = ('ontouchstart' in window) || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
     // DOM references
     const landingScreen = document.getElementById('landingScreen');
     const gameScreen = document.getElementById('gameScreen');
     const victoryScreen = document.getElementById('victoryScreen');
     const goHomeBtn = document.getElementById('goHomeBtn');
     const continueBtn = document.getElementById('continueBtn');
     // Mobile button references (in HUD)
     const mobileButtonsHud = document.getElementById('mobileButtonsHud');
     const mobileControls = document.getElementById('mobileControls');
     // Loading screen elements
       const ctn = document.getElementById('canvasContainer');
       canvas.width = Math.max(900, Math.floor(ctn.clientWidth));
       canvas.height = Math.max(560, Math.floor(ctn.clientHeight));
+      // make minimap smaller on mobile
+      if (IS_MOBILE){
+        minimapCanvas.width = 120;
+        minimapCanvas.height = 78;
+      } else {
+        minimapCanvas.width = 220;
+        minimapCanvas.height = 140;
+      }
       cameraUpdate();
       miniTerrainCache = null; // rebuild on resize
     }
       selectedSlot:0,
       equippedIndex: -1,
       lastShot:0, lastMelee:0,
+      lastMedkitUsed: 0 // cooldown tracker for instant medkit presses
     };
     // Input
     window.addEventListener('keyup',(e)=>{
       const k = e.key.toLowerCase();
       if (k in keys) keys[k] = false;
+      // Press E once to use medkit or interact (no holding)
+      if (k === 'e') {
+        attemptUseOrInteract();
+      }
       if (k === 'q') keys.q = true;
     });
     });
     window.addEventListener('mouseup', ()=> mouse.down = false);
+    // Touch support for canvas aiming (still supported)
     (function addCanvasTouchHandlers(){
       let canvasTouchId = null;
       canvas.addEventListener('touchstart', (ev) => {
         for (const t of ev.changedTouches){
           const rect = canvas.getBoundingClientRect();
           const x = t.clientX - rect.left, y = t.clientY - rect.top;
     function updateHUD(){
       const now = performance.now();
       let healthText = `${Math.max(0,Math.floor(player.health))}%`;
       hudHealthText.textContent = healthText;
       const slots = hudGear.querySelectorAll('.gear-slot');
       slots.forEach(s => {
       }
     }
+    // Player interact & medkit usage - instantaneous on press, usable while moving/taking damage
     function attemptUseOrInteract(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
       if (selItem && selItem.type === 'medkit'){
+        useMedkitInstant(sel);
       } else {
         interactNearby();
       }
     }
+    function useMedkitInstant(slot){
       const it = player.inventory[slot];
       if (!it || it.type !== 'medkit' || it.amount <= 0) return;
       const now = performance.now();
+      // small cooldown to avoid spamming
+      if (player.lastMedkitUsed && now - player.lastMedkitUsed < 700) return;
+      player.lastMedkitUsed = now;
+      it.amount -= 1;
+      player.health = Math.min(100, player.health + 50);
+      if (it.amount <= 0) player.inventory[slot] = null;
       updateHUD();
     }
     function interactNearby(){
       const sel = player.selectedSlot;
       const selItem = player.inventory[sel];
       const range = 56;
       for (const chest of chests){
         if (chest.opened) continue;
       }
     }
+    // Enemy medkit logic kept unchanged (they still take 3s)
     function enemyEquipBestWeapon(e){
       let bestIdx = -1;
       let bestScore = -Infinity;
           e.usingMedkitStart = now;
           e.usingMedkitUntil = now + 3000;
           e.usingMedkitSlot = s;
           e.nextHealTime = now + 5000;
           return true;
         }
           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;
       return chosen;
     }
+    // Bullets update (keep same but removed medkit cancellation when taking damage)
     function bulletsUpdate(dt){
       for (let i=bullets.length-1;i>=0;i--){
         const b = bullets[i];
           if (dPlayer < hitRadiusPlayer){
             // apply damage
             player.health -= b.dmg;
             if (player.health <= 0){ player.health = 0; playerDeath(); }
             bullets.splice(i,1);
             continue;
             e.lastAttackedTime = performance.now();
             // cancel enemy medkit if they are healing
             if (e.usingMedkit){
               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);
           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;
           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);
       }
     }
+    // Helpers to find nearest (unchanged)
     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 (keeps behavior; medkit usage for enemies remains as 3s)
     function updateEnemies(dt, now){
       const minSeparation = 20;
       for (const e of enemies){
         // Handle enemy medkit usage finishing/cancelling
         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;
           }
         }
+        // STORM behavior
         if (storm.active){
           const distToSafeCenter = Math.hypot(e.x - storm.centerX, e.y - storm.centerY);
           if (distToSafeCenter > storm.radius){
         if (e.state === 'gather') e.gatherTimeLeft -= dt;
         if (e.health < 60 && now >= (e.nextHealTime || 0) && !e.usingMedkit){
           if (enemyStartMedkitUse(e, now)){
             continue;
           }
           continue;
         }
+        // Combat logic ...
         if (e.equippedIndex === -1) enemyEquipBestWeapon(e);
         if (e.reloadPending){
           if (now >= e.reloadingUntil){
         }
       }
+      // Separation and clipping
       for (let i = 0; i < enemies.length; i++){
         const a = enemies[i];
         if (!a || a.health <= 0) continue;
         while (stormDamageAccumulator >= 1){
           stormDamageAccumulator -=1;
           player.health -= 1;
           if (player.health <= 0){ player.health = 0; playerDeath(); }
         }
       } else stormDamageAccumulator = 0;
       }
     }
+    // Drawing functions (kept)
     function drawWorld(){
       const TILE = 600;
       const cols = Math.ceil(WORLD.width / TILE);
     function drawCrosshair(){}
+    // Minimap functions
     function buildMiniTerrainCache(){
       const mw = minimapCanvas.width;
       const mh = minimapCanvas.height;
       const dt = Math.min(0.05, (ts - lastTime)/1000);
       lastTime = ts;
+      // Movement from keys/joystick
       let dx=0, dy=0;
       if (keys.w) dy -= 1; if (keys.s) dy += 1; if (keys.a) dx -= 1; if (keys.d) dx += 1;
       if (dx !== 0 || dy !== 0){
         if (isCollidingSolid(player.x, player.y, player.radius)){
           player.y = oldY;
         }
+        // Note: medkit use is instant now; moving does not cancel medkit
       }
       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.q){ tryBuild(); keys.q = false; }
       updateEnemies(dt, performance.now());
       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.lastMedkitUsed = 0;
       populateWorld();
       initHUD();
     function endGame(){ gameActive = false; alert('Match over!'); }
     function playerDeath(){
       gameActive = false;
       deathScreen.classList.remove('hidden');
     }
       });
     });
+    // Mobile controls wiring: movement joystick + aim joystick + HUD buttons
     (function setupMobileControls(){
       const joystick = document.getElementById('mobileJoystick');
       const thumb = document.getElementById('joystickThumb');
       const buildBtn = document.getElementById('buildBtn');
       const reloadBtn = document.getElementById('reloadBtn');
+      const aimJoystick = document.getElementById('mobileJoystickAim');
+      const aimThumb = document.getElementById('joystickThumbAim');
+      if (!IS_MOBILE) {
         mobileControls.classList.add('hidden');
         if (mobileButtonsHud) mobileButtonsHud.classList.add('hidden');
         return;
       mobileControls.setAttribute('aria-hidden','false');
       if (mobileButtonsHud) { mobileButtonsHud.classList.remove('hidden'); mobileButtonsHud.setAttribute('aria-hidden','false'); }
+      // Movement joystick
       let joyTouchId = null;
       let joyCenter = null;
       const maxRadius = 52; // thumb allowed radius
           ny = dy / dist * maxRadius;
         }
         thumb.style.transform = `translate(${nx}px, ${ny}px)`;
         if (dist < deadzone){
           keys.w = keys.a = keys.s = keys.d = false;
           return;
         }
         keys.w = (dy < -10);
         keys.s = (dy > 10);
         keys.a = (dx < -10);
         resetJoystick();
       }
       joystick.addEventListener('touchstart', (ev) => {
         for (const t of ev.changedTouches){
           if (joyTouchId === null){
             handleJoyStart(t);
             ev.preventDefault();
             if (shootTouchId === null){
               shootTouchId = t.identifier;
               mouse.down = true;
+              // if aim joystick not used, aim forward in facing direction (so shooting has a direction)
+              if (!aimActive) {
+                const rect = canvas.getBoundingClientRect();
+                mouse.canvasX = rect.width * 0.6;
+                mouse.canvasY = rect.height * 0.5;
+                mouse.worldX = mouse.canvasX + camera.x;
+                mouse.worldY = mouse.canvasY + camera.y;
+              }
               e.preventDefault();
               break;
             }
       [shootBtn, interactBtn, buildBtn, reloadBtn].forEach(b => {
         b.addEventListener('touchmove', (ev)=> ev.preventDefault(), { passive:false });
       });
+      // Aim joystick (right)
+      let aimTouchId = null;
+      let aimCenter = null;
+      const aimMaxRadius = 44; // smaller control
+      let aimActive = false;
+      function resetAim(){
+        aimThumb.style.transform = `translate(0px,0px)`;
+        aimActive = false;
+      }
+      function aimStart(t){
+        const rect = aimJoystick.getBoundingClientRect();
+        aimCenter = { x: rect.left + rect.width/2, y: rect.top + rect.height/2 };
+        aimTouchId = t.identifier;
+        aimActive = true;
+        updateAim(t.clientX, t.clientY);
+      }
+      function updateAim(clientX, clientY){
+        if (!aimCenter) return;
+        let dx = clientX - aimCenter.x;
+        let dy = clientY - aimCenter.y;
+        const dist = Math.hypot(dx, dy);
+        let nx = dx, ny = dy;
+        if (dist > aimMaxRadius){
+          nx = dx / dist * aimMaxRadius;
+          ny = dy / dist * aimMaxRadius;
+        }
+        aimThumb.style.transform = `translate(${nx}px, ${ny}px)`;
+        // compute angle and set player's aim
+        if (Math.hypot(nx, ny) < 6) return;
+        const angle = Math.atan2(ny, nx); // aim direction relative to screen; convert to world
+        // Map aim direction to a point in world in front of player (distance scaled)
+        const aimDistance = 600; // how far the aim projects
+        const targetWorldX = player.x + Math.cos(angle) * aimDistance;
+        const targetWorldY = player.y + Math.sin(angle) * aimDistance;
+        mouse.worldX = targetWorldX;
+        mouse.worldY = targetWorldY;
+        // update canvas coords based on camera
+        mouse.canvasX = mouse.worldX - camera.x;
+        mouse.canvasY = mouse.worldY - camera.y;
+        player.angle = Math.atan2(mouse.worldY - player.y, mouse.worldX - player.x);
+      }
+      function aimEnd(){
+        aimTouchId = null;
+        aimCenter = null;
+        resetAim();
+        aimActive = false;
+      }
+      aimJoystick.addEventListener('touchstart', (ev) => {
+        for (const t of ev.changedTouches){
+          if (aimTouchId === null){
+            aimStart(t);
+            ev.preventDefault();
+            break;
+          }
+        }
+      }, { passive:false });
+      window.addEventListener('touchmove', (ev) => {
+        for (const t of ev.changedTouches){
+          if (t.identifier === aimTouchId){
+            updateAim(t.clientX, t.clientY);
+            ev.preventDefault();
+            break;
+          }
+        }
+      }, { passive:false });
+      window.addEventListener('touchend', (ev) => {
+        for (const t of ev.changedTouches){
+          if (t.identifier === aimTouchId){
+            aimEnd();
+            ev.preventDefault();
+            break;
+          }
+        }
+      });
+      window.addEventListener('touchcancel', (ev) => {
+        for (const t of ev.changedTouches){
+          if (t.identifier === aimTouchId){
+            aimEnd();
+            ev.preventDefault();
+            break;
+          }
+        }
+      });
     })();
     // Initialize UI state