✨ (action) add pause button

src/hooks/useTimer.ts

@@ -33,7 +33,7 @@ export const useTimer = () => {
 
   const start = () => {
     timeState.value = 'started'
-    notify('La session commence !')
+    notify(seconds.value ? 'La session reprend !' : 'La session commence !')
 
     stopwatchId = setInterval(() => {
       seconds.value++
@@ -54,7 +54,7 @@ export const useTimer = () => {
     }, 1000)
   }
 
-  const clear = () => {
+  const pause = () => {
     timeState.value = 'stopped'
     if (stopwatchId) {
       clearInterval(stopwatchId)
@@ -64,6 +64,10 @@ export const useTimer = () => {
       clearInterval(stopWatchSessionId)
       stopWatchSessionId = null
     }
+  }
+
+  const clear = () => {
+    pause()
     seconds.value = 0
     sessionSeconds.value = intervalSeconds.value
     isProgrammer1Turn.value = true
@@ -72,6 +76,7 @@ export const useTimer = () => {
   return {
     interval,
     start,
+    pause,
     clear,
     timeState,
     time,

src/views/Home.vue

@@ -20,6 +20,7 @@
     <div class="global-time">{{ time }}</div>
     <div class="actions">
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
+      <button v-show="timeState === 'started'" @click="pause">pause</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
     <div class="music">
@@ -38,7 +39,7 @@
         v-if="hasMusic"
         :play="timeState === 'started'"
         @play="start"
-        @pause="clear"
+        @pause="pause"
       />
     </div>
   </div>
@@ -64,6 +65,7 @@ export default defineComponent({
     const {
       interval,
       start,
+      pause,
       clear,
       timeState,
       time,
@@ -77,6 +79,7 @@ export default defineComponent({
       hasMusic,
       interval,
       start,
+      pause,
       clear,
       timeState,
       time,
@@ -101,6 +104,10 @@ export default defineComponent({
   flex-wrap: wrap;
 }
 
+button {
+  margin: 0 1rem;
+}
+
 .global-time {
   font-size: calc(3em + 10vw);
 }