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

feat: display projects as pokemons in pokemon platinum

Browse Source
This commit is contained in:
Stevan
2025-12-11 17:16:00 +01:00
parent c6ee0a7550
commit 3b34961f0d
59 changed files with 393 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/components/Projects/BottomScreen/Background.vue
View File

@@ -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,
});

4
app/components/Projects/BottomScreen/BottomScreen.vue
View File

@@ -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>

56
app/components/Projects/BottomScreen/Buttons.vue Normal file
View File

@@ -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>

85
app/components/Projects/BottomScreen/Projects.vue
View File

@@ -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>

122
app/components/Projects/TopScreen/Previews.vue
View File

@@ -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>

134
app/components/Projects/TopScreen/Project.vue Normal file
View File

@@ -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>

59
app/components/Projects/TopScreen/StatusBar.vue
View File

@@ -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>

7
app/components/Projects/TopScreen/TopScreen.vue
View File

@@ -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>