86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
|
|
import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";
|
|
|
|
const store = useProjectsStore();
|
|
|
|
const [selectorImage, projectSquareImage, ...projectThumbnails] = useImages(
|
|
SELECTOR_IMAGE,
|
|
PROJECT_SQUARE_IMAGE,
|
|
...store.projects.map((x) => x.thumbnail),
|
|
);
|
|
|
|
const getBounds = () => ({
|
|
startIndex: Math.max(store.currentProject - 3, 0),
|
|
endIndex: Math.min(store.currentProject + 3 + 1, store.projects.length),
|
|
});
|
|
|
|
useRender((ctx) => {
|
|
const { startIndex, endIndex } = getBounds();
|
|
|
|
for (let i = startIndex; i < endIndex; i += 1) {
|
|
const offsetFromCenter = i - store.currentProject;
|
|
const x = 101 + 69 * offsetFromCenter + store.offsetX;
|
|
|
|
ctx.drawImage(projectSquareImage!, x, 81);
|
|
ctx.drawImage(projectThumbnails[i]!, x + 7, 88);
|
|
}
|
|
|
|
ctx.drawImage(selectorImage!, 96, 76);
|
|
|
|
ctx.font = "10px NDS10";
|
|
|
|
const lines = store.projects[store.currentProject]!.description.split("\\n");
|
|
const textY = lines.length === 1 ? 35 : 28;
|
|
for (let i = 0; i < lines.length; i += 1) {
|
|
const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);
|
|
ctx.fillText(lines[i]!, Math.floor(128 - width / 2), textY + 15 * i);
|
|
}
|
|
});
|
|
|
|
useKeyDown((key) => {
|
|
switch (key) {
|
|
case "ArrowLeft":
|
|
store.scrollProjects("left");
|
|
break;
|
|
case "ArrowRight":
|
|
store.scrollProjects("right");
|
|
break;
|
|
case "Enter":
|
|
case " ":
|
|
store.visitProject();
|
|
break;
|
|
}
|
|
});
|
|
|
|
useScreenMouseWheel((dy) => {
|
|
if (dy > 0) {
|
|
store.scrollProjects("right");
|
|
} else if (dy < 0) {
|
|
store.scrollProjects("left");
|
|
}
|
|
});
|
|
|
|
useScreenClick((x, y) => {
|
|
const { startIndex, endIndex } = getBounds();
|
|
|
|
for (let i = startIndex; i < endIndex; i += 1) {
|
|
const offsetFromCenter = i - store.currentProject;
|
|
const rectX = 101 + 69 * offsetFromCenter + store.offsetX;
|
|
|
|
if (rectContains([rectX, 81, 54, 54], [x, y])) {
|
|
if (i === store.currentProject) {
|
|
store.visitProject();
|
|
} else {
|
|
store.scrollToProject(i);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|