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">
.enginedebug {
position: absolute;
right: 0;
bottom: 0;
max-height: 100%;
width: 100%;
height: 100%;
background-color: rgba(0, 32, 64, 0.75);
max-width: 600px;
overflow: auto;
&__json {
margin: 1em 2em;
color: #808080;
font-size: 10px;
}
}
</style>

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

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