feat(contact): animate outro

app/components/Contact/BottomScreen/Background.vue

@@ -7,10 +7,10 @@ const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
 useRender((ctx) => {
   if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
 
-  if (store.isIntro) {
-    ctx.drawImage(homeBackgroundImage.value, 0, 0);
-    ctx.globalAlpha = store.intro.stage2Opacity;
-  }
+  ctx.drawImage(homeBackgroundImage.value, 0, 0);
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.outro.stage3Opacity;
 
   ctx.drawImage(contactBackgroundImage.value, 0, 0);
 });

app/components/Contact/BottomScreen/Bars.vue

@@ -13,7 +13,9 @@ useRender((ctx) => {
   if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
     return;
 
-  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage3Opacity
+    : store.outro.stage2Opacity;
 
   // top bar
   ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);

app/components/Contact/BottomScreen/BottomScreen.vue

@@ -41,20 +41,35 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   },
   initialButton: "github",
   onButtonClick: async (button) => {
-    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`);
-    }
+    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);
+  }
+});
 </script>
 
 <template>
@@ -63,7 +78,9 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   <Buttons />
   <ButtonSelector
     :rect="selectorPosition"
-    :opacity="store.isIntro ? store.intro.stage3Opacity : 1"
+    :opacity="
+      store.isIntro ? store.intro.stage3Opacity : store.outro.stage1Opacity
+    "
   />
 
   <Bars :ok-label="ACTIONS[selectedButton][0]" />

app/components/Contact/BottomScreen/Buttons.vue

@@ -6,7 +6,9 @@ const buttonsImage = useTemplateRef("buttonsImage");
 useRender((ctx) => {
   if (!buttonsImage.value) return;
 
-  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage3Opacity
+    : store.outro.stage1Opacity;
   ctx.drawImage(buttonsImage.value, 31, 32);
 });
 </script>

app/components/Contact/TopScreen/Background.vue

@@ -7,12 +7,10 @@ const contactBackgroundImage = useTemplateRef("contactBackgroundImage");
 useRender((ctx) => {
   if (!homeBackgroundImage.value || !contactBackgroundImage.value) return;
 
-  ctx.drawImage(contactBackgroundImage.value, 0, 0);
-
-  if (store.isIntro) {
-    ctx.drawImage(homeBackgroundImage.value, 0, 0);
-    ctx.globalAlpha = store.intro.stage2Opacity;
-  }
+  ctx.drawImage(homeBackgroundImage.value, 0, 0);
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage2Opacity
+    : store.outro.stage3Opacity;
 
   ctx.drawImage(contactBackgroundImage.value, 0, 0);
 });

app/components/Contact/TopScreen/LeftBar.vue

@@ -7,10 +7,14 @@ const thingsImage = useTemplateRef("thingsImage");
 useRender((ctx) => {
   if (!backgroundImage.value || !thingsImage.value) return;
 
-  ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity : 1;
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage2Opacity;
   ctx.drawImage(backgroundImage.value, 0, 0);
 
-  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage3Opacity
+    : store.outro.stage1Opacity;
   ctx.drawImage(thingsImage.value, 0, 0);
 });
 </script>

app/components/Contact/TopScreen/Notifications.vue

@@ -8,6 +8,7 @@ const titleImage = useTemplateRef("titleImage");
 useRender((ctx) => {
   if (!notificationImage.value || !titleImage.value) return;
 
+  ctx.globalAlpha = store.outro.stage2Opacity;
   ctx.font = "10px NDS10";
 
   // notifications
@@ -24,7 +25,9 @@ useRender((ctx) => {
   }
 
   // title
-  ctx.globalAlpha = store.isIntro ? store.intro.stage1Opacity : 1;
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.stage1Opacity
+    : store.outro.stage2Opacity;
   ctx.drawImage(
     titleImage.value,
     21,