135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
|
|
|
|
const APP_COLOR_TO_FONT_COLOR: Record<string, string> = {
|
|
"#61829a": "#fbfbfb", // cyan
|
|
"#ba4900": "#fbe3d3", // maroon
|
|
"#fb0018": "#fbcbd3", // red
|
|
"#fb8afb": "#fbebfb", // pink
|
|
"#fb9200": "#fbf3e3", // orange
|
|
"#f3e300": "#fbfbdb", // yellow
|
|
"#aafb00": "#fbfbfb", // lime
|
|
"#00fb00": "#fbfbfb", // green
|
|
"#00a238": "#fbfbfb", // dark green
|
|
"#49db8a": "#ebfbf3", // duck
|
|
"#30baf3": "#fbfbfb", // light blue
|
|
"#0059f3": "#dbebfb", // blue
|
|
"#000092": "#ebebfb", // dark blue
|
|
"#8a00d3": "#f3dbfb", // purple
|
|
"#d300eb": "#fbfbfb", // magenta
|
|
"#fb0092": "#ebe3f3", // fuschia
|
|
};
|
|
|
|
const { assets } = useAssets();
|
|
const achievementAssets =
|
|
assets.images.settings.bottomScreen.clock.achievements;
|
|
const { onRender, onClick } = useScreen();
|
|
|
|
const app = useAppStore();
|
|
const store = useSettingsStore();
|
|
const achievements = useAchievementsStore();
|
|
const achievementsScreen = useAchievementsScreen();
|
|
const confirmationModal = useConfirmationModal();
|
|
|
|
const handleCancel = () => {
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
const handleReset = () => {
|
|
confirmationModal.open({
|
|
text: $t("settings.clock.achievements.resetConfirmation"),
|
|
onConfirm: () => {
|
|
achievements.reset();
|
|
},
|
|
});
|
|
};
|
|
|
|
const handleVisitAll = () => {
|
|
achievementsScreen.animateFadeToBlackIntro();
|
|
};
|
|
|
|
onClick((x, y) => {
|
|
const viewAllRect = achievementAssets.viewAllButton.rect;
|
|
if (rectContains([127, 2, viewAllRect.width, viewAllRect.height], [x, y])) {
|
|
handleVisitAll();
|
|
}
|
|
});
|
|
|
|
useKeyDown((key) => {
|
|
if (key === "NDS_X") {
|
|
handleVisitAll();
|
|
}
|
|
});
|
|
|
|
onRender((ctx) => {
|
|
assets.images.home.topScreen.background.draw(ctx, 0, 0);
|
|
|
|
// slash divider
|
|
ctx.textBaseline = "top";
|
|
ctx.fillStyle = "#515151";
|
|
ctx.fillRect(7 * 16 - 1, 4 * 16 - 1, 16 * 3 + 1, 16 * 3 + 1);
|
|
ctx.fillStyle = achievements.allObtained ? app.color.hex : "#797979";
|
|
ctx.fillRect(7 * 16, 4 * 16, 16 * 3 - 1, 16 * 3 - 1);
|
|
ctx.font = "39px NDS39";
|
|
ctx.letterSpacing = "2px";
|
|
ctx.fillStyle = achievements.allObtained
|
|
? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
|
|
: "#fbfbfb";
|
|
ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4);
|
|
});
|
|
|
|
onRender((ctx) => {
|
|
achievementAssets.viewAllButton.draw(ctx, 127, 2);
|
|
achievementAssets.smallTrophy.draw(ctx, 131, 6);
|
|
|
|
const GAP = 4;
|
|
|
|
ctx.font = "10px NDS10";
|
|
ctx.textBaseline = "top";
|
|
ctx.fillStyle = "#010101";
|
|
const { actualBoundingBoxRight: textWidth } = ctx.measureText("View All");
|
|
|
|
const totalWidth = achievementAssets.X.rect.width + GAP + textWidth;
|
|
const left = Math.ceil(
|
|
145 +
|
|
(achievementAssets.viewAllButton.rect.width - 18) / 2 -
|
|
totalWidth / 2,
|
|
);
|
|
|
|
achievementAssets.X.draw(ctx, left, 7);
|
|
fillTextHCentered(
|
|
ctx,
|
|
"View All",
|
|
left + achievementAssets.X.rect.width + GAP,
|
|
7,
|
|
textWidth,
|
|
);
|
|
}, 1000);
|
|
</script>
|
|
|
|
<template>
|
|
<NumberInput
|
|
:model-value="achievements.achievements.length"
|
|
title="Obtained"
|
|
:x="4 * 16 - 1"
|
|
:selected="achievements.allObtained"
|
|
:disabled="true"
|
|
/>
|
|
|
|
<NumberInput
|
|
:model-value="ACHIEVEMENTS.length"
|
|
title="Total"
|
|
:x="9 * 16 - 1"
|
|
:selected="achievements.allObtained"
|
|
:disabled="true"
|
|
/>
|
|
|
|
<CommonButtons
|
|
:y-offset="confirmationModal.buttonsYOffset"
|
|
b-label="Cancel"
|
|
a-label="Reset"
|
|
@activate-b="handleCancel()"
|
|
@activate-a="handleReset()"
|
|
/>
|
|
</template>
|