pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: relocate constants in screen stores

Browse Source
This commit is contained in:
Stevan
2026-01-31 00:52:56 +01:00
parent 742e6363a4
commit 630b399088
13 changed files with 74 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/Contact/BottomScreen/BottomScreen.vue
View File

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

1
app/components/NDS.vue
View File

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

2
app/components/Screen.vue
View File

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

4
app/pages/gallery.vue
View File

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

9
app/stores/achievementsScreen.ts
View File

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

15
app/stores/app.ts
View File

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

39
app/stores/settings.ts
View File

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

30
app/utils/achievements.ts
View File

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

6
app/utils/app.ts
View File

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

2
app/utils/async.ts
View File

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

22
app/utils/canvas.ts
View File

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

7
app/utils/screen.ts
View File

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

22
app/utils/settings.ts
View File

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