89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<div class="home">
|
|
<IntervalInput :editable="timeState === 'stopped'" />
|
|
<section class="developers">
|
|
<DevSession position="1" :is-turn="isDev1Turn" :session="session" />
|
|
<DevSession position="2" :is-turn="!isDev1Turn" :session="session" />
|
|
</section>
|
|
<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>
|
|
<ZoneMusic
|
|
class="music"
|
|
:play="timeState === 'started'"
|
|
@play="start"
|
|
@pause="pause"
|
|
/>
|
|
</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()
|
|
|
|
return {
|
|
interval,
|
|
start,
|
|
pause,
|
|
clear,
|
|
timeState,
|
|
time,
|
|
session,
|
|
isDev1Turn
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.developers {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
button {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.global-time {
|
|
font-size: calc(3em + 10vw);
|
|
}
|
|
|
|
.music {
|
|
margin: 1rem 0;
|
|
}
|
|
</style>
|