feat: centralize all screen related callbacks in useScreen

app/components/Screen.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const canvas = useTemplateRef("canvas");
 
-const renderCallbacks = new Set<RenderCallback>();
+const renderCallbacks = new Map<RenderCallback, number>();
 const screenClickCallbacks = new Set<ScreenClickCallback>();
 const screenMouseWheelCallbacks = new Set<ScreenMouseWheelCallback>();
 
@@ -10,8 +10,8 @@ let animationFrameId: number | null = null;
 let lastFrameTime = 0;
 let lastRealFrameTime = 0;
 
-const registerRenderCallback = (callback: RenderCallback) => {
-  renderCallbacks.add(callback);
+const registerRenderCallback = (callback: RenderCallback, zIndex = 0) => {
+  renderCallbacks.set(callback, zIndex);
   return () => renderCallbacks.delete(callback);
 };
 
@@ -59,7 +59,11 @@ const renderFrame = (timestamp: number) => {
   // render
   ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
-  for (const callback of renderCallbacks) {
+  const sortedCallbacks = Array.from(renderCallbacks.entries())
+    .sort((a, b) => a[1] - b[1])
+    .map(([callback]) => callback);
+
+  for (const callback of sortedCallbacks) {
     ctx.save();
 
     callback(ctx, deltaTime, lastRealFrameTime);