feat: display projects as pokemons in pokemon platinum

app/assets/app.css

@@ -12,6 +12,14 @@
   font-style: normal;
 }
 
+/* NOTE: woff2 version of this font doesn't work */
+@font-face {
+  font-family: "Pokemon DP Pro";
+  src: url("/assets/fonts/pokemon-dp-pro.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;

app/components/Projects/BottomScreen/Background.vue

@@ -1,33 +1,11 @@
 <script setup lang="ts">
-import BACKGROUND_IMAGE from "/assets/images/projects/bottom-screen/background.webp";
-import VISIT_DISABLED_IMAGE from "/assets/images/projects/bottom-screen/visit-disabled.webp";
+import BACKGROUND_IMAGE from "~/assets/images/projects/bottom-screen/background.webp";
 
-const store = useProjectsStore();
-
-const [backgroundImage, visitDisabledImage] = useImages(
-  BACKGROUND_IMAGE,
-  VISIT_DISABLED_IMAGE,
-);
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
 
 useRender((ctx) => {
   ctx.drawImage(backgroundImage!, 0, 0);
-
-  if (store.projects[store.currentProject]?.url === null) {
-    ctx.drawImage(visitDisabledImage!, 144, 172);
-  }
 });
-
-const QUIT_BUTTON: Rect = [31, 172, 80, 18];
-const OK_BUTTON: Rect = [144, 172, 80, 18];
-
-useScreenClick((x, y) => {
-  if (rectContains(QUIT_BUTTON, [x, y])) {
-    // TODO: outro
-  } else if (rectContains(OK_BUTTON, [x, y])) {
-    store.visitProject();
-  }
-});
-
 defineOptions({
   render: () => null,
 });

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
-import Projects from "./Projects.vue";
+import Buttons from "./Buttons.vue";
 
 const store = useProjectsStore();
 
@@ -13,5 +13,5 @@ onMounted(async () => {
 <template>
   <Background />
 
-  <Projects v-if="!store.loading" />
+  <Buttons v-if="!store.loading" />
 </template>

app/components/Projects/BottomScreen/Buttons.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const store = useProjectsStore();
+
+const PREV_BUTTON: Point = [36, 100];
+const QUIT_BUTTON: Point = [88, 156];
+const LINK_BUTTON: Point = [168, 156];
+const NEXT_BUTTON: Point = [220, 100];
+
+const CLICK_RADIUS = 22;
+
+const circleContains = (
+  [cx, cy]: Point,
+  [x, y]: Point,
+  radius: number,
+): boolean => Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2)) < radius;
+
+useScreenClick((x, y) => {
+  const project = store.projects[store.currentProject];
+  if (circleContains(PREV_BUTTON, [x, y], CLICK_RADIUS)) {
+    store.scrollProjects("left");
+  } else if (circleContains(NEXT_BUTTON, [x, y], CLICK_RADIUS)) {
+    store.scrollProjects("right");
+  } else if (circleContains(QUIT_BUTTON, [x, y], CLICK_RADIUS)) {
+    throw new Error("quit");
+  } else if (
+    circleContains(LINK_BUTTON, [x, y], CLICK_RADIUS) &&
+    project?.link
+  ) {
+    // TODO: show confirmation popup before opening the link, like "you are about to navigate to [...]"
+    store.visitProject();
+  }
+});
+
+useScreenMouseWheel((dy) => {
+  if (dy > 0) {
+    store.scrollProjects("right");
+  } else if (dy < 0) {
+    store.scrollProjects("left");
+  }
+});
+
+useKeyDown((key) => {
+  switch (key) {
+    case "ArrowLeft":
+      store.scrollProjects("left");
+      break;
+    case "ArrowRight":
+      store.scrollProjects("right");
+      break;
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/BottomScreen/Projects.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
-import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";
-
-const store = useProjectsStore();
-
-const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
-  SELECTOR_IMAGE,
-  PROJECT_SQUARE_IMAGE,
-  ...store.projects.map((x) => x.thumbnail),
-);
-
-const getBounds = () => ({
-  startIndex: Math.max(store.currentProject - 3, 0),
-  endIndex: Math.min(store.currentProject + 3 + 1, store.projects.length),
-});
-
-useRender((ctx) => {
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - store.currentProject;
-    const x = 101 + 69 * offsetFromCenter + store.offsetX;
-
-    ctx.drawImage(projectSquareImage!, x, 81);
-    ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
-  }
-
-  ctx.drawImage(selectorImage!, 96, 76);
-
-  ctx.font = "10px NDS10";
-
-  const lines = store.projects[store.currentProject]!.description.split("\\n");
-  const textY = lines.length === 1 ? 35 : 28;
-  for (let i = 0; i < lines.length; i += 1) {
-    const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);
-    ctx.fillText(lines[i]!, Math.floor(128 - width / 2), textY + 15 * i);
-  }
-});
-
-useKeyDown((key) => {
-  switch (key) {
-    case "ArrowLeft":
-      store.scrollProjects("left");
-      break;
-    case "ArrowRight":
-      store.scrollProjects("right");
-      break;
-    case "Enter":
-    case " ":
-      store.visitProject();
-      break;
-  }
-});
-
-useScreenMouseWheel((dy) => {
-  if (dy > 0) {
-    store.scrollProjects("right");
-  } else if (dy < 0) {
-    store.scrollProjects("left");
-  }
-});
-
-useScreenClick((x, y) => {
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const offsetFromCenter = i - store.currentProject;
-    const rectX = 101 + 69 * offsetFromCenter + store.offsetX;
-
-    if (rectContains([rectX, 81, 54, 54], [x, y])) {
-      if (i === store.currentProject) {
-        store.visitProject();
-      } else {
-        store.scrollToProject(i);
-        break;
-      }
-    }
-  }
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/Previews.vue

@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";
-
-const store = useProjectsStore();
-
-const [scopeBadgeImage, ...projectPreviews] = useImages(
-  SCOPE_BADGE_IMAGE,
-  ...store.projects.map((x) => x.preview),
-);
-
-const getBounds = () => ({
-  startIndex: Math.max(store.currentProject - 1, 0),
-  endIndex: Math.min(store.currentProject + 1 + 1, store.projects.length),
-});
-
-const TECH_BADGES: Record<string, { label: string; color: string }> = {
-  nuxt: { label: "Nuxt", color: "#00DC82" },
-  typescript: { label: "TypeScript", color: "#3178C6" },
-  rust: { label: "Rust", color: "#CE422B" },
-  html: { label: "HTML", color: "#E34C26" },
-  go: { label: "Go", color: "#00ADD8" },
-  node: { label: "Node", color: "#339933" },
-  stenciljs: { label: "Stencil", color: "#5851FF" },
-  jira: { label: "Jira", color: "#0052CC" },
-  confluence: { label: "Confluence", color: "#2DA2E5" },
-  vba: { label: "VBA", color: "#5D2B90" },
-};
-
-const BADGE_PADDING = 2;
-const BADGE_SPACING = 2;
-const BADGE_MARGIN = 1;
-const BADGE_HEIGHT = 11;
-
-const drawTechBadges = (
-  ctx: CanvasRenderingContext2D,
-  technologies: string[],
-  x: number,
-  y: number,
-): void => {
-  ctx.font = "7px NDS7";
-
-  let currentX = x;
-  for (let i = technologies.length - 1; i >= 0; i--) {
-    const badge = TECH_BADGES[technologies[i]?.toLowerCase() ?? ""];
-    if (!badge) throw new Error(`Unknown technology: ${technologies[i]}`);
-
-    const { actualBoundingBoxRight: textWidth } = ctx.measureText(badge.label);
-    const badgeWidth = textWidth + BADGE_PADDING * 2;
-
-    currentX -= badgeWidth;
-
-    ctx.fillStyle = badge.color;
-    ctx.fillRect(currentX, y, badgeWidth, BADGE_HEIGHT);
-
-    ctx.fillStyle = "#FFFFFF";
-    ctx.textBaseline = "top";
-    ctx.fillText(badge.label, currentX + BADGE_PADDING, y + 2);
-
-    currentX -= BADGE_SPACING;
-  }
-};
-
-useRender((ctx) => {
-  const project = store.projects[store.currentProject];
-  if (!project) return;
-
-  ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-
-  const { startIndex, endIndex } = getBounds();
-
-  for (let i = startIndex; i < endIndex; i += 1) {
-    const previewImage = projectPreviews[i]!;
-
-    const offsetFromCenter = i - store.currentProject;
-    const baseX = (256 - previewImage.width) / 2;
-    const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
-    const y = (192 - previewImage.height) / 2 + 10;
-
-    // game
-    ctx.save();
-    ctx.translate(x, y);
-
-    ctx.fillStyle = "#a6a6a6";
-    ctx.fillRect(0, 0, previewImage.width + 2, previewImage.height + 2);
-    ctx.fillStyle = "#000000";
-    ctx.fillRect(-1, -1, previewImage.width + 2, previewImage.height + 2);
-
-    ctx.save();
-    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-    ctx.shadowBlur = 10;
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 2;
-
-    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;
-      const badgeX = previewImage.width - BADGE_MARGIN;
-      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();
-  }
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/Project.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import BACKGROUND_IMAGE from "~/assets/images/projects/top-screen/background.webp";
+
+const store = useProjectsStore();
+
+const [backgroundImage, ...projectImages] = useImages(
+  BACKGROUND_IMAGE,
+  ...store.projects.map((project) => `/images/projects/${project.id}.webp`),
+);
+
+const drawTextWithShadow = (
+  ctx: CanvasRenderingContext2D,
+  color: "white" | "black",
+  text: string,
+  x: number,
+  y: number,
+) => {
+  ctx.fillStyle = color === "white" ? "#505050" : "#a8b8b8";
+  ctx.fillText(text, x + 1, y + 0);
+  ctx.fillText(text, x + 1, y + 1);
+  ctx.fillText(text, x + 0, y + 1);
+
+  ctx.fillStyle = color === "white" ? "#f8f8f8" : "#101820";
+  ctx.fillText(text, x, y);
+};
+
+const drawTextWithShadow2Lines = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  maxWidth: number,
+  line1Color: "white" | "black",
+  line2Color: "white" | "black",
+) => {
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
+
+  if (textWidth <= maxWidth) {
+    drawTextWithShadow(ctx, line1Color, text, x, y);
+    return;
+  }
+
+  const words = text.split(" ");
+  let firstLine = "";
+  let secondLine = "";
+
+  for (let i = 0; i < words.length; i++) {
+    const testLine = firstLine + (firstLine ? " " : "") + words[i];
+    const { actualBoundingBoxRight: testWidth } = ctx.measureText(testLine);
+
+    if (testWidth > maxWidth && firstLine) {
+      secondLine = words.slice(i).join(" ");
+      break;
+    }
+    firstLine = testLine;
+  }
+
+  drawTextWithShadow(ctx, line1Color, firstLine, x, y);
+  drawTextWithShadow(ctx, line2Color, secondLine, x, y + 16);
+};
+
+useRender((ctx) => {
+  ctx.drawImage(backgroundImage!, 0, 0);
+
+  ctx.textBaseline = "hanging";
+  ctx.font = "16px Pokemon DP Pro";
+
+  const project = store.projects[store.currentProject];
+  if (!project) return;
+
+  // image
+  const projectImage = projectImages[store.currentProject]!;
+  ctx.drawImage(
+    projectImage,
+    Math.floor(52 - projectImage.width / 2),
+    Math.floor(104 - projectImage.height / 2),
+  );
+
+  // text
+  drawTextWithShadow(ctx, "white", project.title.toUpperCase(), 23, 25);
+  drawTextWithShadow(ctx, "black", project.scope, 12, 41);
+
+  drawTextWithShadow2Lines(
+    ctx,
+    project.description,
+    8,
+    161,
+    90,
+    "white",
+    "black",
+  );
+
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(
+    project.summary,
+  );
+  drawTextWithShadow(
+    ctx,
+    "black",
+    project.summary,
+    Math.floor(185 - textWidth / 2),
+    19,
+  );
+
+  let textY = 35;
+  for (let i = 0; i < project.tasks.length; i += 1) {
+    const lines = project.tasks[i]!.split("\\n");
+
+    ctx.fillStyle = i % 2 === 0 ? "#6870d8" : "#8890f8";
+    ctx.fillRect(106, textY - 1, 150, lines.length * 16);
+
+    ctx.fillStyle = i % 2 === 0 ? "#8890f8" : "#b0b8d0";
+    ctx.fillRect(105, textY - 1, 1, lines.length * 16);
+
+    for (let j = 0; j < lines.length; j += 1) {
+      drawTextWithShadow(ctx, "white", lines[j]!, 118, textY);
+      textY += 16;
+    }
+  }
+
+  drawTextWithShadow2Lines(
+    ctx,
+    project.technologies.join(", "),
+    111,
+    161,
+    145,
+    "black",
+    "black",
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/StatusBar.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
-import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
-import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
-import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
-
-const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
-  useImages(
-    STATUS_BAR_IMAGE,
-    GBA_DISPLAY_IMAGE,
-    STARTUP_MODE_IMAGE,
-    BATTERY_IMAGE,
-  );
-
-useRender((ctx) => {
-  const TEXT_Y = 11;
-
-  //ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
-
-  //ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
-  ctx.drawImage(statusBarImage!, 0, 0);
-
-  ctx.fillStyle = "#ffffff";
-  ctx.font = "7px NDS7";
-
-  // username
-  ctx.fillText("pihkaal", 3, TEXT_Y);
-
-  // time + date
-  const fillNumberCell = (value: number, cellX: number, offset: number) => {
-    const text = value.toFixed().padStart(2, "0");
-    const { actualBoundingBoxRight: width } = ctx.measureText(text);
-
-    const x = cellX * 16;
-    ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
-  };
-
-  const now = new Date();
-
-  fillNumberCell(now.getHours(), 9, 1);
-  if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
-    ctx.fillText(":", 159, TEXT_Y);
-  }
-  fillNumberCell(now.getMinutes(), 10, -1);
-
-  fillNumberCell(now.getDate(), 11, 1);
-  ctx.fillText("/", 190, TEXT_Y);
-  fillNumberCell(now.getMonth() + 1, 12, -1);
-
-  // icons
-  ctx.drawImage(gbaDisplayImage!, 210, 2);
-  ctx.drawImage(startupModeImage!, 226, 2);
-  ctx.drawImage(batteryImage!, 242, 4);
-});
-
-defineOptions({
-  render: () => null,
-});
-</script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
-import StatusBar from "./StatusBar.vue";
-import Previews from "./Previews.vue";
+import Project from "./Project.vue";
 
 const store = useProjectsStore();
 </script>
@@ -9,7 +8,5 @@ const store = useProjectsStore();
 <template>
   <Background />
 
-  <StatusBar />
-
-  <Previews v-if="!store.loading" />
+  <Project v-if="!store.loading" />
 </template>

app/stores/projects.ts

@@ -1,74 +1,15 @@
-import type { MarkdownRoot } from "@nuxt/content";
+import type {
+  DataCollectionItemBase,
+  ProjectsCollectionItem,
+} from "@nuxt/content";
 import gsap from "gsap";
 
-type MarkdownBody = (
-  | {
-      type: "h1" | "p";
-      text: string;
-    }
-  | {
-      type: "img";
-      image: HTMLImageElement;
-    }
-)[];
-
-const createImage = (src: string): HTMLImageElement => {
-  // TODO: how to cleanup ?
-  const img = document.createElement("img");
-  img.src = src;
-  return img;
-};
-
-// TODO: move to utils or smth maybe
-const simplifyMarkdownAST = (root: MarkdownRoot) => {
-  const body: MarkdownBody = [];
-  for (const node of root.value) {
-    if (Array.isArray(node)) {
-      const [type, props, value] = node;
-      console.log("--------------");
-      console.log(`type = ${type}`);
-      console.log(`props = ${JSON.stringify(props)}`);
-      console.log(`value = ${value}`);
-
-      switch (type) {
-        case "h1":
-        case "p": {
-          if (typeof value !== "string")
-            throw `Unsupported node value for '${type}': '${value}'`;
-          body.push({ type, text: value });
-          break;
-        }
-
-        case "img": {
-          if (typeof props["src"] !== "string")
-            throw `Unsupported type or missing node prop "src" for '${type}': '${JSON.stringify(props)}'`;
-          body.push({ type, image: createImage(props.src) });
-          break;
-        }
-
-        default: {
-          throw `Unsupported '${type}'`;
-        }
-      }
-    } else {
-      throw `Unsupported node kind 'string'`;
-    }
-  }
-
-  return body;
-};
-
 export const useProjectsStore = defineStore("projects", {
   state: () => ({
-    projects: [] as {
-      description: string;
-      thumbnail: string;
-      preview: string;
-      url: string | null;
-      technologies: string[];
-      scope: "hobby" | "work";
-      body: MarkdownBody;
-    }[],
+    projects: [] as (Omit<
+      ProjectsCollectionItem,
+      keyof DataCollectionItemBase
+    > & { id: string })[],
     currentProject: 0,
     loading: true,
     offsetX: 0,
@@ -77,33 +18,37 @@ export const useProjectsStore = defineStore("projects", {
   actions: {
     async loadProjects() {
       this.loading = true;
+
       const { data: projects } = await useAsyncData("projects", () =>
-        queryCollection("projects").order("order", "ASC").all(),
+        queryCollection("projects")
+          .order("order", "ASC")
+          .select(
+            "id",
+            "order",
+            "scope",
+            "title",
+            "link",
+            "description",
+            "summary",
+            "technologies",
+            "tasks",
+          )
+          .all(),
       );
       if (!projects.value) throw "Cannot load projects";
+      this.projects = projects.value.map((project) => ({
+        ...project,
+        id: project.id.split("/")[2]!,
+      }));
 
-      this.projects = [];
-
-      for (const project of projects.value) {
-        const parts = project.id.replace(".md", "").split("/");
-        const id = parts[parts.length - 2]!;
-        this.projects.push({
-          description: project.description,
-          thumbnail: `/images/projects/${id}/thumbnail.webp`,
-          preview: `/images/projects/${id}/preview.webp`,
-          url: project.url,
-          technologies: project.technologies,
-          scope: project.scope,
-          body: simplifyMarkdownAST(project.body),
-        });
-      }
+      console.log(this.projects);
 
       this.loading = false;
     },
 
     visitProject() {
-      const url = this.projects[this.currentProject]!.url;
-      if (url) navigateTo(url, { external: true, open: { target: "_blank" } });
+      const link = this.projects[this.currentProject]?.link;
+      if (link) navigateTo(link, { open: { target: "_blank" } });
     },
 
     scrollProjects(direction: "left" | "right") {
@@ -133,6 +78,7 @@ export const useProjectsStore = defineStore("projects", {
       }
     },
 
+    // TODO: not used anymore
     scrollToProject(index: number) {
       if (index === this.currentProject) return;