feat: Add animation coordinator to manage and pause concurrent animat…

…ions

hugo-site/layouts/shortcodes/small-world-comparison.html

@@ -25,4 +25,5 @@ <h5 class="has-text-centered is-size-5 mb-2">Random Network</h5>
         </div>
     </div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-comparison.js"></script>

hugo-site/layouts/shortcodes/small-world-routing.html

@@ -15,4 +15,5 @@
         <canvas id="networkCanvas2" width="400" height="400" style="max-width: 70%; height: auto;"></canvas>
     </div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-routing.js"></script>

hugo-site/layouts/shortcodes/small-world-scale.html

@@ -19,4 +19,5 @@
     </div>
     <div style="margin-bottom: 2rem;"></div>
 </div>
+<script src="/js/animation-coordinator.js"></script>
 <script src="/js/small-world-scale.js"></script>

hugo-site/static/js/animation-coordinator.js

@@ -0,0 +1,15 @@
+// Global animation coordinator
+const AnimationCoordinator = {
+    activeAnimation: null,
+
+    setActive(name) {
+        if (this.activeAnimation && this.activeAnimation !== name) {
+            // Pause other animations
+            const event = new CustomEvent('pause-other-animations', {
+                detail: { except: name }
+            });
+            document.dispatchEvent(event);
+        }
+        this.activeAnimation = name;
+    }
+};

hugo-site/static/js/small-world-comparison.js

@@ -418,12 +418,29 @@ waitForD3().then(() => {
         }
     }
 
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'comparison' && isPlaying) {
+            isPlaying = false;
+            const btn = document.getElementById('comparisonPlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+        }
+    });
+
     function togglePlayPause() {
         isPlaying = !isPlaying;
         const btn = document.getElementById('comparisonPlayPauseBtn');
         const icon = btn.querySelector('i');
         icon.className = isPlaying ? 'fas fa-pause' : 'fas fa-play';
 
+        if (isPlaying) {
+            AnimationCoordinator.setActive('comparison');
+        }
+
         if (isPlaying) {
             startTime = Date.now();
             simulateRouting();

hugo-site/static/js/small-world-routing.js

@@ -370,6 +370,19 @@ async function initVisualization() {
         draw();
     }
 
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'routing' && isPlaying) {
+            isPlaying = false;
+            const btn = document.getElementById('routingPlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (routeTimeout) clearTimeout(routeTimeout);
+        }
+    });
+
     function togglePlayPause() {
         isPlaying = !isPlaying;
         const btn = document.getElementById('routingPlayPauseBtn');
@@ -378,6 +391,10 @@ async function initVisualization() {
             return;
         }
 
+        if (isPlaying) {
+            AnimationCoordinator.setActive('routing');
+        }
+
         const icon = btn.querySelector('i');
         if (!icon) {
             console.error('Button icon not found');

hugo-site/static/js/small-world-scale.js

@@ -352,12 +352,26 @@ waitForD3().then(() => {
 
     }
 
+    // Listen for pause events from other animations
+    document.addEventListener('pause-other-animations', (event) => {
+        if (event.detail.except !== 'scale' && isSimulating) {
+            isSimulating = false;
+            const btn = document.getElementById('scalePlayPauseBtn');
+            if (btn) {
+                const icon = btn.querySelector('i');
+                if (icon) icon.className = 'fas fa-play';
+            }
+            if (animationFrame) cancelAnimationFrame(animationFrame);
+        }
+    });
+
     function simulate() {
         if (!isSimulating) {
             isSimulating = true;
             const btn = document.getElementById('scalePlayPauseBtn');
             const icon = btn.querySelector('i');
             icon.className = 'fas fa-pause';
+            AnimationCoordinator.setActive('scale');
 
             async function step() {
                 if (!isSimulating) return;