From 630b3990883a4bc500704605c3e66874292c5599 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Sat, 31 Jan 2026 00:52:56 +0100
Subject: [PATCH] refactor: relocate constants in screen stores

---
 .../Contact/BottomScreen/BottomScreen.vue     |  5 ++-
 app/components/NDS.vue                        |  1 -
 app/components/Screen.vue                     |  2 -
 app/pages/gallery.vue                         |  4 +-
 app/stores/achievementsScreen.ts              |  9 +++++
 app/stores/app.ts                             | 15 +++++++
 app/stores/settings.ts                        | 39 +++++++++++--------
 app/utils/achievements.ts                     | 30 --------------
 app/utils/app.ts                              |  6 ---
 app/utils/async.ts                            |  2 -
 app/utils/canvas.ts                           | 22 +++++++++++
 app/utils/screen.ts                           |  7 ----
 app/utils/settings.ts                         | 22 -----------
 13 files changed, 74 insertions(+), 90 deletions(-)
 delete mode 100644 app/utils/achievements.ts
 delete mode 100644 app/utils/app.ts
 delete mode 100644 app/utils/async.ts
 delete mode 100644 app/utils/screen.ts
 delete mode 100644 app/utils/settings.ts

diff --git a/app/components/Contact/BottomScreen/BottomScreen.vue b/app/components/Contact/BottomScreen/BottomScreen.vue
index 2865ea4..63c3386 100644
--- a/app/components/Contact/BottomScreen/BottomScreen.vue
+++ b/app/components/Contact/BottomScreen/BottomScreen.vue
@@ -2,6 +2,7 @@
 import Background from "./Background.vue";
 import Buttons from "./Buttons.vue";
 import ButtonSelector from "~/components/Common/ButtonSelector.vue";
+import { promiseTimeout } from "@vueuse/core";
 
 const store = useContactStore();
 const achievements = useAchievementsStore();
