feat: centralize all screen related callbacks in useScreen

app/composables/useScreen.ts

@@ -0,0 +1,50 @@
+export type RenderCallback = (
+  ctx: CanvasRenderingContext2D,
+  deltaTime: number,
+  realDeltaTime: number,
+) => void;
+
+export type ScreenClickCallback = (x: number, y: number) => void;
+
+export type ScreenMouseWheelCallback = (deltaY: number, deltaX: number) => void;
+
+export const useScreen = () => {
+  const registerRender = inject<
+    (cb: RenderCallback, zIndex?: number) => () => void
+  >("registerRenderCallback");
+  const registerClick = inject<(cb: ScreenClickCallback) => () => void>(
+    "registerScreenClickCallback",
+  );
+  const registerWheel = inject<(cb: ScreenMouseWheelCallback) => () => void>(
+    "registerScreenMouseWheelCallback",
+  );
+
+  const onRender = (callback: RenderCallback, zIndex = 0) => {
+    onMounted(() => {
+      if (!registerRender)
+        throw new Error("useScreen must be used within a Screen component");
+      const unregister = registerRender(callback, zIndex);
+      onUnmounted(unregister);
+    });
+  };
+
+  const onClick = (callback: ScreenClickCallback) => {
+    onMounted(() => {
+      if (!registerClick)
+        throw new Error("useScreen must be used within a Screen component");
+      const unregister = registerClick(callback);
+      onUnmounted(unregister);
+    });
+  };
+
+  const onMouseWheel = (callback: ScreenMouseWheelCallback) => {
+    onMounted(() => {
+      if (!registerWheel)
+        throw new Error("useScreen must be used within a Screen component");
+      const unregister = registerWheel(callback);
+      onUnmounted(unregister);
+    });
+  };
+
+  return { onRender, onClick, onMouseWheel };
+};