Added pause game toggle to options and NaN screen

src/components/system/NaNScreen.vue

@@ -15,6 +15,7 @@
 				</div>
 				<br>
 				<Toggle title="Autosave" :value="autosave" @change="setAutosave" />
+				<Toggle title="Pause game" :value="paused" @change="togglePaused" />
 			</div>
 			<div slot="footer" class="nan-footer">
 				<button @click="toggleSavesManager" class="button">Open Saves Manager</button>
@@ -51,6 +52,9 @@ export default {
 		},
 		previous() {
 			return player.NaNPrevious;
+		},
+		paused() {
+			return player.devSpeed === 0;
 		}
 	},
 	methods: {
@@ -74,6 +78,9 @@ export default {
 		},
 		toggleSavesManager() {
 			this.showSaves = !this.showSaves;
+		},
+		togglePaused() {
+			player.devSpeed = this.paused ? 1 : 0;
 		}
 	}
 };

src/components/system/Options.vue

@@ -6,8 +6,9 @@
 		<div slot="body">
 			<Select title="Theme" :options="themes" :value="theme" @change="setTheme" default="classic" />
 			<Select title="Show Milestones" :options="msDisplayOptions" :value="msDisplay" @change="setMSDisplay" default="all" />
-			<Toggle title="Autosave" :value="autosave" @change="toggleOption('autosave')" />
 			<Toggle title="Offline Production" :value="offlineProd" @change="toggleOption('offlineProd')" />
+			<Toggle title="Autosave" :value="autosave" @change="toggleOption('autosave')" />
+			<Toggle title="Pause game" :value="paused" @change="togglePaused" />
 			<Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" />
 			<Toggle title="Hide Maxed Challenges" :value="hideChallenges" @change="toggleOption('hideChallenges')" />
 		</div>
@@ -39,6 +40,9 @@ export default {
 		},
 		msDisplay() {
 			return { label: camelToTitle(player.msDisplay), value: player.msDisplay };
+		},
+		paused() {
+			return player.devSpeed === 0;
 		}
 	},
 	methods: {
@@ -50,6 +54,9 @@ export default {
 		},
 		setMSDisplay(msDisplay) {
 			player.msDisplay = msDisplay;
+		},
+		togglePaused() {
+			player.devSpeed = this.paused ? 1 : 0;
 		}
 	}
 };

src/data/mod.js

@@ -41,7 +41,8 @@ const spook = {
 const main = {
 	id: 'main',
 	display: `<div v-frag>
-		<div v-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
+		<div v-if="player.devSpeed === 0">Game Paused</div>
+		<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
 		<div v-if="player.offTime != undefined">Offline Time: {{ formatTime(player.offTime.remain) }}</div>
 		<div>
 			<span v-if="player.points.lt('1e1000')">You have </span>