diff --git a/app/assets/images/home/bottom-screen/buttons/corner.png b/app/assets/images/home/bottom-screen/buttons/corner.png new file mode 100644 index 0000000..b392115 Binary files /dev/null and b/app/assets/images/home/bottom-screen/buttons/corner.png differ diff --git a/app/assets/images/home/bottom-screen/buttons/largeSelector.png b/app/assets/images/home/bottom-screen/buttons/largeSelector.png deleted file mode 100644 index 6842e11..0000000 Binary files a/app/assets/images/home/bottom-screen/buttons/largeSelector.png and /dev/null differ diff --git a/app/assets/images/home/bottom-screen/buttons/smallSelector.png b/app/assets/images/home/bottom-screen/buttons/smallSelector.png deleted file mode 100644 index e457b63..0000000 Binary files a/app/assets/images/home/bottom-screen/buttons/smallSelector.png and /dev/null differ diff --git a/app/components/Home/BottomScreen/Buttons/Buttons.vue b/app/components/Home/BottomScreen/Buttons/Buttons.vue index 7601647..b6035d8 100644 --- a/app/components/Home/BottomScreen/Buttons/Buttons.vue +++ b/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; + +type ButtonType = keyof typeof BUTTONS_CONFIG; const selectedButton = ref("game"); -const nextBottomButton = ref>("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(() => { diff --git a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue b/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue index 09721a2..548c36f 100644 --- a/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue +++ b/app/components/Home/BottomScreen/Buttons/DownloadPlayButton.vue @@ -1,22 +1,15 @@ @@ -26,9 +19,4 @@ useRender((ctx) => { src="/assets/images/home/bottom-screen/buttons/downloadPlay.png" hidden /> - diff --git a/app/components/Home/BottomScreen/Buttons/GameButton.vue b/app/components/Home/BottomScreen/Buttons/GameButton.vue index 0b43285..40c912c 100644 --- a/app/components/Home/BottomScreen/Buttons/GameButton.vue +++ b/app/components/Home/BottomScreen/Buttons/GameButton.vue @@ -1,22 +1,15 @@ @@ -26,9 +19,4 @@ useRender((ctx) => { src="/assets/images/home/bottom-screen/buttons/game.png" hidden /> - diff --git a/app/components/Home/BottomScreen/Buttons/PictochatButton.vue b/app/components/Home/BottomScreen/Buttons/PictochatButton.vue index 122875e..23f75e5 100644 --- a/app/components/Home/BottomScreen/Buttons/PictochatButton.vue +++ b/app/components/Home/BottomScreen/Buttons/PictochatButton.vue @@ -1,22 +1,15 @@ @@ -26,9 +19,4 @@ useRender((ctx) => { src="/assets/images/home/bottom-screen/buttons/pictochat.png" hidden /> - diff --git a/app/components/Home/BottomScreen/Buttons/Selector.vue b/app/components/Home/BottomScreen/Buttons/Selector.vue new file mode 100644 index 0000000..01e6fbb --- /dev/null +++ b/app/components/Home/BottomScreen/Buttons/Selector.vue @@ -0,0 +1,73 @@ + + +