✨ (timer) add input to select interval duration

src/views/Home.vue

@@ -13,6 +13,16 @@
       />
     </section>
     <div class="global-time">{{ time }}</div>
+    <div v-if="timeState === 'stopped'">
+      <label for="interval">Interval: </label>
+      <input
+        id="interval"
+        name="interval"
+        v-model.number="interval"
+        type="number"
+        step="1"
+      />
+    </div>
     <div class="actions">
       <button v-if="timeState === 'stopped'" @click="start">play</button>
       <button v-if="timeState === 'started'" @click="stop">stop</button>
@@ -38,7 +48,6 @@ import DreamMaker from '@/components/DreamMaker.vue'
 import { notify } from '@/utils/notification'
 
 type Stopwatch = 'stopped' | 'started'
-const INTERVAL = 120
 
 export default defineComponent({
   name: 'Home',
@@ -47,6 +56,10 @@ export default defineComponent({
   },
   setup() {
     let chilledcow: HTMLVideoElement | null = null
+    const interval = ref(5)
+    const intervalSeconds = computed(() => {
+      return interval.value * 60
+    })
     let stopwatchId: number | null = null
     const isProgrammer1Turn = ref(true)
     let stopWatchSessionId: number | null = null
@@ -57,7 +70,7 @@ export default defineComponent({
 
       return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
     })
-    const sessionSeconds = ref(INTERVAL)
+    const sessionSeconds = ref(interval.value * 60)
     const session = computed(() => {
       const m = Math.floor(sessionSeconds.value / 60)
       const s = sessionSeconds.value % 60
@@ -71,8 +84,8 @@ export default defineComponent({
 
       stopwatchId = setInterval(() => {
         seconds.value++
-        if (seconds.value % INTERVAL === 0) {
-          sessionSeconds.value = INTERVAL
+        if (seconds.value % intervalSeconds.value === 0) {
+          sessionSeconds.value = intervalSeconds.value
           isProgrammer1Turn.value = !isProgrammer1Turn.value
 
           const programmer = isProgrammer1Turn.value
@@ -102,7 +115,7 @@ export default defineComponent({
         clearInterval(stopWatchSessionId)
       }
       seconds.value = 0
-      sessionSeconds.value = INTERVAL
+      sessionSeconds.value = intervalSeconds.value
     }
 
     onUnmounted(clear)
@@ -123,6 +136,7 @@ export default defineComponent({
     })
 
     return {
+      interval,
       start,
       stop,
       timeState,