Update sync_animation.html

sync_animation.html

@@ -6,40 +6,44 @@
     <title>CMD Ingaze Reveal Animation</title>
     <style>
         /* Styles for the animation when embedded */
-        html, body { /* Apply to html as well for full height */
+        body { /* Removed html selector here, apply to body */
             background-color: #000000; /* Black background for the animation area */
             color: #00FF00; /* Bright green text */
             font-family: 'Courier New', Courier, monospace; /* Classic CMD font */
-            margin: 0; 
-            padding: 0; 
-            overflow: hidden; 
-            height: 100%; /* Make body fill the iframe height */
-            display: flex; 
-            justify-content: center; 
-            align-items: center; 
+            margin: 0;
+            padding: 10px; /* Add some padding to the body itself for spacing */
+            /* overflow: hidden; Removed, let content dictate size */
+            /* height: 100%; Removed, problematic in iframes */
+            /* display: flex; Removed */
+            /* justify-content: center; Removed */
+            /* align-items: center; Removed */
         }
 
         #cmd-animation-container {
-            padding: 10px; /* Adjusted padding */
-            border: 2px solid #00AA00; 
-            background-color: #080808; 
-            box-shadow: 0 0 10px #00FF00; 
-            border-radius: 8px; 
-            box-sizing: border-box; 
-            max-width: calc(100% - 20px); /* Max width with some margin */
-            margin: 10px; /* Margin around container */
-            /* Height will be determined by content or flex centering */
+            padding: 15px; /* Increased padding for better visual separation */
+            border: 2px solid #00AA00;
+            background-color: #080808; /* Dark background for the container */
+            box-shadow: 0 0 10px #00FF00;
+            border-radius: 8px;
+            box-sizing: border-box;
+            /* max-width: calc(100% - 20px); /* Retain max-width for responsiveness */
+            /* margin: 10px; /* Body padding handles spacing now */
+            text-align: center; /* Center the pre block if it's narrower */
         }
 
         pre#cmd-animation {
-            white-space: pre; 
-            text-align: left;
-            font-size: 13px; /* Slightly increased font size */
-            line-height: 1.2; /* Adjusted line height */
-            margin: 0;
-            overflow-x: auto; 
-            color: #00FF00; /* Explicitly set text color here too */
-            background-color: #080808; /* Ensure pre background matches container */
+            white-space: pre;
+            text-align: left; /* Text within pre should be left-aligned */
+            font-size: 13px;
+            line-height: 1.2;
+            margin: 0 auto; /* Center pre block if container is wider */
+            overflow-x: auto; /* Allow horizontal scroll if content is too wide */
+            color: #00FF00;
+            background-color: #080808; /* Match container background */
+            display: inline-block; /* Allow margin auto to work for centering */
+            min-width: 100px; /* Ensure it's not collapsed */
+            min-height: 50px; /* Ensure it's not collapsed */
+            /* The height will be determined by scene_height * line-height */
         }
     </style>
 </head>
@@ -49,29 +53,30 @@
     </div>
 
     <script>
-        console.log("SYNC ANIMATION: Script execution started."); // LOG 1
+        // --- Start of Script ---
+        console.log("SYNC ANIMATION (Updated HTML): Script execution started.");
 
         // --- Configuration ---
-        const scene_width = 65; 
-        const scene_height = 22; 
-        const frameDuration = 150; 
-        const MAX_DATA_PARTICLES = 100; 
-        const FLOOR_LEVEL = scene_height - 1;
+        const scene_width = 65;  // Width of the animation scene in characters
+        const scene_height = 22; // Height of the animation scene in lines
+        const frameDuration = 150; // Duration of each frame in milliseconds
+        const MAX_DATA_PARTICLES = 100; // Maximum number of data particles
+        const FLOOR_LEVEL = scene_height - 1; // Y-coordinate of the floor
 
         // --- ASCII Art Definitions ---
         const stick_man_art_normal = ["   O   ", "  /|\\  ", "  / \\  "];
         const stick_man_art_walk_1 = ["   O   ", "  /|\\  ", "  / >  "];
         const stick_man_art_walk_2 = ["   O   ", "  /|\\  ", " < \\  "];
         const stick_man_art_surprise = ["  \\O/  ", "   |   ", "  / \\  "];
