69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
|
<div id="app">
|
|
<p class="error" v-if="wakeLockAvailable == false">Wake lock not available</p>
|
|
<Settings v-if="time == 0" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
|
|
<Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Settings from './components/Settings.vue'
|
|
import Timer from './components/Timer.vue'
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
Timer,
|
|
Settings
|
|
},
|
|
data: function() {
|
|
return {
|
|
time: 0,
|
|
playsound: false,
|
|
wakeLockAvailable: this.hasWakeLock()
|
|
}
|
|
},
|
|
methods: {
|
|
setTime(number) {
|
|
this.time = number;
|
|
},
|
|
setPlaySound(state) {
|
|
this.playsound = state;
|
|
},
|
|
hasWakeLock() {
|
|
if ('wakeLock' in navigator) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
html, body {
|
|
background-image: url("~@/img/background.png");
|
|
background-size: cover;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
#app {
|
|
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-align: center;
|
|
color: $white;
|
|
height: 100%;
|
|
}
|
|
|
|
.error {
|
|
background: $light-red;
|
|
border: 1px solid $dark-red;
|
|
padding: 5px;
|
|
color: $dark-red;
|
|
margin: 5px;
|
|
}
|
|
</style>
|