From 99e1da8e58bc3828bdbe474ca26821d61f050fe6 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sun, 4 Jan 2026 20:53:52 +0100
Subject: [PATCH] feat(gallery): transition to and from the nds

---
 .../Gallery/BottomScreen/BottomScreen.vue     |  21 +++
 .../Gallery/TopScreen/TopScreen.vue           |  31 ++++
 app/components/Home/BottomScreen/Buttons.vue  |  29 +++-
 app/components/NDS.vue                        |  10 ++
 app/pages/gallery.vue                         |   3 +
 app/pages/index.vue                           |   8 +-
 app/stores/app.ts                             |   6 +
 app/stores/gallery.ts                         | 147 ++++++++++++++++++
 app/stores/home.ts                            |   7 +-
 app/types/app.d.ts                            |   2 +-
 i18n/locales/en.json                          |   3 +-
 .../bottom-screen/buttons/downloadPlay.webp   | Bin 470 -> 0 bytes
 .../home/bottom-screen/buttons/gallery.webp   | Bin 0 -> 384 bytes
 13 files changed, 253 insertions(+), 14 deletions(-)
 create mode 100644 app/components/Gallery/BottomScreen/BottomScreen.vue
 create mode 100644 app/components/Gallery/TopScreen/TopScreen.vue
 create mode 100644 app/stores/gallery.ts
 delete mode 100644 public/nds/images/home/bottom-screen/buttons/downloadPlay.webp
 create mode 100644 public/nds/images/home/bottom-screen/buttons/gallery.webp

