From 5e37d47eb1ec47c3236b08184abc0f6adf362826 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Thu, 29 Jan 2026 17:52:26 +0100
Subject: [PATCH] feat(settings/options/rendering-mode): implement

---
 app/components/Home/TopScreen/StatusBar.vue   |   7 +-
 app/components/NDS.vue                        |   2 +
 .../BottomScreen/Menus/Options/StartUp.vue    | 109 +++++++++++++++++-
 .../Settings/TopScreen/StatusBar.vue          |   7 +-
 app/pages/index.vue                           |  41 +++++--
 app/stores/app.ts                             |  11 +-
 app/utils/canvas.ts                           |  31 +++++
 .../home/top-screen/status-bar/2d-mode.webp   | Bin 0 -> 82 bytes
 .../home/top-screen/status-bar/3d-mode.webp   | Bin 0 -> 80 bytes
 .../options/rendering-mode/2d-mode.webp       | Bin 0 -> 48 bytes
 .../options/rendering-mode/3d-mode.webp       | Bin 0 -> 50 bytes
 .../options/rendering-mode/button-active.webp | Bin 0 -> 2124 bytes
 .../options/rendering-mode/button.webp        | Bin 0 -> 168 bytes
 .../options/rendering-mode/startup-mode.webp  | Bin 0 -> 88 bytes
 14 files changed, 191 insertions(+), 17 deletions(-)
 create mode 100644 public/nds/images/home/top-screen/status-bar/2d-mode.webp
 create mode 100644 public/nds/images/home/top-screen/status-bar/3d-mode.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/rendering-mode/2d-mode.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/rendering-mode/3d-mode.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/rendering-mode/button-active.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/rendering-mode/button.webp
 create mode 100644 public/nds/images/settings/bottom-screen/options/rendering-mode/startup-mode.webp

diff --git a/app/components/Home/TopScreen/StatusBar.vue b/app/components/Home/TopScreen/StatusBar.vue
index 88e82c2..b62141d 100644
--- a/app/components/Home/TopScreen/StatusBar.vue
+++ b/app/components/Home/TopScreen/StatusBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
+const app = useAppStore();
 const store = useHomeStore();
 const { assets } = useAssets();
 
@@ -44,7 +45,11 @@ onRender((ctx) => {
 
   // icons
   assets.images.home.topScreen.statusBar.gbaDisplay.draw(ctx, 210, 2);
-  assets.images.home.topScreen.statusBar.startupMode.draw(ctx, 226, 2);
+  if (app.settings.renderingMode === "3d") {
+    assets.images.home.topScreen.statusBar._3dMode.draw(ctx, 226, 2);
+  } else {
+    assets.images.home.topScreen.statusBar._2dMode.draw(ctx, 226, 2);
+  }
   assets.images.home.topScreen.statusBar.battery.draw(ctx, 242, 4);
 });
 
