feat(nds): dispatch events to screens from the nds itself

app/components/NDS.vue

@@ -8,11 +8,6 @@ const props = defineProps<{
   bottomScreenCanvas: HTMLCanvasElement | null;
 }>();
 
-const emit = defineEmits<{
-  topScreenClick: [x: number, y: number];
-  bottomScreenClick: [x: number, y: number];
-}>();
-
 const { state: model } = useLoader(
   GLTFLoader,
   "/models/nintendo-ds/scene.gltf",
@@ -166,17 +161,32 @@ const handleClick = (event: MouseEvent) => {
   switch (intersection.object.name) {
     case TOP_SCREEN:
     case BOTTOM_SCREEN: {
+      const canvas =
+        intersection.object.name === TOP_SCREEN
+          ? props.topScreenCanvas
+          : props.bottomScreenCanvas;
+
+      if (!canvas) break;
+
       const x = Math.floor(intersection.uv.x * 256);
+      let y: number;
 
       if (intersection.object.name === TOP_SCREEN) {
-        const y = Math.floor(intersection.uv.y * (1024 / 404) * 192);
-        emit("topScreenClick", x, y);
-      } else if (intersection.object.name === BOTTOM_SCREEN) {
-        const y = Math.floor(
-          192 - (1 - intersection.uv.y) * (1024 / 532) * 192,
-        );
-        emit("bottomScreenClick", x, y);
+        y = Math.floor(intersection.uv.y * (1024 / 404) * 192);
+      } else {
+        y = Math.floor(192 - (1 - intersection.uv.y) * (1024 / 532) * 192);
       }
+
+      const rect = canvas.getBoundingClientRect();
+      canvas.dispatchEvent(
+        new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
+          clientX: (x / 256) * rect.width + rect.left,
+          clientY: (y / 192) * rect.height + rect.top,
+        }),
+      );
+
       break;
     }