feat: centralize all screen related callbacks in useScreen

app/composables/useButtonNavigation.ts

@@ -29,7 +29,9 @@ export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
 
   const nextButton = ref<keyof T | undefined>();
 
-  useScreenClick((x: number, y: number) => {
+  const { onClick } = useScreen();
+
+  onClick((x: number, y: number) => {
     if (modalState.value.isOpen || disabled?.value) return;
 
     for (const [buttonName, config] of Object.entries(buttons) as [

app/composables/useRender.ts

@@ -1,22 +0,0 @@
-export type RenderCallback = (
-  ctx: CanvasRenderingContext2D,
-  deltaTime: number,
-  realDeltaTime: number,
-) => void;
-
-export const useRender = (callback: RenderCallback) => {
-  const registerRenderCallback = inject<
-    (callback: RenderCallback) => () => void
-  >("registerRenderCallback");
-
-  onMounted(() => {
-    if (!registerRenderCallback) {
-      throw new Error(
-        "Missing registerRenderCallback - useRender must be used within a Screen component",
-      );
-    }
-
-    const unregister = registerRenderCallback(callback);
-    onUnmounted(unregister);
-  });
-};

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 };
+};

app/composables/useScreenClick.ts

@@ -1,18 +0,0 @@
-export type ScreenClickCallback = (x: number, y: number) => void;
-
-export const useScreenClick = (callback: ScreenClickCallback) => {
-  const registerScreenClickCallback = inject<
-    (callback: ScreenClickCallback) => () => void
-  >("registerScreenClickCallback");
-
-  onMounted(() => {
-    if (!registerScreenClickCallback) {
-      throw new Error(
-        "Missing registerScreenClickCallback - useScreenClick must be used within a Screen component",
-      );
-    }
-
-    const unregister = registerScreenClickCallback(callback);
-    onUnmounted(unregister);
-  });
-};

app/composables/useScreenMouseWheel.ts

@@ -1,18 +0,0 @@
-export type ScreenMouseWheelCallback = (deltaY: number, deltaX: number) => void;
-
-export const useScreenMouseWheel = (callback: ScreenMouseWheelCallback) => {
-  const registerScreenMouseWheelCallback = inject<
-    (callback: ScreenMouseWheelCallback) => () => void
-  >("registerScreenMouseWheelCallback");
-
-  onMounted(() => {
-    if (!registerScreenMouseWheelCallback) {
-      throw new Error(
-        "Missing registerScreenMouseWheelCallback - useScreenMouseWheel must be used within a Screen component",
-      );
-    }
-
-    const unregister = registerScreenMouseWheelCallback(callback);
-    onUnmounted(unregister);
-  });
-};