56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const store = useProjectsStore();
|
|
|
|
const projectPreviews = ref<HTMLImageElement[]>([]);
|
|
|
|
onMounted(() => {
|
|
console.log(store.projects);
|
|
projectPreviews.value = 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),
|
|
});
|
|
|
|
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 preview = projectPreviews.value[i];
|
|
if (!preview) continue;
|
|
|
|
const offsetFromCenter = i - store.currentProject;
|
|
const baseX = (256 - preview.width) / 2;
|
|
const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
|
|
const y = (192 - preview.height) / 2 + 10;
|
|
|
|
ctx.save();
|
|
ctx.translate(x, y);
|
|
|
|
ctx.fillStyle = "#a6a6a6";
|
|
ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
|
|
ctx.fillStyle = "#000000";
|
|
ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
|
|
|
|
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
|
|
ctx.shadowBlur = 10;
|
|
ctx.shadowOffsetX = 2;
|
|
ctx.shadowOffsetY = 2;
|
|
|
|
ctx.drawImage(preview, 0, 0);
|
|
ctx.restore();
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|