feat: routes, clickable erika, kill sound

components/LobbyView.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import goStore, { netcode_create_game, join_game } from '~/netcode';
+import { playSound } from '~/helpers/audioHelpers';
 import { ref } from 'vue';
 
 const erika_alive = ref(true);
+const router = useRouter();
 
 function killErika() {
+    playSound('/sounds/splat1.mp3')
     erika_alive.value = false;
 }
 </script>
 
 
-
 <template>
     <div class="background">
         <div class="title">
@@ -28,16 +30,20 @@ function killErika() {
         </div>
         
         <div class="overlay" v-if="erika_alive">
-            <img class="overlay-image" src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png" alt="pétasse" />
-            <div class="speech-bubble">
+            <div class="erika-zone">
+                <img @click="router.push({ path: 'rules'})" class="overlay-image" src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png" alt="pétasse" />
+                <div class="overlay-button">
+                    <button class="kill-erika-button" @click.stop="killErika()">Tuer Erika</button>
+                </div>
+            </div>
+            
+            <div class="speech-bubble" @click.prevent.self>
                 <p>Ohoho!<br>Je suis Erika Furudo, la détective la plus forte du monde !</p>
                 <p>Je vais vous montrer comment jouer à Héron Realms !</p>
                 <p>Cliquez moi-dessus pour afficher les <span style="color: red">règles</span>.</p>
                 <p>Ou sinon, commencez direct en créant une partie ou rejoingnant une partie existante.</p>
             </div>
-            <div class="overlay-button">
-                <button class="kill-erika-button" @click="killErika()">Tuer Erika</button>
-            </div>
+            
         </div>
         
         
@@ -126,13 +132,59 @@ function killErika() {
     }
 }
 
-.overlay-image {
+.overlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    pointer-events: none;
+}
+
+.erika-zone {
     position: absolute;
     top: 60%;
-    right: 20px;
-    z-index: 1;
+    display: flex;
+    justify-content: right;
+    z-index: 2;
     height: 40%;
+    width: 100%;
     object-fit: cover;
+
+    .overlay-image {
+        position: absolute;
+        height: 100%;
+        cursor: pointer;
+        pointer-events: all;
+    }
+
+    .overlay-button {
+        position: absolute;
+        z-index: 1;
+        width: 300px;
+        height: 300px;
+        padding-top: 200px;
+        box-sizing: border-box;
+        pointer-events: none;
+
+        .kill-erika-button {
+            display: none;
+            pointer-events: all;
+            background-color: #f44336;
+            border: none;
+            color: white;
+            text-align: center;
+            text-decoration: none;
+            font-family: 'Roboto', sans-serif;
+            font-size: 16px;
+            margin: auto;
+            cursor: pointer;
+            border-radius: 12px;
+            padding: 10px 24px;
+            height: 50px;
+            transition-duration: 0.4s;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+        }
+    }
 }
 
 .speech-bubble {
@@ -152,38 +204,11 @@ function killErika() {
     line-height: 1.5;
 }
 
-.overlay-button {
-    position: absolute;
-    top: 49%;
-    right: 20px;
-    z-index: 1;
-    width: 300px;
-    height: 300px;
-    padding-top: 50px;
-
-    .kill-erika-button {
-        display: none;
-        background-color: #f44336;
-        border: none;
-        color: white;
-        text-align: center;
-        text-decoration: none;
-        font-family: 'Roboto', sans-serif;
-        font-size: 16px;
-        margin: auto;
-        cursor: pointer;
-        border-radius: 12px;
-        padding: 10px 24px;
-        height: 50px;
-        transition-duration: 0.4s;
-        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-    }
-}
-
-.overlay-button:hover {
-    .kill-erika-button {
-        display: inline-block;
+.erika-zone:hover {
+    .overlay-button {
+        .kill-erika-button {
+            display: inline-block;
+        }
     }
 }
 </style>