89 lines
1.8 KiB
Vue
89 lines
1.8 KiB
Vue
<template>
|
|
<div class="page-play">
|
|
<div class="page-play__container">
|
|
<div class="page-play__container-game">
|
|
<div class="page-play__gamecontrols">
|
|
<GameControls />
|
|
</div>
|
|
<div class="page-play__area">
|
|
<div v-if="gameState === 'idle'" class="page-play__waiting">
|
|
waiting for gamemaster to start game ...
|
|
</div>
|
|
<ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
|
|
<Play v-if="gameState === 'play'" />
|
|
<CollectQuotes v-if="gameState === 'collect'" />
|
|
<Final v-if="gameState === 'final'" />
|
|
</div>
|
|
</div>
|
|
<div v-if="showDebugPanel" class="page-play__container-debug">
|
|
<EngineDebug />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
async mounted() {
|
|
await this.$engine.start()
|
|
},
|
|
async beforeDestroy() {
|
|
await this.$engine.stop()
|
|
},
|
|
computed: {
|
|
showDebugPanel() {
|
|
const user = this.$store.state.engine.user
|
|
if (this.$route.query && this.$route.query.debug) {
|
|
return true
|
|
}
|
|
return user && ['gamemaster', 'admin'].indexOf(user.role) != -1
|
|
},
|
|
gameState() {
|
|
return this.$store.state.game.state
|
|
},
|
|
gamePhase() {
|
|
return this.$store.state.game.phase
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-play {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&__container {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&-game {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
&-debug {
|
|
max-width: 350px;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
&__area {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&__waiting {
|
|
margin-top: 60px;
|
|
text-align: center;
|
|
font-family: Dosis;
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|