feat(gallery): transition to and from the nds

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>

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>

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

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