binome/src/views/Home.vue

<template>
  <div class="home">
    <IntervalInput :editable="timeState === 'stopped'" />
    <section class="developers">
      <DevSession
        class="dev-session"
        position="1"
        :is-turn="isDev1Turn"
        :session="session"
      />
      <DevSession
        class="dev-session"
        position="2"
        :is-turn="!isDev1Turn"
        :session="session"
      />
    </section>
    <div class="global-time">{{ time }}</div>
    <div class="actions">
      <button @click="toggle">
        <transition name="fade" mode="out-in">
          <img
            key="play"
            v-if="timeState === 'stopped'"
            src="@/assets/play.svg"
            alt="play"
            width="50px"
            height="50px"
          />
          <img
            key="pause"
            v-if="timeState === 'started'"
            src="@/assets/pause.svg"
            alt="pause"
            width="50px"
            height="50px"
          />
        </transition>
      </button>
      <button @click="clear">
        <img src="@/assets/stop.svg" alt="stop" width="50px" height="50px" />
      </button>
    </div>
    <ZoneMusic
      class="music"
      :play="timeState === 'started'"
      @play="start"
      @pause="pause"
    />
    <footer>
      Made by
      <a
        href="https://github.com/jcalixte"
        target="_blank"
        rel="noopener noreferrer"
        >juju</a
      >. Chill with
      <a
        href="https://www.youtube.com/watch?v=5qap5aO4i9A"
        target="_blank"
        rel="noopener noreferrer"
        >chilled cow</a
      >.
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { useTimer } from '@/hooks/useTimer'
import DevSession from '@/components/DevSession.vue'
import ZoneMusic from '@/components/ZoneMusic.vue'
import IntervalInput from '@/components/IntervalInput.vue'

export default defineComponent({
  name: 'Home',
  components: {
    DevSession,
    ZoneMusic,
    IntervalInput
  },
  setup() {
    const {
      interval,
      start,
      pause,
      clear,
      timeState,
      time,
      session,
      isDev1Turn
    } = useTimer()

    const toggle = () => {
      timeState.value === 'stopped' ? start() : pause()
    }

    return {
      interval,
      toggle,
      start,
      pause,
      clear,
      timeState,
      time,
      session,
      isDev1Turn
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/styles/variables';

.home {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
}

.developers {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .dev-session {
    flex: 1;
  }
}

.actions {
  display: flex;
  justify-content: center;

  button {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.global-time {
  font-size: calc(3em + 10vw);
}

.music {
  margin: 1rem 0;
}

footer {
  justify-self: flex-end;
  font-family: $serif-font-family;
  font-style: italic;
  font-size: 1rem;
}
</style>