From 43790603d4cf94dd9486244b422bba940ca6ee4d Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Fri, 2 Jul 2021 08:48:34 -0500
Subject: [PATCH] Add saves manager button to NaN detected screen

---
 src/components/fields/DangerButton.vue   | 11 ++--
 src/components/system/GameOverScreen.vue | 14 -----
 src/components/system/NaNScreen.vue      | 67 +++++++++++-------------
 3 files changed, 36 insertions(+), 56 deletions(-)

diff --git a/src/components/fields/DangerButton.vue b/src/components/fields/DangerButton.vue
index b8c87b1..c79a22b 100644
--- a/src/components/fields/DangerButton.vue
+++ b/src/components/fields/DangerButton.vue
@@ -53,18 +53,19 @@ export default {
 .container > * {
 	margin: 0 4px;
 }
+</style>
 
+<style>
 .danger {
+    position: relative;
 	border: solid 2px var(--danger);
-	padding-right: 0;
+    border-right-width: 16px;
 }
 
 .danger::after {
+    position: absolute;
 	content:  "!";
 	color: white;
-	background: var(--danger);
-	padding: 2px;
-	margin-left: 6px;
-	height: 100%;
+    right: -13px;
 }
 </style>
diff --git a/src/components/system/GameOverScreen.vue b/src/components/system/GameOverScreen.vue
index 12521ff..c6ae064 100644
--- a/src/components/system/GameOverScreen.vue
+++ b/src/components/system/GameOverScreen.vue
@@ -98,18 +98,4 @@ export default {
 	margin: 0;
 	margin-right: 4px;
 }
-
-.danger {
-	border: solid 2px var(--danger);
-	padding-right: 0;
-}
-
-.danger::after {
-	content:  "!";
-	color: white;
-	background: var(--danger);
-	padding: 2px;
-	margin-left: 6px;
-	height: 100%;
-}
 </style>
diff --git a/src/components/system/NaNScreen.vue b/src/components/system/NaNScreen.vue
index 6d432b7..224af62 100644
--- a/src/components/system/NaNScreen.vue
+++ b/src/components/system/NaNScreen.vue
@@ -1,27 +1,31 @@
 <template>
-	<Modal :show="show">
-		<div slot="header" class="nan-modal-header">
-			<h2>NaN value detected!</h2>
-		</div>
-		<div slot="body">
-			<div>Attempted to assign NaN value to "{{ property }}" (previously {{ format(previous) }}). Auto-saving has been {{ autosave ? 'enabled' : 'disabled' }}. Check the console for more details, and consider sharing it with the developers on discord.</div>
-			<br>
-			<div>
-				<a :href="discordLink" class="nan-modal-discord-link">
-					<img src="images/discord.png" class="nan-modal-discord" />
-					{{ discordName }}
-				</a>
+	<div v-frag>
+		<Modal :show="show">
+			<div slot="header" class="nan-modal-header">
+				<h2>NaN value detected!</h2>
 			</div>
-			<br>
-			<Toggle title="Autosave" :value="autosave" @change="setAutosave" />
-		</div>
-		<div slot="footer" class="nan-footer">
-			<button @click="setZero" class="button">Set to 0</button>
-			<button @click="setOne" class="button">Set to 1</button>
-			<button @click="setPrev" class="button" v-if="previous && previous.neq(0) && previous.neq(1)">Set to previous</button>
-			<button @click="ignore" class="button danger">Ignore</button>
-		</div>
-	</Modal>
+			<div slot="body">
+				<div>Attempted to assign NaN value to "{{ property }}" (previously {{ format(previous) }}). Auto-saving has been {{ autosave ? 'enabled' : 'disabled' }}. Check the console for more details, and consider sharing it with the developers on discord.</div>
+				<br>
+				<div>
+					<a :href="discordLink" class="nan-modal-discord-link">
+						<img src="images/discord.png" class="nan-modal-discord" />
+						{{ discordName }}
+					</a>
+				</div>
+				<br>
+				<Toggle title="Autosave" :value="autosave" @change="setAutosave" />
+			</div>
+			<div slot="footer" class="nan-footer">
+				<button @click="toggleSavesManager" class="button">Open Saves Manager</button>
+				<button @click="setZero" class="button">Set to 0</button>
+				<button @click="setOne" class="button">Set to 1</button>
+				<button @click="setPrev" class="button" v-if="previous && previous.neq(0) && previous.neq(1)">Set to previous</button>
+				<button @click="ignore" class="button danger">Ignore</button>
+			</div>
+		</Modal>
+		<SavesManager :show="showSaves" @closeDialog="toggleSavesManager" />
+	</div>
 </template>
 
 <script>
@@ -33,7 +37,7 @@ export default {
 	name: 'NaNScreen',
 	data() {
 		const { discordName, discordLink } = modInfo;
-		return { discordName, discordLink, format };
+		return { discordName, discordLink, format, showSaves: false };
 	},
 	computed: {
 		show() {
@@ -67,6 +71,9 @@ export default {
 		},
 		setAutosave(autosave) {
 			player.autosave = autosave;
+		},
+		toggleSavesManager() {
+			this.showSaves = !this.showSaves;
 		}
 	}
 };
@@ -97,18 +104,4 @@ export default {
 	margin: 0;
 	margin-right: 4px;
 }
-
-.danger {
-	border: solid 2px var(--danger);
-	padding-right: 0;
-}
-
-.danger::after {
-	content:  "!";
-	color: white;
-	background: var(--danger);
-	padding: 2px;
-	margin-left: 6px;
-	height: 100%;
-}
 </style>