107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const store = useProjectsStore();
|
|
|
|
const projectPreviews = useImages(...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;
|
|
|
|
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();
|
|
|
|
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);
|
|
}
|
|
|
|
ctx.restore();
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|