From 6c1354db103569d3193d5fe160a983dc7d73d908 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Sun, 5 Jul 2020 18:32:29 +0200
Subject: [PATCH] :recycle: (dev session) renaming component

---
 doc/details.md                                |  2 ++
 .../{DreamMaker.vue => DevSession.vue}        |  6 ++---
 src/views/Home.vue                            | 26 ++++++++++++++-----
 3 files changed, 24 insertions(+), 10 deletions(-)
 rename src/components/{DreamMaker.vue => DevSession.vue} (87%)

diff --git a/doc/details.md b/doc/details.md
index a11db6f..1449a3b 100644
--- a/doc/details.md
+++ b/doc/details.md
@@ -1 +1,3 @@
 # Les étapes de codes
+
+1.
diff --git a/src/components/DreamMaker.vue b/src/components/DevSession.vue
similarity index 87%
rename from src/components/DreamMaker.vue
rename to src/components/DevSession.vue
index 1302f15..618d6e1 100644
--- a/src/components/DreamMaker.vue
+++ b/src/components/DevSession.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dream-maker">
+  <div class="dev-session">
     <h2>dev {{ position }}</h2>
     <h4 v-show="isTurn">{{ session }}</h4>
   </div>
@@ -9,7 +9,7 @@
 import { defineComponent } from '@vue/composition-api'
 
 export default defineComponent({
-  name: 'DreamMaker',
+  name: 'DevSession',
   props: {
     position: { type: String, required: true },
     isTurn: { type: Boolean, required: true },
@@ -19,7 +19,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.dream-maker {
+.dev-session {
   h4 {
     font-size: 24pt;
   }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 245e92e..e7488c3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -6,19 +6,19 @@
       @update="(int) => (interval = int)"
     />
     <section class="developers">
-      <DreamMaker
+      <DevSession
         position="1"
         :is-turn="isProgrammer1Turn"
         :session="session"
       />
-      <DreamMaker
+      <DevSession
         position="2"
         :is-turn="!isProgrammer1Turn"
         :session="session"
       />
     </section>
     <div class="global-time">{{ time }}</div>
-    <div class="actions">
+    <div class="actions" v-if="ready">
       <button v-show="timeState === 'stopped'" @click="start">commencer</button>
       <button v-show="timeState === 'started'" @click="clear">arrêter</button>
     </div>
@@ -27,20 +27,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onUnmounted } from '@vue/composition-api'
+import {
+  defineComponent,
+  onUnmounted,
+  ref,
+  onMounted
+} from '@vue/composition-api'
 import { useTimer } from '@/hooks/useTimer'
-import DreamMaker from '@/components/DreamMaker.vue'
+import DevSession from '@/components/DevSession.vue'
 import ChilledMusic from '@/components/ChilledMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
 
 export default defineComponent({
   name: 'Home',
   components: {
-    DreamMaker,
+    DevSession,
     ChilledMusic,
     IntervalInput
   },
   setup() {
+    const ready = ref(false)
+
     const {
       interval,
       start,
@@ -53,6 +60,10 @@ export default defineComponent({
 
     onUnmounted(clear)
 
+    onMounted(() => {
+      ready.value = true
+    })
+
     return {
       interval,
       start,
@@ -60,7 +71,8 @@ export default defineComponent({
       timeState,
       time,
       session,
-      isProgrammer1Turn
+      isProgrammer1Turn,
+      ready
     }
   }
 })