From bbc66efafeafe4d87f244e1e9fe510ce158264b5 Mon Sep 17 00:00:00 2001
From: Juan Sebastian Montoya <juansmm@outlook.com>
Date: Wed, 26 Nov 2025 19:23:47 -0500
Subject: [PATCH] fix: apply cache busting and format

---
 index.html | 565 +++++++++++++++++++++++++++++------------------------
 1 file changed, 311 insertions(+), 254 deletions(-)
diff --git a/index.html b/index.html
index 0929da0..d98142e 100644
--- a/index.html
+++ b/index.html
@@ -1,289 +1,346 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>3D Coin Collector Game</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        overflow: hidden;
+        font-family: "Arial", sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+      #ui {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        color: white;
+        font-size: 24px;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        z-index: 100;
+      }
+      #combo {
+        position: absolute;
+        top: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: #ffd700;
+        font-size: 32px;
+        font-weight: bold;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+        z-index: 100;
+        display: none;
+        animation: comboPulse 0.5s ease-in-out;
+      }
+      @keyframes comboPulse {
+        0%,
+        100% {
+          transform: translateX(-50%) scale(1);
         }
-        body {
-            overflow: hidden;
-            font-family: 'Arial', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        50% {
+          transform: translateX(-50%) scale(1.2);
         }
-        #ui {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            color: white;
-            font-size: 24px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-            z-index: 100;
-        }
-        #combo {
-            position: absolute;
-            top: 100px;
-            left: 50%;
-            transform: translateX(-50%);
-            color: #FFD700;
-            font-size: 32px;
-            font-weight: bold;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
-            z-index: 100;
-            display: none;
-            animation: comboPulse 0.5s ease-in-out;
-        }
-        @keyframes comboPulse {
-            0%, 100% { transform: translateX(-50%) scale(1); }
-            50% { transform: translateX(-50%) scale(1.2); }
-        }
-        #startMenu, #pauseMenu, #gameOver {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0,0,0,0.9);
-            padding: 50px;
-            border-radius: 20px;
-            text-align: center;
-            color: white;
-            z-index: 200;
-            min-width: 400px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-        }
-        #startMenu {
-            display: block;
-        }
-        #pauseMenu, #gameOver {
-            display: none;
-        }
-        #startMenu h1, #pauseMenu h1, #gameOver h1 {
-            font-size: 48px;
-            margin-bottom: 20px;
-            color: #4CAF50;
-        }
-        #pauseMenu h1 {
-            color: #FFA500;
-        }
-        #gameOver h1 {
-            color: #ff6b6b;
-        }
-        #startMenu p, #pauseMenu p, #gameOver p {
-            font-size: 20px;
-            margin-bottom: 30px;
-            line-height: 1.6;
-        }
-        #startMenu button, #pauseMenu button, #restartBtn {
-            background: #4CAF50;
-            border: none;
-            color: white;
-            padding: 15px 40px;
-            font-size: 20px;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin: 10px;
-        }
-        #startMenu button:hover, #pauseMenu button:hover, #restartBtn:hover {
-            background: #45a049;
-            transform: scale(1.1);
-        }
-        #pauseMenu button.resumeBtn {
-            background: #2196F3;
-        }
-        #pauseMenu button.resumeBtn:hover {
-            background: #1976D2;
+      }
+      #startMenu,
+      #pauseMenu,
+      #gameOver {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(0, 0, 0, 0.9);
+        padding: 50px;
+        border-radius: 20px;
+        text-align: center;
+        color: white;
+        z-index: 200;
+        min-width: 400px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+      }
+      #startMenu {
+        display: block;
+      }
+      #pauseMenu,
+      #gameOver {
+        display: none;
+      }
+      #startMenu h1,
+      #pauseMenu h1,
+      #gameOver h1 {
+        font-size: 48px;
+        margin-bottom: 20px;
+        color: #4caf50;
+      }
+      #pauseMenu h1 {
+        color: #ffa500;
+      }
+      #gameOver h1 {
+        color: #ff6b6b;
+      }
+      #startMenu p,
+      #pauseMenu p,
+      #gameOver p {
+        font-size: 20px;
+        margin-bottom: 30px;
+        line-height: 1.6;
+      }
+      #startMenu button,
+      #pauseMenu button,
+      #restartBtn {
+        background: #4caf50;
+        border: none;
+        color: white;
+        padding: 15px 40px;
+        font-size: 20px;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: all 0.3s;
+        margin: 10px;
+      }
+      #startMenu button:hover,
+      #pauseMenu button:hover,
+      #restartBtn:hover {
+        background: #45a049;
+        transform: scale(1.1);
+      }
+      #pauseMenu button.resumeBtn {
+        background: #2196f3;
+      }
+      #pauseMenu button.resumeBtn:hover {
+        background: #1976d2;
+      }
+      #instructions {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: white;
+        text-align: center;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+      }
+      #version {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 14px;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        z-index: 100;
+        font-family: "Courier New", monospace;
+      }
+      #soundStatus {
+        display: none;
+        position: absolute;
+        top: 20px;
+        right: 90px;
+        background: rgba(0, 0, 0, 0.7);
+        border: 2px solid white;
+        color: white;
+        font-size: 24px;
+        padding: 10px 15px;
+        border-radius: 10px;
+        cursor: pointer;
+        z-index: 100;
+        font-family: Arial, sans-serif;
+        transition: all 0.2s;
+        user-select: none;
+      }
+      #soundStatus:hover {
+        background: rgba(0, 0, 0, 0.9);
+        transform: scale(1.1);
+      }
+      #soundStatus:active {
+        transform: scale(0.95);
+      }
+      #pauseBtn {
+        display: none;
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        background: rgba(0, 0, 0, 0.7);
+        border: 2px solid white;
+        color: white;
+        font-size: 24px;
+        padding: 10px 15px;
+        border-radius: 10px;
+        cursor: pointer;
+        z-index: 100;
+        font-family: Arial, sans-serif;
+        transition: all 0.2s;
+      }
+      #pauseBtn:hover {
+        background: rgba(0, 0, 0, 0.9);
+        transform: scale(1.1);
+      }
+      #pauseBtn:active {
+        transform: scale(0.95);
+      }
+      /* Show buttons when game is active */
+      @media (max-width: 768px) {
+        #pauseBtn {
+          display: block;
         }
