57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const store = useProjectsStore();
|
|
|
|
const PREV_BUTTON: Point = [36, 100];
|
|
const QUIT_BUTTON: Point = [88, 156];
|
|
const LINK_BUTTON: Point = [168, 156];
|
|
const NEXT_BUTTON: Point = [220, 100];
|
|
|
|
const CLICK_RADIUS = 22;
|
|
|
|
const circleContains = (
|
|
[cx, cy]: Point,
|
|
[x, y]: Point,
|
|
radius: number,
|
|
): boolean => Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y - cy, 2)) < radius;
|
|
|
|
useScreenClick((x, y) => {
|
|
const project = store.projects[store.currentProject];
|
|
if (circleContains(PREV_BUTTON, [x, y], CLICK_RADIUS)) {
|
|
store.scrollProjects("left");
|
|
} else if (circleContains(NEXT_BUTTON, [x, y], CLICK_RADIUS)) {
|
|
store.scrollProjects("right");
|
|
} else if (circleContains(QUIT_BUTTON, [x, y], CLICK_RADIUS)) {
|
|
throw new Error("quit");
|
|
} else if (
|
|
circleContains(LINK_BUTTON, [x, y], CLICK_RADIUS) &&
|
|
project?.link
|
|
) {
|
|
// TODO: show confirmation popup before opening the link, like "you are about to navigate to [...]"
|
|
store.visitProject();
|
|
}
|
|
});
|
|
|
|
useScreenMouseWheel((dy) => {
|
|
if (dy > 0) {
|
|
store.scrollProjects("right");
|
|
} else if (dy < 0) {
|
|
store.scrollProjects("left");
|
|
}
|
|
});
|
|
|
|
useKeyDown((key) => {
|
|
switch (key) {
|
|
case "NDS_LEFT":
|
|
store.scrollProjects("left");
|
|
break;
|
|
case "NDS_RIGHT":
|
|
store.scrollProjects("right");
|
|
break;
|
|
}
|
|
});
|
|
|
|
defineOptions({
|
|
render: () => null,
|
|
});
|
|
</script>
|