-        const stick_man_art_gone = ["       ", "       ", "       "];
-        const linked_in_art = ["+----+", "|i n |", "+----+"];
-        const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"];
-        const lightning_strike_segment = "\\";
-        const explosion_art_frames = [
+        const stick_man_art_gone = ["       ", "       ", "       "]; // Art for when stickman disappears
+        const linked_in_art = ["+----+", "|i n |", "+----+"]; // LinkedIn logo
+        const linked_in_art_hit = ["x----x", "|BOOM|", "x----x"]; // LinkedIn logo when hit
+        const lightning_strike_segment = "\\"; // Character for lightning
+        const explosion_art_frames = [ // Frames for explosion animation
             ["   * ", "  *#* ", "   * "],["  @!%  ", " @*#*& ", "  X%O  "],
             [" $*~+@ ", "$#@!%*&"," X*O#~ ", "  !+%$ "],["   ~   ", "  +*%  ", "   $   "]
         ];
-        const ingaze_logo_art = [
+        const ingaze_logo_art = [ // ASCII art for "INGAZE" logo
             "IIIII N   N  GGG   AAA   ZZZZZ EEEEE", "  I   NN  N G     A   A    Z   E    ",
             "  I   N N N G  GG AAAAA   Z    EEE  ", "  I   N  NN G   G A   A  Z     E    ",
             "IIIII N   N  GGG  A   A ZZZZZ EEEEE"
@@ -79,18 +84,27 @@
         const ingaze_logo_width = ingaze_logo_art[0].length;
         const ingaze_logo_height = ingaze_logo_art.length;
 
-        let data_particles_state = []; 
-        let current_lightning_y_state = -1;
+        // --- State Variables ---
+        let data_particles_state = []; // Array to hold current data particles
+        let current_lightning_y_state = -1; // Current Y position of lightning tip
 
+        /**
+         * Overlays ASCII art onto a base scene (array of strings).
+         * @param {string[]} baseLines - The base scene lines.
+         * @param {string[]} artLines - The ASCII art lines to overlay.
+         * @param {number} startX - The starting X coordinate for the art.
+         * @param {number} startY - The starting Y coordinate for the art.
+         * @param {boolean} [ignoreSpaces=true] - Whether to ignore spaces in the art.
+         */
         function overlay(baseLines, artLines, startX, startY, ignoreSpaces = true) {
             artLines.forEach((artLine, i) => {
                 const y = startY + i;
-                if (y >= 0 && y < baseLines.length && artLine) {
+                if (y >= 0 && y < baseLines.length && artLine) { // Check if art line is within base scene bounds
                     let baseLineArr = baseLines[y].split('');
                     for (let j = 0; j < artLine.length; j++) {
                         const x = startX + j;
-                        if (x >= 0 && x < baseLineArr.length) {
-                            if (ignoreSpaces && artLine[j] === ' ') continue;
+                        if (x >= 0 && x < baseLineArr.length) { // Check if art character is within line bounds
+                            if (ignoreSpaces && artLine[j] === ' ') continue; // Skip spaces if specified
                             baseLineArr[x] = artLine[j];
                         }
                     }
@@ -99,13 +113,20 @@
             });
         }
 
+        /**
+         * Draws a lightning bolt segment in the scene.
+         * @param {string[]} sceneLines - The current scene lines.
+         * @param {number} tipX - The X coordinate of the lightning tip.
+         * @param {number} tipY - The Y coordinate of the lightning tip.
+         * @param {number} length - The length of the lightning bolt.
+         */
         function drawLightningBoltInScene(sceneLines, tipX, tipY, length) {
             for (let i = 0; i < length; i++) {
-                const y = tipY - i;
-                const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1));
+                const y = tipY - i; // Lightning travels upwards from tip
+                const x = tipX + (i % 2 === 0 ? 0 : (i % 4 === 1 ? -1 : 1)); // Jagged path
                 if (y >= 0 && y < scene_height && x >= 0 && x < scene_width) {
-                    if (sceneLines[y][x] === ' ') {
-                        let lineArr = sceneLines[y].split('');
+                    let lineArr = sceneLines[y].split('');
+                    if (x < lineArr.length && lineArr[x] === ' ') { // Check bounds and if space is empty
                         lineArr[x] = lightning_strike_segment;
                         sceneLines[y] = lineArr.join('');
                     }
@@ -113,198 +134,282 @@
             }
         }
 
+        /**
+         * Builds a single frame of the animation.
+         * @returns {string} The complete animation frame as a multi-line string.
+         */
         function buildSceneFrame(stickmanArt, stickmanPos, showLogo, currentLogoArt, currentLogoPos,
-                              showLightningBolt, lightningTipX, lightningTipY, lightningLength,
-                              currentExplosionArt, explosionPos,
-                              showIngazeLogo, ingazeArt, ingazePos) {
+                                showLightningBolt, lightningTipX, lightningTipY, lightningLength,
+                                currentExplosionArt, explosionPos,
+                                showIngazeLogo, ingazeArt, ingazePos) {
+            // Initialize scene with empty lines
             let sceneLines = Array(scene_height).fill(" ".repeat(scene_width));
+
+            // Draw data particles
             data_particles_state.forEach(p => {
-                const px = Math.round(p.x); const py = Math.round(p.y);
+                const px = Math.round(p.x);
+                const py = Math.round(p.y);
                 if (py >= 0 && py < sceneLines.length && px >= 0 && px < scene_width) {
-                    if (sceneLines[py][px] === ' ') {
-                         let lineArr = sceneLines[py].split(''); lineArr[px] = p.char; sceneLines[py] = lineArr.join('');
+                    let lineArr = sceneLines[py].split('');
+                    if (px < lineArr.length && lineArr[px] === ' ') { // Check bounds and if space is empty
+                        lineArr[px] = p.char;
+                        sceneLines[py] = lineArr.join('');
                     }
                 }
             });
+
+            // Overlay elements onto the scene
             overlay(sceneLines, stickmanArt, stickmanPos.x, stickmanPos.y);
             if (showLogo) overlay(sceneLines, currentLogoArt, currentLogoPos.x, currentLogoPos.y);
             if (showLightningBolt && lightningTipY >=0) {
                 drawLightningBoltInScene(sceneLines, lightningTipX, lightningTipY, lightningLength);
             }
             if (currentExplosionArt && currentExplosionArt.length > 0) {
-                overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false);
+                overlay(sceneLines, currentExplosionArt, explosionPos.x, explosionPos.y, false); // Don't ignore spaces for explosion
             }
             if (showIngazeLogo) overlay(sceneLines, ingazeArt, ingazePos.x, ingazePos.y);
-            return sceneLines.join('\n');
+
+            return sceneLines.join('\n'); // Join lines into a single string for display
         }
 
+        /**
+         * Spawns a new data particle (0 or 1) falling from the LinkedIn logo.
+         */
         function spawnNewDataParticle(logoX, logoY, logoWidth) {
-            if (data_particles_state.length >= MAX_DATA_PARTICLES) return;
+            if (data_particles_state.length >= MAX_DATA_PARTICLES) return; // Limit particle count
             const char = Math.random() > 0.5 ? '1' : '0';
-            const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2));
-            const y = logoY + linked_in_art.length;
-            const vy = 0.2 + Math.random() * 0.3;
+            const x = logoX + 1 + Math.floor(Math.random() * (logoWidth - 2)); // Random X within logo
+            const y = logoY + linked_in_art.length; // Start below logo
+            const vy = 0.2 + Math.random() * 0.3; // Random vertical speed
             data_particles_state.push({ char, x, y, vy, active: true });
         }
 
+        /**
+         * Generates all frames for the entire animation sequence.
+         * @returns {string[]} An array of animation frames.
+         */
         function generateAnimationFrames() {
-            console.log("SYNC ANIMATION: generateAnimationFrames() called."); // LOG
+            console.log("SYNC ANIMATION (Updated HTML): generateAnimationFrames() called.");
             const sequence = [];
-            data_particles_state = []; 
-            current_lightning_y_state = -1; 
+            data_particles_state = []; // Reset particles for each generation
+            current_lightning_y_state = -1; // Reset lightning state
+
+            // Define dimensions and positions
             const stickman_height = stick_man_art_normal.length;
             const stickman_width = stick_man_art_normal[0].length;
             const logo_width = linked_in_art[0].length;
             const logo_height = linked_in_art.length;
+
             const stickman_base_y = FLOOR_LEVEL - stickman_height;
-            const logo_base_y = stickman_base_y;
+            const logo_base_y = stickman_base_y; // Align logo with stickman
+
             const stickman_initial_pos = { x: 2, y: stickman_base_y };
-            const logo_initial_pos = { x: scene_width - logo_width - 15, y: logo_base_y }; 
+            const logo_initial_pos = { x: scene_width - logo_width - 15, y: logo_base_y };
             const stickman_walk_target_x = Math.max(stickman_initial_pos.x + 1, logo_initial_pos.x - stickman_width - 1);
-            const ingaze_pos = { x: Math.floor((scene_width - ingaze_logo_width) / 2), y: Math.floor((scene_height - ingaze_logo_height) / 2)};
+
+            const ingaze_pos = {
+                x: Math.floor((scene_width - ingaze_logo_width) / 2),
+                y: Math.floor((scene_height - ingaze_logo_height) / 2)
+            };
             const explosion_center_x = logo_initial_pos.x + Math.floor(logo_width / 2);
             const explosion_center_y = logo_initial_pos.y + Math.floor(logo_height / 2);
 
-            // Phase 0: Stickman Walks
-            const walk_frames = Math.max(10, Math.floor(Math.abs(stickman_walk_target_x - stickman_initial_pos.x) / 1.0) );
+            // Phase 0: Stickman Walks towards LinkedIn logo
+            const walk_frames_count = Math.max(10, Math.floor(Math.abs(stickman_walk_target_x - stickman_initial_pos.x) / 1.0));
             let current_stickman_x = stickman_initial_pos.x;
-            const walk_step_x = walk_frames > 0 ? (stickman_walk_target_x - stickman_initial_pos.x) / walk_frames : 0;
-            for (let i = 0; i < walk_frames; i++) {
+            const walk_step_x = walk_frames_count > 0 ? (stickman_walk_target_x - stickman_initial_pos.x) / walk_frames_count : 0;
+
+            for (let i = 0; i < walk_frames_count; i++) {
                 current_stickman_x += walk_step_x;
-                const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2;
+                const walk_art = (i % 4 < 2) ? stick_man_art_walk_1 : stick_man_art_walk_2; // Alternate walking art
                 sequence.push(buildSceneFrame(walk_art, { x: Math.round(current_stickman_x), y: stickman_base_y }, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
-            current_stickman_x = stickman_walk_target_x;
+            current_stickman_x = stickman_walk_target_x; // Ensure exact target position
             let current_stickman_pos = { x: Math.round(current_stickman_x), y: stickman_base_y };
 
-            // Phase 1: Pause
-            for (let i = 0; i < 3; i++) { sequence.push(buildSceneFrame(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {})); }
+            // Phase 1: Pause before interaction
+            for (let i = 0; i < 3; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_normal, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
+            }
 
-            // Phase 2: Shaking & Data Fall
+            // Phase 2: Shaking LinkedIn logo & Data Fall
             let current_logo_pos_phase2 = { ...logo_initial_pos };
-            const shake_frames = 20; 
-            for (let i = 0; i < shake_frames; i++) {
-                let logoAdj = { x: 0, y: 0 }; if (i % 6 < 2) logoAdj = { x: 1, y: 0 }; else if (i % 6 < 4) logoAdj = { x: -1, y: 0 };
-                current_logo_pos_phase2.x = logo_initial_pos.x + logoAdj.x;
-                if (i % 3 === 0) spawnNewDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width);
-                data_particles_state.forEach(p => { if (p.active) { p.y += p.vy; if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; } } });
+            const shake_frames_count = 20;
+            for (let i = 0; i < shake_frames_count; i++) {
+                let logo_shake_adj = { x: 0, y: 0 };
+                if (i % 6 < 2) logo_shake_adj = { x: 1, y: 0 }; else if (i % 6 < 4) logo_shake_adj = { x: -1, y: 0 }; // Shake horizontally
+                current_logo_pos_phase2.x = logo_initial_pos.x + logo_shake_adj.x;
+
+                if (i % 3 === 0) spawnNewDataParticle(current_logo_pos_phase2.x, current_logo_pos_phase2.y, logo_width); // Spawn particles periodically
+
+                data_particles_state.forEach(p => { // Update particle positions
+                    if (p.active) {
+                        p.y += p.vy;
+                        if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; } // Particle hits floor
+                    }
+                });
                 sequence.push(buildSceneFrame(stick_man_art_normal, current_stickman_pos, true, linked_in_art, current_logo_pos_phase2, false,0,0,0, [], {}, false, [], {}));
             }
-            current_logo_pos_phase2 = { ...logo_initial_pos };
+            current_logo_pos_phase2 = { ...logo_initial_pos }; // Reset logo position
 
             // Phase 3: Data Settles, Stickman Surprised
-            const settle_frames = 8;
-            for (let i = 0; i < settle_frames; i++) {
-                let stickmanArtPhase3 = (i < settle_frames / 2) ? stick_man_art_normal : stick_man_art_surprise;
-                data_particles_state.forEach(p => { if (p.active) { p.y += p.vy; if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; } } });
+            const settle_frames_count = 8;
+            for (let i = 0; i < settle_frames_count; i++) {
+                let stickmanArtPhase3 = (i < settle_frames_count / 2) ? stick_man_art_normal : stick_man_art_surprise; // Stickman gets surprised
+                data_particles_state.forEach(p => { // Continue settling particles
+                    if (p.active) {
+                        p.y += p.vy;
+                        if (p.y >= FLOOR_LEVEL) { p.y = FLOOR_LEVEL; p.vy = 0; p.active = false; }
+                    }
+                });
                 sequence.push(buildSceneFrame(stickmanArtPhase3, current_stickman_pos, true, linked_in_art, logo_initial_pos, false,0,0,0, [], {}, false, [], {}));
             }
 
-            // Phase 4: Lightning Strike
-            const lightning_target_y = logo_initial_pos.y; const lightning_strike_frames = lightning_target_y + 2; 
-            const lightning_bolt_length = 4; const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2);
-            for (let i = 0; i < lightning_strike_frames; i++) {
-                current_lightning_y_state = i; let logo_art_to_use = linked_in_art;
-                if (current_lightning_y_state >= lightning_target_y) { logo_art_to_use = linked_in_art_hit; current_lightning_y_state = lightning_target_y; }
+            // Phase 4: Lightning Strike on LinkedIn logo
+            const lightning_target_y = logo_initial_pos.y;
+            const lightning_strike_frames_count = lightning_target_y + 2; // Frames for lightning to reach logo
+            const lightning_bolt_length = 4;
+            const lightning_tip_x_strike = logo_initial_pos.x + Math.floor(logo_width / 2); // Strike center of logo
+
+            for (let i = 0; i < lightning_strike_frames_count; i++) {
+                current_lightning_y_state = i;
+                let logo_art_to_use = linked_in_art;
+                if (current_lightning_y_state >= lightning_target_y) { // Lightning hits
+                    logo_art_to_use = linked_in_art_hit;
+                    current_lightning_y_state = lightning_target_y; // Keep lightning at target
+                }
                 sequence.push(buildSceneFrame(stick_man_art_surprise, current_stickman_pos, true, logo_art_to_use, logo_initial_pos, true, lightning_tip_x_strike, current_lightning_y_state, lightning_bolt_length, [], {}, false, [], {}));
             }
-            current_lightning_y_state = -1; 
+            current_lightning_y_state = -1; // Reset lightning
 
-            // Phase 5: Explosion
-            const explosion_duration_per_frame = 2; let stickman_art_explosion = stick_man_art_surprise; 
+            // Phase 5: Explosion of LinkedIn logo
+            const explosion_duration_per_frame = 2; // How many animation frames each explosion art frame lasts
+            let stickman_art_explosion = stick_man_art_surprise;
             for (let i = 0; i < explosion_art_frames.length; i++) {
                 const explosion_art = explosion_art_frames[i];
-                const explosion_art_width = Math.max(...explosion_art.map(l => l.length)); const explosion_art_height = explosion_art.length;
-                const current_explosion_pos = { x: explosion_center_x - Math.floor(explosion_art_width / 2), y: explosion_center_y - Math.floor(explosion_art_height / 2) };
+                const explosion_art_width = Math.max(...explosion_art.map(l => l.length));
+                const explosion_art_height = explosion_art.length;
+                const current_explosion_pos = {
+                    x: explosion_center_x - Math.floor(explosion_art_width / 2),
+                    y: explosion_center_y - Math.floor(explosion_art_height / 2)
+                };
                 for (let j = 0; j < explosion_duration_per_frame; j++) {
-                    if (i === 0 && j === 0) { data_particles_state = []; stickman_art_explosion = stick_man_art_gone; }
+                    if (i === 0 && j === 0) { // First frame of explosion
+                        data_particles_state = []; // Clear data particles
+                        stickman_art_explosion = stick_man_art_gone; // Stickman disappears
+                    }
                     sequence.push(buildSceneFrame(stickman_art_explosion, current_stickman_pos, false, [], {}, false,0,0,0, explosion_art, current_explosion_pos, false, [], {}));
                 }
             }
 
             // Phase 6: "Ingaze" Logo Reveal
-            const ingaze_reveal_pause_frames = 4; 
-            for(let i=0; i < ingaze_reveal_pause_frames; i++) { sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {}));}
-            const ingaze_display_frames = 25; 
-            for (let i = 0; i < ingaze_display_frames; i++) { sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos));}
-            
-            console.log(`SYNC ANIMATION: Generated ${sequence.length} frames.`); // LOG
+            const ingaze_reveal_pause_frames = 4; // Pause after explosion
+            for(let i=0; i < ingaze_reveal_pause_frames; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, false, [], {}));
+            }
+            const ingaze_display_frames = 25; // How long Ingaze logo stays
+            for (let i = 0; i < ingaze_display_frames; i++) {
+                sequence.push(buildSceneFrame(stick_man_art_gone, current_stickman_pos, false, [], {}, false,0,0,0, [], {}, true, ingaze_logo_art, ingaze_pos));
+            }
+
+            console.log(`SYNC ANIMATION (Updated HTML): Generated ${sequence.length} frames.`);
             return sequence;
         }
 
