Refactoring: move out config

tv-player/index.html

@@ -6,18 +6,7 @@
     <title>Retro TV Player</title>
     <!-- Load Tailwind CSS for styling --><script src="./vendor/tailwind-3.4.17.js" x-src="https://cdn.tailwindcss.com"></script>
     <!-- Load Three.js for 3D rendering --><script src="./vendor/three.min.js" x-src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <script>
+    <script src="./src/tailwind-config.js"></script>
-        // Configure Tailwind for the button
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        'tape-red': '#cc3333',
-                    },
-                }
-            }
-        }
-    </script>
     <style>
         /* Dark room aesthetic */
         body {
@@ -54,42 +43,9 @@
         </div>
     </div>
 
+    <script src="./src/global-variables.js"></script>
+
     <!-- 3D Canvas will be injected here by Three.js --><script>
-        // --- Global Variables ---
-        let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLightPoint, lampLightSpot;
-        let isVideoLoaded = false;
-        let videoUrls = []; // Array to hold all video URLs
-        let currentVideoIndex = -1; // Index of the currently playing video
-        
-        const originalLampIntensity = 0.8; // Base intensity for the flickering lamp
-        const originalScreenIntensity = 0.2; // Base intensity for the screen glow
-        const screenIntensityPulse = 0.2;
-        
-        const roomSize = 5;
-        const roomHeight = 3;
-
-        const container = document.body;
-        const videoElement = document.getElementById('video');
-        const fileInput = document.getElementById('fileInput');
-        const loadTapeButton = document.getElementById('loadTapeButton');
-        const loader = new THREE.TextureLoader();
-        
-        const debugLight = false;
-
-        const FLIES_COUNT = 2; // Flies
-        const flies = [];
-        let landingSurfaces = []; // Array to hold floor and table for fly landings
-        const raycaster = new THREE.Raycaster();
-        
-        // --- Configuration ---
-        const ROOM_SIZE = roomSize;
-        const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
-        const FLIGHT_HEIGHT_MAX = roomHeight * 0.9; // Max height for flying
-        const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
-        const DAMPING_FACTOR = 0.05;
-        const FLY_WAIT_BASE = 1000;
-        const FLY_LAND_CHANCE = 0.3;
-
         // --- Utility: Random Color (seeded) ---
         function getRandomColor() {
             const hue = seededRandom();
@@ -108,7 +64,6 @@
         }
 
         // --- Seedable Random Number Generator (Mulberry32) ---
-        let seed = 12345; // Default seed, will be overridden per shelf
         function seededRandom() {
             let t = seed += 0x6D2B79F5;
             t = Math.imul(t ^ t >>> 15, t | 1);
@@ -1464,4 +1419,4 @@
     </script>
 </body>
 </html>
-<!-- textures sourced from https://animalia-life.club/ -->
+<!-- textures sourced from https://animalia-life.club/ -->

tv-player/src/global-variables.js

@@ -0,0 +1,37 @@
+// --- Global Variables ---
+let scene, camera, renderer, tvScreen, videoTexture, dust, screenLight, lampLightPoint, lampLightSpot;
+let isVideoLoaded = false;
+let videoUrls = []; // Array to hold all video URLs
+let currentVideoIndex = -1; // Index of the currently playing video
+
+const originalLampIntensity = 0.8; // Base intensity for the flickering lamp
+const originalScreenIntensity = 0.2; // Base intensity for the screen glow
+const screenIntensityPulse = 0.2;
+
+const roomSize = 5;
+const roomHeight = 3;
+
+const container = document.body;
+const videoElement = document.getElementById('video');
+const fileInput = document.getElementById('fileInput');
+const loadTapeButton = document.getElementById('loadTapeButton');
+const loader = new THREE.TextureLoader();
+
+const debugLight = false;
+
+const FLIES_COUNT = 2; // Flies
+const flies = [];
+let landingSurfaces = []; // Array to hold floor and table for fly landings
+const raycaster = new THREE.Raycaster();
+
+// --- Configuration ---
+const ROOM_SIZE = roomSize;
+const FLIGHT_HEIGHT_MIN = 0.5; // Min height for flying
+const FLIGHT_HEIGHT_MAX = roomHeight * 0.9; // Max height for flying
+const FLY_FLIGHT_SPEED_FACTOR = 0.01; // How quickly 't' increases per frame
+const DAMPING_FACTOR = 0.05;
+const FLY_WAIT_BASE = 1000;
+const FLY_LAND_CHANCE = 0.3;
+
+// --- Seedable Random Number Generator (Mulberry32) ---
+let seed = 12345; // Default seed, will be overridden per shelf

tv-player/src/tailwind-config.js

@@ -0,0 +1,10 @@
+// Configure Tailwind for the button
+tailwind.config = {
+    theme: {
+        extend: {
+            colors: {
+                'tape-red': '#cc3333',
+            },
+        }
+    }
+}