Spaces:

bbc123321
/

battle-zone-royale

Running

App Files Files Community

bbc123321 commited on Oct 15, 2025

Commit

c4de6b1

verified ·

1 Parent(s): b0ee8ee

Manual changes saved

Browse files

Files changed (1) hide show

index.html +195 -2

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-Updated</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/feather-icons"></script>
   <style>
@@ -24,6 +24,101 @@
     .equipped { box-shadow: inset 0 -6px 14px rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }
     .medkit-count { position:absolute; right:4px; bottom:2px; font-size:10px; color:#ffd; }
     .biome-selected { outline: 3px solid rgba(96,165,250,0.9); }
   </style>
 </head>
 <body>
@@ -72,6 +167,33 @@
     </div>
   </div>
   <!-- Game -->
   <div id="gameScreen" class="hidden h-screen flex flex-col">
     <header class="flex justify-between items-center border-b border-yellow-500 px-6 py-4" style="flex-shrink:0;">
@@ -159,6 +281,12 @@
     const continueBtn = document.getElementById('continueBtn');
     const biomeGrid = document.getElementById('biomeGrid');
     // Minimap elements and cache
     const minimapCanvas = document.getElementById('minimapCanvas');
     const miniCtx = minimapCanvas.getContext('2d');
@@ -1765,13 +1893,78 @@
     goHomeBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); gameScreen.classList.add('hidden'); landingScreen.classList.remove('hidden'); });
     continueBtn.addEventListener('click', ()=>{ victoryScreen.classList.add('hidden'); startGame(selectedBiome); });
     document.querySelectorAll('.biome-selector').forEach(el => {
       el.addEventListener('click', (ev)=>{
         document.querySelectorAll('.biome-selector').forEach(x=>x.classList.remove('biome-selected'));
         el.classList.add('biome-selected');
         const biome = el.dataset.biome;
         selectedBiome = biome;
-        startGame(biome);
       });
     });

 <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>
     .equipped { box-shadow: inset 0 -6px 14px rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); }
     .medkit-count { position:absolute; right:4px; bottom:2px; font-size:10px; color:#ffd; }
     .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; opacity:0.95; }
+    /* disable pointer events visually */
+    .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>
     </div>
   </div>
+  <!-- Loading Overlay -->
+  <div id="loadingScreen" aria-hidden="true">
+    <div class="loading-bg" aria-hidden="true"></div>
+    <div class="loading-card" role="status" aria-live="polite">
+      <div class="loading-left">
+        <div class="loading-title"><i data-feather="download"></i> Preparing Drop Zone</div>
+        <div class="tips" id="loadingTip">Loading tips...</div>
+        <div class="loading-count" id="loadingTimerText">Landing in 20s</div>
+        <div style="height:8px"></div>
+        <div class="progress-wrap" aria-hidden="true">
+          <div id="loadingProgress" class="progress-bar"></div>
+        </div>
+      </div>
+      <div class="loading-right">
+        <div class="loader-spinner" aria-hidden="true">
+          <div class="ring"></div>
+        </div>
+        <div class="loader-dots" aria-hidden="true">
+          <div class="dot"></div><div class="dot"></div><div class="dot"></div>
+        </div>
+        <div style="height:6px"></div>
+        <div style="font-size:12px;color:#dbeafe;">Optimizing match assets...</div>
+      </div>
+    </div>
+  </div>
   <!-- Game -->
   <div id="gameScreen" class="hidden h-screen flex flex-col">
     <header class="flex justify-between items-center border-b border-yellow-500 px-6 py-4" style="flex-shrink:0;">
     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');
     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 ----
+    const loadingTips = [
+      "Stick to cover when approaching buildings — open areas get you killed.",
+      "Loot chests quickly and move — enemies can hear opening animations.",
+      "Use medkits only when safe; they take time and leave you vulnerable.",
+      "Shotguns excel at close range; rifles win in open sightlines.",
+      "Build walls to create temporary cover from enemy fire.",
+      "Reload during lulls — don't wait until you're out in a fight.",
+      "Watch the minimap for pickups and storm position.",
+      "Materials stack up; farming early helps late-game survivability."
+    ];
+    let loadingTimerId = null;
+    let tipRotateId = null;
+    let loadingStart = 0;
+    const LOADING_DURATION = 20000; // 20 seconds
+    function showLoadingForBiome(biome){
+      // disable selectors visually & functionally
+      document.querySelectorAll('.biome-selector').forEach(x => { x.classList.add('disabled-pane'); x.style.pointerEvents = 'none'; });
+      selectedBiome = biome;
+      // pick initial tip
+      loadingTipEl.textContent = loadingTips[Math.floor(Math.random()*loadingTips.length)];
+      loadingProgressEl.style.width = '0%';
+      loadingTimerText.textContent = `Landing in ${Math.ceil(LOADING_DURATION/1000)}s`;
+      loadingScreen.style.display = 'flex';
+      loadingScreen.setAttribute('aria-hidden', 'false');
+      loadingStart = performance.now();
+      // rotate tips every 4 seconds
+      let tipIndex = Math.floor(Math.random()*loadingTips.length);
+      tipRotateId = setInterval(()=>{
+        tipIndex = (tipIndex + 1) % loadingTips.length;
+        loadingTipEl.style.opacity = '0';
+        setTimeout(()=> {
+          loadingTipEl.textContent = loadingTips[tipIndex];
+          loadingTipEl.style.opacity = '1';
+        }, 180);
+      }, 4000);
+      // progress updater
+      loadingTimerId = setInterval(() => {
+        const elapsed = performance.now() - loadingStart;
+        const pct = Math.min(1, elapsed / LOADING_DURATION);
+        loadingProgressEl.style.width = `${Math.floor(pct*100)}%`;
+        const remaining = Math.max(0, Math.ceil((LOADING_DURATION - elapsed)/1000));
+        loadingTimerText.textContent = `Landing in ${remaining}s`;
+        // subtle pulse to spinner ring speed based on pct (cosmetic)
+        if (pct >= 1){
+          clearInterval(loadingTimerId);
+          clearInterval(tipRotateId);
+          // hide overlay and begin game
+          setTimeout(()=> {
+            loadingScreen.style.display = 'none';
+            loadingScreen.setAttribute('aria-hidden', 'true');
+            // re-enable selectors
+            document.querySelectorAll('.biome-selector').forEach(x => { x.classList.remove('disabled-pane'); x.style.pointerEvents = ''; });
+            // actually start the game
+            startGame(biome);
+          }, 220); // brief fade window
+        }
+      }, 100);
+    }
+    // Override biome clicks to use loading screen
     document.querySelectorAll('.biome-selector').forEach(el => {
       el.addEventListener('click', (ev)=>{
         document.querySelectorAll('.biome-selector').forEach(x=>x.classList.remove('biome-selected'));
         el.classList.add('biome-selected');
         const biome = el.dataset.biome;
         selectedBiome = biome;
+        // Show the loading screen for 20s then start
+        showLoadingForBiome(biome);
       });
     });