pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): confirmation popup before opening link

Browse Source
This commit is contained in:
Stevan
2025-12-18 16:19:46 +01:00
parent f4432fedf1
commit e186ac848d
8 changed files with 198 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/components/Projects/BottomScreen/Buttons.vue
View File

@@ -47,6 +47,10 @@ const circleContains = (
radius: number,
): boolean => Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2)) < radius;
const SMALL_CIRCLE_DURATION = 0.07;
const BIG_CIRCLE_DURATION = 0.09;
const POST_DURATION = 0.07;
const startButtonAnimation = (type: ButtonType) => {
const anim: ButtonAnimation = {
type,
@@ -57,10 +61,6 @@ const startButtonAnimation = (type: ButtonType) => {
};
currentAnimation = anim;
const SMALL_CIRCLE_DURATION = 0.07;
const BIG_CIRCLE_DURATION = 0.09;
const POST_DURATION = 0.07;
gsap
.timeline()
.to(anim, { duration: SMALL_CIRCLE_DURATION })
@@ -79,9 +79,14 @@ const startButtonAnimation = (type: ButtonType) => {
};
useScreenClick((x, y) => {
if (currentAnimation || store.isIntro || store.isOutro) return;
if (
currentAnimation ||
store.isIntro ||
store.isOutro ||
store.showConfirmationPopup
)
return;
const project = store.projects[store.currentProject];
if (circleContains(BUTTONS.prev.position, [x, y], CLICK_RADIUS)) {
startButtonAnimation("prev");
store.scrollProjects("left");
@@ -91,13 +96,12 @@ useScreenClick((x, y) => {
} else if (circleContains(BUTTONS.quit.position, [x, y], CLICK_RADIUS)) {
startButtonAnimation("quit");
store.animateOutro();
} else if (
circleContains(BUTTONS.link.position, [x, y], CLICK_RADIUS) &&
project?.link
) {
} else if (circleContains(BUTTONS.link.position, [x, y], CLICK_RADIUS)) {
startButtonAnimation("link");
// TODO: show confirmation popup before opening the link, like "you are about to navigate to [...]"
// store.visitProject();
setTimeout(
() => (store.showConfirmationPopup = true),
1000 * (SMALL_CIRCLE_DURATION + BIG_CIRCLE_DURATION + POST_DURATION),
);
}
});
@@ -131,7 +135,13 @@ useRender((ctx) => {
ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
});
useKeyDown((key) => {
if (currentAnimation || store.isIntro || store.isOutro) return;
if (
currentAnimation ||
store.isIntro ||
store.isOutro ||
store.showConfirmationPopup
)
return;
switch (key) {
case "NDS_LEFT":
startButtonAnimation("prev");
@@ -141,6 +151,14 @@ useKeyDown((key) => {
startButtonAnimation("next");
store.scrollProjects("right");
break;
case "NDS_A":
case "NDS_START":
startButtonAnimation("link");
setTimeout(
() => (store.showConfirmationPopup = true),
1000 * (SMALL_CIRCLE_DURATION + BIG_CIRCLE_DURATION + POST_DURATION),
);
break;
}
});