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

fix(nds): remove all top baselines

Browse Source
This commit is contained in:
Stevan
2026-02-27 02:03:48 +01:00
parent 6dcf03a38a
commit 6264ad41f8
20 changed files with 57 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/Achievements/BottomScreen.vue
View File

@@ -55,7 +55,6 @@ onRender((ctx) => {
? store.outro.stage1Opacity ? store.outro.stage1Opacity
: 1; : 1;
ctx.font = "7px NDS7"; ctx.font = "7px NDS7";
ctx.textBaseline = "top";
for ( for (
let i = ACHIEVEMENTS.length - 1; let i = ACHIEVEMENTS.length - 1;
i >= ACHIEVEMENTS_TOP_SCREEN_COUNT; i >= ACHIEVEMENTS_TOP_SCREEN_COUNT;
@@ -83,7 +82,7 @@ onRender((ctx) => {
? "???" ? "???"
: $t(`achievements.${achievement.id}`).replace("\n", " "), : $t(`achievements.${achievement.id}`).replace("\n", " "),
ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP, ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
y, y + 7,
); );
} }

7
app/components/Achievements/Notification.vue
View File

@@ -87,7 +87,6 @@ onRender((ctx) => {
// text (1 or 2 lines) // text (1 or 2 lines)
ctx.font = "7px NDS7"; ctx.font = "7px NDS7";
ctx.textBaseline = "top";
ctx.fillStyle = "#282828"; ctx.fillStyle = "#282828";
const lines = $t(`achievements.${currentAchievement.value}`).split("\n"); const lines = $t(`achievements.${currentAchievement.value}`).split("\n");
@@ -95,7 +94,11 @@ onRender((ctx) => {
lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1; lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1;
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i]!, x.value + TEXT_X_OFFSET, textY + i * LINE_HEIGHT); ctx.fillText(
lines[i]!,
x.value + TEXT_X_OFFSET,
textY + i * LINE_HEIGHT + 7,
);
} }
}, 200); }, 200);

7
app/components/Achievements/TopScreen.vue
View File

@@ -24,7 +24,6 @@ onRender((ctx) => {
? store.outro.stage2Opacity ? store.outro.stage2Opacity
: 1; : 1;
ctx.fillStyle = "#ffffff"; ctx.fillStyle = "#ffffff";
ctx.textBaseline = "top";
// title // title
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
@@ -32,7 +31,7 @@ onRender((ctx) => {
ctx, ctx,
$t("achievementsScreen.title"), $t("achievementsScreen.title"),
0, 0,
ACHIEVEMENTS_HEADER_Y, ACHIEVEMENTS_HEADER_Y + 9,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -45,7 +44,7 @@ onRender((ctx) => {
ctx, ctx,
`${unlockedCount}/${totalCount}`, `${unlockedCount}/${totalCount}`,
0, 0,
ACHIEVEMENTS_HEADER_Y + 13, ACHIEVEMENTS_HEADER_Y + 13 + 7,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -105,7 +104,7 @@ onRender((ctx) => {
? "???" ? "???"
: $t(`achievements.${achievement.id}`).replace("\n", " "), : $t(`achievements.${achievement.id}`).replace("\n", " "),
ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP, ACHIEVEMENTS_X + CHECKBOX_SIZE + CHECKBOX_TEXT_GAP,
y, y + 7,
); );
} }
}); });

5
app/components/Common/ConfirmationModal.vue
View File

@@ -38,8 +38,7 @@ onRender((ctx) => {
assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y); assets.images.common.confirmationModal.draw(ctx, BG_X, BG_Y);
ctx.font = "16px Pokemon DP Pro"; ctx.font = "10px NDS10";
ctx.textBaseline = "top";
ctx.fillStyle = "#ffffff"; ctx.fillStyle = "#ffffff";
const rawText = const rawText =
@@ -55,7 +54,7 @@ onRender((ctx) => {
ctx, ctx,
lines[i]!, lines[i]!,
BG_X, BG_X,
textStartY + i * LINE_HEIGHT, textStartY + i * LINE_HEIGHT + 13,
BG_WIDTH, BG_WIDTH,
); );
} }

