104 lines
2.3 KiB
Vue
104 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import Background from "./Background.vue";
|
|
import StatusBar from "./StatusBar.vue";
|
|
|
|
const store = useProjectsStore();
|
|
|
|
useRender((ctx) => {
|
|
const project = store.projects[store.currentProject];
|
|
if (!project) return;
|
|
|
|
ctx.font = "10px NDS10";
|
|
ctx.fillStyle = "#000000";
|
|
|
|
const preview = store.projects[store.currentProject]?.preview;
|
|
if (!preview) return;
|
|
try {
|
|
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);
|
|
} catch {
|
|
// NOTE: this is needed because not all projects have previews yet
|
|
}
|
|
return;
|
|
|
|
/*
|
|
* NOTE: following code is markdown renderer
|
|
|
|
let penY = 20;
|
|
const SPACE_Y = 6;
|
|
|
|
for (const node of project.body) {
|
|
switch (node.type) {
|
|
case "h1": {
|
|
ctx.font = "10px NDS10";
|
|
penY += fillTextCentered(ctx, node.text, 0, penY, 256);
|
|
break;
|
|
}
|
|
|
|
case "p": {
|
|
ctx.font = "10px NDS10";
|
|
penY += fillTextWordWrapped(ctx, node.text, 10, penY, 236) - 6;
|
|
break;
|
|
}
|
|
|
|
case "img": {
|
|
const x = 10 + 236 / 2 - node.image.width / 2;
|
|
|
|
if (1) {
|
|
ctx.fillStyle = "#000000";
|
|
ctx.fillRect(
|
|
x - 2,
|
|
penY - 2,
|
|
node.image.width + 4,
|
|
node.image.height + 4,
|
|
);
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.fillRect(
|
|
x - 1,
|
|
penY - 1,
|
|
node.image.width + 2,
|
|
node.image.height + 2,
|
|
);
|
|
} else {
|
|
ctx.fillStyle = "#7d7d7d";
|
|
ctx.fillRect(
|
|
x - 1,
|
|
penY - 1,
|
|
node.image.width + 2,
|
|
node.image.height + 2,
|
|
);
|
|
}
|
|
|
|
ctx.drawImage(node.image, x, penY);
|
|
penY += node.image.height;
|
|
break;
|
|
}
|
|
|
|
default:
|
|
throw new Error("not implemented");
|
|
}
|
|
penY += SPACE_Y;
|
|
}
|
|
*/
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Background />
|
|
|
|
<StatusBar />
|
|
</template>
|