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

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>

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);
 });