thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Optimized some modals

Browse source
This commit is contained in:
thepaperpilot 2021-06-27 16:45:33 -05:00
parent beb9e38b92
commit ae036225b1
3 changed files with 75 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/system/GameOverScreen.vue
View file

@ -7,18 +7,20 @@
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4> <h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
</div> </div>
</div> </div>
<div slot="body"> <template v-slot:body="{ shown }">
<div>It took you {{ timePlayed }} to beat the game.</div> <div v-if="shown">
<br> <div>It took you {{ timePlayed }} to beat the game.</div>
<div>Please check the Discord to discuss the game or to check for new content updates!</div> <br>
<br> <div>Please check the Discord to discuss the game or to check for new content updates!</div>
<div> <br>
<a :href="discordLink"> <div>
<img src="images/discord.png" class="game-over-modal-discord" /> <a :href="discordLink">
{{ discordName }} <img src="images/discord.png" class="game-over-modal-discord" />
</a> {{ discordName }}
</a>
</div>
</div> </div>
</div> </template>
<div slot="footer" class="game-over-footer"> <div slot="footer" class="game-over-footer">
<button @click="keepGoing" class="button">Keep Going</button> <button @click="keepGoing" class="button">Keep Going</button>
<button @click="playAgain" class="button danger">Play Again</button> <button @click="playAgain" class="button danger">Play Again</button>

84
src/components/system/Info.vue
View file

@ -7,50 +7,52 @@
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4> <h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
</div> </div>
</div> </div>
<div slot="body"> <template v-slot:body="{ shown }">
<div v-if="author"> <div v-if="shown">
By {{ author }} <div v-if="author">
</div> By {{ author }}
<div> </div>
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex <div>
</div> Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
<br/> </div>
<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div> <br/>
<br> <div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
<div>
<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
{{ discordName }}
</a>
</div>
<div>
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Paper Pilot Community
</a>
</div>
<div>
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Modding Tree
</a>
</div>
<div>
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
Jacorb's Games
</a>
</div>
<br>
<div>Time Played: {{ timePlayed }}</div>
<div v-if="hotkeys.length > 0">
<br> <br>
<h4>Hotkeys</h4> <div>
<div v-for="key in hotkeys" :key="key.key"> <a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
{{ key.key }}: {{ key.description }} <img src="images/discord.png" class="info-modal-discord" />
{{ discordName }}
</a>
</div>
<div>
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Paper Pilot Community
</a>
</div>
<div>
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Modding Tree
</a>
</div>
<div>
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
Jacorb's Games
</a>
</div>
<br>
<div>Time Played: {{ timePlayed }}</div>
<div v-if="hotkeys.length > 0">
<br>
<h4>Hotkeys</h4>
<div v-for="key in hotkeys" :key="key.key">
{{ key.key }}: {{ key.description }}
</div>
</div> </div>
</div> </div>
</div> </template>
</Modal> </Modal>
</template> </template>

23
src/components/system/Modal.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<portal to="modal-root"> <portal to="modal-root">
<transition name="modal"> <transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)">
<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')"> <div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container"> <div class="modal-container">
<div class="modal-header"> <div class="modal-header">
<slot name="header"> <slot name="header" :shown="isVisible">
default header default header
</slot> </slot>
</div> </div>
<simplebar class="modal-body"> <simplebar class="modal-body">
<branches> <branches>
<slot name="body"> <slot name="body" :shown="isVisible">
default body default body
</slot> </slot>
</branches> </branches>
</simplebar> </simplebar>
<div class="modal-footer"> <div class="modal-footer">
<slot name="footer"> <slot name="footer" :shown="isVisible">
<div class="modal-default-footer"> <div class="modal-default-footer">
<div class="modal-default-flex-grow"></div> <div class="modal-default-flex-grow"></div>
<button class="button modal-default-button" @click="$emit('close')"> <button class="button modal-default-button" @click="$emit('close')">
@ -36,8 +36,23 @@
<script> <script>
export default { export default {
name: 'Modal', name: 'Modal',
data() {
return {
isAnimating: false
}
},
props: { props: {
show: Boolean show: Boolean
},
computed: {
isVisible() {
return this.show || this.isAnimating;
}
},
methods: {
setAnimating(isAnimating) {
this.isAnimating = isAnimating;
}
} }
} }
</script> </script>