87 lines
1.8 KiB
Vue
87 lines
1.8 KiB
Vue
<template>
|
|
<div class="home">
|
|
<IntervalInput
|
|
:interval="interval"
|
|
:editable="timeState === 'stopped'"
|
|
@update="(int) => (interval = int)"
|
|
/>
|
|
<section class="developers">
|
|
<DevSession
|
|
position="1"
|
|
:is-turn="isProgrammer1Turn"
|
|
:session="session"
|
|
/>
|
|
<DevSession
|
|
position="2"
|
|
:is-turn="!isProgrammer1Turn"
|
|
: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="clear">arrêter</button>
|
|
</div>
|
|
<ChilledMusic :play="timeState === 'started'" @pause="clear" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onUnmounted } from '@vue/composition-api'
|
|
import { useTimer } from '@/hooks/useTimer'
|
|
import DevSession from '@/components/DevSession.vue'
|
|
import ChilledMusic from '@/components/ChilledMusic.vue'
|
|
import IntervalInput from '@/components/IntervalInput.vue'
|
|
|
|
export default defineComponent({
|
|
name: 'Home',
|
|
components: {
|
|
DevSession,
|
|
ChilledMusic,
|
|
IntervalInput
|
|
},
|
|
setup() {
|
|
const {
|
|
interval,
|
|
start,
|
|
clear,
|
|
timeState,
|
|
time,
|
|
session,
|
|
isProgrammer1Turn
|
|
} = useTimer()
|
|
|
|
onUnmounted(clear)
|
|
|
|
return {
|
|
interval,
|
|
start,
|
|
clear,
|
|
timeState,
|
|
time,
|
|
session,
|
|
isProgrammer1Turn
|
|
}
|
|
}
|
|
})
|
|
</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;
|
|
}
|
|
|
|
.global-time {
|
|
font-size: calc(3em + 10vw);
|
|
}
|
|
</style>
|