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

feat: add gamemaster page (WIP)

Browse Source
This commit is contained in:
Settel 2022-09-03 17:57:00 +02:00
parent 65865c93cf
commit 6b1316d3ef
6 changed files with 121 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/assets/css/colors.scss
View File

@ -92,6 +92,11 @@ $highscores-border-color: #00a0e0;
$highscores-background-color: $background-primary-color;
$highscores-text-color: #ffffff;
// Admin Tile
$admin-tile-background-color: #384048;
$admin-tile-border: none;
$admin-tile-text-color: #ffffff;
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;

40
client/src/components/AdminTile.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div class="admin-tile__container">
<div class="admin-tile__title">{{ title }}</div>
<div class="admin-tile__body">
<slot />
</div>
</div>
</template>
<script setup lang="ts">
defineProps<{
title?: string,
}>()
</script>
<style lang="scss">
@import '~/assets/css/components';
.admin-tile {
&__container {
width: 360px;
margin: 40px;
padding: 16px 30px;
background-color: $admin-tile-background-color;
border: $admin-tile-border;
color: $admin-tile-text-color;
}
&__title {
margin-bottom: 16px;
font-size: 24px;
font-family: $font-primary;
}
&__body {
font-size: 16px;
font-family: $font-secondary;
}
}
</style>

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

@ -1,20 +1,29 @@
<template>
<div class="game-controls__container">
<Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">{{ $t('collect-quotes') }}</Button>
<Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">{{ $t('start') }}</Button>
<Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">{{ $t('continue') }}</Button>
<Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">{{ $t('idle') }}</Button>
<Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">{{ $t('finish') }}</Button>
<template v-if="gamemasterMode">
<Button class="game-controls__control game-controls__control__end" :border="false" :disabled="false" @click="backToPlay">{{ $t('back') }}</Button>
</template>
<template v-else>
<Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">{{ $t('collect-quotes') }}</Button>
<Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">{{ $t('start') }}</Button>
<Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">{{ $t('continue') }}</Button>
<Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">{{ $t('idle') }}</Button>
<Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">{{ $t('finish') }}</Button>
<Button class="game-controls__control game-controls__control__end" :border="false" :disabled="false" @click="goToAdmin">{{ $t('admin') }}</Button>
</template>
</div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from '#app'
import { computed } from 'vue'
import useEngine from '@/composables/useEngine'
import useI18n from '@/composables/useI18n'
import { useGameinfoStore } from "@/stores/GameinfoStore"
import { useGameinfoStore } from '@/stores/GameinfoStore'
const { $t } = useI18n({
'back': { en: 'back', de: 'zurück' },
'admin': { en: 'Admin interface', de: 'Admin interface' },
'collect-quotes': { en: 'Collect Quotes', de: 'Aussagen sammeln' },
'start': { en: 'Start', de: 'Start' },
'continue': { en: 'Continue', de: 'Weiter' },
@ -22,6 +31,8 @@ const { $t } = useI18n({
'finish': { en: 'Highscores', de: 'Highscores' },
})
const gamemasterMode = computed(() => useRoute().path === '/gamemaster')
const game = useGameinfoStore()
const engine = useEngine()
const disabled = computed(() => {
@ -39,9 +50,13 @@ const start = async () => await engine.startGame()
const cont = async () => await engine.continueGame()
const idle = async () => await engine.resetGame()
const finish = async () => await engine.finishGame()
const goToAdmin = () => { useRouter().push('/gamemaster') }
const backToPlay = () => { useRouter().push('/play') }
</script>
<style lang="scss">
@import '~/assets/css/components';
.game-controls {
&__container {
display: flex;
@ -50,6 +65,17 @@ const finish = async () => await engine.finishGame()
&__control {
font-size: 18px;
&__end {
margin-left: auto;
color: $text-primary-color;
font-size: 16px;
font-family: $font-primary;
&:hover {
color: $text-primary-hover-color;
}
}
}
}
</style>

1
client/src/components/Lobby.vue
View File

@ -33,6 +33,7 @@ const { $t } = useI18n({
font-family: $font-secondary;
font-size: 24px;
text-align: center;
color: $text-primary-color;
}
&__players-list {

13
client/src/layouts/default.vue
View File

@ -4,6 +4,15 @@
</div>
</template>
<script setup lang="ts">
import { useHead } from '#app'
useHead({
title: 'Know Your Teammates!',
charset: 'utf-8',
})
</script>
<style lang="scss">
@import '@/assets/css/colors.scss';
@import '@/assets/css/fonts.scss';
@ -22,11 +31,13 @@ body,
body {
background-color: $background-primary-color;
font-family: $font-primary;
// override Firefox DownloadStatusBar's setting
margin-bottom: 0 !important;
}
a {
text-decoration: none;
color: inherit;
}
</style>

31
client/src/pages/gamemaster.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="gamemaster__container">
<TopBar />
<AdminTile title="Info">
<div class="gamemaster__info">... info ...</div>
</AdminTile>
</div>
</template>
<script setup lang="ts">
import { navigateTo } from '#app'
import useAuth from '@/composables/useAuth';
import TopBar from '../components/TopBar.vue';
// ensure user is authenticated
const { authenticateAndLoadUserInfo } = useAuth()
try {
await authenticateAndLoadUserInfo()
} catch (e) {
navigateTo('/', { replace: true })
}
</script>
<style lang="scss">
.gamemaster {
&__container {
width: 100%;
height: 100%;
}
}
</style>