knowyt/client/src/pages/admin.vue
2022-03-01 07:56:01 +01:00

58 lines
1.4 KiB
Vue

<template>
<div class="page-admin">
<template v-if="!isGamemasterOrAdmin">
<p>You are not a game master.</p>
<button @click="login">Go to login page</button>
</template>
<template v-if="isGamemasterOrAdmin">
<GameControls />
<div class="page-admin__tiles">
<AdminTileMyself :user="user" />
<AdminTileGameinfo :gameinfo="gameinfo" :players="players" />
<AdminTilePlayers :gameinfo="gameinfo" :players="players" />
</div>
</template>
</div>
</template>
<script>
export default {
async fetch() {
await this.$engine.fetchUserInfo()
await this.$engine.fetchGameInfo({ g: this.$store.state.engine.user.game })
},
computed: {
isGamemasterOrAdmin() {
const user = this.$store.state.engine.user
return user && ['gamemaster', 'admin'].indexOf(user.role) != -1
},
user() {
return this.$store.state.engine.user || {}
},
gameinfo() {
return this.$store.state.engine.gameinfo || {}
},
players() {
const gameinfo = this.$store.state.engine.gameinfo || {}
const players = [...gameinfo.players || []]
return players.sort((a, b) => { return a.name.localeCompare(b.name) })
},
},
}
</script>
<style lang="scss">
.page-admin {
color: #ffffff;
&__tiles {
display: flex;
margin: 24px;
}
&__back-button {
margin: 16px;
}
}
</style>