From e6f1f6c4ef7d5492a8ead21c92375d0ed749c422 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Mon, 22 Jun 2020 00:26:40 -0400
Subject: [PATCH] reinitialize grid on window resize

---
 content/hypno/hex/hex.js | 78 +++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/content/hypno/hex/hex.js b/content/hypno/hex/hex.js
index 0994515..ff298cd 100644
--- a/content/hypno/hex/hex.js
+++ b/content/hypno/hex/hex.js
@@ -1,8 +1,6 @@
 var grid = document.getElementById("grid");
 
 var cellsize = 60;
-var width = Math.ceil(window.innerWidth / cellsize) + 1;
-var height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2));
 
 function xCoord(i, j) {
     var x = i + j/2;
@@ -16,28 +14,53 @@ function yCoord(i, j) {
     return Math.sqrt(3)*j/2;
 }
 
-var cells = new Array(width);
-for (var i = 0; i < width; ++i) {
-    cells[i] = new Array(height);
-    for (var j = 0; j < height; ++j) {
-        cells[i][j] = document.createElement("div");
-        cells[i][j].classList.add("cell");
-        cells[i][j].classList.add("alive");
+var width;
+var height;
+var cells;
 
-        spiral = document.createElement("img");
-        spiral.classList.add("spiral");
-        spiral.src = "spiral.svg";
-        cells[i][j].appendChild(spiral);
+function initialize() {
+    width = Math.ceil(window.innerWidth / cellsize) + 1;
+    height = Math.ceil(window.innerHeight / (cellsize*Math.sqrt(3)/2)) + 1;
 
-        hex = document.createElement("img");
-        hex.classList.add("hex");
-        hex.src = "hex.svg";
-        cells[i][j].appendChild(hex);
+    cells = new Array(width);
+    for (var i = 0; i < width; ++i) {
+        cells[i] = new Array(height);
+        for (var j = 0; j < height; ++j) {
+            cells[i][j] = document.createElement("div");
+            cells[i][j].classList.add("cell");
+            cells[i][j].classList.add("alive");
 
-        cells[i][j].style.position = "absolute";
-        cells[i][j].style.left = xCoord(i, j)*cellsize + "px";
-        cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px";
-        grid.appendChild(cells[i][j]);
+            spiral = document.createElement("img");
+            spiral.classList.add("spiral");
+            spiral.src = "spiral.svg";
+            cells[i][j].appendChild(spiral);
+
+            hex = document.createElement("img");
+            hex.classList.add("hex");
+            hex.src = "hex.svg";
+            cells[i][j].appendChild(hex);
+
+            cells[i][j].style.position = "absolute";
+            cells[i][j].style.left = xCoord(i, j)*cellsize + "px";
+            cells[i][j].style.bottom = yCoord(i, j)*cellsize + "px";
+            grid.appendChild(cells[i][j]);
+        }
+    }
+
+    for (var i = 0; i < width; ++i) {
+        for (var j = 0; j < height; ++j) {
+            if (Math.floor(Math.random()*2) === 0) {
+                kill(i, j);
+            }
+        }
+    }
+}
+
+function cleanup() {
+    for (var i = width - 1; i >= 0; --i) {
+        for (var j = height - 1; j >= 0; --j) {
+            grid.removeChild(cells[i][j]);
+        }
     }
 }
 
@@ -197,13 +220,7 @@ function prestonStep() {
     }
 }
 
-for (var i = 0; i < width; ++i) {
-    for (var j = 0; j < height; ++j) {
-        if (Math.floor(Math.random()*2) === 0) {
-            kill(i, j);
-        }
-    }
-}
+initialize();
 
 setInterval(prestonStep, 1000);
 
@@ -213,3 +230,8 @@ window.onclick = function () {
     document.getElementById("controls").style.display = showControls ? "none" : "block";
     showControls = !showControls;
 }
+
+window.addEventListener('resize', function(event){
+    cleanup();
+    initialize();
+});