feat: victory & defeat dialog

components/GameBoard.vue

@@ -38,12 +38,20 @@ watch(
         }
 
     })
+
+const showResults = ref(false)
+const isWinner = ref(false)
+
 function showLoserScreen() {
     // playSound('/sounds/ding.mp3')
+    showResults.value = true
+    isWinner.value = false
 }
 
 function showWinnerScreen() {
     // playSound('/sounds/ding.mp3')
+    showResults.value = true
+    isWinner.value = true
 }
 </script>
 
@@ -61,6 +69,12 @@ function showWinnerScreen() {
             <PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
         </div>
     </div>
+    <ResultDialog 
+        :isVisible="showResults"
+        :won="isWinner"
+        :players="goStore.current_game?.players"
+        @close="showResults = false">
+    </ResultDialog>
     <SelfView></SelfView>
 </template>
 

components/ResultDialog.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+export interface Props {
+    isVisible: Boolean;
+    won: Boolean;
+    players: Array<Player>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    won: false,
+    players: []
+})
+
+const emit = defineEmits(['close'])
+
+const close = () => {
+    emit('close')
+}
+
+</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!
+            </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>