+        // --- Animation Playback ---
         const animationElement = document.getElementById('cmd-animation');
         let currentFrameIndex = 0;
         let animationIntervalId;
-        let allAnimationFrames = []; 
+        let allAnimationFrames = []; // To store all generated frames
 
+        /**
+         * Runs the animation loop, updating the text content of the animation element.
+         */
         function runAnimation() {
-            console.log("SYNC ANIMATION: runAnimation() called."); // LOG
+            console.log("SYNC ANIMATION (Updated HTML): runAnimation() called.");
             if (!animationElement) {
-                console.error("SYNC ANIMATION ERROR: Animation element 'cmd-animation' not found in runAnimation.");
+                console.error("SYNC ANIMATION ERROR (Updated HTML): Animation element 'cmd-animation' not found in runAnimation.");
                 return;
             }
             if (allAnimationFrames.length === 0) {
-                console.error("SYNC ANIMATION ERROR: Animation frames are empty. Cannot play animation.");
-                animationElement.textContent = "Error: No frames.";
+                console.error("SYNC ANIMATION ERROR (Updated HTML): Animation frames are empty. Cannot play animation.");
+                animationElement.textContent = "Error: No frames generated.";
                 return;
             }
 
+            // Clear any existing interval to prevent multiple loops if re-initialized
+            if (animationIntervalId) {
+                clearInterval(animationIntervalId);
+            }
+
             animationIntervalId = setInterval(() => {
                 if (allAnimationFrames[currentFrameIndex]) {
                     animationElement.textContent = allAnimationFrames[currentFrameIndex];
                 }
                 currentFrameIndex++;
                 if (currentFrameIndex >= allAnimationFrames.length) {
-                    currentFrameIndex = 0; // Loop animation
+                    currentFrameIndex = 0; // Loop the animation
                 }
             }, frameDuration);
-            console.log("SYNC ANIMATION: Animation interval started."); // LOG
+            console.log("SYNC ANIMATION (Updated HTML): Animation interval started.");
         }
