feat: display projects as pokemons in pokemon platinum

app/components/Projects/BottomScreen/Buttons.vue

@@ -0,0 +1,56 @@
+<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 "ArrowLeft":
+      store.scrollProjects("left");
+      break;
+    case "ArrowRight":
+      store.scrollProjects("right");
+      break;
+  }
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>