pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Stevan
2025-12-27 16:45:37 +01:00
parent fcd51ff91f
commit 254b077722
4 changed files with 7 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/components/Screen.vue
View File

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

4
app/components/Stats.vue
View File

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

6
app/composables/useRender.ts
View File

@@ -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) => { export const useRender = (callback: RenderCallback) => {
const registerRenderCallback = inject< const registerRenderCallback = inject<

18
app/composables/useUpdate.ts
View File

@@ -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);
});
};