diff --git a/app/components/Achievements/BottomScreen.vue b/app/components/Achievements/BottomScreen.vue index 4d70509..0a2393f 100644 --- a/app/components/Achievements/BottomScreen.vue +++ b/app/components/Achievements/BottomScreen.vue @@ -1,5 +1,5 @@ diff --git a/app/components/Contact/BottomScreen/Buttons.vue b/app/components/Contact/BottomScreen/Buttons.vue index f48a6c2..e9a65e1 100644 --- a/app/components/Contact/BottomScreen/Buttons.vue +++ b/app/components/Contact/BottomScreen/Buttons.vue @@ -1,17 +1,162 @@ + + diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue index 87fa0f9..ef14595 100644 --- a/app/components/Home/BottomScreen/Buttons.vue +++ b/app/components/Home/BottomScreen/Buttons.vue @@ -5,9 +5,9 @@ import Selector from "~/components/Common/ButtonSelector.vue"; const { onRender } = useScreen(); const store = useHomeStore(); -const { assets } = useAssets(); +const { assets } = useAssets((a) => a.images.home.bottomScreen.buttons); -const { selected, selectorPosition } = useButtonNavigation({ +const { selected, pressed, selectorPosition } = useButtonNavigation({ buttons: { projects: [31, 23, 193, 49], contact: [31, 71, 97, 49], @@ -20,12 +20,6 @@ const { selected, selectorPosition } = useButtonNavigation({ initialButton: store.selectedButton, onActivate: (button) => { if (button === "theme") throw new Error(`Not implemented: ${button}`); - - if (button === "achievements") { - store.animateOutro("achievements"); - return; - } - store.animateOutro(button); }, navigation: { @@ -68,6 +62,14 @@ watch(selected, (newSelected) => { store.selectedButton = newSelected; }); +const getButtonImage = (button: typeof selected.value) => { + if (pressed.value === button) { + const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`; + if (pressedKey in assets) return assets[pressedKey]; + } + return assets[button]; +}; + const getButtonOffset = (button: (typeof selected)["value"]) => { if (selected.value === button) return store.outro.buttonOffsetY; return 0; @@ -85,7 +87,7 @@ onRender((ctx) => { // gallery ctx.font = "7px NDS7"; - ctx.fillStyle = "#2c2c2c"; + ctx.fillStyle = pressed.value === "gallery" ? "#2c2c2c" : "#282828"; fillTextCentered( ctx, $t("home.photoGallery"), @@ -140,45 +142,40 @@ onRender((ctx) => { :x="33" :y="25 + getButtonOffset('projects')" :opacity="getOpacity('projects')" - :image="assets.images.home.bottomScreen.buttons.game" + :image="getButtonImage('projects')" />