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

feat: remove query based routing

Browse Source
This commit is contained in:
Stevan
2025-12-29 19:47:01 +01:00
parent e912270d1e
commit 96f8d5093b
14 changed files with 207 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/Settings/BottomScreen/Menus/Clock/Menu.vue
View File

@@ -5,13 +5,25 @@ const props = defineProps<{
}>();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("clock"),
const isOpen = computed(
() => settingsStore.currentMenu === "clock" && settingsStore.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("clock");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "clock";
}
return false;
});
const animation = useMenuAnimation("clock", isOpen);

95
app/components/Settings/BottomScreen/Menus/Menus.vue
View File

@@ -11,8 +11,27 @@ import UserMenu from "./User/Menu.vue";
import TouchScreenMenu from "./TouchScreen/Menu.vue";
import Selector from "~/components/Common/ButtonSelector.vue";
const app = useAppStore();
const settingsStore = useSettingsStore();
type Menu = "options" | "clock" | "user" | "touchScreen";
const MAIN_MENUS: Menu[] = ["options", "clock", "user", "touchScreen"];
const isMainMenu = (button: string): button is Menu => {
return MAIN_MENUS.includes(button as Menu);
};
const isSubMenu = (button: string): boolean => {
return /^(options|clock|user|touchScreen)[A-Z]/.test(button);
};
const getParentMenu = (submenu: string): Menu => {
const match = submenu.match(/^(options|clock|user|touchScreen)/);
if (!match?.[1]) throw new Error(`Invalid submenu: '${submenu}'`);
return match[1] as Menu;
};
const { selectedButton: selected, selectorPosition } = useButtonNavigation({
buttons: {
options: [31, 119, 49, 49],
@@ -35,13 +54,8 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
},
initialButton: "options",
onButtonClick: (buttonName: string) => {
if (isSubmenu(buttonName)) {
router.push({
query: {
screen: "settings",
menu: buttonName,
},
});
if (isSubMenu(buttonName)) {
settingsStore.openSubMenu(buttonName);
}
},
navigation: {
@@ -118,51 +132,27 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
disabled: computed(() => settingsStore.currentSubMenu !== null),
});
const isSubmenu = (buttonName: string) => {
return (
/^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
!["options", "clock", "user", "touchScreen"].includes(buttonName)
);
};
const isSubmenuSelected = computed(() => isSubMenu(selected.value));
const selectedSubmenuParent = computed(() =>
isSubmenuSelected.value ? getParentMenu(selected.value) : null,
);
const router = useRouter();
onBeforeRouteUpdate((to, from) => {
const fromMenu = from.query.menu?.toString();
const toMenu = to.query.menu?.toString();
if (!fromMenu && toMenu) {
settingsStore.setActiveMenu(selected.value);
} else if (fromMenu && !toMenu) {
if (fromMenu === "options" || fromMenu === "clock" || fromMenu === "user") {
selected.value = fromMenu;
settingsStore.setActiveMenu(null);
} else {
throw new Error("Unreachable");
}
} else if (fromMenu && toMenu) {
if (toMenu === "options" || toMenu === "clock" || toMenu === "user") {
settingsStore.setCurrentSubMenu(null);
settingsStore.setActiveMenu(selected.value);
} else {
settingsStore.setCurrentSubMenu(toMenu);
}
}
provide("menusContext", {
isSubmenuSelected,
selectedSubmenuParent,
});
watch(
selected,
(newSelected) => {
if (settingsStore.currentSubMenu === null) {
if (isSubmenu(newSelected)) {
router.push({
query: {
screen: "settings",
menu: newSelected.split(/[A-Z]/)[0],
},
});
} else {
router.push({ query: { screen: "settings", menu: undefined } });
if (isMainMenu(newSelected)) {
settingsStore.openMenu(newSelected, false);
} else if (isSubMenu(newSelected)) {
const parentMenu = getParentMenu(newSelected);
if (parentMenu) {
settingsStore.openMenu(parentMenu, true);
}
}
}
},
@@ -186,6 +176,21 @@ const viewComponents: Record<string, Component> = {
<TouchScreenMenu :x="177" :y="121" :opacity="1" />
<Selector :rect="selectorPosition" :opacity="1" />
<CommonButtons
v-if="isSubmenuSelected"
:y-offset="0"
b-label="Go back"
a-label="Select"
@activate-b="selected = getParentMenu(selected)"
/>
<CommonButtons
v-else
:y-offset="0"
b-label="Quit"
a-label="Select"
@activate-b="app.navigateTo('home')"
/>
</template>
<component :is="viewComponents[settingsStore.currentSubMenu]" v-else />
</template>

18
app/components/Settings/BottomScreen/Menus/Options/Menu.vue
View File

@@ -5,13 +5,25 @@ const props = defineProps<{
}>();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("options"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("options"),
const isOpen = computed(
() => settingsStore.currentMenu === "options" && settingsStore.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("options");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "options";
}
return false;
});
const animation = useMenuAnimation("options", isOpen);

17
app/components/Settings/BottomScreen/Menus/TouchScreen/Menu.vue
View File

@@ -5,12 +5,23 @@ const props = defineProps<{
}>();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("touchScreen"),
);
// TODO: i don't like this
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("touchScreen");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "touchScreen";
}
return false;
});
useRender((ctx) => {
if (isAnyOtherMenuOpen.value) {

35
app/components/Settings/BottomScreen/Menus/User/Color.vue
View File

@@ -7,8 +7,12 @@ const SPACING = 16;
const ANIMATION_SPEED = 475;
const app = useAppStore();
const store = useSettingsStore();
const { assets } = useAssets();
const originalSelectedCol = app.color.col;
const originalSelectedRow = app.color.row;
let selectedCol = app.color.col;
let selectedRow = app.color.row;
let selectorX = GRID_START_X + selectedCol * (CELL_SIZE + SPACING) - 4;
@@ -94,7 +98,32 @@ useRender((ctx, deltaTime) => {
ctx.fillRect(192, 96, 32, 32);
});
defineOptions({
render: () => null,
});
const handleCancel = () => {
select(originalSelectedCol, originalSelectedRow);
store.closeSubMenu();
};
const { open: openModal, close: closeModal } = useConfirmationModal();
const handleConfirm = () => {
app.save();
openModal({
text: "hey",
showButtons: false,
});
setTimeout(() => {
closeModal();
store.closeSubMenu();
}, 2000);
};
</script>
<template>
<CommonButtons
:y-offset="0"
b-label="Cancel"
a-label="Confirm"
@activate-b="handleCancel"
@activate-a="handleConfirm"
/>
</template>

18
app/components/Settings/BottomScreen/Menus/User/Menu.vue
View File

@@ -5,13 +5,25 @@ const props = defineProps<{
}>();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
const isOpen = computed(() => settingsStore.isMenuOpen("user"));
const isAnyOtherMenuOpen = computed(() =>
settingsStore.isAnyOtherMenuOpen("user"),
const isOpen = computed(
() => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
);
const isAnyOtherMenuOpen = computed(() => {
if (settingsStore.currentSubMenu) {
return !settingsStore.currentSubMenu.startsWith("user");
}
if (menusContext.isSubmenuSelected.value) {
return menusContext.selectedSubmenuParent.value !== "user";
}
return false;
});
const animation = useMenuAnimation("user", isOpen);

36
app/components/Settings/TopScreen/Notifications.vue
View File

@@ -30,36 +30,24 @@ const mainNotification = computed(() => ({
description: $t("settings.description"),
}));
// TODO: this could be computed instead
const MENU_IMAGES: Record<string, HTMLImageElement> = {
options: assets.settings.topScreen.options.options,
clock: assets.settings.topScreen.clock.clock,
user: assets.settings.topScreen.user.user,
touchScreen: assets.settings.topScreen.touchScreen.touchScreen,
};
const menuNotification = computed(() => {
if (!store.currentMenu) return null;
let image: HTMLImageElement | null = null;
let id = "";
if (/^options[A-Z]/.test(store.currentMenu)) {
image = assets.settings.topScreen.options.options;
id = "options";
} else if (/^clock[A-Z]/.test(store.currentMenu)) {
image = assets.settings.topScreen.clock.clock;
id = "clock";
} else if (/^user[A-Z]/.test(store.currentMenu)) {
image = assets.settings.topScreen.user.user;
id = "user";
} else if (/^touchScreen[A-Z]/.test(store.currentMenu)) {
image = assets.settings.topScreen.touchScreen.touchScreen;
id = "touchScreen";
}
if (!image) return null;
if (!store.currentMenu || !store.menuExpanded) return null;
return {
image,
title: $t(`settings.${id}.title`),
description: $t(`settings.${id}.description`),
image: MENU_IMAGES[store.currentMenu]!,
title: $t(`settings.${store.currentMenu}.title`),
description: $t(`settings.${store.currentMenu}.description`),
};
});
// TODO: this could be computed instead
const IMAGES_MAP: Record<string, HTMLImageElement> = {
optionsStartUp: assets.settings.topScreen.options.startUp,
optionsLanguage: assets.settings.topScreen.options.language,

19
app/pages/index.vue
View File

@@ -8,8 +8,7 @@ type ScreenInstance = InstanceType<typeof NDSScreen>;
const { isReady } = useAssets();
const route = useRoute();
const screen = computed(() => route.query.screen as string | undefined);
const app = useAppStore();
const topScreen = useTemplateRef<ScreenInstance>("topScreen");
const bottomScreen = useTemplateRef<ScreenInstance>("bottomScreen");
@@ -76,18 +75,18 @@ useKeyUp((key) => {
<div :style="{ visibility: ENABLE_3D ? 'hidden' : 'visible' }">
<div>
<Screen ref="topScreen">
<HomeTopScreen v-if="!screen" />
<ContactTopScreen v-else-if="screen === 'contact'" />
<ProjectsTopScreen v-else-if="screen === 'projects'" />
<SettingsTopScreen v-else-if="screen === 'settings'" />
<HomeTopScreen v-if="app.screen === 'home'" />
<ContactTopScreen v-else-if="app.screen === 'contact'" />
<ProjectsTopScreen v-else-if="app.screen === 'projects'" />
<SettingsTopScreen v-else-if="app.screen === 'settings'" />
</Screen>
</div>
<div>
<Screen ref="bottomScreen">
<HomeBottomScreen v-if="!screen" />
<ContactBottomScreen v-else-if="screen === 'contact'" />
<ProjectsBottomScreen v-else-if="screen === 'projects'" />
<SettingsBottomScreen v-else-if="screen === 'settings'" />
<HomeBottomScreen v-if="app.screen === 'home'" />
<ContactBottomScreen v-else-if="app.screen === 'contact'" />
<ProjectsBottomScreen v-else-if="app.screen === 'projects'" />
<SettingsBottomScreen v-else-if="app.screen === 'settings'" />
</Screen>
</div>
</div>

47
app/stores/app.ts
View File

@@ -15,36 +15,35 @@ const defaultSettings = (): Settings => ({
color: { col: 0, row: 0 },
});
const loadSettings = (): Settings => {
const stored = localStorage.getItem(STORAGE_ID);
try {
const result = settingsSchema.safeParse(JSON.parse(stored ?? ""));
if (result.success) {
return result.data;
}
} catch {
// JSON.parse failed
}
const settings = defaultSettings();
saveSettings(settings);
return settings;
};
const saveSettings = (settings: Settings) => {
localStorage.setItem(STORAGE_ID, JSON.stringify(settings));
};
export const useAppStore = defineStore("app", {
state: () => ({
booted: false,
settings: loadSettings(),
}),
state: () => {
let settings: Settings;
const stored = localStorage.getItem(STORAGE_ID);
try {
settings = settingsSchema.parse(JSON.parse(stored ?? ""));
} catch {
settings = defaultSettings();
}
return {
booted: false,
settings,
screen: "home" as AppScreen,
};
},
actions: {
setColor(col: number, row: number) {
this.settings.color = { col, row };
},
navigateTo(screen: AppScreen) {
this.screen = screen;
},
save() {
localStorage.setItem(STORAGE_ID, JSON.stringify(this.settings));
},
},
getters: {

5
app/stores/contact.ts
View File

@@ -90,8 +90,9 @@ export const useContactStore = defineStore("contact", {
const timeline = gsap.timeline({
onComplete: () => {
setTimeout(() => {
const router = useRouter();
router.push({ query: {} });
this.isOutro = false;
const app = useAppStore();
app.navigateTo("home");
}, 2000);
},
});

6
app/stores/home.ts
View File

@@ -54,15 +54,15 @@ export const useHomeStore = defineStore("home", {
);
},
animateOutro(to: "contact" | "projects" | "theme" | "settings" | "alarm") {
animateOutro(to: AppScreen) {
this.isOutro = true;
this.outro.animateTop = to !== "settings";
const timeline = gsap.timeline({
onComplete: () => {
this.isOutro = true;
const router = useRouter();
router.push({ query: { screen: to } });
const app = useAppStore();
app.navigateTo(to);
},
});

5
app/stores/projects.ts
View File

@@ -141,8 +141,9 @@ export const useProjectsStore = defineStore("projects", {
ease: "none",
onComplete: () => {
setTimeout(() => {
const router = useRouter();
router.push({ query: {} });
this.isOutro = false;
const app = useAppStore();
app.navigateTo("home");
}, 3000);
},
},

27
app/stores/settings.ts
View File

@@ -1,28 +1,25 @@
type Menu = "options" | "clock" | "user" | "touchScreen";
export const useSettingsStore = defineStore("settings", {
state: () => ({
currentMenu: null as string | null,
currentMenu: null as Menu | null,
currentSubMenu: null as string | null,
menuExpanded: false,
}),
getters: {
isMenuOpen: (state) => (menu: string) => {
if (!state.currentMenu) return false;
return new RegExp(`^${menu}[A-Z]`).test(state.currentMenu);
},
isAnyOtherMenuOpen: (state) => (excludeMenu: string) => {
if (!state.currentMenu) return false;
return ["options", "clock", "user", "touchScreen"]
.filter((m) => m !== excludeMenu)
.some((m) => new RegExp(`^${m}[A-Z]`).test(state.currentMenu!));
},
},
actions: {
setActiveMenu(menu: string | null) {
openMenu(menu: Menu, expanded: boolean = false) {
this.currentMenu = menu;
this.menuExpanded = expanded;
this.currentSubMenu = null;
},
setCurrentSubMenu(submenu: string | null) {
openSubMenu(submenu: string) {
this.currentSubMenu = submenu;
},
closeSubMenu() {
this.currentSubMenu = null;
},
},
});

1
app/types/app.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
type AppScreen = "home" | "contact" | "projects" | "settings";