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

refactor(projects): load previews directly

Browse Source
This commit is contained in:
Stevan
2025-11-27 19:38:42 +01:00
parent b05e98ea1e
commit 6a219d84d0
1 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
const store = useProjectsStore(); const store = useProjectsStore();
const projectPreviews = ref<HTMLImageElement[]>([]); const projectPreviews = useImages(...store.projects.map((x) => x.preview));
onMounted(() => {
console.log(store.projects);
projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
});
const getBounds = () => ({ const getBounds = () => ({
startIndex: Math.max(store.currentProject - 1, 0), startIndex: Math.max(store.currentProject - 1, 0),
@@ -70,21 +65,20 @@ useRender((ctx) => {
const { startIndex, endIndex } = getBounds(); const { startIndex, endIndex } = getBounds();
for (let i = startIndex; i < endIndex; i += 1) { for (let i = startIndex; i < endIndex; i += 1) {
const preview = projectPreviews.value[i]; const previewImage = projectPreviews[i]!;
if (!preview) continue;
const offsetFromCenter = i - store.currentProject; const offsetFromCenter = i - store.currentProject;
const baseX = (256 - preview.width) / 2; const baseX = (256 - previewImage.width) / 2;
const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69); const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
const y = (192 - preview.height) / 2 + 10; const y = (192 - previewImage.height) / 2 + 10;
ctx.save(); ctx.save();
ctx.translate(x, y); ctx.translate(x, y);
ctx.fillStyle = "#a6a6a6"; ctx.fillStyle = "#a6a6a6";
ctx.fillRect(0, 0, preview.width + 2, preview.height + 2); ctx.fillRect(0, 0, previewImage.width + 2, previewImage.height + 2);
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2); ctx.fillRect(-1, -1, previewImage.width + 2, previewImage.height + 2);
ctx.save(); ctx.save();
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
@@ -92,13 +86,13 @@ useRender((ctx) => {
ctx.shadowOffsetX = 2; ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2; ctx.shadowOffsetY = 2;
ctx.drawImage(preview, 0, 0); ctx.drawImage(previewImage, 0, 0);
ctx.restore(); ctx.restore();
const project = store.projects[i]!; const project = store.projects[i]!;
if (project.technologies && project.technologies.length > 0) { if (project.technologies && project.technologies.length > 0) {
const badgeY = preview.height - BADGE_HEIGHT - BADGE_MARGIN; const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
const badgeX = preview.width - BADGE_MARGIN; const badgeX = previewImage.width - BADGE_MARGIN;
drawTechBadges(ctx, project.technologies, badgeX, badgeY); drawTechBadges(ctx, project.technologies, badgeX, badgeY);
} }