77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
x: number;
|
|
y: number;
|
|
opacity?: number;
|
|
pressed: string | null;
|
|
isAnyOtherMenuOpen: boolean;
|
|
submenuExtraOffsetY: number;
|
|
}>(),
|
|
{
|
|
opacity: 1,
|
|
},
|
|
);
|
|
|
|
const { onRender } = useScreen();
|
|
|
|
const store = useSettingsStore();
|
|
const { assets } = useAssets((a) => a.images.settings.topScreen.options);
|
|
|
|
const isOpen = computed(
|
|
() => store.currentMenu === "options" && store.menuExpanded,
|
|
);
|
|
|
|
const animation = useMenuAnimation("options", isOpen);
|
|
|
|
const submenuExtraOffset = (submenu: string) =>
|
|
store.selectedButton === submenu ? props.submenuExtraOffsetY : 0;
|
|
|
|
onRender((ctx) => {
|
|
ctx.globalAlpha = props.opacity;
|
|
ctx.translate(props.x, props.y);
|
|
|
|
if (isOpen.value || animation.playing) {
|
|
(props.pressed === "options2048" ? assets._2048Pressed : assets._2048).draw(
|
|
ctx,
|
|
48 - animation.stage2Offset,
|
|
-48 + animation.stage1Offset + submenuExtraOffset("options2048"),
|
|
);
|
|
(props.pressed === "optionsRenderingMode"
|
|
? assets.renderingModePressed
|
|
: assets.renderingMode
|
|
).draw(
|
|
ctx,
|
|
0,
|
|
-96 +
|
|
animation.stage2Offset +
|
|
animation.stage1Offset +
|
|
submenuExtraOffset("optionsRenderingMode"),
|
|
);
|
|
(props.pressed === "optionsLanguage"
|
|
? assets.languagePressed
|
|
: assets.language
|
|
).draw(
|
|
ctx,
|
|
0,
|
|
-48 + animation.stage1Offset + submenuExtraOffset("optionsLanguage"),
|
|
);
|
|
|
|
(props.pressed === "options"
|
|
? assets.optionsPressed
|
|
: assets.optionsActive
|
|
).draw(ctx, 0, 0);
|
|
} else if (props.pressed === "options") {
|
|
assets.optionsPressed.draw(ctx, 0, 0);
|
|
} else if (props.isAnyOtherMenuOpen) {
|
|
assets.optionsDisabled.draw(ctx, 0, 0);
|
|
} else {
|
|
assets.options.draw(ctx, 0, 0);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|