136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const { locales, locale, setLocale } = useI18n();
|
|
const store = useSettingsStore();
|
|
const confirmationModal = useConfirmationModal();
|
|
const achievements = useAchievementsStore();
|
|
const { assets } = useAssets();
|
|
const { onRender } = useScreen();
|
|
|
|
const BUTTON_KEYS = [
|
|
"english",
|
|
"german",
|
|
"french",
|
|
"spanish",
|
|
"italian",
|
|
"japanese",
|
|
] as const;
|
|
|
|
const BUTTON_POSITIONS = [
|
|
[15, 32],
|
|
[143, 32],
|
|
[15, 80],
|
|
[143, 80],
|
|
[15, 128],
|
|
[143, 128],
|
|
] as const;
|
|
|
|
const { selected, selectorPosition } = useButtonNavigation({
|
|
buttons: {
|
|
english: [10, 27, 106, 41],
|
|
german: [138, 27, 106, 41],
|
|
french: [10, 75, 106, 41],
|
|
spanish: [138, 75, 106, 41],
|
|
italian: [10, 123, 106, 41],
|
|
japanese: [138, 123, 106, 41],
|
|
},
|
|
initialButton:
|
|
BUTTON_KEYS[locales.value.findIndex((l) => l.code === locale.value)] ??
|
|
BUTTON_KEYS[0]!,
|
|
navigation: {
|
|
english: {
|
|
right: "german",
|
|
down: "french",
|
|
},
|
|
german: {
|
|
left: "english",
|
|
down: "spanish",
|
|
},
|
|
french: {
|
|
up: "english",
|
|
right: "spanish",
|
|
down: "italian",
|
|
},
|
|
spanish: {
|
|
up: "german",
|
|
left: "french",
|
|
down: "japanese",
|
|
},
|
|
italian: {
|
|
up: "french",
|
|
right: "japanese",
|
|
},
|
|
japanese: {
|
|
up: "spanish",
|
|
left: "italian",
|
|
},
|
|
},
|
|
selectorAnimation: {
|
|
duration: 0.1,
|
|
ease: "power2.out",
|
|
},
|
|
});
|
|
|
|
const handleCancel = () => {
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
const selectedLocale = locales.value[BUTTON_KEYS.indexOf(selected.value)]!;
|
|
|
|
setLocale(selectedLocale.code);
|
|
|
|
if (!achievements.advancement.languages.includes(selectedLocale.code)) {
|
|
achievements.advancement.languages.push(selectedLocale.code);
|
|
if (achievements.advancement.languages.length === locales.value.length) {
|
|
achievements.unlock("settings_language_try_all");
|
|
}
|
|
}
|
|
|
|
confirmationModal.open({
|
|
text: $t(
|
|
"settings.options.language.confirmation",
|
|
{},
|
|
{ locale: selectedLocale.code },
|
|
),
|
|
onClosed: () => store.closeSubMenu(),
|
|
timeout: 2000,
|
|
});
|
|
};
|
|
|
|
onRender((ctx) => {
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#010101";
|
|
|
|
for (let i = 0; i < locales.value.length; i += 1) {
|
|
const [x, y] = BUTTON_POSITIONS[i]!;
|
|
const isSelected = selected.value === BUTTON_KEYS[i];
|
|
const buttonImage = isSelected
|
|
? assets.images.settings.bottomScreen.options.languageButtonActive
|
|
: assets.images.settings.bottomScreen.options.languageButton;
|
|
|
|
buttonImage.draw(ctx, x, y, isSelected ? { colored: true } : undefined);
|
|
const name = locales.value[i]?.name;
|
|
if (!name) {
|
|
throw new Error(`Missing locale or locale name: ${BUTTON_KEYS[i]}`);
|
|
}
|
|
fillTextHCentered(ctx, name, x, y + 20, 96);
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CommonButtons
|
|
:y-offset="0"
|
|
:b-label="$t('common.cancel')"
|
|
:a-label="$t('common.confirm')"
|
|
@activate-b="handleCancel"
|
|
@activate-a="handleConfirm"
|
|
/>
|
|
|
|
<CommonButtonSelector :rect="selectorPosition" />
|
|
</template>
|