refactor: relocate constants in screen stores

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

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,

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

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("/");
     },

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: {

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({

app/stores/settings.ts

@@ -1,25 +1,32 @@
-export type SettingsButton =
+export const SETTINGS_MENUS = [
-  | "options"
+  "options",
-  | "optionsLanguage"
+  "clock",
-  | "options2048"
+  "user",
-  | "optionsStartUp"
+  "touchScreen",
-  | "clock"
+] as const;
-  | "clockAchievements"
+
-  | "clockTime"
+export const SETTINGS_SUB_MENUS = [
-  | "clockDate"
+  "optionsLanguage",
-  | "user"
+  "options2048",
-  | "userBirthday"
+  "optionsStartUp",
-  | "userUserName"
+  "clockAchievements",
-  | "userSnake"
+  "clockTime",
-  | "userColor"
+  "clockDate",
-  | "touchScreen";
+  "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: {

app/utils/achievements.ts

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

app/utils/app.ts

@@ -1,6 +0,0 @@
-export const APP_COLORS = [
-  ["#61829a", "#ba4900", "#fb0018", "#fb8afb"],
-  ["#fb9200", "#f3e300", "#aafb00", "#00fb00"],
-  ["#00a238", "#49db8a", "#30baf3", "#0059f3"],
-  ["#000092", "#8a00d3", "#d300eb", "#fb0092"],
-];

app/utils/async.ts

@@ -1,2 +0,0 @@
-export const sleep = (ms: number) =>
-  new Promise<void>((resolve) => setTimeout(resolve, ms));

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,

app/utils/screen.ts

@@ -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;

app/utils/settings.ts

@@ -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];