96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import Background from "./Background.vue";
|
|
import Buttons from "./Buttons.vue";
|
|
import ButtonSelector from "~/components/Common/ButtonSelector.vue";
|
|
import Bars from "./Bars.vue";
|
|
|
|
const store = useContactStore();
|
|
|
|
const ACTIONS = {
|
|
github: ["Open", "Github profile", "https://github.com/pihkaal"],
|
|
email: ["Copy", "Email", "hello@pihkaal.me"],
|
|
website: ["Copy", "Website link", "https://pihkaal.me"],
|
|
cv: ["Open", "CV", "https://pihkaal.me/cv"],
|
|
} as const satisfies Record<
|
|
string,
|
|
[action: "Copy" | "Open", verb: string, content: string]
|
|
>;
|
|
|
|
const { selectedButton, 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: async (button) => {
|
|
actionateButton(button);
|
|
},
|
|
});
|
|
|
|
const actionateButton = async (button: (typeof selectedButton)["value"]) => {
|
|
const [action, verb, content] = ACTIONS[button];
|
|
if (action === "Copy") {
|
|
try {
|
|
await navigator.clipboard.writeText(content);
|
|
store.pushNotification(`${verb} copied to clipboard`);
|
|
} catch (error) {
|
|
console.error("Failed to copy to clipboard:", error);
|
|
}
|
|
} else {
|
|
await navigateTo(content, { open: { target: "_blank " } });
|
|
store.pushNotification(`${verb} opened`);
|
|
}
|
|
};
|
|
|
|
const QUIT_BUTTON: Rect = [31, 172, 80, 18];
|
|
const OK_BUTTON: Rect = [144, 172, 80, 18];
|
|
|
|
useScreenClick((x, y) => {
|
|
if (rectContains(QUIT_BUTTON, [x, y])) {
|
|
store.animateOutro();
|
|
} else if (rectContains(OK_BUTTON, [x, y])) {
|
|
actionateButton(selectedButton.value);
|
|
}
|
|
});
|
|
|
|
useKeyDown((key) => {
|
|
switch (key) {
|
|
case "NDS_B":
|
|
store.animateOutro();
|
|
break;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Background />
|
|
|
|
<Buttons />
|
|
<ButtonSelector
|
|
:rect="selectorPosition"
|
|
:opacity="
|
|
store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
|
|
"
|
|
/>
|
|
|
|
<Bars :ok-label="ACTIONS[selectedButton][0]" />
|
|
</template>
|