feat: add navigation buttons to bottom home screen

app/app.vue

@@ -21,9 +21,10 @@ const showStats = ref(false);
       </HomeTopScreen>
     </div>
     <div>
-      <HomeBottomScreen>
+      <Screen>
+        <HomeBottomScreen />
         <Stats v-if="showStats" />
-      </HomeBottomScreen>
+      </Screen>
     </div>
   </div>
 </template>

app/components/Home/BottomScreen/BottomScreen.vue

@@ -1,7 +1,12 @@
-<template>
+<script setup lang="ts">
-  <Screen>
+import Background from "./Background.vue";
-    <HomeBottomScreenBackground />
+import Buttons from "./Buttons/Buttons.vue";
 
-    <slot />
+const selectedButton: "game" | "pictochat" | "downloadPlay" = "game";
-  </Screen>
+</script>
+
+<template>
+  <Background />
+
+  <Buttons />
 </template>

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>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  selected: boolean;
+}>();
+
+const buttonImage = useTemplateRef("buttonImage");
+const selectorImage = useTemplateRef("selectorImage");
+
+const x = 128;
+const y = 72;
+
+useRender((ctx) => {
+  if (!buttonImage.value || !selectorImage.value) return;
+
+  ctx.drawImage(buttonImage.value, x, y);
+
+  if (props.selected) {
+    ctx.drawImage(selectorImage.value, x - 1, y - 1);
+  }
+});
+</script>
+
+<template>
+  <img
+    ref="buttonImage"
+    src="/assets/images/home/bottom-screen/buttons/downloadPlay.png"
+    hidden
+  />
+  <img
+    ref="selectorImage"
+    src="/assets/images/home/bottom-screen/buttons/smallSelector.png"
+    hidden
+  />
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  selected: boolean;
+}>();
+
+const buttonImage = useTemplateRef("buttonImage");
+const selectorImage = useTemplateRef("selectorImage");
+
+const x = 33;
+const y = 25;
+
+useRender((ctx) => {
+  if (!buttonImage.value || !selectorImage.value) return;
+
+  ctx.drawImage(buttonImage.value, x, y);
+
+  if (props.selected) {
+    ctx.drawImage(selectorImage.value, x - 2, y - 2);
+  }
+});
+</script>
+
+<template>
+  <img
+    ref="buttonImage"
+    src="/assets/images/home/bottom-screen/buttons/game.png"
+    hidden
+  />
+  <img
+    ref="selectorImage"
+    src="/assets/images/home/bottom-screen/buttons/largeSelector.png"
+    hidden
+  />
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  selected: boolean;
+}>();
+
+const buttonImage = useTemplateRef("buttonImage");
+const selectorImage = useTemplateRef("selectorImage");
+
+const x = 32;
+const y = 72;
+
+useRender((ctx) => {
+  if (!buttonImage.value || !selectorImage.value) return;
+
+  ctx.drawImage(buttonImage.value, x, y);
+
+  if (props.selected) {
+    ctx.drawImage(selectorImage.value, x - 1, y - 1);
+  }
+});
+</script>
+
+<template>
+  <img
+    ref="buttonImage"
+    src="/assets/images/home/bottom-screen/buttons/pictochat.png"
+    hidden
+  />
+  <img
+    ref="selectorImage"
+    src="/assets/images/home/bottom-screen/buttons/smallSelector.png"
+    hidden
+  />
+</template>