85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
x: number;
|
|
y: number;
|
|
opacity?: number;
|
|
}>(),
|
|
{
|
|
opacity: 1,
|
|
},
|
|
);
|
|
|
|
const { onRender } = useScreen();
|
|
|
|
const settingsStore = useSettingsStore();
|
|
const menusContext = inject<{
|
|
isSubmenuSelected: ComputedRef<boolean>;
|
|
selectedSubmenuParent: ComputedRef<string | null>;
|
|
selectedSubmenuExtraOffsetY: ComputedRef<number>;
|
|
}>("menusContext")!;
|
|
|
|
const { assets } = useAssets();
|
|
|
|
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);
|
|
|
|
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 + submenuExtraOffset("userBirthday"),
|
|
);
|
|
assets.images.settings.topScreen.user.snake.draw(
|
|
ctx,
|
|
48 - animation.stage2Offset,
|
|
-48 + animation.stage1Offset + submenuExtraOffset("userSnake"),
|
|
);
|
|
assets.images.settings.topScreen.user.color.draw(
|
|
ctx,
|
|
0,
|
|
-96 +
|
|
animation.stage2Offset +
|
|
animation.stage1Offset +
|
|
submenuExtraOffset("userColor"),
|
|
);
|
|
assets.images.settings.topScreen.user.userName.draw(
|
|
ctx,
|
|
0,
|
|
-48 + animation.stage1Offset + submenuExtraOffset("userUserName"),
|
|
);
|
|
|
|
assets.images.settings.topScreen.user.userActive.draw(ctx, 0, 0);
|
|
} else if (isAnyOtherMenuOpen.value) {
|
|
assets.images.settings.topScreen.user.userDisabled.draw(ctx, 0, 0);
|
|
} else {
|
|
assets.images.settings.topScreen.user.user.draw(ctx, 0, 0);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|