Refactor treasure map block... again

guilhermesimoes · Oct 18, 2023 · 70b151a · 70b151a
1 parent 5994109
commit 70b151a
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/assets/blocks/animating-a-pirate-treasure-map-path.html b/assets/blocks/animating-a-pirate-treasure-map-path.html
@@ -57,6 +57,26 @@
 var lineLength = line.getTotalLength();
 var numDashes = 14;
 
+function handleClick(event) {
+  reset();
+
+  switch(event.target.value) {
+    case "continuous-line":
+      animate(animatedLine, "ease");
+      break;
+
+    case "continuous-dashes":
+      makeLineDashed();
+      animate(animatedLineMask, "linear");
+      break;
+
+    case "dash-by-dash":
+      makeLineDashed();
+      animate(animatedLineMask, `steps(${numDashes}, jump-start)`);
+      break;
+  }
+}
+
 function animate(el, transitionFn) {
   el.style.strokeDashoffset = lineLength;
   el.style.strokeDasharray = lineLength;
@@ -69,24 +89,8 @@
   }, 10);
 }
 
-function handleClick(event) {
-  reset();
-
-  var button = event.target;
-  if (button.value === "continuous-line") {
-    animate(animatedLine, "ease");
-  } else {
-    // Make line dashed
-    animatedLine.style.strokeDasharray = lineLength / (numDashes * 2 - 1);
-
-    var transitionFn;
-    if (button.value === "dash-by-dash") {
-      transitionFn = `steps(${numDashes}, jump-start)`;
-    } else {
-      transitionFn = "linear";
-    }
-    animate(animatedLineMask, transitionFn);
-  }
+function makeLineDashed() {
+  animatedLine.style.strokeDasharray = lineLength / (numDashes * 2 - 1);
 }
 
 function reset() {