From dc317d53e57824fdf32d0de9053f193dd419b411 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Sat, 27 Dec 2025 16:48:10 +0100
Subject: [PATCH] feat(settings/user/color): implement basic color picker
 without animations

---
 .../Settings/BottomScreen/Menus/Menus.vue     |   5 +
 .../BottomScreen/Menus/User/Color.vue         | 100 ++++++++++++++++++
 app/stores/app.ts                             |  15 +++
 app/utils/app.ts                              |   6 ++
 .../bottom-screen/user/color-palette.webp     | Bin 0 -> 304 bytes
 .../bottom-screen/user/color-selector.webp    | Bin 0 -> 62 bytes
 6 files changed, 126 insertions(+)
 create mode 100644 app/components/Settings/BottomScreen/Menus/User/Color.vue
 create mode 100644 app/utils/app.ts
 create mode 100644 public/images/settings/bottom-screen/user/color-palette.webp
 create mode 100644 public/images/settings/bottom-screen/user/color-selector.webp

diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index f3c33a6..2c98be4 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -4,6 +4,8 @@ import OptionsStartUp from "./Options/StartUp.vue";
 import OptionsLanguage from "./Options/Language.vue";
 import OptionsGbaMode from "./Options/GbaMode.vue";
 
+import UserColor from "./User/Color.vue";
+
 import ClockMenu from "./Clock/Menu.vue";
 import UserMenu from "./User/Menu.vue";
 import TouchScreenMenu from "./TouchScreen/Menu.vue";
@@ -113,6 +115,7 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
       left: "user",
     },
   },
