feat: add replay button

duong755 · Dec 28, 2023 · d579c65 · d579c65
1 parent ae08c30
commit d579c65
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 15 deletions.
diff --git a/heighway-dragon.html b/heighway-dragon.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="heighway-drachen"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/heighway-dragon.js b/heighway-dragon.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -10,12 +10,15 @@
     const w = width,
         h = width;
     const ctx = canvas.getContext("2d");
-    ctx.lineWidth = 5;
+    ctx.lineWidth = 4;
 
     for (let iteration = 0; iteration <= 20; iteration++) {
         setTimeout(() => {
             ctx.clearRect(0, 0, w, h);
             drawHeighwayDrachen(ctx, [w / 5, h / 2], [(4 * w) / 5, h / 2], iteration);
         }, iteration * 1000);
     }
-})();
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);
diff --git a/koch-antisnowflake.html b/koch-antisnowflake.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="koch-antisnowflake"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/koch-antisnowflake.js b/koch-antisnowflake.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -28,4 +28,7 @@
             drawKochAntisnowflake(ctx, triangle, iteration);
         }, iteration * 1000);
     }
-})();
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);
diff --git a/koch-curve.html b/koch-curve.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="koch-curve"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/koch-curve.js b/koch-curve.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -17,6 +17,8 @@
             ctx.clearRect(0, 0, w, h);
             drawKochCurve(ctx, [0, 2 * h /3], [w, 2 * h / 3], iteration);
         }, iteration * 1000);
-    }
-
-})();
+    }   
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);
diff --git a/koch-snowflake.html b/koch-snowflake.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="koch-snowflake"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/koch-snowflake.js b/koch-snowflake.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -28,5 +28,7 @@
             drawKochSnowflake(ctx, triangle, iteration);
         }, iteration * 1000);
     }
-})();
+}
 
+draw();
+document.getElementById("replay").addEventListener("click", draw);
diff --git a/minkowski-island.html b/minkowski-island.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="minkowski-insel"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/minkowski-island.js b/minkowski-island.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -25,4 +25,7 @@
             drawMinkowskiInsel(ctx, viereck, iteration);
         }, iteration * 1000);
     }
-})();
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);
diff --git a/minkowski-sausage.html b/minkowski-sausage.html
@@ -10,6 +10,7 @@
 
 <body>
     <div class="container">
+        <button type="button" id="replay">Replay</button>
         <canvas id="minkowski-wurst"></canvas>
     </div>
     <script src="helpers.js"></script>

diff --git a/minkowski-sausage.js b/minkowski-sausage.js
@@ -1,4 +1,4 @@
-(function () {
+function draw () {
     /**
      * @type {HTMLCanvasElement}
      */
@@ -18,4 +18,7 @@
             drawMinkowskiWurst(ctx, [0, h / 2], [w, h / 2], step);
         }, step * 1000);
     }
-})();
+}
+
+draw();
+document.getElementById("replay").addEventListener("click", draw);