diff --git a/app/components/Gallery/BottomScreen/BottomScreen.vue b/app/components/Gallery/BottomScreen/BottomScreen.vue
new file mode 100644
index 0000000..b0c256e
--- /dev/null
+++ b/app/components/Gallery/BottomScreen/BottomScreen.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useGalleryStore();
+const { assets } = useAssets();
+
+onRender((ctx) => {
+  ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
+
+  ctx.fillStyle = "#000000";
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.fadeOpacity
+    : store.isOutro
+      ? store.outro.fadeOpacity
+      : 0;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/components/Gallery/TopScreen/TopScreen.vue b/app/components/Gallery/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..7bbdc61
--- /dev/null
+++ b/app/components/Gallery/TopScreen/TopScreen.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { onRender } = useScreen();
+const store = useGalleryStore();
+const { assets } = useAssets();
+
+onMounted(() => {
+  if (store.shouldAnimateOutro) {
+    store.shouldAnimateOutro = false;
+    store.animateOutro();
+  } else {
+    store.$reset();
+    store.animateIntro();
+  }
+});
+
+onRender((ctx) => {
+  ctx.drawImage(assets.home.topScreen.background, 0, 0);
+
+  ctx.fillStyle = "#000000";
+  ctx.globalAlpha = store.isIntro
+    ? store.intro.fadeOpacity
+    : store.isOutro
+      ? store.outro.fadeOpacity
+      : 0;
+  ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+});
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/app/components/Home/BottomScreen/Buttons.vue b/app/components/Home/BottomScreen/Buttons.vue
index 1e8a8e2..764401b 100644
--- a/app/components/Home/BottomScreen/Buttons.vue
+++ b/app/components/Home/BottomScreen/Buttons.vue
@@ -11,7 +11,7 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   buttons: {
     projects: [31, 23, 193, 49],
     contact: [31, 71, 97, 49],
-    downloadPlay: [127, 71, 97, 49],
+    gallery: [127, 71, 97, 49],
 
     theme: [0, 167, 31, 26],
     settings: [112, 167, 31, 26],
@@ -19,7 +19,7 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
   },
   initialButton: "projects",
   onButtonClick: (button) => {
-    if (button === "downloadPlay" || button === "theme" || button === "alarm")
+    if (button === "theme" || button === "alarm")
       throw new Error(`Not implemented: ${button}`);
 
     store.animateOutro(button);
@@ -28,15 +28,15 @@ const { selectedButton, selectorPosition } = useButtonNavigation({
     projects: {
       down: "last",
       left: "contact",
-      right: "downloadPlay",
+      right: "gallery",
       horizontalMode: "preview",
     },
     contact: {
       up: "projects",
-      right: "downloadPlay",
+      right: "gallery",
       down: "settings",
     },
-    downloadPlay: {
+    gallery: {
       up: "projects",
       left: "contact",
       down: "settings",
@@ -70,6 +70,19 @@ const getOpacity = (button?: (typeof selectedButton)["value"]) => {
 
 onRender((ctx) => {
   ctx.globalAlpha = getOpacity();
+
+  // gallery
+  ctx.font = "7px NDS7";
+  ctx.fillStyle = "#2c2c2c";
+  fillTextCentered(
+    ctx,
+    $t("home.photoGallery"),
+    132,
+    78 + getButtonOffset("gallery"),
+    87,
+  );
+
+  // gba thing
   ctx.font = "10px NDS10";
   ctx.fillStyle = "#a2a2a2";
   fillTextCentered(ctx, $t("home.greeting"), 79, 135, 140);
@@ -91,9 +104,9 @@ onRender((ctx) => {
   />
   <Button
     :x="128"
-    :y="72 + getButtonOffset('downloadPlay')"
-    :opacity="getOpacity('downloadPlay')"
-    :image="assets.home.bottomScreen.buttons.downloadPlay"
+    :y="72 + getButtonOffset('gallery')"
+    :opacity="getOpacity('gallery')"
+    :image="assets.home.bottomScreen.buttons.gallery"
   />
 
   <Button
diff --git a/app/components/NDS.vue b/app/components/NDS.vue
index 100bfad..bd28cb5 100644
--- a/app/components/NDS.vue
+++ b/app/components/NDS.vue
@@ -41,6 +41,15 @@ const { camera, renderer } = useTresContext();
 
 model.scale.set(100, 100, 100);
 
+const app = useAppStore();
+watch(
+  () => camera.activeCamera.value,
+  (cam) => {
+    if (cam) app.setCamera(cam);
+  },
+  { immediate: true },
+);
+
 meshes.clear();
 model.traverse((child) => {
   if (child instanceof THREE.Mesh) {
@@ -199,6 +208,7 @@ const handleClick = (event: MouseEvent) => {
   switch (intersection.object.name) {
     case TOP_SCREEN:
     case BOTTOM_SCREEN: {
+      console.log(intersection);
       const canvas =
         intersection.object.name === TOP_SCREEN
           ? props.topScreenCanvas
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index f77e84d..8dde5e5 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -133,6 +133,8 @@ const animateIntro = async () => {
   );
 };
 
+const galleryStore = useGalleryStore();
+
 const animateOutro = async () => {
   isAnimating.value = true;
 
@@ -156,6 +158,7 @@ const animateOutro = async () => {
   typeText(descriptionText, DESCRIPTION, DESCRIPTION_DURATION, true, {
     onComplete: async () => {
       await sleep(ANIMATION_SLEEP * 1000);
+      galleryStore.shouldAnimateOutro = true;
       router.push("/");
     },
   });
diff --git a/app/pages/index.vue b/app/pages/index.vue
index eff0564..8578fac 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import * as THREE from "three";
 import type { Screen as NDSScreen } from "#components";
 
-// TODO: keys doesn't work anymore if 3D modea is disabled
-const ENABLE_3D = false;
+const ENABLE_3D = true;
 
 type ScreenInstance = InstanceType<typeof NDSScreen>;
 
@@ -59,7 +59,7 @@ useKeyUp((key) => {
       <TresPerspectiveCamera
         :args="[45, 1, 0.001, 1000]"
         :position="[0, 10, 12]"
-        :rotation="[-Math.PI / 4.7, 0, 0]"
+        :rotation="[THREE.MathUtils.degToRad(-38.3), 0, 0]"
       />
 
       <TresAmbientLight />
@@ -79,6 +79,7 @@ useKeyUp((key) => {
           <ContactTopScreen v-else-if="app.screen === 'contact'" />
           <ProjectsTopScreen v-else-if="app.screen === 'projects'" />
           <SettingsTopScreen v-else-if="app.screen === 'settings'" />
+          <GalleryTopScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
       <div>
@@ -87,6 +88,7 @@ useKeyUp((key) => {
           <ContactBottomScreen v-else-if="app.screen === 'contact'" />
           <ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
           <SettingsBottomScreen v-else-if="app.screen === 'settings'" />
+          <GalleryBottomScreen v-else-if="app.screen === 'gallery'" />
         </Screen>
       </div>
     </div>
diff --git a/app/stores/app.ts b/app/stores/app.ts
index 9e00fc2..f1397ab 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -1,4 +1,5 @@
 import { z } from "zod/mini";
+import type * as THREE from "three";
 
 const STORAGE_ID = "app_settings";
 
@@ -29,6 +30,7 @@ export const useAppStore = defineStore("app", {
       booted: false,
       settings,
       screen: "home" as AppScreen,
+      camera: null as THREE.Camera | null,
     };
   },
 
@@ -41,6 +43,10 @@ export const useAppStore = defineStore("app", {
       this.screen = screen;
     },
 
+    setCamera(camera: THREE.Camera) {
+      this.camera = camera;
+    },
+
     save() {
       localStorage.setItem(STORAGE_ID, JSON.stringify(this.settings));
     },
diff --git a/app/stores/gallery.ts b/app/stores/gallery.ts
new file mode 100644
index 0000000..61d4aaa
--- /dev/null
+++ b/app/stores/gallery.ts
@@ -0,0 +1,147 @@
+import gsap from "gsap";
+import * as THREE from "three";
+
+export const useGalleryStore = defineStore("gallery", {
+  state: () => ({
+    intro: {
+      fadeOpacity: 0,
+    },
+
+    outro: {
+      fadeOpacity: 1,
+    },
+
+    isIntro: true,
+    isOutro: false,
+    shouldAnimateOutro: false,
+  }),
+
+  actions: {
+    animateIntro() {
+      const CAMERA_DELAY = 0.7;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 0;
+      const FADE_DURATION = 1;
+
+      this.isIntro = true;
+      this.isOutro = false;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+          },
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.intro,
+        { fadeOpacity: 0 },
+        {
+          fadeOpacity: 1,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        navigateTo("/gallery");
+      }, 3150);
+    },
+
+    animateOutro() {
+      const CAMERA_DELAY = 0;
+      const CAMERA_DURATION = 3;
+
+      const FADE_DELAY = 2.3;
+      const FADE_DURATION = 1;
+
+      this.isIntro = false;
+      this.isOutro = true;
+
+      const app = useAppStore();
+      if (app.camera) {
+        gsap.fromTo(
+          app.camera.position,
+          {
+            x: 0,
+            y: 3,
+            z: -1.7,
+          },
+          {
+            x: 0,
+            y: 10,
+            z: 12,
+            duration: CAMERA_DURATION,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+
+        gsap.fromTo(
+          app.camera.rotation,
+          {
+            x: THREE.MathUtils.degToRad(-25),
+            y: 0,
+            z: 0,
+          },
+          {
+            x: THREE.MathUtils.degToRad(-38.3),
+            y: 0,
+            z: 0,
+            duration: CAMERA_DURATION * 0.9,
+            delay: CAMERA_DELAY,
+            ease: "power2.inOut",
+          },
+        );
+      }
+
+      gsap.fromTo(
+        this.outro,
+        { fadeOpacity: 1 },
+        {
+          fadeOpacity: 0,
+          duration: FADE_DURATION,
+          delay: FADE_DELAY,
+          ease: "none",
+        },
+      );
+
+      setTimeout(() => {
+        this.isOutro = false;
+        app.navigateTo("home");
+      }, 3310);
+    },
+  },
+});
diff --git a/app/stores/home.ts b/app/stores/home.ts
index fcf5489..c07a84b 100644
--- a/app/stores/home.ts
+++ b/app/stores/home.ts
@@ -61,8 +61,13 @@ export const useHomeStore = defineStore("home", {
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isOutro = true;
+
           const app = useAppStore();
-          app.navigateTo(to);
+          if (to === "gallery") {
+            app.navigateTo("gallery");
+          } else {
+            app.navigateTo(to);
+          }
         },
       });
 
diff --git a/app/types/app.d.ts b/app/types/app.d.ts
index 0f87c2b..eb57fc5 100644
--- a/app/types/app.d.ts
+++ b/app/types/app.d.ts
@@ -1 +1 @@
-type AppScreen = "home" | "contact" | "projects" | "settings";
+type AppScreen = "home" | "contact" | "projects" | "settings" | "gallery";
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 9634291..c24aa80 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,6 +1,7 @@
 {
   "home": {
-    "greeting": "Welcome to my website!"
+    "greeting": "Welcome to my website!",
+    "photoGallery": "Photo Gallery"
   },
   "settings": {
     "title": "Settings",
diff --git a/public/nds/images/home/bottom-screen/buttons/downloadPlay.webp b/public/nds/images/home/bottom-screen/buttons/downloadPlay.webp
deleted file mode 100644
index 8583901579a410a9161a10c74ca4117f36a72d36..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 470
zcmV;{0V)1cNk&G_0RRA3MM6+kP&iD%0RR9mUVsY_Phcis(kv(EVt|@NGXaxkIXM>t
z)Fhe-m^91Dxfq}(asERRN$*ZuN&G(m0AQOzj&0j*-H0>zkYucdmK|zU>KzA=SSnGA
zrL#Q@Ku#F0`5qqmpF@3bME@bUZRALj0B_#a#=AG1xO)iB;?R6ezj^W4RpGOz&ji=g
z>=~<^%A>*9L21f$o0_SjYEQPP8OM-o205;<$~}z=NvL@Pj0$E^w*i&vgbcSq-NC4+
zSQ(kI7gTl-n(jL0blLJk)gJ06V+^?B|Gxi`&*9fEt_q)B{Xg+Z8#>>9+8;u4Wx3au
zrse(q5R&GUPce}40Ae&lHfPqBS-@OWMTCSjBnh$H&y@yq^rAQudjfeBY=8zUUC0rH
z&N5#qjF8=9yv_3uHAcuL(<^O33?xv1IF&e=A(k?C+H&<MkjquM0~S7lgft`_f=59+
z7!w#*QdCbvCNNHjT}XUr;^klslQH-%!?fHz>gPghP5B`+{V1v;PFo@I;z15+4$y$*
zj!-T}$nG)TW^9IZvmRV3UTVL$&X@Z_^k{tS@5qs+btRDh6_Wmr3~v8dq)-BxI2?kP
MNu4Nz`@cg204PM*#{d8T

diff --git a/public/nds/images/home/bottom-screen/buttons/gallery.webp b/public/nds/images/home/bottom-screen/buttons/gallery.webp
new file mode 100644
index 0000000000000000000000000000000000000000..7042cecd1abf28e19182cf49e1caa6a7dce6bed2
GIT binary patch
literal 384
zcmV-`0e}8dNk&F^0RRA3MM6+kP&iC%0RR9mUVsY_mB@`GNs^pX^2C9B5CI}U1dwmf
zbdPQ0rS6GfCW(ybzrwa{8>vy(CokLkw6`xWeBIfB5BqxH^R6D*_VWLqZ9Q;**|rC^
z^)HD}3uRI7p)7hk?}3$(EJ?;imLx0dLWuWJfZMU;kO1D|?al2C+~h)5Bo1N{93>7C
z5|pS!3?VKUUM>@rte_~0!T1n>BftbvQ4WI-024$J6J|sO0HeeQ5EVg;l5<3rghVlq
zLI9&qkpVf3k9h_X0B{}{0r46iT_~|82`L$@q}EDG(}YNxh$VL3F)Jgf<y32lwU$U~
zB_-Ap$uLa45}G8CB*9r?EkJ4|$MBp}U%3!TEe+O^l~4%NyiVj&VkIS3X3t`2AY$oh
zUQdocx%_M_fU{I+YEq%84~R_?Ym;R5Y)$Ier1mU_;~6WmXgbKEY1_ptnMFIAH4n@j
e*h(^SQ^x$AaQe-_UIH9L;Dy}`2>^`QO{N0W9;DC!

literal 0
HcmV?d00001