feat: Implement chat XP with cooldowns and display an XP progress bar on the student ID card.

src/graphics/studentID.ts

@@ -1,4 +1,5 @@
 import { GlobalFonts, createCanvas, loadImage } from '@napi-rs/canvas';
+import { levelingService } from '@/modules/leveling/leveling.service';
 import path from 'path';
 
 // Register Fonts
@@ -123,5 +124,36 @@ export async function generateStudentIdCard(data: StudentCardData): Promise<Buff
         ctx.fillText((data.level + 1).toString(), 431, 255);
     }
     ctx.restore();
+
+    // Draw xp bar
+    const xpbarX = 2;
+    const xpbarY = 268;
+    const xpbarMaxWidth = 400; // in pixels
+    const xpbarHeight = 4;
+
+    const xp = data.xp;
+    const requiredXp = BigInt(levelingService.getXpForLevel(data.level));
+
+    // Check to avoid division by zero, though requiredXp should be >= 100
+    let percentage = 0;
+    if (requiredXp > 0n) {
+        percentage = Number(xp) / Number(requiredXp);
+    }
+
+    const xpFilledWidth = Math.min(Math.max(percentage * xpbarMaxWidth, 0), xpbarMaxWidth);
+
+    const gradient = ctx.createLinearGradient(xpbarX, xpbarY, xpbarX + xpFilledWidth, xpbarY);
+    gradient.addColorStop(0, '#FFFFFF');
+    gradient.addColorStop(1, '#D9B178');
+    ctx.save();
+    ctx.fillStyle = accentColor;
+    ctx.fillRect(xpbarX, xpbarY, xpbarMaxWidth, xpbarHeight);
+
+    if (xpFilledWidth > 0) {
+        ctx.fillStyle = gradient;
+        ctx.fillRect(xpbarX, xpbarY, xpFilledWidth, xpbarHeight);
+    }
+    ctx.restore();
+
     return canvas.toBuffer('image/png');
 }