feat(nds): add pressed state for all buttons
This commit is contained in:
@@ -1,106 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import Background from "./Background.vue";
|
||||
import Buttons from "./Buttons.vue";
|
||||
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
|
||||
import { promiseTimeout } from "@vueuse/core";
|
||||
|
||||
const store = useContactStore();
|
||||
const achievements = useAchievementsStore();
|
||||
const confirmationModal = useConfirmationModal();
|
||||
|
||||
const ACTIONS = {
|
||||
github: [
|
||||
"open",
|
||||
"contact.actions.githubProfile",
|
||||
"https://github.com/pihkaal",
|
||||
],
|
||||
email: ["copy", "contact.actions.email", "hello@pihkaal.me"],
|
||||
website: ["copy", "contact.actions.websiteLink", "https://pihkaal.me"],
|
||||
cv: ["open", "contact.actions.cv", "https://pihkaal.me/cv"],
|
||||
} as const satisfies Record<
|
||||
string,
|
||||
[action: "copy" | "open", verbKey: string, content: string]
|
||||
>;
|
||||
|
||||
const { selected, selectorPosition } = useButtonNavigation({
|
||||
buttons: {
|
||||
github: [26, 27, 202, 42],
|
||||
email: [26, 59, 202, 42],
|
||||
website: [26, 91, 202, 42],
|
||||
cv: [26, 123, 202, 42],
|
||||
},
|
||||
navigation: {
|
||||
github: {
|
||||
down: "email",
|
||||
},
|
||||
email: {
|
||||
up: "github",
|
||||
down: "website",
|
||||
},
|
||||
website: {
|
||||
up: "email",
|
||||
down: "cv",
|
||||
},
|
||||
cv: {
|
||||
up: "website",
|
||||
},
|
||||
},
|
||||
initialButton: "github",
|
||||
onActivate: (button) => {
|
||||
actionateButton(button);
|
||||
},
|
||||
disabled: computed(() => store.isIntro || store.isOutro),
|
||||
selectorAnimation: {
|
||||
duration: 0.075,
|
||||
ease: "none",
|
||||
},
|
||||
});
|
||||
|
||||
const handleActivateB = () => {
|
||||
if (store.isIntro || store.isOutro) return;
|
||||
store.animateOutro();
|
||||
};
|
||||
|
||||
const actionateButton = async (button: (typeof selected)["value"]) => {
|
||||
const [action, verbKey, content] = ACTIONS[button];
|
||||
const verb = $t(verbKey);
|
||||
if (action === "copy") {
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
store.pushNotification($t("contact.copiedToClipboard", { item: verb }));
|
||||
} catch (error) {
|
||||
console.error("Failed to copy to clipboard:", error);
|
||||
}
|
||||
} else {
|
||||
const url = content.replace(/^https?:\/\//, "");
|
||||
confirmationModal.open({
|
||||
text: $t("contact.openUrl", { url }),
|
||||
onActivateA: async () => {
|
||||
store.pushNotification($t("contact.opened", { item: verb }));
|
||||
await promiseTimeout(100);
|
||||
await navigateTo(content, { open: { target: "_blank " } });
|
||||
|
||||
await promiseTimeout(500);
|
||||
|
||||
if (button === "github") {
|
||||
achievements.unlock("contact_git_visit");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Background />
|
||||
|
||||
<Buttons />
|
||||
<ButtonSelector
|
||||
:rect="selectorPosition"
|
||||
:opacity="
|
||||
store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
|
||||
"
|
||||
/>
|
||||
|
||||
<CommonBars
|
||||
:title="$t('contact.title')"
|
||||
@@ -109,20 +17,4 @@ const actionateButton = async (button: (typeof selected)["value"]) => {
|
||||
"
|
||||
:y-offset="store.isIntro ? store.intro.barOffsetY : 0"
|
||||
/>
|
||||
<CommonConfirmationModal />
|
||||
<CommonButtons
|
||||
:y-offset="
|
||||
store.isIntro ? store.intro.barOffsetY : confirmationModal.buttonsYOffset
|
||||
"
|
||||
:opacity="
|
||||
store.isIntro
|
||||
? store.intro.stage3Opacity
|
||||
: store.isOutro
|
||||
? store.outro.stage2Opacity
|
||||
: 1
|
||||
"
|
||||
:b-label="$t('common.quit')"
|
||||
:a-label="$t(`contact.actions.${ACTIONS[selected][0]}`)"
|
||||
@activate-b="handleActivateB"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -1,17 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
|
||||
import { promiseTimeout } from "@vueuse/core";
|
||||
|
||||
const { onRender } = useScreen();
|
||||
|
||||
const store = useContactStore();
|
||||
const { assets } = useAssets();
|
||||
const achievements = useAchievementsStore();
|
||||
const confirmationModal = useConfirmationModal();
|
||||
const { assets } = useAssets((a) => a.images.contact.bottomScreen.buttons);
|
||||
|
||||
const BUTTONS = {
|
||||
git: {
|
||||
position: [31, 32],
|
||||
action: "open",
|
||||
url: "https://git.pihkaal.xyz",
|
||||
text: "git.pihkaal.xyz",
|
||||
},
|
||||
email: {
|
||||
position: [31, 64],
|
||||
action: "copy",
|
||||
url: "hello@pihkaal.me",
|
||||
text: "hello@pihkaal.me",
|
||||
},
|
||||
linkedin: {
|
||||
position: [31, 96],
|
||||
action: "open",
|
||||
url: "https://linkedin.com/in/stevancorre/",
|
||||
text: "/in/stevancorre/",
|
||||
},
|
||||
cv: {
|
||||
position: [31, 128],
|
||||
action: "open",
|
||||
url: "https://pihkaal.me/cv",
|
||||
text: "/cv",
|
||||
},
|
||||
} as const satisfies Record<
|
||||
string,
|
||||
{
|
||||
position: [number, number];
|
||||
action: "copy" | "open";
|
||||
url: string;
|
||||
text: string;
|
||||
}
|
||||
>;
|
||||
|
||||
const { selected, pressed, selectorPosition } = useButtonNavigation({
|
||||
buttons: {
|
||||
git: [26, 27, 202, 42],
|
||||
email: [26, 59, 202, 42],
|
||||
linkedin: [26, 91, 202, 42],
|
||||
cv: [26, 123, 202, 42],
|
||||
},
|
||||
navigation: {
|
||||
git: {
|
||||
down: "email",
|
||||
},
|
||||
email: {
|
||||
up: "git",
|
||||
down: "linkedin",
|
||||
},
|
||||
linkedin: {
|
||||
up: "email",
|
||||
down: "cv",
|
||||
},
|
||||
cv: {
|
||||
up: "linkedin",
|
||||
},
|
||||
},
|
||||
initialButton: "git",
|
||||
onActivate: async (button) => {
|
||||
const { action, url } = BUTTONS[button];
|
||||
const verb = $t(`contact.actions.${button}`);
|
||||
if (action === "copy") {
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
store.pushNotification($t("contact.copiedToClipboard", { item: verb }));
|
||||
} catch (error) {
|
||||
console.error("Failed to copy to clipboard:", error);
|
||||
}
|
||||
} else {
|
||||
confirmationModal.open({
|
||||
text: $t("contact.openUrl", { url: url.replace(/^https?:\/\//, "") }),
|
||||
onActivateA: async () => {
|
||||
store.pushNotification($t("contact.opened", { item: verb }));
|
||||
|
||||
await promiseTimeout(100);
|
||||
await navigateTo(url, { open: { target: "_blank " } });
|
||||
await promiseTimeout(500);
|
||||
|
||||
if (button === "git") {
|
||||
achievements.unlock("contact_git_visit");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
disabled: computed(() => store.isIntro || store.isOutro),
|
||||
selectorAnimation: {
|
||||
duration: 0.075,
|
||||
ease: "none",
|
||||
},
|
||||
});
|
||||
|
||||
const handleActivateB = () => {
|
||||
if (store.isIntro || store.isOutro) return;
|
||||
store.animateOutro();
|
||||
};
|
||||
|
||||
onRender((ctx) => {
|
||||
ctx.globalAlpha = store.isIntro
|
||||
? store.intro.stage3Opacity
|
||||
: store.outro.stage1Opacity;
|
||||
assets.images.contact.bottomScreen.buttons.draw(ctx, 31, 32);
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
render: () => null,
|
||||
ctx.textBaseline = "top";
|
||||
ctx.font = "10px NDS10";
|
||||
ctx.fillStyle = "#515151";
|
||||
|
||||
for (const [
|
||||
buttonName,
|
||||
{
|
||||
text,
|
||||
position: [x, y],
|
||||
},
|
||||
] of Object.entries(BUTTONS)) {
|
||||
const button = buttonName as typeof selected.value;
|
||||
const isPressed = pressed.value === button;
|
||||
|
||||
assets[isPressed ? "buttonPressed" : "button"].draw(ctx, x, y);
|
||||
|
||||
const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`;
|
||||
assets[isPressed ? pressedKey : button].draw(ctx, x + 1, y + 1);
|
||||
|
||||
ctx.fillText(text, x + 36, y + 11);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ButtonSelector
|
||||
:rect="selectorPosition"
|
||||
:opacity="
|
||||
store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
|
||||
"
|
||||
/>
|
||||
<CommonConfirmationModal />
|
||||
<CommonButtons
|
||||
:y-offset="
|
||||
store.isIntro ? store.intro.barOffsetY : confirmationModal.buttonsYOffset
|
||||
"
|
||||
:opacity="
|
||||
store.isIntro
|
||||
? store.intro.stage3Opacity
|
||||
: store.isOutro
|
||||
? store.outro.stage2Opacity
|
||||
: 1
|
||||
"
|
||||
:b-label="$t('common.quit')"
|
||||
:a-label="$t(`contact.actions.${BUTTONS[selected].action}`)"
|
||||
@activate-b="handleActivateB"
|
||||
/>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user