3 files changed, 19 insertions(+), 5 deletions(-)

M hitomezashi.js
M index.html
M style.css

@@ 6,10 6,7 @@ const canvas = document.getElementById("canvas")
 const xInput = document.getElementById("x-input")
 const yInput = document.getElementById("y-input")
 const zInput = document.getElementById("z-input")
-
-xInput.value = randomString()
-yInput.value = randomString()
-zInput.value = randomString()
+const randomizeButton = document.getElementById("randomize")
 
 const ctx = canvas.getContext("2d")
 const offsetChars = new Set(["a", "e", "i", "o", "u", "1", "3", "5", "7", "9"])


@@ 22,8 19,9 @@ zInput.addEventListener("input", draw)
 dim2.addEventListener("input", draw)
 dim3.addEventListener("input", draw)
 canvas.addEventListener("click", timedFill)
+randomizeButton.addEventListener("click", randomize)
 
-draw()
+randomize()
 
 function clear() {
   ctx.clearRect(0, 0, canvas.width, canvas.height)


@@ 34,6 32,13 @@ function resize() {
   canvas.height = canvas.clientHeight
 }
 
+function randomize() {
+  xInput.value = randomString()
+  yInput.value = randomString()
+  zInput.value = randomString()
+  draw()
+}
+
 function draw() {
   clear()
   resize()

@@ 34,6 34,10 @@
       <li>Click to color in areas</li>
       <li>Inspired by <a href="https://www.youtube.com/watch?v=JbfhzlMk2eY">this video</a></li>
     </ul>
+    <div class="space-between">
+      <button id="randomize">Randomize</button>
+      <a href="https://git.sr.ht/~ihabunek/hitomezashi">Source</a>
+    </div>
   </div>
   <canvas id="canvas"></canvas>
 </body>

@@ 72,3 72,8 @@ li {
 .mt-2 {
   margin-top: 8px
 }
+
+.space-between {
+  display: flex;
+  justify-content: space-between;
+}