Fix JS timing: defer DOM access to DOMContentLoaded

Scripts were accessing elements before DOM was ready, causing null errors.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: mschwar

docs/js/simulations.js

@@ -4,22 +4,16 @@
 (function() {
   const FPS = 30;
   const FRAME_TIME = 1000 / FPS;
-
-  // ========== GAME OF LIFE ==========
-  const lifeCanvas = document.getElementById('life-canvas');
-  const lifeCtx = lifeCanvas.getContext('2d');
-  const lifeStartBtn = document.getElementById('life-start');
-  const lifeResetBtn = document.getElementById('life-reset');
-
   const LIFE_GRID_SIZE = 80;
+
+  let lifeCanvas, lifeCtx, lifeStartBtn, lifeResetBtn;
   let lifeGrid, lifeNext, lifeRunning, lifeAnimId, lifeLastTime;
 
   function initLife() {
     lifeCanvas.width = lifeCanvas.offsetWidth;
     lifeCanvas.height = lifeCanvas.offsetHeight;
     lifeGrid = new Uint8Array(LIFE_GRID_SIZE * LIFE_GRID_SIZE);
     lifeNext = new Uint8Array(LIFE_GRID_SIZE * LIFE_GRID_SIZE);
-    // Random seed
     for (let i = 0; i < lifeGrid.length; i++) {
       lifeGrid[i] = Math.random() < 0.3 ? 1 : 0;
     }
@@ -47,10 +41,8 @@
         const idx = y * LIFE_GRID_SIZE + x;
         const neighbors = countNeighbors(x, y);
         if (lifeGrid[idx] === 1) {
-          // Alive: survive with 2-3 neighbors
           lifeNext[idx] = (neighbors === 2 || neighbors === 3) ? 1 : 0;
         } else {
-          // Dead: birth with exactly 3 neighbors
           lifeNext[idx] = (neighbors === 3) ? 1 : 0;
         }
       }
@@ -83,31 +75,34 @@
     lifeAnimId = requestAnimationFrame(loopLife);
   }
 
-  lifeStartBtn.addEventListener('click', () => {
-    if (lifeRunning) {
+  window.addEventListener('DOMContentLoaded', () => {
+    lifeCanvas = document.getElementById('life-canvas');
+    lifeCtx = lifeCanvas.getContext('2d');
+    lifeStartBtn = document.getElementById('life-start');
+    lifeResetBtn = document.getElementById('life-reset');
+
+    lifeStartBtn.addEventListener('click', () => {
+      if (lifeRunning) {
+        lifeRunning = false;
+        lifeStartBtn.textContent = 'Start';
+      } else {
+        lifeRunning = true;
+        lifeStartBtn.textContent = 'Pause';
+        lifeAnimId = requestAnimationFrame(loopLife);
+      }
+    });
+
+    lifeResetBtn.addEventListener('click', () => {
       lifeRunning = false;
       lifeStartBtn.textContent = 'Start';
-    } else {
-      lifeRunning = true;
-      lifeStartBtn.textContent = 'Pause';
-      lifeAnimId = requestAnimationFrame(loopLife);
-    }
-  });
-
-  lifeResetBtn.addEventListener('click', () => {
-    lifeRunning = false;
-    lifeStartBtn.textContent = 'Start';
-    cancelAnimationFrame(lifeAnimId);
-    initLife();
-  });
+      cancelAnimationFrame(lifeAnimId);
+      initLife();
+    });
 
-  // Initialize on load
-  window.addEventListener('load', () => {
     initLife();
   });
 
-  // Handle resize
   window.addEventListener('resize', () => {
-    initLife();
+    if (lifeCanvas) initLife();
   });
 })();

docs/js/tutorial.js

@@ -140,7 +140,7 @@
   lifeClearBtn.addEventListener('click', clearLife);
 
   // Initialize both grids on load
-  window.addEventListener('load', () => {
+  window.addEventListener('DOMContentLoaded', () => {
     buildAntGrid();
     buildLifeGrid();
   });