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

feat(buttonNavigation): block any interactions while the selector is being animated

Browse Source
This commit is contained in:
Stevan
2026-01-14 15:09:09 +01:00
parent d757945bcd
commit 03bbc25f4b
1 changed files with 16 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/composables/useButtonNavigation.ts
View File

@@ -1,5 +1,7 @@
import gsap from "gsap";
const SELECTOR_SPEED = 500;
export const useButtonNavigation = <T extends Record<string, Rect>>({
buttons,
initialButton,
@@ -29,6 +31,11 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
const selectedButton = ref(initialButton);
const selectorPosition = ref<Rect>(buttons[initialButton]!);
const nextButton = ref<Entry | undefined>();
const isAnimating = ref(false);
const blockInteractions = computed(
() => confirmationModal.isOpen || disabled?.value || isAnimating.value,
);
const getNavigationTarget = (
value: Entry | [buttonName: Entry, blocked: boolean] | undefined,
@@ -149,10 +156,14 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
};
const animateToButton = (targetButton: Entry, path?: Array<Entry> | null) => {
const SPEED = 400;
const pathButtons = path && path.length > 0 ? path : [targetButton];
const timeline = gsap.timeline();
isAnimating.value = true;
const timeline = gsap.timeline({
onComplete: () => {
isAnimating.value = false;
},
});
let prevRect = selectorPosition.value;
selectorPosition.value = [...selectorPosition.value];
@@ -160,7 +171,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
for (const button of pathButtons) {
const buttonRect = buttons[button]!;
const distance = calculateDistance(prevRect, buttonRect);
const duration = distance / SPEED;
const duration = distance / SELECTOR_SPEED;
timeline.to(
selectorPosition.value,
@@ -184,7 +195,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
const { onClick } = useScreen();
onClick((x: number, y: number) => {
if (confirmationModal.isOpen || disabled?.value) return;
if (blockInteractions.value) return;
for (const [buttonName, buttonRect] of Object.entries(buttons) as [
Entry,
@@ -214,7 +225,7 @@ export const useButtonNavigation = <T extends Record<string, Rect>>({
});
useKeyDown((key) => {
if (confirmationModal.isOpen || disabled?.value) return;
if (blockInteractions.value) return;
const currentButton = selectedButton.value as Entry;
const currentNav = navigation[currentButton];