feat: join strat/pause button

src/components/Timer.astro

@@ -38,7 +38,6 @@ const { steps } = Astro.props
   </div>
   <div class="control-panel">
     <button class="control-panel--btn" id="startTimer">Start</button>
-    <button class="control-panel--btn" id="stopTimer">Pause</button>
     <button class="control-panel--btn" id="stopBrew">Reset</button>
   </div>
 </div>
@@ -138,6 +137,9 @@ const { steps } = Astro.props
   .control-panel--btn {
     font-size: 16px;
     padding: 8px 14px;
+    border-radius: 4px;
+    border: none;
+    min-width: 100px;
   }
 </style>
 
@@ -160,6 +162,7 @@ const { steps } = Astro.props
   const totalWeightSlot = document.getElementById('totalWeight')
   const nextStepSlot = document.getElementById('nextStep')
   const progressArc = document.getElementById('progressArc')
+  const startTimerBtn = document.getElementById('startTimer')!
 
   const steps: Step[] = root?.dataset.steps
     ? JSON.parse(root.dataset.steps).map((it: Step) => ({
@@ -191,14 +194,24 @@ const { steps } = Astro.props
     progressArc.setAttribute('stroke-dasharray', getDashArray((displayTime / step.time) * 100))
   }
 
+  function toggleTimer() {
+    if (isRunning) {
+      stopTimer()
+    } else {
+      startTimer()
+    }
+  }
+
   function startTimer() {
     isRunning = true
     startTime = performance.now() - elapsedTime
     requestAnimationFrame(updateTimer)
+    startTimerBtn.textContent = 'Pause'
   }
 
   function stopTimer() {
     isRunning = false
+    startTimerBtn.textContent = 'Start'
   }
 
   function resetTimer() {
@@ -229,10 +242,8 @@ const { steps } = Astro.props
     const totalMilliseconds = Math.floor(time)
     const minutes = Math.floor((totalMilliseconds % 3600_000) / 60_000)
     const seconds = Math.floor((totalMilliseconds % 60_000) / 1000)
-    // const milliseconds = totalMilliseconds % 1000;
 
     return pad(minutes) + ':' + pad(seconds)
-    // + ":" + milliseconds.toString().padStart(3, "0");
   }
 
   function getDashArray(percent: number) {
@@ -250,19 +261,12 @@ const { steps } = Astro.props
     resetTimer()
   }
 
-  const startTimerBtn = document.getElementById('startTimer')
-  const stopTimerBtn = document.getElementById('stopTimer')
   const stopBrewBtn = document.getElementById('stopBrew')
 
-  if (startTimerBtn && stopBrewBtn && stopTimerBtn) {
+  if (startTimerBtn && stopBrewBtn) {
     startTimerBtn.addEventListener('click', () => {
-      startTimer()
+      toggleTimer()
     })
-
-    stopTimerBtn.addEventListener('click', () => {
-      stopTimer()
-    })
-
     stopBrewBtn.addEventListener('click', () => {
       stopBrew()
     })