3
app/components/Contact/BottomScreen/Buttons.vue
View File

@@ -116,7 +116,6 @@ onRender((ctx) => {
? store.intro.stage3Opacity ? store.intro.stage3Opacity
: store.outro.stage1Opacity; : store.outro.stage1Opacity;
ctx.textBaseline = "top";
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
ctx.fillStyle = "#515151"; ctx.fillStyle = "#515151";
@@ -135,7 +134,7 @@ onRender((ctx) => {
const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`; const pressedKey: `${typeof selected.value}Pressed` = `${button}Pressed`;
assets[isPressed ? pressedKey : button].draw(ctx, x + 1, y + 1); assets[isPressed ? pressedKey : button].draw(ctx, x + 1, y + 1);
ctx.fillText(text, x + 36, y + 11); ctx.fillText(text, x + 36, y + 11 + 9);
} }
}); });
</script> </script>

7
app/components/Credits/BottomScreen.vue
View File

@@ -53,7 +53,6 @@ onRender((ctx) => {
: store.isOutro : store.isOutro
? store.outro.stage1Opacity ? store.outro.stage1Opacity
: 1; : 1;
ctx.textBaseline = "top";
for (let i = CREDITS.length - 1; i >= CREDITS_TOP_SCREEN_COUNT; i--) { for (let i = CREDITS.length - 1; i >= CREDITS_TOP_SCREEN_COUNT; i--) {
const id = CREDITS[i]!; const id = CREDITS[i]!;
@@ -74,7 +73,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.label`), $t(`creditsScreen.${id}.label`),
0, 0,
y, y + 7,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -84,7 +83,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.author`), $t(`creditsScreen.${id}.author`),
0, 0,
y + CREDITS_LINE_HEIGHT, y + CREDITS_LINE_HEIGHT + 9,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -94,7 +93,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.url`), $t(`creditsScreen.${id}.url`),
0, 0,
y + CREDITS_LINE_HEIGHT * 2, y + CREDITS_LINE_HEIGHT * 2 + 7,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
} }

9
app/components/Credits/TopScreen.vue
View File

@@ -17,7 +17,6 @@ onRender((ctx) => {
? store.outro.stage2Opacity ? store.outro.stage2Opacity
: 1; : 1;
ctx.fillStyle = "#ffffff"; ctx.fillStyle = "#ffffff";
ctx.textBaseline = "top";
// title // title
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
@@ -25,7 +24,7 @@ onRender((ctx) => {
ctx, ctx,
$t("creditsScreen.title"), $t("creditsScreen.title"),
0, 0,
CREDITS_HEADER_Y, CREDITS_HEADER_Y + 9,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -53,7 +52,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.label`), $t(`creditsScreen.${id}.label`),
0, 0,
y, y + 7,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -63,7 +62,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.author`), $t(`creditsScreen.${id}.author`),
0, 0,
y + CREDITS_LINE_HEIGHT, y + CREDITS_LINE_HEIGHT + 9,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
@@ -73,7 +72,7 @@ onRender((ctx) => {
ctx, ctx,
$t(`creditsScreen.${id}.url`), $t(`creditsScreen.${id}.url`),
0, 0,
y + CREDITS_LINE_HEIGHT * 2, y + CREDITS_LINE_HEIGHT * 2 + 7,
LOGICAL_WIDTH, LOGICAL_WIDTH,
); );
} }

12
app/components/Home/BottomScreen/Buttons.vue
View File

@@ -101,14 +101,12 @@ onRender((ctx) => {
const projectsText = $t("home.projectsAndExperiences"); const projectsText = $t("home.projectsAndExperiences");
const lines = projectsText.split("\n"); const lines = projectsText.split("\n");
ctx.textBaseline = "top";
if (lines.length == 1) { if (lines.length == 1) {
fillTextHCentered( fillTextHCentered(
ctx, ctx,
projectsText, projectsText,
79, 79,
42 + getButtonOffset("projects"), 42 + getButtonOffset("projects") + 9,
140, 140,
); );
} else { } else {
@@ -116,23 +114,21 @@ onRender((ctx) => {
ctx, ctx,
lines[0]!, lines[0]!,
82, 82,
36 + getButtonOffset("projects"), 36 + getButtonOffset("projects") + 9,
140, 140,
); );
fillTextHCentered( fillTextHCentered(
ctx, ctx,
lines[1]!, lines[1]!,
82, 82,
36 + getButtonOffset("projects") + 13, 36 + getButtonOffset("projects") + 13 + 9,
140, 140,
); );
} }
ctx.textBaseline = "top";
// gba thing // gba thing
ctx.font = "10px NDS10";
ctx.fillStyle = "#a2a2a2"; ctx.fillStyle = "#a2a2a2";
fillTextHCentered(ctx, $t("home.greeting"), 79, 137, 140); fillTextHCentered(ctx, $t("home.greeting"), 79, 137 + 9, 140);
}); });
</script> </script>

