Implemented game over screen

src/App.vue

@@ -3,6 +3,7 @@
 		<Nav />
 		<Tabs />
 		<TPS v-if="showTPS" />
+		<GameOverScreen />
 		<portal-target name="modal-root" multiple />
 	</div>
 </template>

src/components/index.js

@@ -37,6 +37,7 @@ import Toggle from './fields/Toggle';
 /* system */
 import Column from './system/Column';
 import DefaultLayerTab from './system/DefaultLayerTab';
+import GameOverScreen from './system/GameOverScreen';
 import Info from './system/Info';
 import LayerProvider from './system/LayerProvider';
 import LayerTab from './system/LayerTab';
@@ -103,6 +104,7 @@ Vue.component(Toggle.name, Toggle);
 /* system */
 Vue.component(Column.name, Column);
 Vue.component(DefaultLayerTab.name, DefaultLayerTab);
+Vue.component(GameOverScreen.name, GameOverScreen);
 Vue.component(Info.name, Info);
 Vue.component(LayerProvider.name, LayerProvider);
 Vue.component(LayerTab.name, LayerTab);

src/components/system/GameOverScreen.vue

@@ -0,0 +1,119 @@
+<template>
+	<Modal :show="show">
+		<div slot="header" class="game-over-modal-header">
+			<img class="game-over-modal-logo" v-if="logo" :src="logo" :alt="modInfo" />
+			<div class="game-over-modal-title">
+				<h2>Congratulations!</h2>
+				<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" v-if="discordLink !== 'https://discord.gg/WzejVAx'">
+					<img src="images/discord.png" class="game-over-modal-discord" />
+					{{ discordLink }}
+				</a>
+			</div>
+			<div>
+				<a href="https://discord.gg/WzejVAx" class="game-over-modal-discord-link">
+					<img src="images/discord.png" class="game-over-modal-discord" />
+					The Paper Pilot Community
+				</a>
+			</div>
+		</div>
+		<div slot="footer" class="game-over-footer">
+			<button @click="keepGoing" class="button">Keep Going</button>
+			<button @click="playAgain" class="button danger">Play Again</button>
+		</div>
+	</Modal>
+</template>
+
+<script>
+import modInfo from '../../data/modInfo';
+import { formatTime } from '../../util/bignum';
+import { player } from '../../store/proxies';
+
+export default {
+	name: 'GameOverScreen',
+	data() {
+		const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo;
+		return { title, logo, discordName, discordLink, versionNumber, versionTitle };
+	},
+	computed: {
+		timePlayed() {
+			return formatTime(player.timePlayed);
+		},
+		show() {
+			return this.$store.getters.hasWon && !player.keepGoing;
+		}
+	},
+	methods: {
+		keepGoing() {
+			player.keepGoing = true;
+		},
+		playAgain() {
+			console.warn("Not yet implemented!");
+		}
+	}
+};
+</script>
+
+<style scoped>
+.game-over-modal-header {
+    margin: -20px;
+    margin-bottom: 0;
+    background: var(--secondary-background);
+}
+
+.game-over-modal-header * {
+	margin: 0;
+}
+
+.game-over-modal-logo {
+	height: 4em;
+    width: 4em;
+}
+
+.game-over-modal-title {
+	padding: 10px 0;
+    margin-left: 10px;
+}
+
+.game-over-footer {
+	display: flex;
+    justify-content: flex-end;
+}
+
+.game-over-footer button {
+	margin: 0 10px;
+}
+
+.game-over-modal-discord-link {
+	display: flex;
+	align-items: center;
+}
+
+.game-over-modal-discord {
+	height: 2em;
+	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>