feat(screen): remove useUpdate callback and add delta time to useRender

app/components/Screen.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 const canvas = useTemplateRef("canvas");
 
-const updateCallbacks = new Set<UpdateCallback>();
 const renderCallbacks = new Set<RenderCallback>();
 const screenClickCallbacks = new Set<ScreenClickCallback>();
 const screenMouseWheelCallbacks = new Set<ScreenMouseWheelCallback>();
@@ -11,11 +10,6 @@ let animationFrameId: number | null = null;
 let lastFrameTime = 0;
 let lastRealFrameTime = 0;
 
-const registerUpdateCallback = (callback: UpdateCallback) => {
-  updateCallbacks.add(callback);
-  return () => updateCallbacks.delete(callback);
-};
-
 const registerRenderCallback = (callback: RenderCallback) => {
   renderCallbacks.add(callback);
   return () => renderCallbacks.delete(callback);
@@ -62,18 +56,13 @@ const renderFrame = (timestamp: number) => {
 
   const start = Date.now();
 
-  // update
-  for (const callback of updateCallbacks) {
-    callback(deltaTime, lastRealFrameTime);
-  }
-
   // render
   ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
   for (const callback of renderCallbacks) {
     ctx.save();
 
-    callback(ctx);
+    callback(ctx, deltaTime, lastRealFrameTime);
 
     ctx.restore();
   }
@@ -83,7 +72,6 @@ const renderFrame = (timestamp: number) => {
   animationFrameId = requestAnimationFrame(renderFrame);
 };
 
-provide("registerUpdateCallback", registerUpdateCallback);
 provide("registerRenderCallback", registerRenderCallback);
 provide("registerScreenClickCallback", registerScreenClickCallback);
 provide("registerScreenMouseWheelCallback", registerScreenMouseWheelCallback);

app/components/Stats.vue

@@ -8,7 +8,7 @@ const SAMPLES = 60;
 let average = { deltaTime: 0, realDeltaTime: 0 };
 const lastFrames: (typeof average)[] = [];
 
-useUpdate((deltaTime, realDeltaTime) => {
+useRender((ctx, deltaTime, realDeltaTime) => {
   lastFrames.push({ deltaTime, realDeltaTime });
 
   if (lastFrames.length > SAMPLES) {
@@ -24,9 +24,7 @@ useUpdate((deltaTime, realDeltaTime) => {
         lastFrames.length,
     };
   }
-});
 
-useRender((ctx) => {
   const LINE_COUNT = 5;
   const LINE_HEIGHT = 12;
 

app/composables/useRender.ts

@@ -1,4 +1,8 @@
-export type RenderCallback = (ctx: CanvasRenderingContext2D) => void;
+export type RenderCallback = (
+  ctx: CanvasRenderingContext2D,
+  deltaTime: number,
+  realDeltaTime: number,
+) => void;
 
 export const useRender = (callback: RenderCallback) => {
   const registerRenderCallback = inject<

app/composables/useUpdate.ts

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