124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
<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",
|
|
onButtonClick: (button) => {
|
|
actionateButton(button);
|
|
},
|
|
disabled: computed(() => store.isIntro || store.isOutro),
|
|
selectorAnimation: {
|
|
duration: 0.075,
|
|
ease: "none",
|
|
},
|
|
});
|
|
|
|
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 }),
|
|
onConfirm: 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')"
|
|
:opacity="
|
|
store.isIntro ? store.intro.stage3Opacity : store.outro.stage2Opacity
|
|
"
|
|
: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="store.animateOutro()"
|
|
/>
|
|
</template>
|