107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Player } from '~/netcode/Player';
|
|
|
|
|
|
export interface Props {
|
|
isVisible: Boolean;
|
|
won: Boolean;
|
|
players: Array<Player>;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
won: () => false,
|
|
players: () => []
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const close = () => {
|
|
reloadNuxtApp()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="isVisible" class="dialog-overlay" @click="close">
|
|
<div class="dialog-box">
|
|
<div class="dialog-header">
|
|
<h3 v-if="won">Victoire!</h3>
|
|
<h3 v-else>Défaite!</h3>
|
|
</div>
|
|
<div class="dialog-body">
|
|
<PlayerIcon :player="players[0]"></PlayerIcon>
|
|
<p v-if="won">
|
|
Vous avez gagné!
|
|
</p>
|
|
<p v-else>
|
|
Vous avez perdu face à ce magnifique individu qui a très clairement beaucoup plus de bitches que vous! Cela
|
|
dit, je pense qu'il n'y a pas de bonnes
|
|
ou de mauvaises situations, juste des situations différentes. Vous avez perdu, mais vous avez gagné en
|
|
expérience! C'est ça le plus important
|
|
dans la vie, n'est-ce pas? Apprendre de ses erreurs et devenir meilleur! Alors, ne soyez pas triste, soyez
|
|
heureux d'avoir eu l'opportunité
|
|
d'apprendre quelque chose aujourd'hui! Et puis, vous savez ce qu'on dit, "ce qui ne nous tue pas nous rend
|
|
plus fort"! Alors, allez-y, soyez fort!
|
|
Et n'oubliez pas, la prochaine fois, vous gagnerez! Vous verrez! Vous êtes un gagnant, vous êtes un champion!
|
|
Vous êtes le meilleur! Vous êtes
|
|
le roi du monde!
|
|
<img src="/images/so_back.png" alt="Une image décrivant le meme 'We are so back'" />
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dialog-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.dialog-box {
|
|
background-image: url('/images/bg-grass.png');
|
|
padding: 0 20px;
|
|
border-radius: 5px;
|
|
width: 800px;
|
|
border-radius: 30px;
|
|
max-width: 100%;
|
|
color: white;
|
|
text-align: center;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dialog-box h3 {
|
|
font-size: 30px;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
margin: 0;
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
color: white;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.dialog-header,
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.dialog-body {
|
|
padding: 10px 0;
|
|
}
|
|
</style>
|