From 4bfc5f5858ad0b3683acb4dddab34e960973679f Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Thu, 18 Dec 2025 16:19:46 +0100
Subject: [PATCH] feat(projects): confirmation popup before opening link

---
 .../Projects/BottomScreen/BottomScreen.vue    |   2 +
 .../Projects/BottomScreen/Buttons.vue         |  44 +++--
 .../BottomScreen/LinkConfirmationPopup.vue    | 157 ++++++++++++++++++
 app/stores/projects.ts                        |   1 +
 i18n/locales/en.json                          |   7 +
 .../popup-choice-background.webp              | Bin 0 -> 90 bytes
 .../bottom-screen/popup-selector.webp         | Bin 0 -> 60 bytes
 .../bottom-screen/popup-text-background.webp  | Bin 0 -> 100 bytes
 8 files changed, 198 insertions(+), 13 deletions(-)
 create mode 100644 app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
 create mode 100644 public/images/projects/bottom-screen/popup-choice-background.webp
 create mode 100644 public/images/projects/bottom-screen/popup-selector.webp
 create mode 100644 public/images/projects/bottom-screen/popup-text-background.webp

diff --git a/app/components/Projects/BottomScreen/BottomScreen.vue b/app/components/Projects/BottomScreen/BottomScreen.vue
index d28f5cd..c45a0b7 100644
--- a/app/components/Projects/BottomScreen/BottomScreen.vue
+++ b/app/components/Projects/BottomScreen/BottomScreen.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Buttons from "./Buttons.vue";
+import LinkConfirmationPopup from "./LinkConfirmationPopup.vue";
 
 const store = useProjectsStore();
 
@@ -23,5 +24,6 @@ watch(
   <template v-if="!store.loading">
     <Background />
     <Buttons />
+    <LinkConfirmationPopup v-if="store.showConfirmationPopup" />
   </template>
 </template>
diff --git a/app/components/Projects/BottomScreen/Buttons.vue b/app/components/Projects/BottomScreen/Buttons.vue
index 80ee6c4..0a80702 100644
--- a/app/components/Projects/BottomScreen/Buttons.vue
+++ b/app/components/Projects/BottomScreen/Buttons.vue
@@ -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;
   }
 });
 
