155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<template>
|
|
<div class="home">
|
|
<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 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'
|
|
|
|
type Stopwatch = 'stopped' | 'started'
|
|
const INTERVAL = 120
|
|
|
|
export default defineComponent({
|
|
name: 'Home',
|
|
components: {
|
|
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!`)
|
|
}
|
|
}, 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>
|