🎉

src/views/Home.vue

@@ -1,18 +1,156 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <section class="brogrammers">
+      <DreamMaker
+        position="1"
+        :is-turn="isProgrammer1Turn"
+        :session="session"
+      />
+      <DreamMaker
+        position="2"
+        :is-turn="!isProgrammer1Turn"
+        :session="session"
+      />
+    </section>
+    <div class="global-time">{{ time }}</div>
+    <div class="actions">
+      <button v-if="timeState === 'stopped'" @click="start">play</button>
+      <button v-if="timeState === 'started'" @click="stop">stop</button>
+    </div>
+    <youtube-video
+      v-show="false"
+      src="https://www.youtube-nocookie.com/embed/5qap5aO4i9A"
+    />
   </div>
 </template>
 
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+<script lang="ts">
+import 'youtube-video-js'
+import {
+  ref,
+  watchEffect,
+  defineComponent,
+  onMounted,
+  computed,
+  onUnmounted
+} from '@vue/composition-api'
+import DreamMaker from '@/components/DreamMaker.vue'
+import { notify } from '@/utils/notification'
 
-export default {
-  name: "Home",
+const moveSound = new Audio(require('@/assets/sounds/move.mp3'))
+type Stopwatch = 'stopped' | 'started'
+const INTERVAL = 120
+
+export default defineComponent({
+  name: 'Home',
   components: {
-    HelloWorld
+    DreamMaker
+  },
+  setup() {
+    let chilledcow: HTMLVideoElement | null = null
+    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)
+    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 % INTERVAL === 0) {
+          sessionSeconds.value = INTERVAL
+          isProgrammer1Turn.value = !isProgrammer1Turn.value
+
+          const programmer = isProgrammer1Turn.value
+            ? 'Programmer 1'
+            : 'Programmer 2'
+
+          notify(`Time to change, ${programmer}, your turn!`)
+          moveSound.play()
+        }
+      }, 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 = INTERVAL
+    }
+
+    onUnmounted(clear)
+
+    watchEffect(() => {
+      switch (timeState.value) {
+        case 'started':
+          if (chilledcow) {
+            chilledcow.play()
+          }
+          break
+        case 'stopped':
+          if (chilledcow) {
+            chilledcow.pause()
+          }
+          clear()
+      }
+    })
+
+    return {
+      start,
+      stop,
+      timeState,
+      time,
+      session,
+      isProgrammer1Turn
+    }
   }
-};
+})
 </script>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.brogrammers {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.global-time {
+  font-size: 80pt;
+  padding: 1rem;
+}
+</style>