+      }
+      #perfMonitor {
+        position: absolute;
+        top: 60px;
+        right: 20px;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 10px;
+        border-radius: 5px;
+        color: #00ff00;
+        font-size: 12px;
+        font-family: "Courier New", monospace;
+        z-index: 100;
+        display: none;
+        min-width: 120px;
+      }
+      #perfMonitor.visible {
+        display: block;
+      }
+      #perfMonitor .label {
+        color: #888;
+      }
+      @media (max-width: 768px) {
         #instructions {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            color: white;
-            text-align: center;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+          font-size: 14px;
         }
         #version {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 14px;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-            z-index: 100;
-            font-family: 'Courier New', monospace;
+          font-size: 12px;
+          top: 10px;
+          right: 10px;
         }
         #soundStatus {
-            display: none;
-            position: absolute;
-            top: 20px;
-            right: 90px;
-            background: rgba(0,0,0,0.7);
-            border: 2px solid white;
-            color: white;
-            font-size: 24px;
-            padding: 10px 15px;
-            border-radius: 10px;
-            cursor: pointer;
-            z-index: 100;
-            font-family: Arial, sans-serif;
-            transition: all 0.2s;
-            user-select: none;
-        }
-        #soundStatus:hover {
-            background: rgba(0,0,0,0.9);
-            transform: scale(1.1);
-        }
-        #soundStatus:active {
-            transform: scale(0.95);
+          top: 10px;
+          right: 80px;
+          font-size: 20px;
+          padding: 8px 12px;
         }
         #pauseBtn {
