heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Reload page on click on ResultDialog
release-tag / release-image (push) Successful in 37s
Details

Browse Source
This commit is contained in:
legonzaur
2024-05-17 20:30:26 +02:00
parent 79af30eb73
commit 0b0e0424c5
1 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ResultDialog.vue
+48 -40
View File
@@ -1,20 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Player } from '~/netcode/Player';
export interface Props { export interface Props {
isVisible: Boolean; isVisible: Boolean;
won: Boolean; won: Boolean;
players: Array<Player>; players: Array<Player>;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
won: false, won: () => false,
players: [] players: () => []
}) })
const emit = defineEmits(['close']) const emit = defineEmits(['close'])
const close = () => { const close = () => {
emit('close') reloadNuxtApp()
} }
</script> </script>
@@ -23,22 +25,27 @@ const close = () => {
<div v-if="isVisible" class="dialog-overlay" @click="close"> <div v-if="isVisible" class="dialog-overlay" @click="close">
<div class="dialog-box"> <div class="dialog-box">
<div class="dialog-header"> <div class="dialog-header">
<h3 v-if="won">Victoire!</h3> <h3 v-if="won">Victoire!</h3>
<h3 v-else>Défaite!</h3> <h3 v-else>Défaite!</h3>
</div> </div>
<div class="dialog-body"> <div class="dialog-body">
<PlayerIcon :player="players[0]"></PlayerIcon> <PlayerIcon :player="players[0]"></PlayerIcon>
<p v-if="won"> <p v-if="won">
Vous avez gagné! Vous avez gagné!
</p> </p>
<p v-else> <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 Vous avez perdu face à ce magnifique individu qui a très clairement beaucoup plus de bitches que vous! Cela
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 dit, je pense qu'il n'y a pas de bonnes
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é ou de mauvaises situations, juste des situations différentes. Vous avez perdu, mais vous avez gagné en
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! expérience! C'est ça le plus important
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 dans la vie, n'est-ce pas? Apprendre de ses erreurs et devenir meilleur! Alors, ne soyez pas triste, soyez
le roi du monde! heureux d'avoir eu l'opportunité
</p> 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!
</p>
</div> </div>
</div> </div>
</div> </div>
@@ -59,31 +66,32 @@ const close = () => {
} }
.dialog-box { .dialog-box {
background-image: url('../images/bg-grass.png'); background-image: url('../images/bg-grass.png');
padding: 0 20px; padding: 0 20px;
border-radius: 5px; border-radius: 5px;
width: 800px; width: 800px;
border-radius: 30px; border-radius: 30px;
max-width: 100%; max-width: 100%;
color: white; color: white;
text-align: center; text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
} }
.dialog-box h3 { .dialog-box h3 {
font-size: 30px; font-size: 30px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0; margin: 0;
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
color: white; color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
} }
.dialog-header, .dialog-footer { .dialog-header,
.dialog-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;