Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 15, 2025

Commit

3408a9f

verified ·

1 Parent(s): c6b4b63

Manual changes saved

Browse files

Files changed (1) hide show

index.html +84 -53

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 - Minimap Added</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
@@ -144,13 +144,11 @@
       transform: translate(0,0);
       transition: transform 0.06s linear;
     }
-    .mobile-buttons {
-      position: absolute;
-      right: 12px;
-      bottom: 12px;
       display:flex;
-      gap:12px;
-      flex-direction: column;
       pointer-events:auto;
     }
     .mobile-btn {
@@ -173,6 +171,7 @@
     .mobile-controls.hidden { display:none; }
     @media (min-width: 900px){
       .mobile-controls { display:none !important; }
     }
   </style>
 </head>
@@ -311,22 +310,23 @@
         </div>
         <div id="hudGearWrap" class="hidden">
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <div id="hudGear" aria-label="gear"></div>
         </div>
-        <!-- Mobile Controls (shown only on mobile) -->
         <div id="mobileControls" class="mobile-controls hidden" aria-hidden="true">
-          <!-- Left: joystick -->
           <div id="mobileJoystick" class="mobile-joystick" role="application" aria-label="Movement joystick">
             <div id="joystickThumb" class="thumb"></div>
           </div>
-          <!-- Right: buttons -->
-          <div class="mobile-buttons" id="mobileButtons">
-            <div id="shootBtn" class="mobile-btn" aria-label="Shoot">SHOOT</div>
-            <div id="interactBtn" class="mobile-btn small" aria-label="Interact">USE</div>
-            <div id="buildBtn" class="mobile-btn small" aria-label="Build">BUILD</div>
-          </div>
         </div>
       </div>
@@ -351,6 +351,11 @@
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
     // Loading screen elements
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
@@ -2154,20 +2159,22 @@
     // Mobile controls wiring (only show on mobile devices)
     (function setupMobileControls(){
-      const mobileControls = document.getElementById('mobileControls');
       const joystick = document.getElementById('mobileJoystick');
       const thumb = document.getElementById('joystickThumb');
       const shootBtn = document.getElementById('shootBtn');
       const interactBtn = document.getElementById('interactBtn');
       const buildBtn = document.getElementById('buildBtn');
       const isMobile = ('ontouchstart' in window) || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
       if (!isMobile) {
         mobileControls.classList.add('hidden');
         return;
       }
       mobileControls.classList.remove('hidden');
       mobileControls.setAttribute('aria-hidden','false');
       // Joystick state
       let joyTouchId = null;
@@ -2258,57 +2265,81 @@
         }
       });
-      // Shoot button: hold to shoot
-      let shootPointerActive = false;
-      function shootPointerDown(e){
-        shootPointerActive = true;
-        mouse.down = true;
-        // prefer to aim at last canvas touch/center; if user taps shoot, keep existing aim set by canvas touch handler.
-        e.preventDefault();
       }
-      function shootPointerUp(e){
-        shootPointerActive = false;
-        mouse.down = false;
-        e.preventDefault();
       }
-      shootBtn.addEventListener('touchstart', shootPointerDown, { passive:false });
-      shootBtn.addEventListener('touchend', shootPointerUp, { passive:false });
-      shootBtn.addEventListener('touchcancel', shootPointerUp, { passive:false });
       shootBtn.addEventListener('mousedown', (e)=>{ mouse.down = true; e.preventDefault(); });
       window.addEventListener('mouseup', ()=> mouse.down = false);
       // Interact button
-      interactBtn.addEventListener('touchstart', (e) => {
         attemptUseOrInteract();
-        e.preventDefault();
-      }, { passive:false });
-      interactBtn.addEventListener('mousedown', (e)=>{ attemptUseOrInteract(); e.preventDefault(); });
       // Build button
-      buildBtn.addEventListener('touchstart', (e) => {
         tryBuild();
-        e.preventDefault();
-      }, { passive:false });
-      buildBtn.addEventListener('mousedown', (e)=>{ tryBuild(); e.preventDefault(); });
-      // Prevent mobile double-tap zoom / scroll when interacting with controls
-      ['touchstart','touchmove','touchend','touchcancel'].forEach(evName => {
-        document.addEventListener(evName, (ev) => {
-          const tgt = ev.target;
-          if (!tgt) return;
-          // if the target is inside mobileControls, prevent default browser gestures
-          if (mobileControls.contains(tgt)) {
-            ev.preventDefault();
-          }
-        }, { passive:false });
-      });
     })();