-            display: none;
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            background: rgba(0,0,0,0.7);
-            border: 2px solid white;
-            color: white;
-            font-size: 24px;
-            padding: 10px 15px;
-            border-radius: 10px;
-            cursor: pointer;
-            z-index: 100;
-            font-family: Arial, sans-serif;
-            transition: all 0.2s;
-        }
-        #pauseBtn:hover {
-            background: rgba(0,0,0,0.9);
-            transform: scale(1.1);
-        }
-        #pauseBtn:active {
-            transform: scale(0.95);
-        }
-        /* Show buttons when game is active */
-        @media (max-width: 768px) {
-            #pauseBtn {
-                display: block;
-            }
+          top: 10px;
+          right: 10px;
+          font-size: 20px;
+          padding: 8px 12px;
         }
         #perfMonitor {
-            position: absolute;
-            top: 60px;
-            right: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px;
-            border-radius: 5px;
-            color: #00ff00;
-            font-size: 12px;
-            font-family: 'Courier New', monospace;
-            z-index: 100;
-            display: none;
-            min-width: 120px;
-        }
-        #perfMonitor.visible {
-            display: block;
-        }
-        #perfMonitor .label {
-            color: #888;
-        }
-        @media (max-width: 768px) {
-            #instructions {
-                font-size: 14px;
-            }
-            #version {
-                font-size: 12px;
-                top: 10px;
-                right: 10px;
-            }
-            #soundStatus {
-                top: 10px;
-                right: 80px;
-                font-size: 20px;
-                padding: 8px 12px;
-            }
-            #pauseBtn {
-                top: 10px;
-                right: 10px;
-                font-size: 20px;
-                padding: 8px 12px;
-            }
-            #perfMonitor {
-                top: 40px;
-                right: 10px;
-                font-size: 11px;
-            }
+          top: 40px;
+          right: 10px;
+          font-size: 11px;
         }
+      }
     </style>
-</head>
-<body>
-    <div id="ui" style="display: none;">
-        <div>Score: <span id="score">0</span></div>
-        <div>High Score: <span id="highScore">0</span></div>
-        <div>Health: <span id="health">100</span></div>
+  </head>
+  <body>
+    <div id="ui" style="display: none">
+      <div>Score: <span id="score">0</span></div>
+      <div>High Score: <span id="highScore">0</span></div>
+      <div>Health: <span id="health">100</span></div>
     </div>
-    
+
     <div id="combo">1x COMBO!</div>
-    
+
     <div id="version">v<span id="versionNumber">-</span></div>
-    
+
     <div id="soundStatus" title="Sound ON (Press M to mute)">🔊</div>
-    
+
     <button id="pauseBtn" title="Pause Game">⏸️</button>
-    
+
     <div id="perfMonitor">
-        <div><span class="label">FPS:</span> <span id="fps">60</span></div>
-        <div><span class="label">Frame:</span> <span id="frameTime">16.7</span>ms</div>
-        <div><span class="label">Entities:</span> <span id="entityCount">0</span></div>
+      <div><span class="label">FPS:</span> <span id="fps">60</span></div>
+      <div>
+        <span class="label">Frame:</span> <span id="frameTime">16.7</span>ms
+      </div>
+      <div>
+        <span class="label">Entities:</span> <span id="entityCount">0</span>
+      </div>
     </div>
-    
+
     <div id="startMenu">
-        <h1>🎮 Coin Collector</h1>
-        <p>Collect coins, avoid obstacles, and survive as long as you can!</p>
-        <p style="font-size: 16px; opacity: 0.8; margin-top: 20px;">
-            <strong>Controls:</strong><br>
-            WASD or Arrow Keys to move<br>
-            Touch and drag (mobile)<br>
-            ESC or P to pause
-        </p>
-        <button id="startBtn">Start Game</button>
+      <h1>🎮 Coin Collector</h1>
+      <p>Collect coins, avoid obstacles, and survive as long as you can!</p>
+      <p style="font-size: 16px; opacity: 0.8; margin-top: 20px">
+        <strong>Controls:</strong><br />
+        WASD or Arrow Keys to move<br />
+        Touch and drag (mobile)<br />
+        ESC or P to pause
+      </p>
+      <button id="startBtn">Start Game</button>
     </div>
