Very basic workout player

assets/css/main.css

@@ -19,6 +19,12 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
     --font-weight-bold: 700;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
@@ -956,18 +962,15 @@
     justify-content: flex-end;
     gap: calc(0.25rem * 2);
   }
-  .mt-2 {
-    margin-top: calc(var(--spacing) * 2);
-  }
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .fieldset-legend {
     margin-bottom: calc(0.25rem * -1);
     display: flex;
@@ -1028,12 +1031,12 @@
     width: 1.6em;
     height: 1.6em;
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
   .h-\[1\.2em\] {
     height: 1.2em;
   }
-  .h-\[92px\] {
-    height: 92px;
-  }
   .h-full {
     height: 100%;
   }
@@ -1049,15 +1052,9 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
-  .w-\[1\.5em\] {
-    width: 1.5em;
-  }
   .w-\[1\.6em\] {
     width: 1.6em;
   }
-  .w-\[1\.7em\] {
-    width: 1.7em;
-  }
   .w-full {
     width: 100%;
   }
@@ -1098,6 +1095,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1139,10 +1139,28 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .text-center {
+    text-align: center;
+  }
+  .text-right {
+    text-align: right;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1159,6 +1177,9 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
   .opacity-50 {
     opacity: 50%;
   }

assets/js/play.js

@@ -0,0 +1,63 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('exercisePlayer', () => {
+    return {
+      timer: null,
+      counter: 0,
+      timeLeft: 0,
+      currentPosition: 0,
+      exercises: [],
+      isPaused: false,
+      init() {
+        this.exercises = window.exerciseData;
+      },
+      start() {
+        if (!this.isPaused) {
+          this.timeLeft = this.exercises[this.currentPosition].time;
+          this.counter = 0;
+        }
+
+        this.timer = setInterval(() => {
+          if (this.timeLeft === 0) {
+            this.next()
+          };
+        
+          this.counter++;
+          this.timeLeft--;
+        }, 1000);
+      },
+      destroy() {
+          // Detach the handler, avoiding memory and side-effect leakage
+          if (this.timer) {
+            clearInterval(this.timer);
+          }
+
+          if (!this.isPaused) {
+            this.counter = 0;
+            this.timeLeft = 0;
+          }
+      },
+      next() {
+        this.destroy()
+        this.currentPosition++;
+
+        if (this.exercises[this.currentPosition].exercise_type === "Time") {
+          this.start()
+        }
+      },
+      previous() {
+        this.destroy();
+        this.currentPosition--;
+      },
+
+      pause() {
+        if (this.isPaused) {
+          this.start();
+          this.isPaused = false;
+        } else {
+          this.isPaused = true;
+          this.destroy()
+        }
+      }
+    }
+  })
+})