pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assets): use single texture atlas instead of loading all images individually

Browse Source
This commit is contained in:
Stevan
2026-01-08 19:55:43 +01:00
parent c93a8c4437
commit 44b876a5ca
41 changed files with 488 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/Settings/BottomScreen/NumberInput.vue
View File

@@ -49,33 +49,34 @@ const { onRender, onClick } = useScreen();
const Y = 30;
const SQUARE_HEIGHT = 49;
const ARROW_IMAGE_HEIGHT = assets.settings.bottomScreen.numberInputUp.height;
const ARROW_IMAGE_HEIGHT =
assets.images.settings.bottomScreen.numberInputUp.rect.height;
const upImage = computed(() => {
if (props.digits === 2) {
return props.disabled
? assets.settings.bottomScreen.numberInputUpDisabled
: assets.settings.bottomScreen.numberInputUp;
? assets.images.settings.bottomScreen.numberInputUpDisabled
: assets.images.settings.bottomScreen.numberInputUp;
} else {
return props.disabled
? assets.settings.bottomScreen.numberInputUpXlDisabled
: assets.settings.bottomScreen.numberInputUpXl;
? assets.images.settings.bottomScreen.numberInputUpXlDisabled
: assets.images.settings.bottomScreen.numberInputUpXl;
}
});
const downImage = computed(() => {
if (props.digits === 2) {
return props.disabled
? assets.settings.bottomScreen.numberInputDownDisabled
: assets.settings.bottomScreen.numberInputDown;
? assets.images.settings.bottomScreen.numberInputDownDisabled
: assets.images.settings.bottomScreen.numberInputDown;
} else {
return props.disabled
? assets.settings.bottomScreen.numberInputDownXlDisabled
: assets.settings.bottomScreen.numberInputDownXl;
? assets.images.settings.bottomScreen.numberInputDownXlDisabled
: assets.images.settings.bottomScreen.numberInputDownXl;
}
});
const squareWidth = computed(() => upImage.value.width);
const squareWidth = computed(() => upImage.value.rect.width);
const increase = () => {
const newValue = value.value + 1;
@@ -89,7 +90,7 @@ const decrease = () => {
onRender((ctx) => {
// arrow up
ctx.drawImage(upImage.value, props.x, Y);
upImage.value.draw(ctx, props.x, Y);
// outline
ctx.fillStyle = "#515151";
@@ -123,11 +124,7 @@ onRender((ctx) => {
);
// arrow down
ctx.drawImage(
downImage.value,
props.x,
Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT,
);
downImage.value.draw(ctx, props.x, Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT);
// title
ctx.font = "10px NDS10";
@@ -140,7 +137,7 @@ onRender((ctx) => {
// TODO: -10 is needed because fillTextCentered isn't using top baseline
// i will change that in the future (maybe)
Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT - 6,
downImage.value.width,
downImage.value.rect.width,
);
});
@@ -159,7 +156,10 @@ useKeyDown((key) => {
onClick((x, y) => {
if (props.disabled) return;
if (
rectContains([props.x, Y, upImage.value.width, ARROW_IMAGE_HEIGHT], [x, y])
rectContains(
[props.x, Y, upImage.value.rect.width, ARROW_IMAGE_HEIGHT],
[x, y],
)
) {
increase();
emit("select");
@@ -175,7 +175,7 @@ onClick((x, y) => {
[
props.x,
Y + ARROW_IMAGE_HEIGHT + SQUARE_HEIGHT + 2,
downImage.value.width,
downImage.value.rect.width,
ARROW_IMAGE_HEIGHT,
],
[x, y],