feat: implement useScreenClick

app/components/Screen.vue

@@ -3,6 +3,7 @@ const canvas = useTemplateRef("canvas");
 
 const updateCallbacks = new Set<UpdateCallback>();
 const renderCallbacks = new Set<RenderCallback>();
+const screenClickCallbacks = new Set<ScreenClickCallback>();
 
 let ctx: CanvasRenderingContext2D | null = null;
 let animationFrameId: number | null = null;
@@ -19,6 +20,26 @@ const registerRenderCallback = (callback: RenderCallback) => {
   return () => renderCallbacks.delete(callback);
 };
 
+const registerScreenClickCallback = (callback: ScreenClickCallback) => {
+  screenClickCallbacks.add(callback);
+  return () => screenClickCallbacks.delete(callback);
+};
+
+const handleCanvasClick = (event: MouseEvent) => {
+  if (!canvas.value) return;
+
+  const rect = canvas.value.getBoundingClientRect();
+  const scaleX = SCREEN_WIDTH / rect.width;
+  const scaleY = SCREEN_HEIGHT / rect.height;
+
+  const x = (event.clientX - rect.left) * scaleX;
+  const y = (event.clientY - rect.top) * scaleY;
+
+  for (const callback of screenClickCallbacks) {
+    callback(x, y);
+  }
+};
+
 const renderFrame = (timestamp: number) => {
   if (!ctx) return;
 
@@ -56,6 +77,9 @@ onMounted(() => {
 
   provide("registerUpdateCallback", registerUpdateCallback);
   provide("registerRenderCallback", registerRenderCallback);
+  provide("registerScreenClickCallback", registerScreenClickCallback);
+
+  canvas.value.addEventListener("click", handleCanvasClick);
 
   animationFrameId = requestAnimationFrame(renderFrame);
 });
@@ -64,6 +88,10 @@ onUnmounted(() => {
   if (animationFrameId !== null) {
     cancelAnimationFrame(animationFrameId);
   }
+
+  if (canvas.value) {
+    canvas.value.removeEventListener("click", handleCanvasClick);
+  }
 });
 </script>