Files
pihkaal-me/app/components/Settings/BottomScreen/Menus/Options/Menu.vue

64 lines
1.6 KiB
Vue

<script setup lang="ts">
const props = defineProps<{
x: number;
y: number;
}>();
const { onRender } = useScreen();
const settingsStore = useSettingsStore();
const menusContext = inject<{
isSubmenuSelected: ComputedRef<boolean>;
selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;
const { assets } = useAssets();
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);
onRender((ctx) => {
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,
);
assets.images.settings.topScreen.options.startUp.draw(
ctx,
0,
-96 + animation.stage2Offset + animation.stage1Offset,
);
assets.images.settings.topScreen.options.language.draw(
ctx,
0,
-48 + animation.stage1Offset,
);
assets.images.settings.topScreen.options.optionsActive.draw(ctx, 0, 0);
} else if (isAnyOtherMenuOpen.value) {
assets.images.settings.topScreen.options.optionsDisabled.draw(ctx, 0, 0);
} else {
assets.images.settings.topScreen.options.options.draw(ctx, 0, 0);
}
});
defineOptions({
render: () => null,
});
</script>