add info layer that shows info about current puzzle

This commit is contained in:
Zutatensuppe 2021-07-09 01:17:26 +02:00
parent 7759cdc806
commit 2fb0e959ae
7 changed files with 86 additions and 4 deletions

View file

@ -2,6 +2,7 @@
<div id="game">
<settings-overlay v-show="overlay === 'settings'" @bgclick="toggle('settings', true)" v-model="g.player" />
<preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
<info-overlay v-if="g.game" v-show="overlay === 'info'" @bgclick="toggle('info', true)" :game="g.game" />
<help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
<div class="overlay" v-if="cuttingPuzzle">
@ -27,7 +28,8 @@
<router-link class="opener" :to="{name: 'index'}" target="_blank">🧩 Puzzles</router-link>
<div class="opener" @click="toggle('preview', false)">🖼 Preview</div>
<div class="opener" @click="toggle('settings', true)">🛠 Settings</div>
<div class="opener" @click="toggle('help', true)"> Hotkeys</div>
<div class="opener" @click="toggle('info', true)"> Info</div>
<div class="opener" @click="toggle('help', true)"> Hotkeys</div>
</div>
</div>
@ -41,6 +43,7 @@ import Scores from './../components/Scores.vue'
import PuzzleStatus from './../components/PuzzleStatus.vue'
import SettingsOverlay from './../components/SettingsOverlay.vue'
import PreviewOverlay from './../components/PreviewOverlay.vue'
import InfoOverlay from './../components/InfoOverlay.vue'
import ConnectionOverlay from './../components/ConnectionOverlay.vue'
import HelpOverlay from './../components/HelpOverlay.vue'
@ -54,6 +57,7 @@ export default defineComponent({
Scores,
SettingsOverlay,
PreviewOverlay,
InfoOverlay,
ConnectionOverlay,
HelpOverlay,
},
@ -81,6 +85,7 @@ export default defineComponent({
soundsVolume: 100,
showPlayerNames: true,
},
game: null,
previewImageUrl: '',
setHotkeys: (v: boolean) => {},
onBgChange: (v: string) => {},

View file

@ -2,6 +2,7 @@
<div id="replay">
<settings-overlay v-show="overlay === 'settings'" @bgclick="toggle('settings', true)" v-model="g.player" />
<preview-overlay v-show="overlay === 'preview'" @bgclick="toggle('preview', false)" :img="g.previewImageUrl" />
<info-overlay v-if="g.game" v-show="overlay === 'info'" @bgclick="toggle('info', true)" :game="g.game" />
<help-overlay v-show="overlay === 'help'" @bgclick="toggle('help', true)" />
<div class="overlay" v-if="cuttingPuzzle">
@ -29,7 +30,8 @@
<router-link class="opener" :to="{name: 'index'}" target="_blank">🧩 Puzzles</router-link>
<div class="opener" @click="toggle('preview', false)">🖼 Preview</div>
<div class="opener" @click="toggle('settings', true)">🛠 Settings</div>
<div class="opener" @click="toggle('help', true)"> Hotkeys</div>
<div class="opener" @click="toggle('info', true)"> Info</div>
<div class="opener" @click="toggle('help', true)"> Hotkeys</div>
</div>
</div>
@ -43,6 +45,7 @@ import Scores from './../components/Scores.vue'
import PuzzleStatus from './../components/PuzzleStatus.vue'
import SettingsOverlay from './../components/SettingsOverlay.vue'
import PreviewOverlay from './../components/PreviewOverlay.vue'
import InfoOverlay from './../components/InfoOverlay.vue'
import HelpOverlay from './../components/HelpOverlay.vue'
import { main, MODE_REPLAY } from './../game'
@ -55,6 +58,7 @@ export default defineComponent({
Scores,
SettingsOverlay,
PreviewOverlay,
InfoOverlay,
HelpOverlay,
},
data() {
@ -81,6 +85,7 @@ export default defineComponent({
soundsVolume: 100,
showPlayerNames: true,
},
game: null,
previewImageUrl: '',
setHotkeys: (v: boolean) => {},
onBgChange: (v: string) => {},