65 lines
1.4 KiB
Vue
65 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const store = useSettingsStore();
|
|
|
|
const { onRender } = useScreen();
|
|
const { assets: atlas } = useAssets();
|
|
const assets = atlas.images.settings.bottomScreen;
|
|
|
|
const USER_NAME = "pihkaal";
|
|
const REAL_NAME = "Stevan";
|
|
|
|
const handleCancel = () => {
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
const handleConfirm = () => {
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
onRender((ctx) => {
|
|
ctx.font = "10px NDS10";
|
|
ctx.textBaseline = "top";
|
|
|
|
assets.background.draw(ctx, 0, 0);
|
|
|
|
const drawTextField = (
|
|
title: string,
|
|
text: string,
|
|
x: number,
|
|
y: number,
|
|
): void => {
|
|
// title
|
|
ctx.fillStyle = "#282828";
|
|
assets.user.nameTitle.draw(ctx, x + 12, y);
|
|
fillTextHCentered(ctx, title, x + 12, y + 4, 169);
|
|
|
|
// field
|
|
ctx.fillStyle = "#fbfbfb";
|
|
assets.user.nameField.draw(
|
|
ctx,
|
|
x,
|
|
y + assets.user.nameTitle.rect.height - 1,
|
|
);
|
|
|
|
for (let i = 0; i < text.length; i += 1, x += 16) {
|
|
ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
|
|
}
|
|
};
|
|
|
|
drawTextField($t("settings.user.userName.userName"), USER_NAME, 31, 48);
|
|
drawTextField($t("settings.user.userName.firstName"), REAL_NAME, 31, 96);
|
|
});
|
|
|
|
defineOptions({ render: () => null });
|
|
</script>
|
|
|
|
<template>
|
|
<CommonButtons
|
|
:y-offset="0"
|
|
b-label="Cancel"
|
|
a-label="Confirm"
|
|
@activate-b="handleCancel"
|
|
@activate-a="handleConfirm"
|
|
/>
|
|
</template>
|