music: resize wall of text on size changed

templates/partials/music.html

@@ -7,22 +7,33 @@
 <script>
   (function () {
     const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    const container = document.getElementById("bg-text");
-    if (!container) return;
     const colWidth = 20;
     const rowHeight = 24;
-    const cols = Math.ceil(window.innerWidth / colWidth);
+    const container = document.getElementById("bg-text");
-    const rows = Math.ceil(window.innerHeight / rowHeight);
+    if (!container) return;
 
-    for (let c = 0; c < cols; c++) {
+    function build() {
-      const col = document.createElement("vertical-marquee-inner");
+      container.innerHTML = "";
-      col.style.left = c * colWidth + "px";
+      const cols = Math.ceil(window.innerWidth / colWidth);
-      for (let r = 0; r < rows; r++) {
+      const rows = Math.ceil(window.innerHeight / rowHeight);
-        const span = document.createElement("text");
+      for (let c = 0; c < cols; c++) {
-        span.textContent = chars[Math.floor(Math.random() * chars.length)];
+        const col = document.createElement("vertical-marquee-inner");
-        col.appendChild(span);
+        col.style.left = c * colWidth + "px";
+        for (let r = 0; r < rows; r++) {
+          const span = document.createElement("text");
+          span.textContent = chars[Math.floor(Math.random() * chars.length)];
+          col.appendChild(span);
+        }
+        container.appendChild(col);
       }
-      container.appendChild(col);
     }
+
+    let resizeTimer;
+    window.addEventListener("resize", function () {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(build, 150);
+    });
+
+    build();
   })();
 </script>