From ae036225b19ccb82546e436129ee6020f817ffa3 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 27 Jun 2021 16:45:33 -0500
Subject: [PATCH] Optimized some modals
---
src/components/system/GameOverScreen.vue | 24 +++----
src/components/system/Info.vue | 84 ++++++++++++------------
src/components/system/Modal.vue | 23 +++++--
3 files changed, 75 insertions(+), 56 deletions(-)
diff --git a/src/components/system/GameOverScreen.vue b/src/components/system/GameOverScreen.vue
index 13446c0..12521ff 100644
--- a/src/components/system/GameOverScreen.vue
+++ b/src/components/system/GameOverScreen.vue
@@ -7,18 +7,20 @@
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
</div>
</div>
- <div slot="body">
- <div>It took you {{ timePlayed }} to beat the game.</div>
- <br>
- <div>Please check the Discord to discuss the game or to check for new content updates!</div>
- <br>
- <div>
- <a :href="discordLink">
- <img src="images/discord.png" class="game-over-modal-discord" />
- {{ discordName }}
- </a>
+ <template v-slot:body="{ shown }">
+ <div v-if="shown">
+ <div>It took you {{ timePlayed }} to beat the game.</div>
+ <br>
+ <div>Please check the Discord to discuss the game or to check for new content updates!</div>
+ <br>
+ <div>
+ <a :href="discordLink">
+ <img src="images/discord.png" class="game-over-modal-discord" />
+ {{ discordName }}
+ </a>
+ </div>
</div>
- </div>
+ </template>
<div slot="footer" class="game-over-footer">
<button @click="keepGoing" class="button">Keep Going</button>
<button @click="playAgain" class="button danger">Play Again</button>
diff --git a/src/components/system/Info.vue b/src/components/system/Info.vue
index cb48bad..00867a6 100644
--- a/src/components/system/Info.vue
+++ b/src/components/system/Info.vue
@@ -7,50 +7,52 @@
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
</div>
</div>
- <div slot="body">
- <div v-if="author">
- By {{ author }}
- </div>
- <div>
- Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
- </div>
- <br/>
- <div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
- <br>
- <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">
+ <template v-slot:body="{ shown }">
+ <div v-if="shown">
+ <div v-if="author">
+ By {{ author }}
+ </div>
+ <div>
+ Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
+ </div>
+ <br/>
+ <div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
<br>
- <h4>Hotkeys</h4>
- <div v-for="key in hotkeys" :key="key.key">
- {{ key.key }}: {{ key.description }}
+ <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>
+ <h4>Hotkeys</h4>
+ <div v-for="key in hotkeys" :key="key.key">
+ {{ key.key }}: {{ key.description }}
+ </div>
</div>
</div>
- </div>
+ </template>
</Modal>
</template>
diff --git a/src/components/system/Modal.vue b/src/components/system/Modal.vue
index 314bce5..e6be37a 100644
--- a/src/components/system/Modal.vue
+++ b/src/components/system/Modal.vue
@@ -1,23 +1,23 @@
<template>
<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-wrapper">
<div class="modal-container">
<div class="modal-header">
- <slot name="header">
+ <slot name="header" :shown="isVisible">
default header
</slot>
</div>
<simplebar class="modal-body">
<branches>
- <slot name="body">
+ <slot name="body" :shown="isVisible">
default body
</slot>
</branches>
</simplebar>
<div class="modal-footer">
- <slot name="footer">
+ <slot name="footer" :shown="isVisible">
<div class="modal-default-footer">
<div class="modal-default-flex-grow"></div>
<button class="button modal-default-button" @click="$emit('close')">
@@ -36,8 +36,23 @@
<script>
export default {
name: 'Modal',
+ data() {
+ return {
+ isAnimating: false
+ }
+ },
props: {
show: Boolean
+ },
+ computed: {
+ isVisible() {
+ return this.show || this.isAnimating;
+ }
+ },
+ methods: {
+ setAnimating(isAnimating) {
+ this.isAnimating = isAnimating;
+ }
}
}
</script>