-        
+
+        /**
+         * Initializes the animation: generates frames and starts playback.
+         */
         function initializeAnimation() {
-            console.log("SYNC ANIMATION: initializeAnimation() called."); // LOG
+            console.log("SYNC ANIMATION (Updated HTML): initializeAnimation() called.");
             if (!animationElement) {
-                console.warn("SYNC ANIMATION WARNING: Animation element not ready yet in initializeAnimation.");
-                // It might be too early, try again shortly
-                // setTimeout(initializeAnimation, 100); // Be careful with recursive setTimeout
-                return; 
+                // This is a fallback; DOMContentLoaded should prevent this.
+                // If it still happens, the element might not be in the DOM when script runs.
+                console.warn("SYNC ANIMATION WARNING (Updated HTML): Animation element not ready yet in initializeAnimation. Will retry shortly...");
+                setTimeout(initializeAnimation, 50); // Retry after a short delay
+                return;
             }
+            animationElement.textContent = "Initializing frames..."; // Provide feedback
+
             try {
-                console.log("SYNC ANIMATION: Attempting to generate frames..."); // LOG
-                allAnimationFrames = generateAnimationFrames(); 
-                if (allAnimationFrames.length > 0 && animationElement) {
-                    animationElement.textContent = allAnimationFrames[0]; 
-                    console.log("SYNC ANIMATION: First frame set. Calling runAnimation()."); // LOG
-                    runAnimation();
-                } else if (animationElement) {
+                console.log("SYNC ANIMATION (Updated HTML): Attempting to generate frames...");
+                allAnimationFrames = generateAnimationFrames(); // Generate all frames
+                if (allAnimationFrames.length > 0) {
+                    animationElement.textContent = allAnimationFrames[0]; // Display the first frame
+                    console.log("SYNC ANIMATION (Updated HTML): First frame set. Calling runAnimation().");
+                    runAnimation(); // Start the animation loop
+                } else {
                     animationElement.textContent = "Error: Could not generate animation frames.";
-                    console.error("SYNC ANIMATION ERROR: Could not generate frames or animationElement is null."); // LOG
+                    console.error("SYNC ANIMATION ERROR (Updated HTML): Could not generate frames (frames array is empty).");
                 }
             } catch (error) {
-                console.error("SYNC ANIMATION ERROR: Error during animation generation or initial play:", error); // LOG
-                if(animationElement) animationElement.textContent = "Error initializing: " + error.message;
+                console.error("SYNC ANIMATION ERROR (Updated HTML): Error during animation generation or initial play:", error);
+                if(animationElement) animationElement.textContent = "Error initializing animation: " + error.message;
             }
         }
-        
-        console.log("SYNC ANIMATION: Adding DOMContentLoaded listener."); // LOG
-        if (document.readyState === "complete" || document.readyState === "interactive") {
-            console.log("SYNC ANIMATION: DOM already loaded or interactive. Calling initializeAnimation via setTimeout."); // LOG
-            setTimeout(initializeAnimation, 0); 
-        } else {
-            console.log("SYNC ANIMATION: DOM not yet loaded. Adding event listener for DOMContentLoaded."); // LOG
+
+        // --- Script Entry Point ---
+        console.log("SYNC ANIMATION (Updated HTML): Adding DOMContentLoaded listener or initializing directly.");
+
+        // Wait for the DOM to be fully loaded before initializing the animation
+        if (document.readyState === "loading") {  // Document is still loading
             document.addEventListener('DOMContentLoaded', () => {
-                console.log("SYNC ANIMATION: DOMContentLoaded event fired."); // LOG
+                console.log("SYNC ANIMATION (Updated HTML): DOMContentLoaded event fired.");
                 initializeAnimation();
             });
+        } else {  // Document has already loaded (interactive or complete)
+            console.log("SYNC ANIMATION (Updated HTML): DOM already loaded or interactive. Calling initializeAnimation via setTimeout.");
+            // Use setTimeout to ensure this runs after the current script block and DOM is settled.
+            setTimeout(initializeAnimation, 0);
         }
 
+        // Cleanup when the page (or iframe content) is unloaded
         window.addEventListener('unload', () => {
-            console.log("SYNC ANIMATION: Unload event. Clearing interval."); // LOG
+            console.log("SYNC ANIMATION (Updated HTML): Unload event. Clearing interval.");
             if (animationIntervalId) {
                 clearInterval(animationIntervalId);
             }
         });
-        console.log("SYNC ANIMATION: Script execution finished."); // LOG
+
+        console.log("SYNC ANIMATION (Updated HTML): Script execution finished.");
+        // --- End of Script ---
     </script>
 </body>
 </html>