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 @@
-
{
"
:y-offset="store.isIntro ? store.intro.barOffsetY : 0"
/>
-
-
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')"
/>
-
+
diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
index 3e81bd4..2d70a1c 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
+ pressed: string | null;
+ isAnyOtherMenuOpen: boolean;
+ submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,46 +15,29 @@ const props = withDefaults(
const { onRender } = useScreen();
-const settingsStore = useSettingsStore();
-const menusContext = inject<{
- isSubmenuSelected: ComputedRef;
- selectedSubmenuParent: ComputedRef;
- selectedSubmenuExtraOffsetY: ComputedRef;
-}>("menusContext")!;
-
-const { assets } = useAssets();
+const store = useSettingsStore();
+const { assets } = useAssets((a) => a.images.settings.topScreen.clock);
const isOpen = computed(
- () => settingsStore.currentMenu === "clock" && settingsStore.menuExpanded,
+ () => store.currentMenu === "clock" && store.menuExpanded,
);
-const isAnyOtherMenuOpen = computed(() => {
- if (settingsStore.currentSubMenu) {
- return !settingsStore.currentSubMenu.startsWith("clock");
- }
- if (menusContext.isSubmenuSelected.value) {
- return menusContext.selectedSubmenuParent.value !== "clock";
- }
- return false;
-});
const animation = useMenuAnimation("clock", isOpen);
const submenuExtraOffset = (submenu: string) =>
- settingsStore.selectedButton === submenu
- ? menusContext.selectedSubmenuExtraOffsetY.value
- : 0;
+ store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
- assets.images.settings.topScreen.clock.time.draw(
+ (props.pressed === "clockTime" ? assets.timePressed : assets.time).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
);
- assets.images.settings.topScreen.clock.date.draw(
+ (props.pressed === "clockDate" ? assets.datePressed : assets.date).draw(
ctx,
0,
-96 +
@@ -59,17 +45,26 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("clockDate"),
);
- assets.images.settings.topScreen.clock.achievements.draw(
+ (props.pressed === "clockAchievements"
+ ? assets.achievementsPressed
+ : assets.achievements
+ ).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
);
- assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);
- } else if (isAnyOtherMenuOpen.value) {
- assets.images.settings.topScreen.clock.clockDisabled.draw(ctx, 0, 0);
+ (props.pressed === "clock" ? assets.clockPressed : assets.clockActive).draw(
+ ctx,
+ 0,
+ 0,
+ );
+ } else if (props.pressed === "clock") {
+ assets.clockPressed.draw(ctx, 0, 0);
+ } else if (props.isAnyOtherMenuOpen) {
+ assets.clockDisabled.draw(ctx, 0, 0);
} else {
- assets.images.settings.topScreen.clock.clock.draw(ctx, 0, 0);
+ assets.clock.draw(ctx, 0, 0);
}
});
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 988957f..5ac4acc 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -19,20 +19,20 @@ import TouchScreenTapTap from "./TouchScreen/TapTap.vue";
import Selector from "~/components/Common/ButtonSelector.vue";
const app = useAppStore();
-const settingsStore = useSettingsStore();
+const store = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();
onRender((ctx) => {
- if (settingsStore.submenuBackground.opacity > 0) {
- ctx.globalAlpha = settingsStore.submenuBackground.opacity;
- ctx.translate(0, settingsStore.submenuBackground.offsetY);
+ if (store.submenuBackground.opacity > 0) {
+ ctx.globalAlpha = store.submenuBackground.opacity;
+ ctx.translate(0, store.submenuBackground.offsetY);
assets.images.home.topScreen.background.draw(ctx, 0, 0);
}
});
if (app.previousScreen === "home") {
- settingsStore.selectedButton = "options";
+ store.selectedButton = "options";
}
const isMainMenu = (button: string): button is SettingsMenu =>
@@ -47,7 +47,7 @@ const getParentMenu = (submenu: string): SettingsMenu => {
return match[1] as SettingsMenu;
};
-const { select, selected, selectorPosition } = useButtonNavigation({
+const { select, selected, pressed, selectorPosition } = useButtonNavigation({
buttons: {
options: [31, 119, 49, 49],
optionsLanguage: [31, 71, 49, 49],
@@ -67,16 +67,15 @@ const { select, selected, selectorPosition } = useButtonNavigation({
touchScreen: [175, 119, 49, 49],
},
- initialButton: settingsStore.selectedButton,
+ initialButton: store.selectedButton,
onActivate: (buttonName) => {
if (isSubMenu(buttonName)) {
- settingsStore.openSubMenu(buttonName);
+ store.openSubMenu(buttonName);
} else {
if (buttonName === "options") select("optionsLanguage");
if (buttonName === "clock") select("clockAchievements");
if (buttonName === "user") select("userUserName");
- if (buttonName === "touchScreen")
- settingsStore.openSubMenu("touchScreenTapTap");
+ if (buttonName === "touchScreen") store.openSubMenu("touchScreenTapTap");
}
},
navigation: {
@@ -153,17 +152,17 @@ const { select, selected, selectorPosition } = useButtonNavigation({
canClickButton: (buttonName) => {
if (isSubMenu(buttonName)) {
const parent = getParentMenu(buttonName);
- return settingsStore.currentMenu === parent && settingsStore.menuExpanded;
+ return store.currentMenu === parent && store.menuExpanded;
}
return true;
},
disabled: computed(
() =>
- settingsStore.currentSubMenu !== null ||
- settingsStore.submenuTransition.opacity < 1 ||
- settingsStore.isIntro ||
- settingsStore.isOutro ||
- settingsStore.animatingNotification,
+ store.currentSubMenu !== null ||
+ store.submenuTransition.opacity < 1 ||
+ store.isIntro ||
+ store.isOutro ||
+ store.animatingNotification,
),
selectorAnimation: {
duration: 0.11,
@@ -172,34 +171,34 @@ const { select, selected, selectorPosition } = useButtonNavigation({
});
const isSubmenuSelected = computed(() => isSubMenu(selected.value));
-const selectedSubmenuParent = computed(() =>
- isSubmenuSelected.value ? getParentMenu(selected.value) : null,
-);
const selectedSubmenuExtraOffsetY = computed(
() =>
- settingsStore.submenuTransition.selectorOffsetY -
- settingsStore.submenuTransition.offsetY,
+ store.submenuTransition.selectorOffsetY - store.submenuTransition.offsetY,
);
-provide("menusContext", {
- isSubmenuSelected,
- selectedSubmenuParent,
- selectedSubmenuExtraOffsetY,
-});
+const isAnyOtherMenuOpen = (menu: SettingsMenu) => {
+ if (store.currentSubMenu) {
+ return !store.currentSubMenu.startsWith(menu);
+ }
+ if (isSubmenuSelected.value) {
+ return getParentMenu(selected.value) !== menu;
+ }
+ return false;
+};
watch(
selected,
(newSelected) => {
- settingsStore.selectedButton = newSelected;
+ store.selectedButton = newSelected;
- if (settingsStore.currentSubMenu === null) {
+ if (store.currentSubMenu === null) {
if (isMainMenu(newSelected)) {
- settingsStore.openMenu(newSelected, false);
+ store.openMenu(newSelected, false);
} else if (isSubMenu(newSelected)) {
const parentMenu = getParentMenu(newSelected);
if (parentMenu) {
- settingsStore.openMenu(parentMenu, true);
+ store.openMenu(parentMenu, true);
}
}
}
@@ -231,18 +230,13 @@ const selectorXOffset = computed(() => {
switch (menu) {
case "clock":
- return Math.min(0, settingsStore.menuOffsets[1]);
+ return Math.min(0, store.menuOffsets[1]);
case "user":
- return Math.min(
- 0,
- settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2],
- );
+ return Math.min(0, store.menuOffsets[1] + store.menuOffsets[2]);
case "touchScreen":
return Math.min(
0,
- settingsStore.menuOffsets[1] +
- settingsStore.menuOffsets[2] +
- settingsStore.menuOffsets[3],
+ store.menuOffsets[1] + store.menuOffsets[2] + store.menuOffsets[3],
);
default:
return 0;
@@ -251,91 +245,81 @@ const selectorXOffset = computed(() => {
const selectorTransitionOffsetY = computed(() => {
if (isSubmenuSelected.value || selected.value === "touchScreen") {
- return settingsStore.submenuTransition.selectorOffsetY;
+ return store.submenuTransition.selectorOffsetY;
}
- return settingsStore.submenuTransition.offsetY;
+ return store.submenuTransition.offsetY;
});
const handleActivateB = () => {
- if (
- settingsStore.isIntro ||
- settingsStore.isOutro ||
- settingsStore.submenuTransition.opacity < 1
- )
+ if (store.isIntro || store.isOutro || store.submenuTransition.opacity < 1)
return;
if (isSubmenuSelected.value) {
select(getParentMenu(selected.value));
} else {
- settingsStore.animateOutro();
+ store.animateOutro();
}
};
-
+
-
+
diff --git a/app/components/Settings/BottomScreen/Menus/Options/2048.vue b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
index 56e16e9..d2837d7 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/2048.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/2048.vue
@@ -246,13 +246,21 @@ onRender((ctx) => {
onRender((ctx) => {
ctx.translate(0, intro.scoreOffsetY);
- drawButton(ctx, `${$t("settings.options.2048.score")}: ${score}`, 10, 2, 118);
+ drawButton(
+ ctx,
+ `${$t("settings.options.2048.score")}: ${score}`,
+ 10,
+ 2,
+ 118,
+ false,
+ );
drawButton(
ctx,
`${$t("settings.options.2048.highScore")}: ${savedState.value.highScore}`,
138,
2,
108,
+ false,
);
}, 110);
diff --git a/app/components/Settings/BottomScreen/Menus/Options/Menu.vue b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
index c07385a..7d0e199 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/Menu.vue
@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
+ pressed: string | null;
+ isAnyOtherMenuOpen: boolean;
+ submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,46 +15,32 @@ const props = withDefaults(
const { onRender } = useScreen();
-const settingsStore = useSettingsStore();
-const menusContext = inject<{
- isSubmenuSelected: ComputedRef;
- selectedSubmenuParent: ComputedRef;
- selectedSubmenuExtraOffsetY: ComputedRef;
-}>("menusContext")!;
-
-const { assets } = useAssets();
+const store = useSettingsStore();
+const { assets } = useAssets((a) => a.images.settings.topScreen.options);
const isOpen = computed(
- () => settingsStore.currentMenu === "options" && settingsStore.menuExpanded,
+ () => store.currentMenu === "options" && store.menuExpanded,
);
-const isAnyOtherMenuOpen = computed(() => {
- if (settingsStore.currentSubMenu) {
- return !settingsStore.currentSubMenu.startsWith("options");
- }
- if (menusContext.isSubmenuSelected.value) {
- return menusContext.selectedSubmenuParent.value !== "options";
- }
- return false;
-});
const animation = useMenuAnimation("options", isOpen);
const submenuExtraOffset = (submenu: string) =>
- settingsStore.selectedButton === submenu
- ? menusContext.selectedSubmenuExtraOffsetY.value
- : 0;
+ store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
- assets.images.settings.topScreen.options._2048.draw(
+ (props.pressed === "options2048" ? assets._2048Pressed : assets._2048).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("options2048"),
);
- assets.images.settings.topScreen.options.renderingMode.draw(
+ (props.pressed === "optionsRenderingMode"
+ ? assets.renderingModePressed
+ : assets.renderingMode
+ ).draw(
ctx,
0,
-96 +
@@ -59,17 +48,25 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("optionsRenderingMode"),
);
- assets.images.settings.topScreen.options.language.draw(
+ (props.pressed === "optionsLanguage"
+ ? assets.languagePressed
+ : assets.language
+ ).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
);
- assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
- } else if (isAnyOtherMenuOpen.value) {
- assets.images.settings.topScreen.options.optionsDisabled.draw(ctx, 0, 0);
+ (props.pressed === "options"
+ ? assets.optionsPressed
+ : assets.optionsActive
+ ).draw(ctx, 0, 0);
+ } else if (props.pressed === "options") {
+ assets.optionsPressed.draw(ctx, 0, 0);
+ } else if (props.isAnyOtherMenuOpen) {
+ assets.optionsDisabled.draw(ctx, 0, 0);
} else {
- assets.images.settings.topScreen.options.options.draw(ctx, 0, 0);
+ assets.options.draw(ctx, 0, 0);
}
});
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
index 56c4646..902bf17 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
@@ -4,6 +4,8 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
+ pressed: string | null;
+ isAnyOtherMenuOpen: boolean;
}>(),
{
opacity: 1,
@@ -12,39 +14,16 @@ const props = withDefaults(
const { onRender } = useScreen();
-const settingsStore = useSettingsStore();
-const menusContext = inject<{
- isSubmenuSelected: ComputedRef;
- selectedSubmenuParent: ComputedRef;
-}>("menusContext")!;
-
-const { assets } = useAssets();
-
-// TODO: i don't like this
-const isAnyOtherMenuOpen = computed(() => {
- if (settingsStore.currentSubMenu) {
- return !settingsStore.currentSubMenu.startsWith("touchScreen");
- }
- if (menusContext.isSubmenuSelected.value) {
- return menusContext.selectedSubmenuParent.value !== "touchScreen";
- }
- return false;
-});
+const { assets } = useAssets((a) => a.images.settings.topScreen.touchScreen);
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
- if (isAnyOtherMenuOpen.value) {
- assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
- ctx,
- props.x,
- props.y,
- );
+ if (props.pressed === "touchScreen") {
+ assets.touchScreenPressed.draw(ctx, props.x, props.y);
+ } else if (props.isAnyOtherMenuOpen) {
+ assets.touchScreenDisabled.draw(ctx, props.x, props.y);
} else {
- assets.images.settings.topScreen.touchScreen.touchScreen.draw(
- ctx,
- props.x,
- props.y,
- );
+ assets.touchScreen.draw(ctx, props.x, props.y);
}
});
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
index 46c0fe3..f9163c2 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
@@ -393,6 +393,7 @@ onRender((ctx) => {
10,
2,
88,
+ false,
);
drawButton(
ctx,
@@ -400,6 +401,7 @@ onRender((ctx) => {
108,
2,
88,
+ false,
);
drawButton(
ctx,
@@ -407,6 +409,7 @@ onRender((ctx) => {
206,
2,
40,
+ false,
);
}, 110);
diff --git a/app/components/Settings/BottomScreen/Menus/User/Menu.vue b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
index ec7848f..15801f1 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Menu.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Menu.vue
@@ -4,6 +4,9 @@ const props = withDefaults(
x: number;
y: number;
opacity?: number;
+ pressed: string | null;
+ isAnyOtherMenuOpen: boolean;
+ submenuExtraOffsetY: number;
}>(),
{
opacity: 1,
@@ -12,51 +15,37 @@ const props = withDefaults(
const { onRender } = useScreen();
-const settingsStore = useSettingsStore();
-const menusContext = inject<{
- isSubmenuSelected: ComputedRef;
- selectedSubmenuParent: ComputedRef;
- selectedSubmenuExtraOffsetY: ComputedRef;
-}>("menusContext")!;
-
-const { assets } = useAssets();
+const store = useSettingsStore();
+const { assets } = useAssets((a) => a.images.settings.topScreen.user);
const isOpen = computed(
- () => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
+ () => store.currentMenu === "user" && store.menuExpanded,
);
-const isAnyOtherMenuOpen = computed(() => {
- if (settingsStore.currentSubMenu) {
- return !settingsStore.currentSubMenu.startsWith("user");
- }
- if (menusContext.isSubmenuSelected.value) {
- return menusContext.selectedSubmenuParent.value !== "user";
- }
- return false;
-});
const animation = useMenuAnimation("user", isOpen);
const submenuExtraOffset = (submenu: string) =>
- settingsStore.selectedButton === submenu
- ? menusContext.selectedSubmenuExtraOffsetY.value
- : 0;
+ store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
- assets.images.settings.topScreen.user.birthday.draw(
+ (props.pressed === "userBirthday"
+ ? assets.birthdayPressed
+ : assets.birthday
+ ).draw(
ctx,
-48 + animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
);
- assets.images.settings.topScreen.user.snake.draw(
+ (props.pressed === "userSnake" ? assets.snakePressed : assets.snake).draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
);
- assets.images.settings.topScreen.user.color.draw(
+ (props.pressed === "userColor" ? assets.colorPressed : assets.color).draw(
ctx,
0,
-96 +
@@ -64,17 +53,26 @@ onRender((ctx) => {
animation.stage1Offset +
submenuExtraOffset("userColor"),
);
- assets.images.settings.topScreen.user.userName.draw(
+ (props.pressed === "userUserName"
+ ? assets.userNamePressed
+ : assets.userName
+ ).draw(
ctx,
0,
-48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
);
- assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
- } else if (isAnyOtherMenuOpen.value) {
- assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
+ (props.pressed === "user" ? assets.userPressed : assets.userActive).draw(
+ ctx,
+ 0,
+ 0,
+ );
+ } else if (props.pressed === "user") {
+ assets.userPressed.draw(ctx, 0, 0);
+ } else if (props.isAnyOtherMenuOpen) {
+ assets.userDisabled.draw(ctx, 0, 0);
} else {
- assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
+ assets.user.draw(ctx, 0, 0);
}
});
diff --git a/app/components/Settings/BottomScreen/Menus/User/Snake.vue b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
index 9fea84e..3d9f688 100644
--- a/app/components/Settings/BottomScreen/Menus/User/Snake.vue
+++ b/app/components/Settings/BottomScreen/Menus/User/Snake.vue
@@ -292,13 +292,14 @@ onRender((ctx) => {
onRender((ctx) => {
ctx.translate(0, intro.scoreOffsetY);
- drawButton(ctx, $t("settings.user.snake.score", { score }), 10, 2, 118);
+ drawButton(ctx, $t("settings.user.snake.score", { score }), 10, 2, 118, true);
drawButton(
ctx,
$t("settings.user.snake.best", { best: highScore.value }),
138,
2,
108,
+ true,
);
}, 110);
diff --git a/app/composables/useButtonNavigation.ts b/app/composables/useButtonNavigation.ts
index db7b33d..c5f456c 100644
--- a/app/composables/useButtonNavigation.ts
+++ b/app/composables/useButtonNavigation.ts
@@ -210,16 +210,8 @@ export const useButtonNavigation = >({
}
});
- const handleMouseUp = () => {
+ useMouseUp(() => {
pressedButton.value = null;
- };
-
- onMounted(() => {
- document.addEventListener("mouseup", handleMouseUp);
- });
-
- onUnmounted(() => {
- document.removeEventListener("mouseup", handleMouseUp);
});
onClick((x: number, y: number) => {
diff --git a/app/utils/canvas.ts b/app/utils/canvas.ts
index 7878c1f..a5faf63 100644
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -162,6 +162,7 @@ export const drawButton = (
x: number,
y: number,
width: number,
+ pressed: boolean,
) => {
const { assets } = useAssets((a) => a.images.common);
@@ -175,13 +176,21 @@ export const drawButton = (
ctx.save();
ctx.translate(x, y);
- assets.buttonLeft.draw(ctx, 0, 0);
+ (pressed ? assets.buttonLeftPressed : assets.buttonLeft).draw(ctx, 0, 0);
for (let i = 0; i < bodyCount; i++) {
- assets.buttonBody.draw(ctx, LEFT_WIDTH + i * BODY_WIDTH, 0);
+ (pressed ? assets.buttonBodyPressed : assets.buttonBody).draw(
+ ctx,
+ LEFT_WIDTH + i * BODY_WIDTH,
+ 0,
+ );
}
- assets.buttonRight.draw(ctx, width - RIGHT_WIDTH, 0);
+ (pressed ? assets.buttonRightPressed : assets.buttonRight).draw(
+ ctx,
+ width - RIGHT_WIDTH,
+ 0,
+ );
ctx.textBaseline = "top";
ctx.font = "10px NDS10";
diff --git a/app/utils/input.ts b/app/utils/input.ts
index 7d9e568..4940eb1 100644
--- a/app/utils/input.ts
+++ b/app/utils/input.ts
@@ -15,3 +15,13 @@ export const mapKeyToNDS = (key: string): string | null => {
key = key.length === 1 ? key.toUpperCase() : key;
return KEY_TO_NDS_BUTTON[key] ?? null;
};
+
+export const useMouseUp = (callback: () => void) => {
+ onMounted(() => {
+ document.addEventListener("mouseup", callback);
+ });
+
+ onUnmounted(() => {
+ document.removeEventListener("mouseup", callback);
+ });
+};
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index e66d8d6..7e3dff9 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -161,9 +161,9 @@
"actions": {
"open": "Open",
"copy": "Copy",
- "githubProfile": "Github profile",
+ "git": "Github profile",
"email": "Email",
- "websiteLink": "Website link",
+ "linkedin": "LinkedIn link",
"cv": "CV"
},
"copiedToClipboard": "{item} copied to clipboard",
diff --git a/public/nds/images/achievements/quit-pressed.webp b/public/nds/images/achievements/quit-pressed.webp
new file mode 100644
index 0000000..263a03c
Binary files /dev/null and b/public/nds/images/achievements/quit-pressed.webp differ
diff --git a/public/nds/images/common/button-body-pressed.webp b/public/nds/images/common/button-body-pressed.webp
new file mode 100644
index 0000000..e15c106
Binary files /dev/null and b/public/nds/images/common/button-body-pressed.webp differ
diff --git a/public/nds/images/common/button-body.webp b/public/nds/images/common/button-body.webp
index e15c106..4a039dd 100644
Binary files a/public/nds/images/common/button-body.webp and b/public/nds/images/common/button-body.webp differ
diff --git a/public/nds/images/common/button-left-pressed.webp b/public/nds/images/common/button-left-pressed.webp
new file mode 100644
index 0000000..e4e0209
Binary files /dev/null and b/public/nds/images/common/button-left-pressed.webp differ
diff --git a/public/nds/images/common/button-left.webp b/public/nds/images/common/button-left.webp
index e4e0209..5f312a0 100644
Binary files a/public/nds/images/common/button-left.webp and b/public/nds/images/common/button-left.webp differ
diff --git a/public/nds/images/common/button-right-pressed.webp b/public/nds/images/common/button-right-pressed.webp
new file mode 100644
index 0000000..541b293
Binary files /dev/null and b/public/nds/images/common/button-right-pressed.webp differ
diff --git a/public/nds/images/common/button-right.webp b/public/nds/images/common/button-right.webp
index 541b293..67dcced 100644
Binary files a/public/nds/images/common/button-right.webp and b/public/nds/images/common/button-right.webp differ
diff --git a/public/nds/images/common/button.webp b/public/nds/images/common/button.webp
deleted file mode 100644
index 85e6f03..0000000
Binary files a/public/nds/images/common/button.webp and /dev/null differ
diff --git a/public/nds/images/contact/bottom-screen/buttons.webp b/public/nds/images/contact/bottom-screen/buttons.webp
deleted file mode 100644
index b0e8024..0000000
Binary files a/public/nds/images/contact/bottom-screen/buttons.webp and /dev/null differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/button-pressed.webp b/public/nds/images/contact/bottom-screen/buttons/button-pressed.webp
new file mode 100644
index 0000000..d859984
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/button-pressed.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/button.webp b/public/nds/images/contact/bottom-screen/buttons/button.webp
new file mode 100644
index 0000000..b20a2ea
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/button.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/cv-pressed.webp b/public/nds/images/contact/bottom-screen/buttons/cv-pressed.webp
new file mode 100644
index 0000000..4e3f9f1
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/cv-pressed.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/cv.webp b/public/nds/images/contact/bottom-screen/buttons/cv.webp
new file mode 100644
index 0000000..50591a2
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/cv.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/email-pressed.webp b/public/nds/images/contact/bottom-screen/buttons/email-pressed.webp
new file mode 100644
index 0000000..e21045d
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/email-pressed.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/email.webp b/public/nds/images/contact/bottom-screen/buttons/email.webp
new file mode 100644
index 0000000..820f91d
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/email.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/git-pressed.webp b/public/nds/images/contact/bottom-screen/buttons/git-pressed.webp
new file mode 100644
index 0000000..ba258e2
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/git-pressed.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/git.webp b/public/nds/images/contact/bottom-screen/buttons/git.webp
new file mode 100644
index 0000000..b8e4eb9
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/git.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/linkedin-pressed.webp b/public/nds/images/contact/bottom-screen/buttons/linkedin-pressed.webp
new file mode 100644
index 0000000..1e4612c
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/linkedin-pressed.webp differ
diff --git a/public/nds/images/contact/bottom-screen/buttons/linkedin.webp b/public/nds/images/contact/bottom-screen/buttons/linkedin.webp
new file mode 100644
index 0000000..b3d87e6
Binary files /dev/null and b/public/nds/images/contact/bottom-screen/buttons/linkedin.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/achievements-pressed.webp b/public/nds/images/home/bottom-screen/buttons/achievements-pressed.webp
new file mode 100644
index 0000000..8653adb
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/achievements-pressed.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/contact-pressed.webp b/public/nds/images/home/bottom-screen/buttons/contact-pressed.webp
new file mode 100644
index 0000000..32afdd8
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/contact-pressed.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/gallery-pressed.webp b/public/nds/images/home/bottom-screen/buttons/gallery-pressed.webp
new file mode 100644
index 0000000..e3fa5c5
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/gallery-pressed.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/projects-pressed.webp b/public/nds/images/home/bottom-screen/buttons/projects-pressed.webp
new file mode 100644
index 0000000..03954ce
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/projects-pressed.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/game.webp b/public/nds/images/home/bottom-screen/buttons/projects.webp
similarity index 100%
rename from public/nds/images/home/bottom-screen/buttons/game.webp
rename to public/nds/images/home/bottom-screen/buttons/projects.webp
diff --git a/public/nds/images/home/bottom-screen/buttons/settings-pressed.webp b/public/nds/images/home/bottom-screen/buttons/settings-pressed.webp
new file mode 100644
index 0000000..f96800f
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/settings-pressed.webp differ
diff --git a/public/nds/images/home/bottom-screen/buttons/theme-pressed.webp b/public/nds/images/home/bottom-screen/buttons/theme-pressed.webp
new file mode 100644
index 0000000..2e00084
Binary files /dev/null and b/public/nds/images/home/bottom-screen/buttons/theme-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/clock/achievements-pressed.webp b/public/nds/images/settings/top-screen/clock/achievements-pressed.webp
new file mode 100644
index 0000000..269be87
Binary files /dev/null and b/public/nds/images/settings/top-screen/clock/achievements-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/clock/clock-pressed.webp b/public/nds/images/settings/top-screen/clock/clock-pressed.webp
new file mode 100644
index 0000000..4259e49
Binary files /dev/null and b/public/nds/images/settings/top-screen/clock/clock-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/clock/date-pressed.webp b/public/nds/images/settings/top-screen/clock/date-pressed.webp
new file mode 100644
index 0000000..247fa2d
Binary files /dev/null and b/public/nds/images/settings/top-screen/clock/date-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/clock/time-pressed.webp b/public/nds/images/settings/top-screen/clock/time-pressed.webp
new file mode 100644
index 0000000..855dd06
Binary files /dev/null and b/public/nds/images/settings/top-screen/clock/time-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/options/2048-pressed.webp b/public/nds/images/settings/top-screen/options/2048-pressed.webp
new file mode 100644
index 0000000..a525bd2
Binary files /dev/null and b/public/nds/images/settings/top-screen/options/2048-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/options/language-pressed.webp b/public/nds/images/settings/top-screen/options/language-pressed.webp
new file mode 100644
index 0000000..138b1ea
Binary files /dev/null and b/public/nds/images/settings/top-screen/options/language-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/options/options-pressed.webp b/public/nds/images/settings/top-screen/options/options-pressed.webp
new file mode 100644
index 0000000..e94a7c3
Binary files /dev/null and b/public/nds/images/settings/top-screen/options/options-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/options/rendering-mode-pressed.webp b/public/nds/images/settings/top-screen/options/rendering-mode-pressed.webp
new file mode 100644
index 0000000..76bbd1b
Binary files /dev/null and b/public/nds/images/settings/top-screen/options/rendering-mode-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/touch_screen/touch-screen-pressed.webp b/public/nds/images/settings/top-screen/touch_screen/touch-screen-pressed.webp
new file mode 100644
index 0000000..931966e
Binary files /dev/null and b/public/nds/images/settings/top-screen/touch_screen/touch-screen-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/user/birthday-pressed.webp b/public/nds/images/settings/top-screen/user/birthday-pressed.webp
new file mode 100644
index 0000000..e452e57
Binary files /dev/null and b/public/nds/images/settings/top-screen/user/birthday-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/user/color-pressed.webp b/public/nds/images/settings/top-screen/user/color-pressed.webp
new file mode 100644
index 0000000..4d7669d
Binary files /dev/null and b/public/nds/images/settings/top-screen/user/color-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/user/snake-pressed.webp b/public/nds/images/settings/top-screen/user/snake-pressed.webp
new file mode 100644
index 0000000..a1429e0
Binary files /dev/null and b/public/nds/images/settings/top-screen/user/snake-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/user/user-name-pressed.webp b/public/nds/images/settings/top-screen/user/user-name-pressed.webp
new file mode 100644
index 0000000..029a4a1
Binary files /dev/null and b/public/nds/images/settings/top-screen/user/user-name-pressed.webp differ
diff --git a/public/nds/images/settings/top-screen/user/user-pressed.webp b/public/nds/images/settings/top-screen/user/user-pressed.webp
new file mode 100644
index 0000000..18af4b4
Binary files /dev/null and b/public/nds/images/settings/top-screen/user/user-pressed.webp differ