feat: Implement graphical student ID card generation for user profiles.

2025-12-08 22:33:01 +01:00
parent 4d553ddc91
commit bcfd254071
9 changed files with 159 additions and 17 deletions
--- a/src/graphics/studentID.ts
+++ b/src/graphics/studentID.ts
@@ -0,0 +1,127 @@
+import { GlobalFonts, createCanvas, loadImage } from '@napi-rs/canvas';
+import path from 'path';
+
+// Register Fonts
+const fontDir = path.join(process.cwd(), 'src', 'assets', 'fonts');
+GlobalFonts.registerFromPath(path.join(fontDir, 'IBMPlexSansCondensed-SemiBold.ttf'), 'IBMPlexSansCondensed-SemiBold');
+GlobalFonts.registerFromPath(path.join(fontDir, 'IBMPlexMono-Bold.ttf'), 'IBMPlexMono-Bold');
+
+const textColor = '#FFE7C5';
+const secondaryTextColor = '#9C7D53';
+const accentColor = '#3F2923';
+
+interface StudentCardData {
+    username: string;
+    avatarUrl: string;
+    id: string;
+    level: number;
+    au: bigint; // Astral Units
+    cu: bigint; // Constellation Units
+    xp: bigint; // Experience
+    className?: string | null;
+}
+
+export async function generateStudentIdCard(data: StudentCardData): Promise<Buffer> {
+    const templatePath = path.join(process.cwd(), 'src', 'assets', 'student-id-template.png');
+    const template = await loadImage(templatePath);
+
+    const canvas = createCanvas(template.width, template.height);
+    const ctx = canvas.getContext('2d');
+
+    // Draw Template
+    ctx.drawImage(template, 0, 0);
+
+    // Draw Avatar
+    const avatarSize = 111;
+    const avatarX = 18;
+    const avatarY = 64;
+
+    try {
+        const avatar = await loadImage(data.avatarUrl);
+        ctx.save();
+        ctx.beginPath();
+        // Square avatar
+        ctx.rect(avatarX, avatarY, avatarSize, avatarSize);
+        ctx.clip();
+        ctx.drawImage(avatar, avatarX, avatarY, avatarSize, avatarSize);
+        ctx.restore();
+    } catch (e) {
+        console.error("Failed to load avatar", e);
+    }
+
+    // Draw ID
+    ctx.save();
+    ctx.font = '12px IBMPlexMono-Bold';
+    ctx.fillStyle = secondaryTextColor;
+    ctx.textAlign = 'left';
+    ctx.fillText(`ID: ${data.id}`, 302, 30);
+    ctx.restore();
+
+    // Draw Username
+    ctx.save();
+    ctx.font = '32px IBMPlexSansCondensed-SemiBold';
+    ctx.fillStyle = textColor;
+    ctx.textAlign = 'left';
+    ctx.fillText(data.username, 140, 107);
+    ctx.restore();
+
+    // Draw Class
+    try {
+        const classBadge = await loadImage(path.join(process.cwd(), 'src', 'assets', 'student-id-class-badge.png'));
+        ctx.save();
+        ctx.beginPath();
+        ctx.drawImage(classBadge, 100, 126, 58, 58);
+        ctx.font = '32px IBMPlexMono-Bold';
+        ctx.fillStyle = textColor;
+        ctx.textAlign = 'left';
+        ctx.fillText(data.className || 'Unknown', 120, 162);
+        ctx.restore();
+    } catch (e) {
+        console.error("Failed to load class badge", e);
+    }
+
+    // Draw Astral Units
+    ctx.save();
+    ctx.font = '32px IBMPlexMono-Bold';
+    ctx.fillStyle = textColor;
+    ctx.textAlign = 'left';
+    ctx.fillText(data.au.toString(), 163, 218);
+    ctx.restore();
+
+    // Draw Constellation Units
+    ctx.save();
+    ctx.font = '32px IBMPlexMono-Bold';
+    ctx.fillStyle = textColor;
+    ctx.textAlign = 'left';
+    ctx.fillText(data.cu.toString(), 163, 153);
+    ctx.restore();
+
+    // Draw Level
+    ctx.save();
+    // check how many digits the level has and adjust the position accordingly
+    const levelDigits = data.level.toString().length;
+    ctx.font = '12px IBMPlexMono-Bold';
+    ctx.fillStyle = secondaryTextColor;
+    ctx.textAlign = 'left';
+    if (levelDigits === 1) {
+        ctx.fillText(data.level.toString(), 406, 265);
+    } else {
+        ctx.fillText(data.level.toString(), 400, 265);
+    }
+    ctx.restore();
+
+    // Draw Next Level
+    ctx.save();
+    // check how many digits the next level has and adjust the position accordingly
+    const nextLevelDigits = (data.level + 1).toString().length;
+    ctx.font = '24px IBMPlexMono-Bold';
+    ctx.fillStyle = textColor;
+    ctx.textAlign = 'left';
+    if (nextLevelDigits === 1) {
+        ctx.fillText((data.level + 1).toString(), 438, 255);
+    } else {
+        ctx.fillText((data.level + 1).toString(), 431, 255);
+    }
+    ctx.restore();
+    return canvas.toBuffer('image/png');
+}