mirror of
https://github.com/thepaperpilot/Planar-Pioneers.git
synced 2024-11-24 09:21:45 +00:00
Implemented game over screen
This commit is contained in:
parent
95cc29664b
commit
0836550abe
4 changed files with 123 additions and 1 deletions
|
@ -3,6 +3,7 @@
|
||||||
<Nav />
|
<Nav />
|
||||||
<Tabs />
|
<Tabs />
|
||||||
<TPS v-if="showTPS" />
|
<TPS v-if="showTPS" />
|
||||||
|
<GameOverScreen />
|
||||||
<portal-target name="modal-root" multiple />
|
<portal-target name="modal-root" multiple />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -37,6 +37,7 @@ import Toggle from './fields/Toggle';
|
||||||
/* system */
|
/* system */
|
||||||
import Column from './system/Column';
|
import Column from './system/Column';
|
||||||
import DefaultLayerTab from './system/DefaultLayerTab';
|
import DefaultLayerTab from './system/DefaultLayerTab';
|
||||||
|
import GameOverScreen from './system/GameOverScreen';
|
||||||
import Info from './system/Info';
|
import Info from './system/Info';
|
||||||
import LayerProvider from './system/LayerProvider';
|
import LayerProvider from './system/LayerProvider';
|
||||||
import LayerTab from './system/LayerTab';
|
import LayerTab from './system/LayerTab';
|
||||||
|
@ -103,6 +104,7 @@ Vue.component(Toggle.name, Toggle);
|
||||||
/* system */
|
/* system */
|
||||||
Vue.component(Column.name, Column);
|
Vue.component(Column.name, Column);
|
||||||
Vue.component(DefaultLayerTab.name, DefaultLayerTab);
|
Vue.component(DefaultLayerTab.name, DefaultLayerTab);
|
||||||
|
Vue.component(GameOverScreen.name, GameOverScreen);
|
||||||
Vue.component(Info.name, Info);
|
Vue.component(Info.name, Info);
|
||||||
Vue.component(LayerProvider.name, LayerProvider);
|
Vue.component(LayerProvider.name, LayerProvider);
|
||||||
Vue.component(LayerTab.name, LayerTab);
|
Vue.component(LayerTab.name, LayerTab);
|
||||||
|
|
119
src/components/system/GameOverScreen.vue
Normal file
119
src/components/system/GameOverScreen.vue
Normal file
|
@ -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>
|
|
@ -6,7 +6,7 @@
|
||||||
<div slot="body">
|
<div slot="body">
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="button" @click="save">Manually Save</button>
|
<button class="button" @click="save">Manually Save</button>
|
||||||
<button @click="exportSave" class="button" >Export</button>
|
<button @click="exportSave" class="button">Export</button>
|
||||||
<button @click="importSave" class="button danger">Import</button>
|
<button @click="importSave" class="button danger">Import</button>
|
||||||
<button @click="hardReset" class="button danger">Hard Reset</button>
|
<button @click="hardReset" class="button danger">Hard Reset</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue