feat: add navigation buttons to bottom home screen

app/components/Home/BottomScreen/Buttons/Buttons.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import GameButton from "./GameButton.vue";
+import PictochatButton from "./PictochatButton.vue";
+import DownloadPlayButton from "./DownloadPlayButton.vue";
+
+type ButtonType = "game" | "downloadPlay" | "pictochat";
+
+const selectedButton = ref<ButtonType>("game");
+const nextBottomButton = ref<Exclude<ButtonType, "game">>("downloadPlay");
+
+const handleKeyPress = (event: KeyboardEvent) => {
+  switch (event.key) {
+    case "ArrowUp":
+      event.preventDefault();
+      if (
+        selectedButton.value === "downloadPlay" ||
+        selectedButton.value === "pictochat"
+      ) {
+        selectedButton.value = "game";
+      }
+      break;
+
+    case "ArrowDown":
+      event.preventDefault();
+      if (selectedButton.value === "game") {
+        selectedButton.value = nextBottomButton.value;
+      }
+      break;
+
+    case "ArrowRight":
+      event.preventDefault();
+      if (selectedButton.value === "game") {
+        nextBottomButton.value = "downloadPlay";
+      } else if (selectedButton.value === "pictochat") {
+        nextBottomButton.value = "downloadPlay";
+        selectedButton.value = "downloadPlay";
+      }
+      break;
+
+    case "ArrowLeft":
+      event.preventDefault();
+      if (selectedButton.value === "game") {
+        nextBottomButton.value = "pictochat";
+      } else if (selectedButton.value === "downloadPlay") {
+        nextBottomButton.value = "pictochat";
+        selectedButton.value = "pictochat";
+      }
+      break;
+
+    case "Enter":
+    case " ":
+      event.preventDefault();
+      throw new Error("Not implemented");
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeyPress);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeyPress);
+});
+</script>
+
+<template>
+  <GameButton :selected="selectedButton === 'game'" />
+  <DownloadPlayButton :selected="selectedButton === 'downloadPlay'" />
+  <PictochatButton :selected="selectedButton === 'pictochat'" />
+</template>