feat: routes, clickable erika, kill sound

app.vue

@@ -28,16 +28,9 @@ onMounted(async () => {
 
 </script>
 <template>
-  <div id="game_status">
-
-    <template v-if="goStore.self && !goStore.current_game?.started">
-      <input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
-      <label for="ready">Ready</label>
-    </template>
+  <div class="root_dom_div">
+    <NuxtPage />
   </div>
-  <LoginView v-if="goStore.context === 'login'"></LoginView>
-  <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
-  <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
 </template>
 
 <style>
@@ -55,12 +48,7 @@ body {
   user-select: none;
 }
 
-#game_status {
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(255, 255, 255, .75);
+.root_dom_div {
+  height: 100%;
 }
 </style>

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>

helpers/audioHelpers.ts

@@ -0,0 +1,4 @@
+export function playSound(soundUrl: string): void {
+  const audio = new Audio(soundUrl);
+  audio.play();
+}

netcode/index.ts

@@ -25,7 +25,7 @@ export class GameObjectRegister {
   readonly turns: Map<string, Turn>;
   readonly games: Map<string, Game>
 
-  context: "lobby" | "login" | "pregame" | "game" = "login";
+  context: "lobby" | "login" | "pregame" | "game" | "rules" = "login";
   private readonly objects: Map<string, GameObjectNetcode>;
   current_game: Ref<Game | null>
   lobby: Ref<Lobby | null>;

pages/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+import goStore, { setReady } from "@/netcode";
+
+
+</script>
+
+<template>
+  <div class="root_page_div">
+    <div id="game_status">
+
+      <template v-if="goStore.self && !goStore.current_game?.started">
+        <input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
+        <label for="ready">Ready</label>
+      </template>
+    </div>
+    <LoginView v-if="goStore.context === 'login'"></LoginView>
+    <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
+    <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
+    <RulesDisplay v-if="goStore.context == 'rules'"></RulesDisplay>
+  </div>
+</template>
+
+<style>
+.root_page_div {
+  height: 100%;
+}
+
+#game_status {
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(255, 255, 255, .75);
+}
+</style>

pages/rules.vue

@@ -0,0 +1,3 @@
+<template>
+    <RulesDisplay></RulesDisplay>
+</template>