feat(settings/options/rendering-mode): implement

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>