42 lines
989 B
Vue
42 lines
989 B
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));
|
|
});
|
|
|
|
useRender((ctx) => {
|
|
const project = store.projects[store.currentProject];
|
|
if (!project) return;
|
|
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#000000";
|
|
|
|
const preview = projectPreviews.value[store.currentProject];
|
|
if (!preview) return;
|
|
|
|
const x = (256 - preview.width) / 2;
|
|
const y = (192 - preview.height) / 2 + 10;
|
|
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);
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|