♻️ (timer) break into more pieces the hook useTimer

src/views/Home.vue

@@ -1,11 +1,24 @@
 <template>
   <div class="home">
-    <section class="brogrammers">
+    <section class="developers">
       <DreamMaker
         position="1"
         :is-turn="isProgrammer1Turn"
         :session="session"
       />
+      <div v-if="timeState === 'stopped'">
+        <label for="interval">intervale : </label>
+        <input
+          id="interval"
+          name="interval"
+          v-model.number="interval"
+          type="number"
+          step="1"
+          min="1"
+          @keypress.enter="start"
+        />
+        minutes
+      </div>
       <DreamMaker
         position="2"
         :is-turn="!isProgrammer1Turn"
@@ -13,132 +26,43 @@
       />
     </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>
+      <button v-show="timeState === 'stopped'" @click="start">commencer</button>
+      <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
-    <youtube-video
-      v-show="false"
-      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
-    />
+    <ChilledMusic :play="timeState === 'started'" />
   </div>
 </template>
 
 <script lang="ts">
-import 'youtube-video-js'
-import {
-  ref,
-  watchEffect,
-  defineComponent,
-  onMounted,
-  computed,
-  onUnmounted
-} from '@vue/composition-api'
+import { defineComponent, onUnmounted } from '@vue/composition-api'
+import { useTimer } from '@/hooks/useTimer'
 import DreamMaker from '@/components/DreamMaker.vue'
-import { notify } from '@/utils/notification'
-
-type Stopwatch = 'stopped' | 'started'
+import ChilledMusic from '@/components/ChilledMusic.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
-    DreamMaker
+    DreamMaker,
+    ChilledMusic
   },
   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
-    const seconds = ref(0)
-    const time = computed(() => {
-      const m = Math.floor(seconds.value / 60)
-      const s = seconds.value % 60
-
-      return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-    })
-    const sessionSeconds = ref(interval.value * 60)
-    const session = computed(() => {
-      const m = Math.floor(sessionSeconds.value / 60)
-      const s = sessionSeconds.value % 60
-
-      return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
-    })
-    const timeState = ref<Stopwatch>('stopped')
-    const start = () => {
-      timeState.value = 'started'
-      notify('Session started!')
-
-      stopwatchId = setInterval(() => {
-        seconds.value++
-        if (seconds.value % intervalSeconds.value === 0) {
-          sessionSeconds.value = intervalSeconds.value
-          isProgrammer1Turn.value = !isProgrammer1Turn.value
-
-          const programmer = isProgrammer1Turn.value
-            ? 'Programmer 1'
-            : 'Programmer 2'
-
-          notify('Time to change', { body: `${programmer}, your turn!` })
-        }
-      }, 1000)
-      stopWatchSessionId = setInterval(() => {
-        sessionSeconds.value--
-      }, 1000)
-    }
-    const stop = () => {
-      timeState.value = 'stopped'
-    }
-
-    onMounted(() => {
-      chilledcow = document.querySelector('youtube-video')
-    })
-
-    const clear = () => {
-      if (stopwatchId) {
-        clearInterval(stopwatchId)
-      }
-      if (stopWatchSessionId) {
-        clearInterval(stopWatchSessionId)
-      }
-      seconds.value = 0
-      sessionSeconds.value = intervalSeconds.value
-    }
+    const {
+      interval,
+      start,
+      clear,
+      timeState,
+      time,
+      session,
+      isProgrammer1Turn
+    } = useTimer()
 
     onUnmounted(clear)
 
-    watchEffect(() => {
-      switch (timeState.value) {
-        case 'started':
-          if (chilledcow) {
-            chilledcow.play()
-          }
-          break
-        case 'stopped':
-          if (chilledcow) {
-            chilledcow.pause()
-          }
-          clear()
-      }
-    })
-
     return {
       interval,
       start,
-      stop,
+      clear,
       timeState,
       time,
       session,
@@ -155,7 +79,8 @@ export default defineComponent({
   flex-direction: column;
   justify-content: space-around;
 }
-.brogrammers {
+
+.developers {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
@@ -163,6 +88,5 @@ export default defineComponent({
 
 .global-time {
   font-size: calc(3em + 10vw);
-  padding: 1rem;
 }
 </style>