From e336a48fd28b3fad2df15e6f5dd925e178a6b019 Mon Sep 17 00:00:00 2001
From: shoe <shoe@tilde.town>
Date: Sat, 22 Mar 2025 00:28:37 +0000
Subject: [PATCH] Create and destroy walkers with buttons

---
 index.html |  3 +++
 walkers.js | 31 +++++++++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 511d0fe..588e4c9 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,9 @@
   <p>as in i am repeatedly breaking stuff all the time</p>
   <p>code modified from <a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html">https://jackmckew.dev/interactive-random-walkers-with-javascript.html</a></p>
 
+  <button id="button-new-walker">make a new one</button>
+  <button id="button-reset">kill them all :(</button>
+
   <div id="canvas-container">
   <canvas id="walker-canvas"></canvas>
   </div>
diff --git a/walkers.js b/walkers.js
index c3e6798..0c2d723 100644
--- a/walkers.js
+++ b/walkers.js
@@ -1,3 +1,26 @@
+/****************************************************************************
+ * Buttons that interact with the UI                                        *
+ ****************************************************************************/
+
+function create_new_walker() {
+  var my_row = Math.floor(Math.random() * n_rows);
+  var my_col = Math.floor(Math.random() * n_cols);
+  // TODO: CHOOSE COLOR, ONLY DO IT IN SEQUENCE FROM A LIST OF KNOWN-GOOD
+  // COLORS. THE SEQUENCE WILL BE FINE.
+  var my_color = "#FFB000";
+  walkers.push({row: my_row, col: my_col, color: my_color});
+}
+
+function reset() {
+  // kill all the walkers and trails
+  walkers.splice(0, walkers.length);
+  trails.splice(0, trails.length);
+
+  // draw black everywhere on the canvas to hide the dead bodies D:
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+}
+
 /****************************************************************************
  * Functions JS doesn't want you to have, ig                                *
  ****************************************************************************/
@@ -162,6 +185,12 @@ var ctx = canvas.getContext('2d')
 canvas.width  = window.innerWidth;
 canvas.height = window.innerHeight;
 
+// find the UI buttons and give them click handlers to activate
+var reset_btn = document.getElementById("button-reset");
+var new_walker_btn = document.getElementById("button-new-walker");
+reset_btn.addEventListener("click", reset);
+new_walker_btn.addEventListener("click", create_new_walker);
+
 // compute the initial rows and columns
 var cell_size = 22;
 var n_rows = canvas.height.div(cell_size);
@@ -172,8 +201,6 @@ var offset_v = (canvas.height - (cell_size * n_rows)).div(2);
 // set start position of walker and start the random walk
 var walkers = [
   {row: n_rows.div(2), col: n_cols.div(2), color: "#FFB000"},
-  {row: 0, col: 0, color: "#ff0000"},
-  {row: n_rows, col: 0, color: "#00ff00"},
 ];
 trails = []
 init_walk();