Define redirections and add buttons

components/GameButtons.vue

@@ -11,12 +11,15 @@ export default {
   methods: {
     startGame() {
       // Lógica para iniciar o jogo
+      this.$router.push("game");
     },
     exitGame() {
       // Lógica para sair do jogo
+      this.$router.push("end");
     },
     showScore() {
       // Lógica para exibir o placar
+      this.$router.push("leaderboard");
     },
   },
 };

pages/end.vue

@@ -0,0 +1,13 @@
+<template>
+	The game is over :(
+	<GameButtons />
+</template>
+
+<script>
+import GameButtons from '../components/GameButtons.vue';
+export default {
+  components: {
+    GameButtons,
+  },
+};
+</script>

pages/game.vue

@@ -0,0 +1,135 @@
+<template>
+  <GameButtons id="game-buttons" />
+  <div id="canvas">
+    <div id="deep-space" />
+    <div id="space-field">
+      <SpaceObject id="spaceship" class="spaceship" :data="spaceField.ship" resolution="2" />
+
+      <SpaceObject class="asteroid" :data="asteroid" resolution="2"
+                  :key="asteroid.center"
+                  v-for="asteroid in spaceField.asteroids" />
+
+      <SpaceObject class="missile" :data="missile" resolution="2"
+                  :key="missile.center"
+                  v-for="missile in spaceField.missiles" />
+
+      <SpaceObject class="explosion" :data="explosion" resolution="2"
+                  :key="explosion.center"
+                  v-for="explosion in spaceField.explosions" />
+    </div>
+  </div>
+</template>
+
+<script>
+import GameButtons from '../components/GameButtons.vue';
+
+export default {
+  components: {
+    GameButtons,
+  },
+};
+</script>
+
+<script setup>
+const {
+  data: spaceField,
+  refresh: updateSpaceField
+} = await $get("/space-field");
+
+onMounted(() => {
+  window.addEventListener("keydown", async (event) => {
+    const keyToCommand = {
+      "ArrowUp": "MOVE_SHIP_UP",
+      "ArrowDown": "MOVE_SHIP_DOWN",
+      "ArrowRight": "MOVE_SHIP_RIGHT",
+      "ArrowLeft": "MOVE_SHIP_LEFT",
+      "Space": "LAUNCH_MISSILE",
+      "Escape": "PAUSE_GAME",
+    };
+
+    const command = keyToCommand[event.code];
+
+    // Ignore if invalid key was pressed
+    if (command === undefined) return;
+
+    console.log(`Triggering command: ${command}`);
+    await $post("/ship/commands", { command })
+  });
+
+  window.setInterval(updateSpaceField, 1000);
+})
+</script>
+
+<style>
+#game-buttons {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%; 
+  background-color: #f0f0f0; 
+  z-index: 9999; 
+}
+
+#canvas {
+  height: calc(100vh - 4rem);
+  width: calc(100vw - 4rem);
+
+  padding: 2rem;
+
+  background-color: #36bbf5;
+  overflow: hidden;
+
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@keyframes slide {
+  0% {
+    transform: translate(1px);
+  }
+  50% {
+    transform: translate(-1px);
+  }
+  100% {
+    transform: translate(1px);
+  }
+}
+
+#deep-space {
+  height: calc(100% - 4rem);
+  width: calc(100% - 4rem);
+
+  background-image: url("~/assets/space.png");
+  background-origin: content-box;
+  animation: slide 3s linear infinite;
+
+  position: absolute;
+  z-index: 0;
+}
+
+#space-field {
+  height: calc(100% - 4rem);
+  width: calc(100% - 4rem);
+
+  position: relative;
+}
+
+.spaceship {
+  background-image: url("~/assets/spaceship.png");
+}
+
+.asteroid {
+  background-image: url("~/assets/asteroid.png");
+}
+
+.missile {
+  background-image: url("~/assets/missile.png");
+}
+
+.explosion {
+  background-image: url("~/assets/explosion.png");
+}
+</style>

pages/index.vue

@@ -1,126 +1,22 @@
 <template>
-  <div id="canvas">
-    <div id="deep-space" />
-    <div id="space-field">
-      <SpaceObject id="spaceship" class="spaceship" :data="spaceField.ship" resolution="2" />
-
-      <SpaceObject class="asteroid" :data="asteroid" resolution="2"
-                  :key="asteroid.center"
-                  v-for="asteroid in spaceField.asteroids" />
-
-      <SpaceObject class="missile" :data="missile" resolution="2"
-                  :key="missile.center"
-                  v-for="missile in spaceField.missiles" />
-
-      <SpaceObject class="explosion" :data="explosion" resolution="2"
-                  :key="explosion.center"
-                  v-for="explosion in spaceField.explosions" />
-    </div>
+  <div id="start_menu">
     <GameButtons />
   </div>
 </template>
 
 <script>
 import GameButtons from '../components/GameButtons.vue';
-
 export default {
   components: {
     GameButtons,
   },
 };
 </script>
 
-<script setup>
-const {
-  data: spaceField,
-  refresh: updateSpaceField
-} = await $get("/space-field");
-
-onMounted(() => {
-  window.addEventListener("keydown", async (event) => {
-    const keyToCommand = {
-      "ArrowUp": "MOVE_SHIP_UP",
-      "ArrowDown": "MOVE_SHIP_DOWN",
-      "ArrowRight": "MOVE_SHIP_RIGHT",
-      "ArrowLeft": "MOVE_SHIP_LEFT",
-      "Space": "LAUNCH_MISSILE",
-      "Escape": "PAUSE_GAME",
-    };
-
-    const command = keyToCommand[event.code];
-
-    // Ignore if invalid key was pressed
-    if (command === undefined) return;
-
-    console.log(`Triggering command: ${command}`);
-    await $post("/ship/commands", { command })
-  });
-
-  window.setInterval(updateSpaceField, 1000);
-})
-</script>
-
 <style>
-#canvas {
-  height: calc(100vh - 4rem);
-  width: calc(100vw - 4rem);
-
-  padding: 2rem;
-
-  background-color: #36bbf5;
-  overflow: hidden;
-
-  position: relative;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@keyframes slide {
-  0% {
-    transform: translate(1px);
-  }
-  50% {
-    transform: translate(-1px);
-  }
-  100% {
-    transform: translate(1px);
-  }
-}
-
-#deep-space {
-  height: calc(100% - 4rem);
-  width: calc(100% - 4rem);
-
-  background-image: url("~/assets/space.png");
-  background-origin: content-box;
-  animation: slide 3s linear infinite;
-
-  position: absolute;
-  z-index: 0;
-}
-
-#space-field {
-  height: calc(100% - 4rem);
-  width: calc(100% - 4rem);
-
-  position: relative;
-}
-
-.spaceship {
-  background-image: url("~/assets/spaceship.png");
-}
-
-.asteroid {
-  background-image: url("~/assets/asteroid.png");
-}
-
-.missile {
-  background-image: url("~/assets/missile.png");
-}
-
-.explosion {
-  background-image: url("~/assets/explosion.png");
+.buttons {
+	display: flex;
+	justify-content: center;
+	align-content: center;
 }
 </style>

pages/leaderboard.vue

@@ -0,0 +1,13 @@
+<template>
+	Leaderboard
+	<GameButtons />
+</template>
+
+<script>
+import GameButtons from '../components/GameButtons.vue';
+export default {
+  components: {
+    GameButtons,
+  },
+};
+</script>