-    
+
     <div id="pauseMenu">
-        <h1>⏸️ Paused</h1>
-        <p>Game is paused</p>
-        <button class="resumeBtn" id="resumeBtn">Resume</button>
-        <button id="pauseMenuBtn">Main Menu</button>
+      <h1>⏸️ Paused</h1>
+      <p>Game is paused</p>
+      <button class="resumeBtn" id="resumeBtn">Resume</button>
+      <button id="pauseMenuBtn">Main Menu</button>
     </div>
-    
+
     <div id="gameOver">
-        <h1>Game Over!</h1>
-        <p id="newHighScore" style="display: none; color: #FFD700; font-size: 28px; margin-bottom: 10px;">🏆 New High Score! 🏆</p>
-        <p>Final Score: <span id="finalScore">0</span></p>
-        <button id="restartBtn">Play Again</button>
+      <h1>Game Over!</h1>
+      <p
+        id="newHighScore"
+        style="
+          display: none;
+          color: #ffd700;
+          font-size: 28px;
+          margin-bottom: 10px;
+        "
+      >
+        🏆 New High Score! 🏆
+      </p>
+      <p>Final Score: <span id="finalScore">0</span></p>
+      <button id="restartBtn">Play Again</button>
     </div>
-    
-    <div id="instructions" style="display: none;">
-        <p><strong>Controls:</strong> WASD or Arrow Keys to move | Touch and drag to move (mobile) | Collect yellow coins | Avoid red obstacles!</p>
-        <p style="margin-top: 5px; font-size: 11px; opacity: 0.7;">Press "T" to toggle performance monitor | Press "M" to toggle sound | Press "ESC" or "P" to pause</p>
+
+    <div id="instructions" style="display: none">
+      <p>
+        <strong>Controls:</strong> WASD or Arrow Keys to move | Touch and drag
+        to move (mobile) | Collect yellow coins | Avoid red obstacles!
+      </p>
+      <p style="margin-top: 5px; font-size: 11px; opacity: 0.7">
+        Press "T" to toggle performance monitor | Press "M" to toggle sound |
+        Press "ESC" or "P" to pause
+      </p>
     </div>
 
     <script type="module">
-        // Import Three.js from CDN
-        
-        import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js';
-        
-        // Make THREE globally available for our modules
-        window.THREE = THREE;
-        
-        // Load the game after THREE is loaded
-        import('./src/main.js').catch(err => {
-            console.error('Failed to load game:', err);
-        });
-    </script>
-</body>
-</html>
+      // Import Three.js from CDN
 
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js";
+
+      // Make THREE globally available for our modules
+      window.THREE = THREE;
+
+      // Load version for cache busting
+      async function loadGame() {
+        try {
+          // Try to get version from version.json for cache busting
+          const versionResponse = await fetch(`/version.json?t=${Date.now()}`, {
+            cache: "no-store",
+          });
+          let cacheBuster = `?t=${Date.now()}`;
+
+          if (versionResponse.ok) {
+            const versionData = await versionResponse.json();
+            if (versionData.version) {
+              // Use version for cache busting (more reliable than timestamp)
+              cacheBuster = `?v=${versionData.version}`;
+            }
+          }
+
+          // Load the game with cache busting
+          await import(`./src/main.js${cacheBuster}`);
+        } catch (err) {
+          console.error("Failed to load game:", err);
+        }
+      }
+
+      // Load the game after THREE is loaded
+      loadGame();
+    </script>
+  </body>
+</html>
-- 
2.49.1

