From 264c80f011b671c13a7d94ee6fe7ebbe6dac5e47 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 4 Jul 2020 00:49:31 +0200
Subject: [PATCH] :sparkles: (timer) add input to select interval duration

---
 src/views/Home.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8b25d2b..38c59bb 100644
--- a/src/views/Home.vue
+++ b/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,