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

fix(settings): synchronize button animation with arrows of number input

Browse Source
This commit is contained in:
Stevan
2026-02-12 15:31:37 +01:00
parent b4b38af4ab
commit a751c1a150
13 changed files with 226 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/Common/Buttons.vue
View File

@@ -77,6 +77,16 @@ watch(
),
);
const forceAnimateBLabel = () => {
animateLabelChange(
(v) => (bButtonOffsetY = v),
(l) => (displayedBLabel = l),
props.bLabel,
);
};
defineExpose({ forceAnimateBLabel });
onRender((ctx) => {
ctx.globalAlpha = props.opacity ?? 1;
ctx.font = "10px NDS10";

15
app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
View File

@@ -35,6 +35,9 @@ const confirmationModal = useConfirmationModal();
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const SLIDE_OFFSET = 96;
const SLIDE_DURATION = 0.25;
const ARROW_SLIDE_DELAY = 0.15;
@@ -60,6 +63,14 @@ const animateIntro = async () => {
.timeline()
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.reset");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
)
.to(
animation,
{ viewAllOffsetY: 0, duration: ARROW_SLIDE_DURATION, ease: "none" },
@@ -197,8 +208,8 @@ onRender((ctx) => {
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.reset')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB()"
@activate-a="handleReset()"
/>

16
app/components/Settings/BottomScreen/Menus/Clock/Date.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core";
import gsap from "gsap";
const store = useSettingsStore();
@@ -12,6 +13,9 @@ useIntervalFn(() => {
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -22,6 +26,14 @@ const animateIntro = async () => {
monthRef.value?.animateIntro(),
dayRef.value?.animateIntro(),
yearRef.value?.animateIntro(),
gsap.timeline().call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
),
]);
isAnimating.value = false;
};
@@ -80,8 +92,8 @@ defineOptions({ render: () => null });
<CommonButtons
:y-offset="store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

17
app/components/Settings/BottomScreen/Menus/Clock/Time.vue
View File

@@ -23,6 +23,9 @@ const animation = reactive({
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const hourRef = useTemplateRef<InstanceType<typeof NumberInput>>("hour");
const minuteRef = useTemplateRef<InstanceType<typeof NumberInput>>("minute");
@@ -34,7 +37,15 @@ const animateIntro = async () => {
gsap
.timeline()
.to(animation, { offsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0),
.to(animation, { opacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
),
]);
isAnimating.value = false;
};
@@ -98,8 +109,8 @@ defineOptions({ render: () => null });
<CommonButtons
:y-offset="store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

28
app/components/Settings/BottomScreen/Menus/Options/2048.vue
View File

@@ -77,6 +77,9 @@ const SCORE_DURATION = 0.167;
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const intro = reactive({
frameOffsetY: SLIDE_OFFSET,
frameOpacity: 0,
@@ -148,7 +151,11 @@ const animateIntro = async () => {
buildTilesFromBoard();
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(intro, { frameOffsetY: 0, duration: SLIDE_DURATION, ease: "none" }, 0)
.to(intro, { frameOpacity: 1, duration: SLIDE_DURATION, ease: "none" }, 0)
.call(
@@ -163,14 +170,25 @@ const animateIntro = async () => {
intro,
{ scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
SLIDE_DURATION,
)
.call(
() => {
bLabel.value = $t("common.quit");
aLabel.value = $t("common.restart");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(
intro,
{ frameOffsetY: SLIDE_OFFSET, duration: SLIDE_DURATION, ease: "none" },
@@ -581,8 +599,8 @@ useKeyDown(({ key }) => {
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.quit')"
:a-label="$t('common.restart')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB()"
@activate-a="handleActivateA()"
/>

28
app/components/Settings/BottomScreen/Menus/Options/Language.vue
View File

@@ -28,6 +28,9 @@ const BUTTON_POSITIONS = [
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const { selected, selectorPosition } = useButtonNavigation({
buttons: {
english: [10, 27, 106, 41],
@@ -95,7 +98,11 @@ const animation = reactive({
const animateIntro = async () => {
isAnimating.value = true;
const timeline = gsap.timeline();
const timeline = gsap.timeline({
onComplete: () => {
isAnimating.value = false;
},
});
for (let i = 0; i < ROW_COUNT; i++) {
timeline
.to(
@@ -109,13 +116,24 @@ const animateIntro = async () => {
i * ROW_STAGGER,
);
}
timeline.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
await timeline;
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
const timeline = gsap.timeline();
const timeline = gsap.timeline({
onComplete: () => {
isAnimating.value = false;
},
});
for (let i = 0; i < ROW_COUNT; i++) {
timeline
.to(
@@ -205,8 +223,8 @@ defineOptions({
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
/>

15
app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
View File

@@ -18,6 +18,9 @@ const SLIDE_DURATION = 0.25;
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const animation = reactive({
_3dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
_2dMode: { headerOffsetY: HEADER_HEIGHT * 3, opacity: 0 },
@@ -48,6 +51,14 @@ const animateIntro = async () => {
ease: "none",
},
BUTTON_STAGGER,
)
.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
isAnimating.value = false;
};
@@ -183,8 +194,8 @@ onRender((ctx) => {
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
/>

37
app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
View File

@@ -68,6 +68,17 @@ let isNewBest = false;
const isAnimating = ref(true);
const labelsReady = ref(false);
const bLabel = $t("common.quit");
const aLabel = computed(() => {
if (!labelsReady.value) return $t("common.select");
return state.value === "waiting" ? $t("common.start") : $t("common.restart");
});
const buttonsRef = useTemplateRef<{ forceAnimateBLabel: () => void }>(
"buttons",
);
const AREA_FADE_DURATION = 0.2;
const SCORE_OFFSET = -20;
const SCORE_DURATION = 0.167;
@@ -81,7 +92,11 @@ const animation = reactive({
const animateIntro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(
animation,
{ areaOpacity: 1, duration: AREA_FADE_DURATION, ease: "none" },
@@ -91,8 +106,15 @@ const animateIntro = async () => {
animation,
{ scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
AREA_FADE_DURATION,
)
.call(
() => {
labelsReady.value = true;
buttonsRef.value?.forceAnimateBLabel();
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
isAnimating.value = false;
};
const animateOutro = async () => {
@@ -101,7 +123,11 @@ const animateOutro = async () => {
targetY = LOGICAL_HEIGHT * 2 - 20;
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(
animation,
{ areaOpacity: 0, duration: AREA_FADE_DURATION, ease: "none" },
@@ -418,9 +444,10 @@ defineOptions({ render: () => null });
<template>
<CommonButtons
ref="buttons"
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.quit')"
:a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

16
app/components/Settings/BottomScreen/Menus/User/Birthday.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import gsap from "gsap";
const store = useSettingsStore();
const confirmationModal = useConfirmationModal();
@@ -10,6 +11,9 @@ const BIRTHDAY_YEAR = 2002;
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
@@ -20,6 +24,14 @@ const animateIntro = async () => {
monthRef.value?.animateIntro(),
dayRef.value?.animateIntro(),
yearRef.value?.animateIntro(),
gsap.timeline().call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
),
]);
isAnimating.value = false;
};
@@ -113,8 +125,8 @@ defineOptions({ render: () => null });
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

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

@@ -23,6 +23,9 @@ const CELL_ANIMATION_STAGGER = 0.02;
const SNAIL_ORDER = [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4, 5, 6, 10, 9];
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
// animation state
const animation = reactive({
cellVisibility: Array(16).fill(0) as number[],
@@ -74,6 +77,15 @@ const animateIntro = (): gsap.core.Timeline => {
);
}
timeline.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
return timeline;
};
@@ -287,8 +299,8 @@ const handleActivateA = () => {
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

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

@@ -20,6 +20,16 @@ const SCORE_OFFSET = -20;
const SCORE_DURATION = 0.167;
const isAnimating = ref(true);
const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
const labelsReady = ref(false);
const bLabel = computed(() =>
labelsReady.value ? $t("common.quit") : $t("common.goBack"),
);
const aLabel = computed(() => {
if (!labelsReady.value) return $t("common.select");
return state.value === "waiting" ? $t("common.start") : $t("common.restart");
});
const intro = reactive({
boardOffsetY: BOARD_SLIDE_OFFSET,
@@ -31,7 +41,11 @@ const intro = reactive({
const animateIntro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(
intro,
{ boardOffsetY: 0, duration: BOARD_SLIDE_DURATION, ease: "none" },
@@ -51,14 +65,24 @@ const animateIntro = async () => {
intro,
{ scoreOffsetY: 0, duration: SCORE_DURATION, ease: "none" },
BOARD_SLIDE_DURATION + TEXT_FADE_DURATION,
)
.call(
() => {
labelsReady.value = true;
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
await gsap
.timeline()
.timeline({
onComplete: () => {
isAnimating.value = false;
},
})
.to(
intro,
{
@@ -160,7 +184,6 @@ const tail: THREE.Vector2[] = [];
const food = new THREE.Vector2();
let score = 0;
const state = ref<"waiting" | "alive" | "pause" | "dead">("waiting");
const randomFoodPos = (): THREE.Vector2 => {
// can't spawn on the head or tail
@@ -337,8 +360,8 @@ defineOptions({ render: () => null });
<template>
<CommonButtons
:y-offset="confirmationModal.buttonsYOffset + store.submenuButtonsOffsetY"
:b-label="$t('common.quit')"
:a-label="state === 'waiting' ? $t('common.start') : $t('common.restart')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

28
app/components/Settings/BottomScreen/Menus/User/UserName.vue
View File

@@ -19,6 +19,9 @@ const ROW_COUNT = 2;
const isAnimating = ref(true);
const bLabel = ref($t("common.goBack"));
const aLabel = ref($t("common.select"));
const animation = reactive({
rowOffsetY: new Array<number>(ROW_COUNT).fill(SLIDE_OFFSET),
rowOpacity: new Array<number>(ROW_COUNT).fill(0),
@@ -26,7 +29,11 @@ const animation = reactive({
const animateIntro = async () => {
isAnimating.value = true;
const timeline = gsap.timeline();
const timeline = gsap.timeline({
onComplete: () => {
isAnimating.value = false;
},
});
for (let i = 0; i < ROW_COUNT; i++) {
timeline
.to(
@@ -40,13 +47,24 @@ const animateIntro = async () => {
i * ROW_STAGGER,
);
}
timeline.call(
() => {
bLabel.value = $t("common.cancel");
aLabel.value = $t("common.confirm");
},
[],
SUBMENU_LABEL_CHANGE_DELAY,
);
await timeline;
isAnimating.value = false;
};
const animateOutro = async () => {
isAnimating.value = true;
const timeline = gsap.timeline();
const timeline = gsap.timeline({
onComplete: () => {
isAnimating.value = false;
},
});
for (let i = 0; i < ROW_COUNT; i++) {
timeline
.to(
@@ -128,8 +146,8 @@ defineOptions({ render: () => null });
<template>
<CommonButtons
:y-offset="store.submenuButtonsOffsetY"
:b-label="$t('common.cancel')"
:a-label="$t('common.confirm')"
:b-label="bLabel"
:a-label="aLabel"
@activate-b="handleActivateB"
@activate-a="handleActivateA"
/>

19
app/stores/settings.ts
View File

@@ -1,5 +1,8 @@
import gsap from "gsap";
// not sure how i came up with it last night
export const SUBMENU_LABEL_CHANGE_DELAY = 0.25 + 0.15 - (0.167 + 0.08);
export const SETTINGS_MENUS = [
"options",
"clock",
@@ -80,23 +83,9 @@ export const useSettingsStore = defineStore("settings", {
{ offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
"+=0.05",
)
.to(this, {
submenuButtonsOffsetY: 24,
duration: 0.167,
ease: "none",
})
.call(() => {
this.currentSubMenu = submenu;
})
.to(
this,
{
submenuButtonsOffsetY: 0,
duration: 0.167,
ease: "none",
},
"+=0.05",
);
});
const achievements = useAchievementsStore();
if (!achievements.advancement.visitedSettings.includes(submenu)) {