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>