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

feat(settings): animate transition to submenu (background and sliding)

Browse Source
This commit is contained in:
Stevan
2026-02-09 17:00:16 +01:00
parent c96f323317
commit 6a0a0baaaa
12 changed files with 198 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -135,8 +135,6 @@ useKeyDown((key) => {
});
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
// slash divider
ctx.globalAlpha = animation.opacity;
ctx.translate(0, animation.offsetY);

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

@@ -3,8 +3,6 @@ import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
import { useIntervalFn } from "@vueuse/core";
const store = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();
const now = ref(new Date());
@@ -53,10 +51,6 @@ const handleConfirm = async () => {
store.closeSubMenu();
};
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
});
defineOptions({ render: () => null });
</script>

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

@@ -1,8 +1,14 @@
<script setup lang="ts">
const props = defineProps<{
x: number;
y: number;
}>();
const props = withDefaults(
defineProps<{
x: number;
y: number;
opacity?: number;
}>(),
{
opacity: 1,
},
);
const { onRender } = useScreen();
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
@@ -29,24 +36,33 @@ const isAnyOtherMenuOpen = computed(() => {
const animation = useMenuAnimation("clock", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.clock.time.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("clockTime"),
);
assets.images.settings.topScreen.clock.date.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
-96 +
animation.stage2Offset +
animation.stage1Offset +
submenuExtraOffset("clockDate"),
);
assets.images.settings.topScreen.clock.achievements.draw(
ctx,
0,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("clockAchievements"),
);
assets.images.settings.topScreen.clock.clockActive.draw(ctx, 0, 0);

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

@@ -72,8 +72,6 @@ const handleConfirm = async () => {
};
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.globalAlpha = animation.opacity;
ctx.translate(0, animation.offsetY);
assets.images.settings.bottomScreen.clock.timeColon.draw(ctx, 112, 63);

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

@@ -20,6 +20,16 @@ import Selector from "~/components/Common/ButtonSelector.vue";
const app = useAppStore();
const settingsStore = useSettingsStore();
const { assets } = useAssets();
const { onRender } = useScreen();
onRender((ctx) => {
if (settingsStore.submenuBackground.opacity > 0) {
ctx.globalAlpha = settingsStore.submenuBackground.opacity;
ctx.translate(0, settingsStore.submenuBackground.offsetY);
assets.images.home.topScreen.background.draw(ctx, 0, 0);
}
});
if (app.previousScreen === "home") {
settingsStore.selectedButton = "options";
@@ -150,6 +160,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
disabled: computed(
() =>
settingsStore.currentSubMenu !== null ||
settingsStore.submenuTransition.opacity < 1 ||
settingsStore.isIntro ||
settingsStore.isOutro ||
settingsStore.animatingNotification,
@@ -165,9 +176,16 @@ const selectedSubmenuParent = computed(() =>
isSubmenuSelected.value ? getParentMenu(selected.value) : null,
);
const selectedSubmenuExtraOffsetY = computed(
() =>
settingsStore.submenuTransition.selectorOffsetY -
settingsStore.submenuTransition.offsetY,
);
provide("menusContext", {
isSubmenuSelected,
selectedSubmenuParent,
selectedSubmenuExtraOffsetY,
});
watch(
@@ -231,8 +249,20 @@ const selectorXOffset = computed(() => {
}
});
const selectorTransitionOffsetY = computed(() => {
if (isSubmenuSelected.value || selected.value === "touchScreen") {
return settingsStore.submenuTransition.selectorOffsetY;
}
return settingsStore.submenuTransition.offsetY;
});
const handleActivateB = () => {
if (settingsStore.isIntro || settingsStore.isOutro) return;
if (
settingsStore.isIntro ||
settingsStore.isOutro ||
settingsStore.submenuTransition.opacity < 1
)
return;
if (isSubmenuSelected.value) {
select(getParentMenu(selected.value));
@@ -251,27 +281,53 @@ const handleActivateB = () => {
settingsStore.menuOffsets[2] +
settingsStore.menuOffsets[3]
"
:y="121 + settingsStore.menuYOffset"
:opacity="1"
:y="
121 +
settingsStore.menuYOffset +
(selected === 'touchScreen'
? settingsStore.submenuTransition.selectorOffsetY
: settingsStore.submenuTransition.offsetY)
"
:opacity="settingsStore.submenuTransition.opacity"
/>
<UserMenu
:x="129 + settingsStore.menuOffsets[1] + settingsStore.menuOffsets[2]"
:y="121 + settingsStore.menuYOffset"
:y="
121 +
settingsStore.menuYOffset +
settingsStore.submenuTransition.offsetY
"
:opacity="settingsStore.submenuTransition.opacity"
/>
<ClockMenu
:x="81 + settingsStore.menuOffsets[1]"
:y="121 + settingsStore.menuYOffset"
:y="
121 +
settingsStore.menuYOffset +
settingsStore.submenuTransition.offsetY
"
:opacity="settingsStore.submenuTransition.opacity"
/>
<OptionsMenu
:x="33"
:y="
121 +
settingsStore.menuYOffset +
settingsStore.submenuTransition.offsetY
"
:opacity="settingsStore.submenuTransition.opacity"
/>
<OptionsMenu :x="33" :y="121 + settingsStore.menuYOffset" />
<Selector
:rect="[
selectorPosition[0] + selectorXOffset,
selectorPosition[1] + settingsStore.menuYOffset,
selectorPosition[1] +
settingsStore.menuYOffset +
selectorTransitionOffsetY,
selectorPosition[2],
selectorPosition[3],
]"
:opacity="1"
:opacity="settingsStore.submenuTransition.opacity"
/>
<CommonButtons

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

@@ -186,7 +186,6 @@ onMounted(() => {
});
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.textBaseline = "top";
ctx.save();

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

@@ -1,8 +1,14 @@
<script setup lang="ts">
const props = defineProps<{
x: number;
y: number;
}>();
const props = withDefaults(
defineProps<{
x: number;
y: number;
opacity?: number;
}>(),
{
opacity: 1,
},
);
const { onRender } = useScreen();
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
@@ -29,24 +36,33 @@ const isAnyOtherMenuOpen = computed(() => {
const animation = useMenuAnimation("options", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.options._2048.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("options2048"),
);
assets.images.settings.topScreen.options.renderingMode.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
-96 +
animation.stage2Offset +
animation.stage1Offset +
submenuExtraOffset("optionsRenderingMode"),
);
assets.images.settings.topScreen.options.language.draw(
ctx,
0,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
);
assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);

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

@@ -120,8 +120,6 @@ const handleConfirm = () => {
};
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
ctx.font = "10px NDS10";
ctx.textBaseline = "top";

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

@@ -1,8 +1,14 @@
<script setup lang="ts">
const props = defineProps<{
x: number;
y: number;
}>();
const props = withDefaults(
defineProps<{
x: number;
y: number;
opacity?: number;
}>(),
{
opacity: 1,
},
);
const { onRender } = useScreen();
@@ -26,6 +32,7 @@ const isAnyOtherMenuOpen = computed(() => {
});
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
ctx,

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

@@ -7,7 +7,6 @@ const achievements = useAchievementsStore();
const confirmationModal = useConfirmationModal();
const { onRender, onClick } = useScreen();
const { assets } = useAssets();
const BAR_HEIGHT = 24;
const MAX_RADIUS = 27;
@@ -276,8 +275,6 @@ onClick((mx, my) => {
});
onRender((ctx) => {
assets.images.home.topScreen.background.draw(ctx, 0, 0);
// update crosshair position in all modes except paused
if (state.value !== "paused") {
if (horizontalFirst) {

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

@@ -1,8 +1,14 @@
<script setup lang="ts">
const props = defineProps<{
x: number;
y: number;
}>();
const props = withDefaults(
defineProps<{
x: number;
y: number;
opacity?: number;
}>(),
{
opacity: 1,
},
);
const { onRender } = useScreen();
@@ -10,6 +16,7 @@ const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
selectedSubmenuExtraOffsetY: ComputedRef<number>;
}>("menusContext")!;
const { assets } = useAssets();
@@ -29,29 +36,38 @@ const isAnyOtherMenuOpen = computed(() => {
const animation = useMenuAnimation("user", isOpen);
const submenuExtraOffset = (submenu: string) =>
settingsStore.selectedButton === submenu
? menusContext.selectedSubmenuExtraOffsetY.value
: 0;
onRender((ctx) => {
ctx.globalAlpha = props.opacity;
ctx.translate(props.x, props.y);
if (isOpen.value || animation.playing) {
assets.images.settings.topScreen.user.birthday.draw(
ctx,
-48 + animation.stage2Offset,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userBirthday"),
);
assets.images.settings.topScreen.user.snake.draw(
ctx,
48 - animation.stage2Offset,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
);
assets.images.settings.topScreen.user.color.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
-96 +
animation.stage2Offset +
animation.stage1Offset +
submenuExtraOffset("userColor"),
);
assets.images.settings.topScreen.user.userName.draw(
ctx,
0,
-48 + animation.stage1Offset,
-48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
);
assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);

55
app/stores/settings.ts
View File

@@ -38,6 +38,17 @@ export const useSettingsStore = defineStore("settings", {
menuOffsets: [0, -48, -48, -48] as [number, number, number, number],
menuYOffset: 72,
submenuTransition: {
offsetY: 0,
selectorOffsetY: 0,
opacity: 1,
},
submenuBackground: {
offsetY: 16,
opacity: 0,
},
animatingNotification: false,
isIntro: true,
@@ -51,7 +62,23 @@ export const useSettingsStore = defineStore("settings", {
this.currentSubMenu = null;
},
openSubMenu(submenu: SettingsSubMenu) {
async openSubMenu(submenu: SettingsSubMenu) {
await gsap
.timeline()
.to(this.submenuTransition, {
offsetY: -48,
selectorOffsetY: -140,
opacity: 0,
duration: 0.25,
ease: "none",
})
.fromTo(
this.submenuBackground,
{ offsetY: 16, opacity: 0 },
{ offsetY: 0, opacity: 1, duration: 0.25, ease: "none" },
"+=0.05",
);
this.currentSubMenu = submenu;
const achievements = useAchievementsStore();
@@ -66,8 +93,32 @@ export const useSettingsStore = defineStore("settings", {
}
},
closeSubMenu() {
async closeSubMenu() {
this.currentSubMenu = null;
await gsap
.timeline()
.fromTo(
this.submenuBackground,
{ offsetY: 0, opacity: 1 },
{ offsetY: 16, opacity: 0, duration: 0.25, ease: "none" },
)
.fromTo(
this.submenuTransition,
{
offsetY: -48,
selectorOffsetY: -140,
opacity: 0,
},
{
offsetY: 0,
selectorOffsetY: 0,
opacity: 1,
duration: 0.25,
ease: "none",
},
"+=0.05",
);
},
animateIntro() {