+  disabled: computed(() => settingsStore.currentSubMenu !== null),
 });
 
 const isSubmenu = (buttonName: string) => {
@@ -170,6 +173,8 @@ const viewComponents: Record<string, Component> = {
   optionsStartUp: OptionsStartUp,
   optionsLanguage: OptionsLanguage,
   optionsGbaMode: OptionsGbaMode,
+
+  userColor: UserColor,
 };
 </script>
 
diff --git a/app/components/Settings/BottomScreen/Menus/User/Color.vue b/app/components/Settings/BottomScreen/Menus/User/Color.vue
new file mode 100644
index 0000000..133f759
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/User/Color.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+const GRID_SIZE = 4;
+const GRID_START_X = 32;
+const GRID_START_Y = 40;
+const CELL_SIZE = 16;
+const SPACING = 16;
+const ANIMATION_SPEED = 475;
+
+const app = useAppStore();
+const { assets } = useAssets();
+
+let selectedCol = app.color.col;
+let selectedRow = app.color.row;
+let selectorX = GRID_START_X + selectedCol * (CELL_SIZE + SPACING) - 4;
+let selectorY = GRID_START_Y + selectedRow * (CELL_SIZE + SPACING) - 4;
+
+const select = (col: number, row: number) => {
+  selectedCol = col;
+  selectedRow = row;
+  app.setColor(col, row);
+};
+
+useKeyDown((key) => {
+  switch (key) {
+    case "NDS_UP":
+      if (selectedRow > 0) select(selectedCol, selectedRow - 1);
+      break;
+    case "NDS_RIGHT":
+      if (selectedCol < GRID_SIZE - 1) select(selectedCol + 1, selectedRow);
+      break;
+    case "NDS_DOWN":
+      if (selectedRow < GRID_SIZE - 1) select(selectedCol, selectedRow + 1);
+      break;
+    case "NDS_LEFT":
+      if (selectedCol > 0) select(selectedCol - 1, selectedRow);
+      break;
+  }
+});
+
+useScreenClick((x, y) => {
+  const relativeX = x - GRID_START_X;
+  const relativeY = y - GRID_START_Y;
+
+  const col = Math.floor(relativeX / (CELL_SIZE + SPACING));
+  const row = Math.floor(relativeY / (CELL_SIZE + SPACING));
+
+  const cellLocalX = relativeX % (CELL_SIZE + SPACING);
+  const cellLocalY = relativeY % (CELL_SIZE + SPACING);
+
+  if (
+    rectContains([0, 0, GRID_SIZE, GRID_SIZE], [col, row]) &&
+    rectContains([0, 0, CELL_SIZE + 1, CELL_SIZE + 1], [cellLocalX, cellLocalY])
+  ) {
+    select(col, row);
+  }
+});
+
+useRender((ctx, deltaTime) => {
+  ctx.drawImage(assets.settings.bottomScreen.user.colorPalette, 16, 32);
+
+  // animate
+  const finalSelectorX = GRID_START_X + selectedCol * (CELL_SIZE + SPACING) - 4;
+  const finalSelectorY = GRID_START_Y + selectedRow * (CELL_SIZE + SPACING) - 4;
+
+  const dx = finalSelectorX - selectorX;
+  const dy = finalSelectorY - selectorY;
+
+  if (dx > 0) {
+    selectorX += ANIMATION_SPEED * (deltaTime / 1000);
+    if (selectorX > finalSelectorX) selectorX = finalSelectorX;
+  } else if (dx < 0) {
+    selectorX -= ANIMATION_SPEED * (deltaTime / 1000);
+    if (selectorX < finalSelectorX) selectorX = finalSelectorX;
+  } else if (dy > 0) {
+    selectorY += ANIMATION_SPEED * (deltaTime / 1000);
+    if (selectorY > finalSelectorY) selectorY = finalSelectorY;
+  } else if (dy < 0) {
+    selectorY -= ANIMATION_SPEED * (deltaTime / 1000);
+    if (selectorY < finalSelectorY) selectorY = finalSelectorY;
+  }
+
+  // selector
+  ctx.fillStyle = APP_COLORS[selectedRow]![selectedCol]!;
+
+  const offsets = [0, 3, 7, 11, 15, 19, 22];
+  for (const offset of offsets) {
+    ctx.fillRect(selectorX + offset, selectorY + 0, 2, 1);
+    ctx.fillRect(selectorX + offset, selectorY + 23, 2, 1);
+    ctx.fillRect(selectorX + 0, selectorY + offset, 1, 2);
+    ctx.fillRect(selectorX + 23, selectorY + offset, 1, 2);
+  }
+
+  // preview
+  ctx.fillRect(192, 96, 32, 32);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>
diff --git a/app/stores/app.ts b/app/stores/app.ts
index a92e724..d223abe 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -1,5 +1,20 @@
 export const useAppStore = defineStore("app", {
   state: () => ({
     booted: false,
+    _color: { col: 0, row: 0 },
   }),
+
+  actions: {
+    setColor(col: number, row: number) {
+      this._color = { col, row };
+    },
+  },
+
+  getters: {
+    color: (state) => ({
+      col: state._color.col,
+      row: state._color.row,
+      hex: APP_COLORS[state._color.row]![state._color.col]!,
+    }),
+  },
 });
diff --git a/app/utils/app.ts b/app/utils/app.ts
new file mode 100644
index 0000000..fc46bc7
--- /dev/null
+++ b/app/utils/app.ts
@@ -0,0 +1,6 @@
+export const APP_COLORS = [
+  ["#61829a", "#ba4900", "#fb0018", "#fb8afb"],
+  ["#fb9200", "#f3e300", "#aafb00", "#00fb00"],
+  ["#00a238", "#49db8a", "#30baf3", "#0059f3"],
+  ["#000092", "#8a00d3", "#d300eb", "#fb0092"],
+];
diff --git a/public/images/settings/bottom-screen/user/color-palette.webp b/public/images/settings/bottom-screen/user/color-palette.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fc1fc5641da1b208d4559fdc16c743174a73f87c
GIT binary patch
literal 304
zcmV-00nh$YNk&E}0RRA3MM6+kP&iB+0RR9m-~b>HHMp&{Jxj74Be;&GB_mKWf~_N1
zS~3D<+HjtuZ+PQh0<ei}+sXN<{|bMf6F~$<C=r7IghW=6Z8te-9=ed2YE}}u2|f{m
z3`Ed>CTtr?a<mHv-+z1rJN2+<*9Z~J^gr!<S&Vi4!C1I0#xA{Mn@b9KC83@)fV{(?
z8;JW1+(Dd26NvV7l1Hj_EGBuRt;~8~FgDqQv3MAaMPsm+m_f5AlT1>rBc0^Y4B|cn
z5kz}B$s^S|7Lz>E_8HJW_iB**2=8x{ffMa|Q~3X<t49oO!`P$T7`v_+W2gPXHkTCe
zN<y`xfOnSb5rKiRu)P=y=ZCRy53HJy{cC*=9r6rV!Iy~sMXmot`)^tSe+zinDL*?W
Cn}<^X

literal 0
HcmV?d00001

diff --git a/public/images/settings/bottom-screen/user/color-selector.webp b/public/images/settings/bottom-screen/user/color-selector.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cb0f0a96041f2f4c0b814d226db7c15b8e1ce158
GIT binary patch
literal 62
zcmWIYbaOLfU|<M$bqWXzu<+3Yvh~FeunO=S{QqqK|FirDgUbfKg?+qDMt|PSYU=p+
SpJCxl1BIH8_Ya+AU;qGi?iiT>

literal 0
HcmV?d00001