@@ -71,10 +72,10 @@ const actionateButton = async (button: (typeof selected)["value"]) => {
       text: $t("contact.openUrl", { url }),
       onConfirm: async () => {
         store.pushNotification($t("contact.opened", { item: verb }));
-        await sleep(100);
+        await promiseTimeout(100);
         await navigateTo(content, { open: { target: "_blank " } });
 
-        await sleep(500);
+        await promiseTimeout(500);
 
         if (button === "github") {
           achievements.unlock("contact_git_visit");
diff --git a/app/components/NDS.vue b/app/components/NDS.vue
index f09647f..8a7440b 100644
--- a/app/components/NDS.vue
+++ b/app/components/NDS.vue
@@ -2,7 +2,6 @@
 import { useLoop, useTresContext } from "@tresjs/core";
 import * as THREE from "three";
 import gsap from "gsap";
-import { LOGICAL_WIDTH, LOGICAL_HEIGHT } from "~/utils/screen";
 
 const INTRO_ANIMATION = {
   MODEL_SPIN_DURATION: 3,
diff --git a/app/components/Screen.vue b/app/components/Screen.vue
index 2202e31..7510ac5 100644
--- a/app/components/Screen.vue
+++ b/app/components/Screen.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { LOGICAL_WIDTH, LOGICAL_HEIGHT, SCREEN_SCALE } from "~/utils/screen";
-
 const canvas = useTemplateRef("canvas");
 
 const renderCallbacks = new Map<RenderCallback, number>();
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 50ad613..1013747 100644
--- a/app/pages/gallery.vue
+++ b/app/pages/gallery.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LazyGalleryModal } from "#components";
 import type { InternalApi } from "nitropack/types";
-import { useElementSize } from "@vueuse/core";
+import { promiseTimeout, useElementSize } from "@vueuse/core";
 import gsap from "gsap";
 
 const { data: images } = await useAsyncData(
@@ -156,7 +156,7 @@ const animateOutro = async () => {
 
   typeText(descriptionText, description.value, DESCRIPTION_DURATION, true, {
     onComplete: async () => {
-      await sleep(ANIMATION_SLEEP * 1000);
+      await promiseTimeout(ANIMATION_SLEEP * 1000);
       galleryStore.shouldAnimateOutro = true;
       router.push("/");
     },
diff --git a/app/stores/achievementsScreen.ts b/app/stores/achievementsScreen.ts
index e6974a1..cd21735 100644
--- a/app/stores/achievementsScreen.ts
+++ b/app/stores/achievementsScreen.ts
@@ -1,5 +1,14 @@
 import gsap from "gsap";
 
+export const ACHIEVEMENTS_LINE_HEIGHT = 14;
+export const ACHIEVEMENTS_HEADER_Y = 20;
+export const ACHIEVEMENTS_LIST_START_Y = ACHIEVEMENTS_HEADER_Y + 55;
+export const ACHIEVEMENTS_BOTTOM_START_Y = 10;
+export const ACHIEVEMENTS_TOP_SCREEN_COUNT = Math.floor(
+  (LOGICAL_HEIGHT - ACHIEVEMENTS_LIST_START_Y) / ACHIEVEMENTS_LINE_HEIGHT,
+);
+export const ACHIEVEMENTS_X = 55;
+
 export const useAchievementsScreen = defineStore("achievementsScreen", {
   state: () => ({
     fadeToBlack: {
diff --git a/app/stores/app.ts b/app/stores/app.ts
index cc4871f..d39e82f 100644
--- a/app/stores/app.ts
+++ b/app/stores/app.ts
@@ -1,6 +1,21 @@
 import { z } from "zod/mini";
 import type * as THREE from "three";
 
+export const LOGICAL_WIDTH = 256;
+export const LOGICAL_HEIGHT = 192;
+
+export const SCREEN_SCALE = 2;
+
+export const SCREEN_WIDTH = LOGICAL_WIDTH * SCREEN_SCALE;
+export const SCREEN_HEIGHT = LOGICAL_HEIGHT * SCREEN_SCALE;
+
+export const APP_COLORS = [
+  ["#61829a", "#ba4900", "#fb0018", "#fb8afb"],
+  ["#fb9200", "#f3e300", "#aafb00", "#00fb00"],
+  ["#00a238", "#49db8a", "#30baf3", "#0059f3"],
+  ["#000092", "#8a00d3", "#d300eb", "#fb0092"],
+];
+
 const STORAGE_ID = "app_settings";
 
 const settingsSchema = z.object({
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index ccad79b..5a78528 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -1,25 +1,32 @@
-export type SettingsButton =
-  | "options"
-  | "optionsLanguage"
-  | "options2048"
-  | "optionsStartUp"
-  | "clock"
-  | "clockAchievements"
-  | "clockTime"
-  | "clockDate"
-  | "user"
-  | "userBirthday"
-  | "userUserName"
-  | "userSnake"
-  | "userColor"
-  | "touchScreen";
+export const SETTINGS_MENUS = [
+  "options",
+  "clock",
+  "user",
+  "touchScreen",
+] as const;
+
+export const SETTINGS_SUB_MENUS = [
+  "optionsLanguage",
+  "options2048",
+  "optionsStartUp",
+  "clockAchievements",
+  "clockTime",
+  "clockDate",
+  "userBirthday",
+  "userUserName",
+  "userSnake",
+  "userColor",
+] as const;
+
+export type SettingsMenu = (typeof SETTINGS_MENUS)[number];
+export type SettingsSubMenu = (typeof SETTINGS_SUB_MENUS)[number];
 
 export const useSettingsStore = defineStore("settings", {
   state: () => ({
     currentMenu: null as SettingsMenu | null,
     currentSubMenu: null as SettingsSubMenu | null,
     menuExpanded: false,
-    selectedButton: "options" as SettingsButton,
+    selectedButton: "options" as SettingsMenu | SettingsSubMenu,
   }),
 
   actions: {
diff --git a/app/utils/achievements.ts b/app/utils/achievements.ts
deleted file mode 100644
index 3917e5a..0000000
--- a/app/utils/achievements.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const ACHIEVEMENTS_LINE_HEIGHT = 14;
-export const ACHIEVEMENTS_HEADER_Y = 20;
-export const ACHIEVEMENTS_LIST_START_Y = ACHIEVEMENTS_HEADER_Y + 55;
-export const ACHIEVEMENTS_BOTTOM_START_Y = 10;
-export const ACHIEVEMENTS_TOP_SCREEN_COUNT = Math.floor(
-  (LOGICAL_HEIGHT - ACHIEVEMENTS_LIST_START_Y) / ACHIEVEMENTS_LINE_HEIGHT,
-);
-
-export const CHECKBOX_SIZE = 7;
-export const CHECKBOX_TEXT_GAP = 5;
-export const ACHIEVEMENTS_X = 55;
-
-export const drawCheckbox = (
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  checked: boolean,
-) => {
-  ctx.fillRect(x, y, CHECKBOX_SIZE, 1);
-  ctx.fillRect(x, y + CHECKBOX_SIZE - 1, CHECKBOX_SIZE, 1);
-  ctx.fillRect(x, y + 1, 1, CHECKBOX_SIZE - 2);
-  ctx.fillRect(x + CHECKBOX_SIZE - 1, y + 1, 1, CHECKBOX_SIZE - 2);
-
-  if (checked) {
-    for (let i = 2; i < CHECKBOX_SIZE - 2; i++) {
-      ctx.fillRect(x + i, y + i, 1, 1);
-      ctx.fillRect(x + CHECKBOX_SIZE - 1 - i, y + i, 1, 1);
-    }
-  }
-};
diff --git a/app/utils/app.ts b/app/utils/app.ts
deleted file mode 100644
index fc46bc7..0000000
--- a/app/utils/app.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const APP_COLORS = [
-  ["#61829a", "#ba4900", "#fb0018", "#fb8afb"],
-  ["#fb9200", "#f3e300", "#aafb00", "#00fb00"],
-  ["#00a238", "#49db8a", "#30baf3", "#0059f3"],
-  ["#000092", "#8a00d3", "#d300eb", "#fb0092"],
-];
diff --git a/app/utils/async.ts b/app/utils/async.ts
deleted file mode 100644
index 7ce4b40..0000000
--- a/app/utils/async.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const sleep = (ms: number) =>
-  new Promise<void>((resolve) => setTimeout(resolve, ms));
diff --git a/app/utils/canvas.ts b/app/utils/canvas.ts
index 1fe24a2..1aefeae 100644
--- a/app/utils/canvas.ts
+++ b/app/utils/canvas.ts
@@ -56,6 +56,28 @@ export const fillTextHCenteredMultiline = (
   }
 };
 
+export const CHECKBOX_SIZE = 7;
+export const CHECKBOX_TEXT_GAP = 5;
+
+export const drawCheckbox = (
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  checked: boolean,
+) => {
+  ctx.fillRect(x, y, CHECKBOX_SIZE, 1);
+  ctx.fillRect(x, y + CHECKBOX_SIZE - 1, CHECKBOX_SIZE, 1);
+  ctx.fillRect(x, y + 1, 1, CHECKBOX_SIZE - 2);
+  ctx.fillRect(x + CHECKBOX_SIZE - 1, y + 1, 1, CHECKBOX_SIZE - 2);
+
+  if (checked) {
+    for (let i = 2; i < CHECKBOX_SIZE - 2; i++) {
+      ctx.fillRect(x + i, y + i, 1, 1);
+      ctx.fillRect(x + CHECKBOX_SIZE - 1 - i, y + i, 1, 1);
+    }
+  }
+};
+
 export const fillTextWordWrapped = (
   ctx: CanvasRenderingContext2D,
   text: string,
diff --git a/app/utils/screen.ts b/app/utils/screen.ts
deleted file mode 100644
index 79076de..0000000
--- a/app/utils/screen.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const LOGICAL_WIDTH = 256;
-export const LOGICAL_HEIGHT = 192;
-
-export const SCREEN_SCALE = 2;
-
-export const SCREEN_WIDTH = LOGICAL_WIDTH * SCREEN_SCALE;
-export const SCREEN_HEIGHT = LOGICAL_HEIGHT * SCREEN_SCALE;
diff --git a/app/utils/settings.ts b/app/utils/settings.ts
deleted file mode 100644
index b82c53e..0000000
--- a/app/utils/settings.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const SETTINGS_MENUS = [
-  "options",
-  "clock",
-  "user",
-  "touchScreen",
-] as const;
-
-export const SETTINGS_SUB_MENUS = [
-  "optionsLanguage",
-  "options2048",
-  "optionsStartUp",
-  "clockAchievements",
-  "clockTime",
-  "clockDate",
-  "userBirthday",
-  "userUserName",
-  "userSnake",
-  "userColor",
-] as const;
-
-export type SettingsMenu = (typeof SETTINGS_MENUS)[number];
-export type SettingsSubMenu = (typeof SETTINGS_SUB_MENUS)[number];