diff --git a/app/components/Projects/TopScreen/Project.vue b/app/components/Projects/TopScreen/Project.vue index 6140a1f..01176a7 100644 --- a/app/components/Projects/TopScreen/Project.vue +++ b/app/components/Projects/TopScreen/Project.vue @@ -63,16 +63,39 @@ useRender((ctx) => { const project = store.projects[store.currentProject]; if (!project) return; - // image - const projectImage = - assets.projects.pokemons[ - project.id as keyof typeof assets.projects.pokemons - ]; - ctx.drawImage( - projectImage, - Math.floor(52 - projectImage.width / 2), - Math.floor(104 - projectImage.height / 2), - ); + const thumbnailCenterX = 52; + const thumbnailCenterY = 104; + const thumbnailSpacing = 104; + + ctx.save(); + ctx.beginPath(); + ctx.rect(0, 56, 104, 101); + ctx.clip(); + + // draw previous - current - next + for (let i = store.currentProject - 1; i <= store.currentProject + 1; i++) { + if (i < 0 || i >= store.projects.length) continue; + + const offsetFromCurrent = i - store.currentProject; + // TODO: project.id should be typed from useAssets, shouldn't be just a string + const thumbnailImage = + assets.projects.pokemons[ + store.projects[i]!.id as keyof typeof assets.projects.pokemons + ]!; + + ctx.drawImage( + thumbnailImage, + Math.floor( + thumbnailCenterX + + offsetFromCurrent * thumbnailSpacing - + thumbnailImage.width / 2 + + store.offsetX, + ), + Math.floor(thumbnailCenterY - thumbnailImage.height / 2), + ); + } + + ctx.restore(); // text drawTextWithShadow(ctx, "white", project.title.toUpperCase(), 23, 25); diff --git a/app/stores/projects.ts b/app/stores/projects.ts index 442b84b..fb2693e 100644 --- a/app/stores/projects.ts +++ b/app/stores/projects.ts @@ -72,10 +72,10 @@ export const useProjectsStore = defineStore("projects", { this.currentProject < this.projects.length - 1 ) { this.currentProject += 1; - offset = 69; + offset = 104; } else if (direction === "left" && this.currentProject > 0) { this.currentProject -= 1; - offset = -69; + offset = -104; } if (offset !== 0) {