From 14dc5f251ec9597bd1df9b6659ebd3511a852a6a Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sat, 4 Jul 2020 22:57:38 +0200
Subject: [PATCH] :sparkles: (interval) new way to set interval time

---
 src/components/IntervalInput.vue | 53 ++++++++++++++++++++++++++++++++
 src/styles/app.scss              |  6 ----
 src/views/Home.vue               | 22 +++++--------
 3 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 src/components/IntervalInput.vue

diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
new file mode 100644
index 0000000..8293194
--- /dev/null
+++ b/src/components/IntervalInput.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="interval-input">
+    <button v-show="editable" @click="minus">-</button>
+    <h3>{{ interval }} {{ label }}</h3>
+    <button v-show="editable" @click="plus">+</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api'
+
+const MIN_INTERVAL = 1
+
+export default defineComponent({
+  name: 'IntervalInput',
+  props: {
+    editable: { type: Boolean, required: true },
+    interval: { type: Number, required: true }
+  },
+  setup(props, { emit }) {
+    const minus = () => {
+      if (props.interval > MIN_INTERVAL) {
+        emit('update', props.interval - 1)
+      }
+    }
+    const plus = () => {
+      emit('update', props.interval + 1)
+    }
+
+    const label = computed(() =>
+      props.interval > MIN_INTERVAL ? 'minutes' : 'minute'
+    )
+
+    return {
+      minus,
+      plus,
+      label
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.interval-input {
+  margin: 0 auto;
+  max-width: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 6e25c74..715a558 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -32,9 +32,3 @@ button:focus {
 button:active {
   transform: scale(0.99);
 }
-
-input {
-  padding: 0.5rem;
-  text-align: center;
-  border-radius: 0.5rem;
-}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 33666fd..245e92e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,24 +1,16 @@
 <template>
   <div class="home">
+    <IntervalInput
+      :interval="interval"
+      :editable="timeState === 'stopped'"
+      @update="(int) => (interval = int)"
+    />
     <section class="developers">
       <DreamMaker
         position="1"
         :is-turn="isProgrammer1Turn"
         :session="session"
       />
-      <div v-if="timeState === 'stopped'">
-        <input
-          id="interval"
-          name="interval"
-          placeholder="intervale"
-          v-model.number="interval"
-          type="number"
-          step="1"
-          min="1"
-          @keypress.enter="start"
-        />
-        minutes
-      </div>
       <DreamMaker
         position="2"
         :is-turn="!isProgrammer1Turn"
@@ -39,12 +31,14 @@ import { defineComponent, onUnmounted } from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
 import DreamMaker from '@/components/DreamMaker.vue'
 import ChilledMusic from '@/components/ChilledMusic.vue'
+import IntervalInput from '@/components/IntervalInput.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
     DreamMaker,
-    ChilledMusic
+    ChilledMusic,
+    IntervalInput
   },
   setup() {
     const {