diff --git a/app/components/NDS.vue b/app/components/NDS.vue
index a7b2b41..f09647f 100644
--- a/app/components/NDS.vue
+++ b/app/components/NDS.vue
@@ -394,6 +394,8 @@ const handleMouseUp = () => {
 };
 
 onMounted(() => {
+  app.ready = true;
+
   if (renderer) {
     renderer.instance.domElement.addEventListener("mousedown", handleClick);
     renderer.instance.domElement.addEventListener("mouseup", handleMouseUp);
diff --git a/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
index beaf1c4..1040bea 100644
--- a/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
+++ b/app/components/Settings/BottomScreen/Menus/Options/StartUp.vue
@@ -1,13 +1,110 @@
 <script setup lang="ts">
+import { until } from "@vueuse/core";
+
+const app = useAppStore();
+const store = useSettingsStore();
+const confirmationModal = useConfirmationModal();
 const { onRender } = useScreen();
+const { assets } = useAssets();
+const renderingModeAssets =
+  assets.images.settings.bottomScreen.options.renderingMode;
+
+const { selected, selectorPosition } = useButtonNavigation({
+  buttons: {
+    _3dMode: [11, 27, 233, 74],
+    _2dMode: [11, 91, 233, 74],
+  },
+  initialButton: app.settings.renderingMode === "3d" ? "_3dMode" : "_2dMode",
+  navigation: {
+    _3dMode: { down: "_2dMode" },
+    _2dMode: { up: "_3dMode" },
+  },
+  selectorAnimation: {
+    ease: "none",
+    duration: 0.065,
+  },
+});
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  const mode = selected.value === "_3dMode" ? "3d" : "2d";
+  app.setRenderingMode(mode);
+
+  const showConfirmation = () => {
+    confirmationModal.open({
+      text: `Rendering mode set to ${mode === "3d" ? "3D" : "2D"}`,
+      onClosed: () => {
+        store.closeSubMenu();
+      },
+    });
+    setTimeout(() => confirmationModal.close(), 2000);
+  };
+
+  until(() => app.ready)
+    .toBeTruthy()
+    .then(showConfirmation);
+};
 
 onRender((ctx) => {
-  ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-  ctx.fillText("Startup", 10, 20);
-});
+  assets.images.home.topScreen.background.draw(ctx, 0, 0);
 
-defineOptions({
-  render: () => null,
+  ctx.font = "10px NDS10";
+  ctx.textBaseline = "top";
+
+  const drawButton = (
+    title: string,
+    logo: AtlasImage,
+    y: number,
+    active: boolean,
+  ) => {
+    ctx.save();
+    ctx.translate(16, y);
+
+    if (active) {
+      renderingModeAssets.buttonActive.draw(ctx, 0, 0, { colored: true });
+    } else {
+      renderingModeAssets.button.draw(ctx, 0, 0);
+    }
+
+    const buttonWidth = renderingModeAssets.button.rect.width;
+
+    ctx.fillStyle = "#000000";
+    fillImageTextHCentered(ctx, logo, title, 0, 4, buttonWidth, 4);
+
+    ctx.fillStyle = "#282828";
+    const text =
+      "The Main Menu will appear\nautomatically when you turn\nthe power on.";
+    fillTextHCenteredMultiline(ctx, text, 0, y, buttonWidth, 15);
+
+    ctx.restore();
+  };
+
+  drawButton(
+    "3D Mode",
+    renderingModeAssets._3dMode,
+    32,
+    selected.value === "_3dMode",
+  );
+  drawButton(
+    "2D Mode",
+    renderingModeAssets._2dMode,
+    96,
+    selected.value === "_2dMode",
+  );
 });
 </script>
+
+<template>
+  <CommonButtons
+    :y-offset="confirmationModal.buttonsYOffset"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+
+  <CommonButtonSelector :rect="selectorPosition" />
+</template>
diff --git a/app/components/Settings/TopScreen/StatusBar.vue b/app/components/Settings/TopScreen/StatusBar.vue
index 954d283..45bd795 100644
--- a/app/components/Settings/TopScreen/StatusBar.vue
+++ b/app/components/Settings/TopScreen/StatusBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const { onRender } = useScreen();
 
+const app = useAppStore();
 const { assets } = useAssets();
 
 onRender((ctx) => {
@@ -39,7 +40,11 @@ onRender((ctx) => {
 
   // icons
   assets.images.home.topScreen.statusBar.gbaDisplay.draw(ctx, 210, 2);
-  assets.images.home.topScreen.statusBar.startupMode.draw(ctx, 226, 2);
+  if (app.settings.renderingMode === "3d") {
+    assets.images.home.topScreen.statusBar._3dMode.draw(ctx, 226, 2);
+  } else {
+    assets.images.home.topScreen.statusBar._2dMode.draw(ctx, 226, 2);
+  }
   assets.images.home.topScreen.statusBar.battery.draw(ctx, 242, 4);
 });
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 90dc47d..a437a02 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { Screen as NDSScreen } from "#components";
 
-const ENABLE_3D = true;
-
 type ScreenInstance = InstanceType<typeof NDSScreen>;
 
 const { isReady } = useAssets();
@@ -15,6 +13,8 @@ const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
 const topScreenCanvas = computed(() => topScreen.value?.canvas ?? null);
 const bottomScreenCanvas = computed(() => bottomScreen.value?.canvas ?? null);
 
+const a = useAchievementsStore();
+
 const keyToButton: Record<string, string> = {
   ArrowUp: "UP",
   ArrowDown: "DOWN",
@@ -22,8 +22,8 @@ const keyToButton: Record<string, string> = {
   ArrowRight: "RIGHT",
   d: "A",
   s: "B",
-  w: "X",
-  a: "Y",
+  z: "X",
+  q: "Y",
   " ": "SELECT",
   Enter: "START",
 };
@@ -33,17 +33,33 @@ const keyToButton: Record<string, string> = {
 // that's a bit dirty but who cares, there is a lot of dirty things going on here
 // like who choose Nuxt to build such an app
 useKeyDown((key) => {
-  if (ENABLE_3D) return;
+  if (app.settings.renderingMode === "3d") return;
   const button = keyToButton[key];
   if (button) {
     window.dispatchEvent(
       new KeyboardEvent("keydown", { key: `NDS_${button}` }),
     );
   }
+
+  // testing purpose only
+  if (key === "m") {
+    a.reset();
+  } else if (key === "o") {
+    for (const ach of ACHIEVEMENTS) {
+      a.unlock(ach);
+    }
+  } else if (key === "p") {
+    for (const ach of ACHIEVEMENTS) {
+      if (!a.isUnlocked(ach)) {
+        a.unlock(ach);
+        break;
+      }
+    }
+  }
 });
 
 useKeyUp((key) => {
-  if (ENABLE_3D) return;
+  if (app.settings.renderingMode === "3d") return;
   const button = keyToButton[key];
   if (button) {
     window.dispatchEvent(new KeyboardEvent("keyup", { key: `NDS_${button}` }));
@@ -54,7 +70,11 @@ useKeyUp((key) => {
 <template>
   <LoadingScreen v-if="!isReady" />
   <div v-else>
-    <TresCanvas v-if="ENABLE_3D" window-size clear-color="#181818">
+    <TresCanvas
+      v-if="app.settings.renderingMode === '3d'"
+      window-size
+      clear-color="#181818"
+    >
       <TresPerspectiveCamera :args="[45, 1, 0.001, 1000]" />
 
       <TresAmbientLight />
@@ -67,7 +87,11 @@ useKeyUp((key) => {
       />
     </TresCanvas>
 
-    <div :style="{ visibility: ENABLE_3D ? 'hidden' : 'visible' }">
+    <div
+      :style="{
+        visibility: app.settings.renderingMode === '3d' ? 'hidden' : 'visible',
+      }"
+    >
       <div>
         <Screen ref="topScreen">
           <IntroTopScreen v-if="!app.booted" />
@@ -89,6 +113,7 @@ useKeyUp((key) => {
           <ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
           <SettingsBottomScreen v-else-if="app.screen === 'settings'" />
           <GalleryBottomScreen v-else-if="app.screen === 'gallery'" />
+          <AchievementsBottomScreen v-else-if="app.screen === 'achievements'" />
         </Screen>
       </div>
     </div>
diff --git a/app/stores/app.ts b/app/stores/app.ts
index cb8a3c7..cc4871f 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -8,12 +8,14 @@ const settingsSchema = z.object({
     col: z.number(),
     row: z.number(),
   }),
+  renderingMode: z.enum(["3d", "2d"]),
 });
 
 type Settings = z.infer<typeof settingsSchema>;
 
 const defaultSettings = (): Settings => ({
   color: { col: 0, row: 0 },
+  renderingMode: "3d",
 });
 
 export const useAppStore = defineStore("app", {
@@ -27,7 +29,8 @@ export const useAppStore = defineStore("app", {
     }
 
     return {
-      booted: false,
+      ready: false,
+      booted: true,
       settings,
       previousScreen: "home" as AppScreen,
       screen: "home" as AppScreen,
@@ -40,6 +43,12 @@ export const useAppStore = defineStore("app", {
       this.settings.color = { col, row };
     },
 
+    setRenderingMode(mode: Settings["renderingMode"]) {
+      this.ready = mode === "2d";
+      this.settings.renderingMode = mode;
+      this.save();
+    },
+
     navigateTo(screen: AppScreen) {
       this.previousScreen = this.screen;
       this.screen = screen;
diff --git a/app/utils/canvas.ts b/app/utils/canvas.ts
index 90c338c..1fe24a2 100644
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -13,6 +13,23 @@ export const fillTextCentered = (
   return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
 };
 
+export const fillImageTextHCentered = (
+  ctx: CanvasRenderingContext2D,
+  image: AtlasImage,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  gap: number,
+) => {
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
+  const totalWidth = textWidth + gap + image.rect.width;
+  const groupX = Math.floor(x + width / 2 - totalWidth / 2);
+
+  image.draw(ctx, groupX, y);
+  ctx.fillText(text, groupX + gap + image.rect.width, y);
+};
+
 export const fillTextHCentered = (
   ctx: CanvasRenderingContext2D,
   text: string,
@@ -25,6 +42,20 @@ export const fillTextHCentered = (
   ctx.fillText(text, textX, y);
 };
 
+export const fillTextHCenteredMultiline = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  lineHeight: number,
+) => {
+  const lines = text.split("\n");
+  for (let i = 0, y = 20; i < lines.length; i += 1, y += lineHeight) {
+    fillTextHCentered(ctx, lines[i]!, 0, y, width);
+  }
+};
+
 export const fillTextWordWrapped = (
   ctx: CanvasRenderingContext2D,
   text: string,
diff --git a/public/nds/images/home/top-screen/status-bar/2d-mode.webp b/public/nds/images/home/top-screen/status-bar/2d-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4d236b80a601da9405d7dfb5be29ebace5e89969
GIT binary patch
literal 82
zcmWIYbaV4!U|<M$bqWXzu<)@1vh}$dm>9Mi<Vt&9*jj$S-rV2+_Tfzz5|vwh4zPTw
mXW~0-JpIXH&rMI<SMzU3nzrqlT?tcj*@D1LEF31M3m5@=S|3;d

literal 0
HcmV?d00001

diff --git a/public/nds/images/home/top-screen/status-bar/3d-mode.webp b/public/nds/images/home/top-screen/status-bar/3d-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..67bfbca1dacc0f5cc2bd625ee97a38d5f1afa55e
GIT binary patch
literal 80
zcmWIYbaV4yU|<M$bqWXzu<)@4vh}$dm>5b8@@|_2T;F}We%9&j(<PZ4`P34ae%Uj&
kKbzV9|6sp}ns|q|Oq|Iv?}=<C*W4z~IO^zdVWA}h00fg9yZ`_I

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/rendering-mode/2d-mode.webp b/public/nds/images/settings/bottom-screen/options/rendering-mode/2d-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..5f9b9c4b4fbac0558bd96f727b636aaf2bd28caa
GIT binary patch
literal 48
zcmWIYbaT^SU|<M$bqWXzu<(%vvh_I_m;@9~Y+JeidwFZe&-o0>3M;xinwH9QgfRdB
DF{BQL

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/rendering-mode/3d-mode.webp b/public/nds/images/settings/bottom-screen/options/rendering-mode/3d-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e6d58768721c71c498d743a4762b289df0269d3d
GIT binary patch
literal 50
zcmWIYbaT^UU|<M$bqWXzu<(%uvh_I_m;?+aZ1eqd``)+cjv4<sKX7oUDXB~RVrE&-
F002`U4>$k-

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/rendering-mode/button-active.webp b/public/nds/images/settings/bottom-screen/options/rendering-mode/button-active.webp
new file mode 100644
index 0000000000000000000000000000000000000000..65e7ca3d04f2b36a5fd609784cd3383e8f862d68
GIT binary patch
literal 2124
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
Gz<&es`A7i(

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/rendering-mode/button.webp b/public/nds/images/settings/bottom-screen/options/rendering-mode/button.webp
new file mode 100644
index 0000000000000000000000000000000000000000..b386fbe64e384a2e727924c6ef3c14b48d6fdb15
GIT binary patch
literal 168
zcmV;Z09XG~Nk&GX00012MM6+kP&iDK0000l-oOtKb-1l<H%#LFw_p_50B=AxfG%mF
zlg>X>vHXtYi2f@~+lGnBXiwS1(Kw}XKz*!dl;?ayNMk|l*0aKMzQDZ0wQE61BNeJ!
zPs(#X8|GcEO*XnTW}`o>XW%*S4fDpeV>Ut>OQ23^9Bkr%x(Op0RP3_&k*@dUe_Z~@
W-yc(5Oo5?`FX{SaW-_KM0AK*lzE0Hu

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/options/rendering-mode/startup-mode.webp b/public/nds/images/settings/bottom-screen/options/rendering-mode/startup-mode.webp
new file mode 100644
index 0000000000000000000000000000000000000000..3cd2a4eeb600982d0dfbad94f641bc72c9fb10e4
GIT binary patch
literal 88
zcmWIYbaM+}U|<M$bqWXzu<&sKvh}$dm>9$r1Uw$yzMsz9=pc0epB*>Lq#xhDSN>zJ
s7d7Zo(G0TJT(W?f+r{Mm?|^L^yOe*)Pugey>tPr7xr&Ev@`|jU0Pofz3;+NC

literal 0
HcmV?d00001