8
app/components/Intro/BottomScreen/BottomScreen.vue
View File

@@ -24,8 +24,6 @@ store.$subscribe((_, state) => {
}); });
onRender((ctx) => { onRender((ctx) => {
ctx.textBaseline = "top";
ctx.fillStyle = "#fbfbfb"; ctx.fillStyle = "#fbfbfb";
ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT); ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
@@ -49,7 +47,7 @@ onRender((ctx) => {
: 1; : 1;
assets.images.intro.warning.draw(ctx, logoX, TITLE_Y - 1); assets.images.intro.warning.draw(ctx, logoX, TITLE_Y - 1);
ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y); ctx.fillText($t("intro.copyright"), logoX + logoWidth + 3, TITLE_Y + 12);
ctx.letterSpacing = "0px"; ctx.letterSpacing = "0px";
@@ -57,7 +55,7 @@ onRender((ctx) => {
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
const lines = $t("intro.text").split("\n"); const lines = $t("intro.text").split("\n");
for (let i = 0, y = TEXT_Y; i < lines.length; i += 1, y += 18) for (let i = 0, y = TEXT_Y; i < lines.length; i += 1, y += 18)
fillTextHCentered(ctx, lines[i]!, 0, y, LOGICAL_WIDTH); fillTextHCentered(ctx, lines[i]!, 0, y + 9, LOGICAL_WIDTH);
// hint // hint
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
@@ -66,7 +64,7 @@ onRender((ctx) => {
: store.isOutro : store.isOutro
? store.outro.textOpacity ? store.outro.textOpacity
: hintTextOpacity.value; : hintTextOpacity.value;
fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y, LOGICAL_WIDTH); fillTextHCentered(ctx, $t("intro.hint"), 0, HINT_Y + 9, LOGICAL_WIDTH);
ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0; ctx.globalAlpha = store.isOutro ? store.outro.backgroundOpacity : 0;
assets.images.home.bottomScreen.background.draw(ctx, 0, 0); assets.images.home.bottomScreen.background.draw(ctx, 0, 0);

9
app/components/Projects/BottomScreen/LinkConfirmationPopup.vue
View File

@@ -117,11 +117,11 @@ const drawTextWithShadow = (
y: number, y: number,
) => { ) => {
ctx.fillStyle = "#a2a2aa"; ctx.fillStyle = "#a2a2aa";
ctx.fillText(text, x + 1, y); ctx.fillText(text, x + 1, y + 12);
ctx.fillText(text, x + 1, y + 1); ctx.fillText(text, x + 1, y + 1 + 12);
ctx.fillText(text, x, y + 1); ctx.fillText(text, x, y + 1 + 12);
ctx.fillStyle = "#515159"; ctx.fillStyle = "#515159";
ctx.fillText(text, x, y); ctx.fillText(text, x, y + 12);
}; };
onRender((ctx) => { onRender((ctx) => {
@@ -135,7 +135,6 @@ onRender((ctx) => {
// text // text
assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146); assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);
ctx.font = "16px Pokemon DP Pro"; ctx.font = "16px Pokemon DP Pro";
ctx.textBaseline = "top";
const displayedText = text.value.slice( const displayedText = text.value.slice(
0, 0,
Math.floor(textProgress.value * text.value.length), Math.floor(textProgress.value * text.value.length),

9
app/components/Projects/TopScreen/Project.vue
View File

@@ -12,12 +12,12 @@ const drawTextWithShadow = (
y: number, y: number,
) => { ) => {
ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8"; ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
ctx.fillText(text, x + 1, y + 0); ctx.fillText(text, x + 1, y + 13 + 0);
ctx.fillText(text, x + 1, y + 1); ctx.fillText(text, x + 1, y + 13 + 1);
ctx.fillText(text, x + 0, y + 1); ctx.fillText(text, x + 0, y + 13 + 1);
ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820"; ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
ctx.fillText(text, x, y); ctx.fillText(text, x, y + 13);
}; };
const drawTextWithShadow2Lines = ( const drawTextWithShadow2Lines = (
@@ -58,7 +58,6 @@ const drawTextWithShadow2Lines = (
onRender((ctx) => { onRender((ctx) => {
assets.images.projects.topScreen.background.draw(ctx, 0, 0); assets.images.projects.topScreen.background.draw(ctx, 0, 0);
ctx.textBaseline = "top";
ctx.font = "16px Pokemon DP Pro"; ctx.font = "16px Pokemon DP Pro";
const project = store.projects[store.currentProject]; const project = store.projects[store.currentProject];

6
app/components/Settings/BottomScreen/Menus/Clock/Achievements.vue
View File

@@ -154,7 +154,6 @@ onRender((ctx) => {
// slash divider // slash divider
ctx.globalAlpha = animation.opacity; ctx.globalAlpha = animation.opacity;
ctx.translate(0, animation.offsetY); ctx.translate(0, animation.offsetY);
ctx.textBaseline = "top";
ctx.fillStyle = "#515151"; ctx.fillStyle = "#515151";
ctx.fillRect(7 * 16 - 1, 4 * 16 - 1, 16 * 3 + 1, 16 * 3 + 1); ctx.fillRect(7 * 16 - 1, 4 * 16 - 1, 16 * 3 + 1, 16 * 3 + 1);
ctx.fillStyle = achievements.allObtained ? app.color.hex : "#797979"; ctx.fillStyle = achievements.allObtained ? app.color.hex : "#797979";
@@ -164,7 +163,7 @@ onRender((ctx) => {
ctx.fillStyle = achievements.allObtained ctx.fillStyle = achievements.allObtained
? APP_COLOR_TO_FONT_COLOR[app.color.hex]! ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
: "#fbfbfb"; : "#fbfbfb";
ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4); ctx.fillText("/", 7 * 16 + 3, 4 * 16 + 4 + 39);
}); });
onRender((ctx) => { onRender((ctx) => {
@@ -174,7 +173,6 @@ onRender((ctx) => {
achievementAssets.smallTrophy.draw(ctx, 131, 6); achievementAssets.smallTrophy.draw(ctx, 131, 6);
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
ctx.textBaseline = "top";
ctx.fillStyle = "#010101"; ctx.fillStyle = "#010101";
const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`; const label = `${ICONS.X} ${$t("settings.clock.achievements.viewAll")}`;
@@ -182,7 +180,7 @@ onRender((ctx) => {
ctx, ctx,
label, label,
145, 145,
7, 7 + 9,
achievementAssets.viewAllButton.rect.width - 18, achievementAssets.viewAllButton.rect.width - 18,
); );
}, 1000); }, 1000);

4
app/components/Settings/BottomScreen/Menus/Options/2048.vue
View File

@@ -234,8 +234,6 @@ onMounted(() => {
}); });
onRender((ctx) => { onRender((ctx) => {
ctx.textBaseline = "top";
ctx.save(); ctx.save();
ctx.globalAlpha = intro.frameOpacity; ctx.globalAlpha = intro.frameOpacity;
ctx.translate(BOARD_X, BOARD_Y + intro.frameOffsetY); ctx.translate(BOARD_X, BOARD_Y + intro.frameOffsetY);
@@ -281,7 +279,7 @@ onRender((ctx) => {
ctx, ctx,
tile.value.toString(), tile.value.toString(),
tile.x + 1, tile.x + 1,
tile.y + (tile.value <= 2048 ? 9 : 10), tile.y + (tile.value <= 2048 ? 9 + 9 : 10 + 7),
TILE_SIZE, TILE_SIZE,
); );
ctx.restore(); ctx.restore();

3
app/components/Settings/BottomScreen/Menus/Options/RenderingMode.vue
View File

@@ -134,7 +134,6 @@ const handleActivateA = () => {
onRender((ctx) => { onRender((ctx) => {
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
ctx.textBaseline = "top";
const drawButton = ( const drawButton = (
title: string, title: string,
@@ -162,7 +161,7 @@ onRender((ctx) => {
ctx.fillStyle = "#282828"; ctx.fillStyle = "#282828";
const descKey = key === "_3dMode" ? "3dDescription" : "2dDescription"; const descKey = key === "_3dMode" ? "3dDescription" : "2dDescription";
const text = $t(`settings.options.renderingMode.${descKey}`); const text = $t(`settings.options.renderingMode.${descKey}`);
fillTextHCenteredMultiline(ctx, text, 0, y, buttonWidth, 15); fillTextHCenteredMultiline(ctx, text, 0, 20 + 9, buttonWidth, 15);
ctx.translate(0, animation[key].headerOffsetY); ctx.translate(0, animation[key].headerOffsetY);
headerImg.draw(ctx, 0, 0, colorOpts); headerImg.draw(ctx, 0, 0, colorOpts);

3
app/components/Settings/BottomScreen/Menus/TouchScreen/TapTap.vue
View File

@@ -361,7 +361,6 @@ onRender((ctx, deltaTime) => {
ctx.save(); ctx.save();
ctx.globalAlpha = animation.areaOpacity; ctx.globalAlpha = animation.areaOpacity;
ctx.fillStyle = "#fbfbfb"; ctx.fillStyle = "#fbfbfb";
ctx.textBaseline = "top";
ctx.fillRect(32, 112, 191, 31); ctx.fillRect(32, 112, 191, 31);
ctx.fillStyle = "#797979"; ctx.fillStyle = "#797979";
@@ -370,7 +369,7 @@ onRender((ctx, deltaTime) => {
ctx, ctx,
$t("settings.touchScreen.tapTap.startPrompt"), $t("settings.touchScreen.tapTap.startPrompt"),
32, 32,
123, 123 + 9,
191, 191,
); );
ctx.restore(); ctx.restore();

3
app/components/Settings/BottomScreen/Menus/User/Color.vue
View File

@@ -269,8 +269,7 @@ onRender((ctx, deltaTime) => {
ctx.globalAlpha = animation.textOpacity; ctx.globalAlpha = animation.textOpacity;
ctx.font = "7px NDS7"; ctx.font = "7px NDS7";
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.textBaseline = "top"; fillTextHCentered(ctx, "Choose color", 177, 69 + 7, 62);
fillTextHCentered(ctx, "Choose color", 177, 69, 62);
}); });
const handleActivateB = async () => { const handleActivateB = async () => {

3
app/components/Settings/BottomScreen/Menus/User/Snake.vue
View File

@@ -267,7 +267,6 @@ onRender((ctx) => {
ctx.globalAlpha = intro.boardOpacity; ctx.globalAlpha = intro.boardOpacity;
ctx.translate(0, intro.boardOffsetY); ctx.translate(0, intro.boardOffsetY);
ctx.textBaseline = "top";
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
// board // board
@@ -285,7 +284,7 @@ onRender((ctx) => {
y += 16; y += 16;
i += 1; i += 1;
} }
ctx.fillText(text[i]!, x + 20, y); ctx.fillText(text[i]!, x + 20, y + 9);
} }
} else { } else {
// food // food

9
app/components/Settings/BottomScreen/Menus/User/UserName.vue
View File

@@ -99,7 +99,6 @@ const handleActivateA = async () => {
onRender((ctx) => { onRender((ctx) => {
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
ctx.textBaseline = "top";
assets.background.draw(ctx, 0, 0); assets.background.draw(ctx, 0, 0);
@@ -112,7 +111,7 @@ onRender((ctx) => {
// title // title
ctx.fillStyle = "#282828"; ctx.fillStyle = "#282828";
assets.user.nameTitle.draw(ctx, x + 12, y); assets.user.nameTitle.draw(ctx, x + 12, y);
fillTextHCentered(ctx, title, x + 12, y + 4, 169); fillTextHCentered(ctx, title, x + 12, y + 4 + 9, 169);
// field // field
ctx.fillStyle = "#fbfbfb"; ctx.fillStyle = "#fbfbfb";
@@ -123,7 +122,11 @@ onRender((ctx) => {
); );
for (let i = 0; i < text.length; i += 1, x += 16) { for (let i = 0; i < text.length; i += 1, x += 16) {
ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3); ctx.fillText(
text[i]!,
x + 20,
y + assets.user.nameTitle.rect.height + 3 + 9,
);
} }
}; };

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

@@ -170,14 +170,13 @@ onRender((ctx) => {
// value // value
ctx.font = "39px NDS39"; ctx.font = "39px NDS39";
ctx.letterSpacing = "2px"; ctx.letterSpacing = "2px";
ctx.textBaseline = "top";
ctx.fillStyle = props.selected ctx.fillStyle = props.selected
? APP_COLOR_TO_FONT_COLOR[app.color.hex]! ? APP_COLOR_TO_FONT_COLOR[app.color.hex]!
: "#fbfbfb"; : "#fbfbfb";
ctx.fillText( ctx.fillText(
value.value.toString().padStart(props.digits, "0"), value.value.toString().padStart(props.digits, "0"),
props.x + (props.digits === 2 ? 3 : 4), props.x + (props.digits === 2 ? 3 : 4),
Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2), Y + ARROW_IMAGE_HEIGHT + Math.floor((SQUARE_HEIGHT - 39) / 2) + 39,
); );
// arrow down (clipped to area below the number square) // arrow down (clipped to area below the number square)
@@ -205,7 +204,7 @@ onRender((ctx) => {
ctx, ctx,
props.title, props.title,
props.x + 1, props.x + 1,
Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3, Y + ARROW_IMAGE_HEIGHT * 2 + SQUARE_HEIGHT + 3 + 9,
downImage.value.rect.width, downImage.value.rect.width,
); );
}, 10); }, 10);

13
app/utils/canvas.ts
View File

@@ -72,7 +72,11 @@ export const fillImageTextHCentered = (
const groupX = Math.floor(x + width / 2 - totalWidth / 2); const groupX = Math.floor(x + width / 2 - totalWidth / 2);
image.draw(ctx, groupX, y); image.draw(ctx, groupX, y);
ctx.fillText(text, groupX + gap + image.rect.width, y); ctx.fillText(
text,
groupX + gap + image.rect.width,
y + (ctx.font === "10px NDS10" ? 9 : 7),
);
}; };
export const fillTextHCentered = ( export const fillTextHCentered = (
@@ -96,8 +100,8 @@ export const fillTextHCenteredMultiline = (
lineHeight: number, lineHeight: number,
) => { ) => {
const lines = text.split("\n"); const lines = text.split("\n");
for (let i = 0, y = 20; i < lines.length; i += 1, y += lineHeight) { for (let i = 0; i < lines.length; i += 1, y += lineHeight) {
fillTextHCentered(ctx, lines[i]!, 0, y, width); fillTextHCentered(ctx, lines[i]!, x, y, width);
} }
}; };
@@ -237,11 +241,10 @@ export const drawButton = (
0, 0,
); );
ctx.textBaseline = "top";
ctx.font = "10px NDS10"; ctx.font = "10px NDS10";
ctx.fillStyle = "#494118"; ctx.fillStyle = "#494118";
fillTextHCentered(ctx, text, 1, 4, width); fillTextHCentered(ctx, text, 1, 4 + 9, width);
ctx.restore(); ctx.restore();
}; };