diff --git a/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
new file mode 100644
index 0000000..c192c64
--- /dev/null
+++ b/app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import gsap from "gsap";
+
+const { assets } = useAssets();
+const store = useProjectsStore();
+
+const TEXT_SLOW = 0.05;
+const TEXT_FAST = 0.01;
+const TEXT_Y = 151;
+const YES_Y = 107;
+const NO_Y = 123;
+
+let selectedOption: "yes" | "no" = "yes";
+const textProgress = ref(0);
+let waitingForNdsARelease = false;
+let timeline: gsap.core.Timeline | null = null;
+
+const text = computed(() => {
+  const project = store.projects[store.currentProject]!;
+  return $t("projects.linkConformationPopup.text", {
+    url: project.link.replace(/^https?:\/\//, ""),
+  });
+});
+
+const animateText = (speed: number) => {
+  timeline?.kill();
+  const remaining = (1 - textProgress.value) * text.value.length;
+  timeline = gsap.timeline().to(textProgress, {
+    value: 1,
+    duration: remaining * speed,
+    ease: "none",
+  });
+};
+
+onMounted(() => {
+  animateText(TEXT_SLOW);
+});
+
+onUnmounted(() => timeline?.kill());
+
+useKeyDown((key) => {
+  if (!store.showConfirmationPopup) return;
+
+  if (textProgress.value < 1 && key === "NDS_A") {
+    waitingForNdsARelease = true;
+    animateText(TEXT_FAST);
+    return;
+  }
+
+  if (textProgress.value < 1 || waitingForNdsARelease) return;
+
+  switch (key) {
+    case "NDS_UP":
+      selectedOption = "yes";
+      break;
+    case "NDS_DOWN":
+      selectedOption = "no";
+      break;
+    case "NDS_A":
+    case "NDS_START":
+      setTimeout(() => {
+        if (selectedOption === "yes") store.visitProject();
+        store.showConfirmationPopup = false;
+      }, 5);
+      break;
+    case "NDS_B":
+      setTimeout(() => {
+        store.showConfirmationPopup = false;
+      }, 5);
+      break;
+  }
+});
+
+useKeyUp((key) => {
+  if (store.showConfirmationPopup && key === "NDS_A") {
+    waitingForNdsARelease = false;
+  }
+});
+
+useScreenClick((x, y) => {
+  if (
+    !store.showConfirmationPopup ||
+    textProgress.value < 1 ||
+    waitingForNdsARelease
+  )
+    return;
+
+  const ACTIVATION_DELAY = 50;
+
+  if (rectContains([198, 105, 50, 14], [x, y])) {
+    selectedOption = "yes";
+    setTimeout(() => {
+      store.visitProject();
+      store.showConfirmationPopup = false;
+    }, ACTIVATION_DELAY);
+  } else if (rectContains([198, 121, 50, 14], [x, y])) {
+    selectedOption = "no";
+    setTimeout(() => (store.showConfirmationPopup = false), ACTIVATION_DELAY);
+  }
+});
+
+const drawTextWithShadow = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+) => {
+  ctx.fillStyle = "#a2a2aa";
+  ctx.fillText(text, x + 1, y);
+  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillText(text, x, y + 1);
+  ctx.fillStyle = "#515159";
+  ctx.fillText(text, x, y);
+};
+
+useRender((ctx) => {
+  if (!store.showConfirmationPopup) return;
+
+  // frame
+  ctx.strokeStyle = "#0000007f";
+  ctx.lineWidth = 1;
+  ctx.strokeRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  // text
+  ctx.drawImage(assets.projects.bottomScreen.popupTextBackground, 2, 146);
+  ctx.font = "16px Pokemon DP Pro";
+  ctx.textBaseline = "top";
+  const displayedText = text.value.slice(
+    0,
+    Math.floor(textProgress.value * text.value.length),
+  );
+  drawTextWithShadow(ctx, displayedText, 15, TEXT_Y);
+
+  // choice box
+  if (textProgress.value >= 1) {
+    ctx.drawImage(assets.projects.bottomScreen.popupChoiceBackground, 194, 98);
+
+    const y = selectedOption === "yes" ? YES_Y : NO_Y;
+    ctx.drawImage(assets.projects.bottomScreen.popupSelector, 200, y);
+
+    drawTextWithShadow(
+      ctx,
+      $t("projects.linkConformationPopup.yes").toUpperCase(),
+      207,
+      YES_Y - 3,
+    );
+    drawTextWithShadow(
+      ctx,
+      $t("projects.linkConformationPopup.no").toUpperCase(),
+      207,
+      NO_Y - 3,
+    );
+  }
+});
+
+defineOptions({ render: () => null });
+</script>
diff --git a/app/stores/projects.ts b/app/stores/projects.ts
index fb2693e..811c0f2 100644
--- a/app/stores/projects.ts
+++ b/app/stores/projects.ts
@@ -24,6 +24,7 @@ export const useProjectsStore = defineStore("projects", {
 
     isIntro: true,
     isOutro: false,
+    showConfirmationPopup: false,
   }),
 
   actions: {
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index f753ec6..49bc57e 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -32,5 +32,12 @@
       "title": "Touch Screen",
       "description": "TODO"
     }
+  },
+  "projects": {
+    "linkConformationPopup": {
+      "yes": "yes",
+      "no": "no",
+      "text": "Open {url}?"
+    }
   }
 }
diff --git a/public/images/projects/bottom-screen/popup-choice-background.webp b/public/images/projects/bottom-screen/popup-choice-background.webp
new file mode 100644
index 0000000000000000000000000000000000000000..f2b7dad8698791354dc2931201580c7006b844a2
GIT binary patch
literal 90
zcmV-g0Hyy@Nk&Fe00012MM6+kP&iCQ0000lJHQGMRVa!isnLfFY+~)c<au8LApzn4
wQKAWA!4&V!p#D!l6bHwz4gS1#$iah72(F(J0JW)i-<v}Al92-}EIv2@0HUiR@&Et;

literal 0
HcmV?d00001

diff --git a/public/images/projects/bottom-screen/popup-selector.webp b/public/images/projects/bottom-screen/popup-selector.webp
new file mode 100644
index 0000000000000000000000000000000000000000..42ac211017ac2384a25d71235f48625d79617fed
GIT binary patch
literal 60
zcmWIYbaOLdU|<M$bqWXzu<%g_vh`UVm;_1{vTnOsln3<R<5If%N#e)B_w_dQ4CYd%
PSyxJ@u0Eu>fPn!3{3;XP

literal 0
HcmV?d00001

diff --git a/public/images/projects/bottom-screen/popup-text-background.webp b/public/images/projects/bottom-screen/popup-text-background.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7dfba0d72121b508f4f137570766fdef0eaedb6f
GIT binary patch
literal 100
zcmV-q0Gt0(Nk&Fo00012MM6+kP&iCa0000l`@jkiH7JTCsX-Ff&Jvc8!!vzz*dfxk
z863QY`8RkdBq01>DvIL#Pk<8ac!B@B9Z<(-mVvNFPlBBrJ(A`2@4xTAGe^Gz{RR%u
G@d5x~<SMrS

literal 0
HcmV?d00001