feat: animated button selector

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

@@ -2,11 +2,29 @@
 import GameButton from "./GameButton.vue";
 import PictochatButton from "./PictochatButton.vue";
 import DownloadPlayButton from "./DownloadPlayButton.vue";
+import Selector from "./Selector.vue";
 
-type ButtonType = "game" | "downloadPlay" | "pictochat";
+type ButtonConfig = {
+  x: number;
+  y: number;
+  sx: number;
+  sy: number;
+  sw: number;
+  sh: number;
+};
+
+const BUTTONS_CONFIG = {
+  game: { x: 33, y: 25, sx: 31, sy: 23, sw: 193, sh: 49 },
+  pictochat: { x: 32, y: 72, sx: 31, sy: 71, sw: 97, sh: 49 },
+  downloadPlay: { x: 128, y: 72, sx: 127, sy: 71, sw: 97, sh: 49 },
+} as const satisfies Record<string, ButtonConfig>;
+
+type ButtonType = keyof typeof BUTTONS_CONFIG;
 
 const selectedButton = ref<ButtonType>("game");
-const nextBottomButton = ref<Exclude<ButtonType, "game">>("downloadPlay");
+const nextBottomButton = ref<"downloadPlay" | "pictochat">("pictochat");
+
+const selectorPosition = computed(() => BUTTONS_CONFIG[selectedButton.value]);
 
 const handleKeyPress = (event: KeyboardEvent) => {
   switch (event.key) {
@@ -49,8 +67,7 @@ const handleKeyPress = (event: KeyboardEvent) => {
 
     case "Enter":
     case " ":
-      event.preventDefault();
-      throw new Error("Not implemented");
+      throw "Not implemented";
   }
 };
 
@@ -64,7 +81,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <GameButton :selected="selectedButton === 'game'" />
-  <DownloadPlayButton :selected="selectedButton === 'downloadPlay'" />
-  <PictochatButton :selected="selectedButton === 'pictochat'" />
+  <GameButton :x="BUTTONS_CONFIG.game.x" :y="BUTTONS_CONFIG.game.y" />
+  <DownloadPlayButton
+    :x="BUTTONS_CONFIG.downloadPlay.x"
+    :y="BUTTONS_CONFIG.downloadPlay.y"
+  />
+  <PictochatButton
+    :x="BUTTONS_CONFIG.pictochat.x"
+    :y="BUTTONS_CONFIG.pictochat.y"
+  />
+
+  <Selector
+    :x="selectorPosition.sx"
+    :y="selectorPosition.sy"
+    :width="selectorPosition.sw"
+    :height="selectorPosition.sh"
+  />
 </template>