107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<template>
|
|
<nav v-if="isGamemaster || isAdmin" class="gamecontrols">
|
|
<template v-if="isGamemaster">
|
|
<template v-if="$route.path != '/gamemaster'">
|
|
<button @click="go('/gamemaster')">admin interface</button>
|
|
<button :disabled="buttonsDisabled.collect" @click="collectQuotes">Collect Quotes</button>
|
|
<button :disabled="buttonsDisabled.start" @click="startGame">Start</button>
|
|
<button :disabled="buttonsDisabled.continue" @click="continueGame">Continue</button>
|
|
<button :disabled="buttonsDisabled.idle" @click="resetGame">Idle</button>
|
|
<button :disabled="buttonsDisabled.finish" @click="finishGame">Finish Game</button>
|
|
</template>
|
|
<template v-if="$route.path != '/play'">
|
|
<button @click="go('/play')">back to game</button>
|
|
</template>
|
|
</template>
|
|
<template v-if="isAdmin">
|
|
<template v-if="$route.path != '/admin'">
|
|
<button @click="go('/admin')">admin interface</button>
|
|
</template>
|
|
</template>
|
|
<button class="button-logout" @click="logout">logout</button>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
user() {
|
|
return this.$store.state.engine.user || {}
|
|
},
|
|
isGamemaster() {
|
|
const user = this.$store.state.engine.user
|
|
return user && user.role === 'gamemaster'
|
|
},
|
|
isAdmin() {
|
|
const user = this.$store.state.engine.user
|
|
return user && user.role === 'admin'
|
|
},
|
|
buttonsDisabled() {
|
|
const { state, phase } = this.$store.state.game
|
|
return {
|
|
collect: state !== 'idle',
|
|
start: state !== 'idle',
|
|
continue: state !== 'play' && ['select-quote', 'reveal-show-count', 'reveal-source'].indexOf(phase) == -1,
|
|
idle: state === 'idle',
|
|
finish: ['play', 'idle'].indexOf(state) == -1,
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
collectQuotes() {
|
|
this.$engine.collectQuotes()
|
|
},
|
|
startGame() {
|
|
this.$engine.startGame()
|
|
},
|
|
resetGame() {
|
|
this.$engine.resetGame()
|
|
},
|
|
continueGame() {
|
|
this.$engine.continueGame()
|
|
},
|
|
finishGame() {
|
|
this.$engine.finishGame()
|
|
},
|
|
go(path) {
|
|
this.$router.push({ path })
|
|
},
|
|
async logout() {
|
|
const user = this.$store.state.engine.user
|
|
if (user && user.isCameo) {
|
|
await this.$axios.$get('/api/cameo')
|
|
this.go('/admin')
|
|
return
|
|
}
|
|
|
|
this.authCode = ''
|
|
await this.$axios.$get('/api/logout')
|
|
this.go('/')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~/assets/css/components';
|
|
|
|
.gamecontrols {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
padding: 8px 1em;
|
|
border-bottom: 1px solid $primary-box-border-color;
|
|
|
|
button {
|
|
font-family: $secondary-font;
|
|
margin: 0 2px;
|
|
padding: 0 1rem;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.button-logout {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
</style>
|