-    // initialization
-    resizeCanvas();
-    populateWorld();
     feather.replace();
   </script>
 </body>
 </html>

 <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>
       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;
+      gap:8px;
+      align-items:center;
       pointer-events:auto;
     }
     .mobile-btn {
     .mobile-controls.hidden { display:none; }
     @media (min-width: 900px){
       .mobile-controls { display:none !important; }
+      .mobile-buttons-hud { display:none !important; } /* hide HUD buttons on desktop too */
     }
   </style>
 </head>
         </div>
         <div id="hudGearWrap" class="hidden">
+          <!-- Mobile buttons moved here (left of pickaxe slot) -->
+          <div id="mobileButtonsHud" class="mobile-buttons-hud hidden" aria-hidden="true">
+            <div id="shootBtn" class="mobile-btn small" aria-label="Shoot">SHOOT</div>
+            <div id="reloadBtn" class="mobile-btn small" aria-label="Reload">RELOAD</div>
+            <div id="interactBtn" class="mobile-btn small" aria-label="Interact">USE</div>
+            <div id="buildBtn" class="mobile-btn small" aria-label="Build">BUILD</div>
+          </div>
           <div id="pickaxeSlot" class="pickaxe-slot" title="Pickaxe (press F to equip)">⛏️</div>
           <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>
     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
     const loadingScreen = document.getElementById('loadingScreen');
     const loadingTipEl = document.getElementById('loadingTip');
     // Mobile controls wiring (only show on mobile devices)
     (function setupMobileControls(){
       const joystick = document.getElementById('mobileJoystick');
       const thumb = document.getElementById('joystickThumb');
       const shootBtn = document.getElementById('shootBtn');
       const interactBtn = document.getElementById('interactBtn');
       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;
       }
       mobileControls.classList.remove('hidden');
       mobileControls.setAttribute('aria-hidden','false');
+      if (mobileButtonsHud) { mobileButtonsHud.classList.remove('hidden'); mobileButtonsHud.setAttribute('aria-hidden','false'); }
       // Joystick state
       let joyTouchId = null;
         }
       });
+      // On-screen shoot button: set mouse.down while pressed
+      let shootTouchId = null;
+      function shootPressStart(e){
+        if (e.changedTouches){
+          for (const t of e.changedTouches){
+            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;
+            }
+          }
+        } else {
+          mouse.down = true;
+        }
       }
+      function shootPressEnd(e){
+        if (e.changedTouches){
+          for (const t of e.changedTouches){
+            if (t.identifier === shootTouchId){
+              shootTouchId = null;
+              mouse.down = false;
+              e.preventDefault();
+              break;
+            }
+          }
+        } else {
+          mouse.down = false;
+        }
       }
+      shootBtn.addEventListener('touchstart', shootPressStart, { passive:false });
+      shootBtn.addEventListener('touchend', shootPressEnd, { passive:false });
+      shootBtn.addEventListener('touchcancel', shootPressEnd, { passive:false });
       shootBtn.addEventListener('mousedown', (e)=>{ mouse.down = true; e.preventDefault(); });
       window.addEventListener('mouseup', ()=> mouse.down = false);
       // Interact button
+      function interactActivate(e){
         attemptUseOrInteract();
+        if (e && e.preventDefault) e.preventDefault();
+      }
+      interactBtn.addEventListener('touchstart', interactActivate, { passive:false });
+      interactBtn.addEventListener('mousedown', interactActivate);
       // Build button
+      function buildActivate(e){
         tryBuild();
+        if (e && e.preventDefault) e.preventDefault();
+      }
+      buildBtn.addEventListener('touchstart', buildActivate, { passive:false });
+      buildBtn.addEventListener('mousedown', buildActivate);
+      // Reload button
+      function reloadActivate(e){
+        reloadEquipped();
+        if (e && e.preventDefault) e.preventDefault();
+      }
+      reloadBtn.addEventListener('touchstart', reloadActivate, { passive:false });
+      reloadBtn.addEventListener('mousedown', reloadActivate);
+      // Prevent buttons from stealing canvas touch when pressing them
+      [shootBtn, interactBtn, buildBtn, reloadBtn].forEach(b => {
+        b.addEventListener('touchmove', (ev)=> ev.preventDefault(), { passive:false });
+      });
     })();
+    // Initialize UI state
     feather.replace();
+    resizeCanvas();
   </script>
 </body>
 </html>