settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: admin: display game controls for role admin

Browse Source
This commit is contained in:
Settel 2022-03-25 15:20:41 +01:00
parent 3a61f6fae1
commit e9f45e8176
2 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/components/GameControls.vue
View File

@ -1,18 +1,24 @@
<template> <template>
<nav v-if="isGamemaster" class="gamecontrols"> <nav v-if="isGamemaster || isAdmin" class="gamecontrols">
<div v-if="$route.path != '/gamemaster'"> <template v-if="isGamemaster">
<template v-if="$route.path != '/gamemaster'">
<button @click="go('/gamemaster')">admin interface</button> <button @click="go('/gamemaster')">admin interface</button>
<button :disabled="buttonsDisabled.collect" @click="collectQuotes">Collect Quotes</button> <button :disabled="buttonsDisabled.collect" @click="collectQuotes">Collect Quotes</button>
<button :disabled="buttonsDisabled.start" @click="startGame">Start</button> <button :disabled="buttonsDisabled.start" @click="startGame">Start</button>
<button :disabled="buttonsDisabled.continue" @click="continueGame">Continue</button> <button :disabled="buttonsDisabled.continue" @click="continueGame">Continue</button>
<button :disabled="buttonsDisabled.idle" @click="resetGame">Idle</button> <button :disabled="buttonsDisabled.idle" @click="resetGame">Idle</button>
<button :disabled="buttonsDisabled.finish" @click="finishGame">Finish Game</button> <button :disabled="buttonsDisabled.finish" @click="finishGame">Finish Game</button>
<button class="button-logout" @click="logout">logout</button> </template>
</div> <template v-if="$route.path != '/play'">
<div v-if="$route.path != '/play'">
<button @click="go('/play')">back to game</button> <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> <button class="button-logout" @click="logout">logout</button>
</div>
</nav> </nav>
</template> </template>
@ -26,6 +32,10 @@ export default {
const user = this.$store.state.engine.user const user = this.$store.state.engine.user
return user && user.role === 'gamemaster' return user && user.role === 'gamemaster'
}, },
isAdmin() {
const user = this.$store.state.engine.user
return user && user.role === 'admin'
},
buttonsDisabled() { buttonsDisabled() {
const { state, phase } = this.$store.state.game const { state, phase } = this.$store.state.game
return { return {
@ -69,17 +79,21 @@ export default {
@import '~/assets/css/components'; @import '~/assets/css/components';
.gamecontrols { .gamecontrols {
display: flex;
flex-direction: row;
padding: 8px 1em; padding: 8px 1em;
border-bottom: 1px solid $primary-box-border-color; border-bottom: 1px solid $primary-box-border-color;
button { button {
font-family: Dosis; font-family: Dosis;
margin: 0 2px;
padding: 0 1rem; padding: 0 1rem;
font-size: 18px; font-size: 18px;
} }
.button-logout { .button-logout {
float: right; margin-left: auto;
} }
} }
</style> </style>

5
client/src/pages/admin.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="page-admin"> <div class="page-admin">
<template v-if="user.role === 'admin'"> <template v-if="user.role === 'admin'">
<GameControls />
<div class="page-admin__body"> <div class="page-admin__body">
<div class="page-admin__tiles"> <div class="page-admin__tiles">
<AdminTileMyself :user="user" /> <AdminTileMyself :user="user" />
@ -42,10 +43,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
&__body {
position: relative;
}
&__tiles { &__tiles {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;