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

Layout for EngineDebug must not overlap with play area. Otherwise you can't click on buttons

Browse Source
This commit is contained in:
Settel 2021-08-30 12:48:54 +02:00
parent 5d5c4a68aa
commit 0e5084144f
2 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
client/src/components/EngineDebug.vue
View File

@ -20,17 +20,14 @@ export default {
<style lang="scss"> <style lang="scss">
.enginedebug { .enginedebug {
position: absolute; width: 100%;
right: 0; height: 100%;
bottom: 0;
max-height: 100%;
background-color: rgba(0, 32, 64, 0.75); background-color: rgba(0, 32, 64, 0.75);
max-width: 600px;
overflow: auto; overflow: auto;
&__json { &__json {
margin: 1em 2em;
color: #808080; color: #808080;
font-size: 10px;
} }
} }
</style> </style>

43
client/src/pages/play.vue
View File

@ -1,15 +1,21 @@
<template> <template>
<div class="page-play"> <div class="page-play">
<EngineDebug /> <div class="page-play__container">
<div class="page-play__gamecontrols"> <div class="page-play__container-game">
<GameControls /> <div class="page-play__gamecontrols">
</div> <GameControls />
<div class="page-play__area"> </div>
<div v-if="gameState === 'idle'" class="page-play__waiting"> <div class="page-play__area">
waiting for gamemaster to start game ... <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'" />
</div>
</div>
<div class="page-play__container-debug">
<EngineDebug />
</div> </div>
<ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
<Play v-if="gameState === 'play'" />
</div> </div>
</div> </div>
</template> </template>
@ -35,8 +41,23 @@ export default {
<style lang="scss"> <style lang="scss">
.page-play { .page-play {
display: flex; width: 100%;
flex-direction: column;
&__container {
display: flex;
width: 100%;
height: 100%;
&-game {
display: flex;
flex-direction: column;
width: 100%;
}
&-debug {
max-width: 350px;
max-height: 100%;
}
}
&__controls { &__controls {
flex: 0 1 auto; flex: 0 1 auto;