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

feat(achievements): handle 2 lines text in notification

Browse Source
This commit is contained in:
Stevan
2026-01-18 23:46:53 +01:00
parent d7e626397a
commit 571f9ff81b
2 changed files with 48 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/Common/AchievementNotification.vue
View File

@@ -13,10 +13,12 @@ const isAnimating = ref(false);
const PADDING = 4;
const LOGO_SIZE = assets.images.common.achievementNotificationLogo.rect.height;
const NOTIF_HEIGHT = LOGO_SIZE + PADDING * 2;
const NOTIF_WIDTH = 120;
const NOTIF_HEIGHT = LOGO_SIZE + PADDING * 2;
const NOTIF_Y = 3;
const NOTIF_X_VISIBLE = LOGICAL_WIDTH - NOTIF_WIDTH;
const TEXT_X_OFFSET = LOGO_SIZE + PADDING * 2;
const LINE_HEIGHT = 8;
achievements.$onAction(({ name, args, after }) => {
if (name === "unlock") {
@@ -65,34 +67,36 @@ onRender((ctx) => {
if (!currentAchievement.value) return;
const logo = assets.images.common.achievementNotificationLogo;
const textOffset = LOGO_SIZE + PADDING * 2;
// Shadow
// shadow
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
ctx.fillRect(x.value + 1, NOTIF_Y + 1, NOTIF_WIDTH, NOTIF_HEIGHT);
// Outer border (dark) - no right border
// border
ctx.fillStyle = "#282828";
ctx.fillRect(x.value, NOTIF_Y, NOTIF_WIDTH, 1); // Top
ctx.fillRect(x.value, NOTIF_Y, 1, NOTIF_HEIGHT); // Left
ctx.fillRect(x.value, NOTIF_Y + NOTIF_HEIGHT - 1, NOTIF_WIDTH, 1); // Bottom
// Inner background (light)
// background
ctx.fillStyle = "#fafafa";
ctx.fillRect(x.value + 1, NOTIF_Y + 1, NOTIF_WIDTH - 1, NOTIF_HEIGHT - 2);
// Logo
// logo
logo.draw(ctx, x.value + PADDING, NOTIF_Y + PADDING);
// Text
ctx.font = "8px NDS10";
// text (1 or 2 lines)
ctx.font = "7px NDS7";
ctx.textBaseline = "top";
ctx.fillStyle = "#282828";
ctx.fillText(
$t(`achievements.${currentAchievement.value}`),
x.value + textOffset,
NOTIF_Y + PADDING + (LOGO_SIZE - 8) / 2,
);
const lines = $t(`achievements.${currentAchievement.value}`).split("\n");
const textY =
lines.length === 1 ? NOTIF_Y + PADDING + 4 : NOTIF_Y + PADDING + 1;
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i]!, x.value + TEXT_X_OFFSET, textY + i * LINE_HEIGHT);
}
}, 200);
defineOptions({ render: () => null });