feat(nds): add pressed state for all buttons

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')"
   />
   <Button
     :x="32"
     :y="72 + getButtonOffset('contact')"
     :opacity="getOpacity('contact')"
-    :image="assets.images.home.bottomScreen.buttons.contact"
+    :image="getButtonImage('contact')"
   />
   <Button
     :x="128"
     :y="72 + getButtonOffset('gallery')"
     :opacity="getOpacity('gallery')"
-    :image="assets.images.home.bottomScreen.buttons.gallery"
+    :image="getButtonImage('gallery')"
   />
 
-  <Button
-    :x="33"
-    :y="121"
-    :opacity="getOpacity()"
-    :image="assets.images.home.bottomScreen.buttons.gamePak"
-  />
+  <Button :x="33" :y="121" :opacity="getOpacity()" :image="assets.gamePak" />
 
   <Button
     :x="10"
     :y="175 + getButtonOffset('theme')"
     :opacity="getOpacity('theme')"
-    :image="assets.images.home.bottomScreen.buttons.theme"
+    :image="getButtonImage('theme')"
   />
   <Button
     :x="117"
     :y="170 + getButtonOffset('settings')"
     :opacity="getOpacity('settings')"
-    :image="assets.images.home.bottomScreen.buttons.settings"
+    :image="getButtonImage('settings')"
   />
   <Button
     :x="235"
     :y="175 + getButtonOffset('achievements')"
     :opacity="getOpacity('achievements')"
-    :image="assets.images.home.bottomScreen.buttons.achievements"
+    :image="getButtonImage('achievements')"
   />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />