105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Player } from "~/netcode/interfaces";
|
|
|
|
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">
|
|
<GamePlayerIcon :player="players[0]"></GamePlayerIcon>
|
|
<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="/img/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("/img/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>
|