feat(projects): add project scope

app/components/Projects/TopScreen/Previews.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";
+
 const store = useProjectsStore();
 
-const projectPreviews = useImages(...store.projects.map((x) => x.preview));
+const [scopeBadgeImage, ...projectPreviews] = useImages(
+  SCOPE_BADGE_IMAGE,
+  ...store.projects.map((x) => x.preview),
+);
 
 const getBounds = () => ({
   startIndex: Math.max(store.currentProject - 1, 0),
@@ -72,6 +77,7 @@ useRender((ctx) => {
     const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
     const y = (192 - previewImage.height) / 2 + 10;
 
+    // game
     ctx.save();
     ctx.translate(x, y);
 
@@ -89,6 +95,7 @@ useRender((ctx) => {
     ctx.drawImage(previewImage, 0, 0);
     ctx.restore();
 
+    // technologies
     const project = store.projects[i]!;
     if (project.technologies && project.technologies.length > 0) {
       const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
@@ -96,6 +103,15 @@ useRender((ctx) => {
       drawTechBadges(ctx, project.technologies, badgeX, badgeY);
     }
 
+    // scope
+    ctx.translate(previewImage.width - scopeBadgeImage!.width + 3, -2);
+    ctx.drawImage(scopeBadgeImage!, 0, 0);
+
+    ctx.font = "7px NDS7";
+    ctx.fillStyle = "#000000";
+    ctx.textBaseline = "top";
+    fillTextCentered(ctx, project.scope.toUpperCase(), 0, -5, 40);
+
     ctx.restore();
   }
 });