Use setTimeout instead of requestAnimationFrame

src/game/time.system.tsx

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { useAnimationFrame } from "~/hooks/useAnimationFrame";
+import { useTimeout } from "~/hooks/useTimeout";
 import { useSettingsStore } from "~/store/settings.store";
 import { useWorldStore } from "~/store/world.store";
 import { TICK_MS } from "./const";
@@ -13,7 +13,7 @@ export function TimeSystem() {
   const paused = useSettingsStore((state) => state.paused);
   const speed = useSettingsStore((state) => state.speed);
 
-  useAnimationFrame((dt) => {
+  useTimeout((dt) => {
     if (paused) return;
 
     const time = timeRef.current + dt * speed;

src/hooks/useTimeout.ts

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+
+export const useTimeout = (
+  callback: (dt: number, time: number) => void,
+  interval: number = 1000 / 60 // 60 FPS
+) => {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const previousTimeRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+
+  const animate = () => {
+    const currentTime = performance.now();
+
+    if (startTimeRef.current === null) {
+      startTimeRef.current = currentTime;
+    }
+
+    const time = currentTime - startTimeRef.current;
+
+    if (previousTimeRef.current !== null) {
+      const deltaTime = time - previousTimeRef.current;
+      callback(deltaTime, time);
+    }
+
+    previousTimeRef.current = time;
+    timeoutRef.current = setTimeout(animate, interval);
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: animate changes every render
+  useEffect(() => {
+    timeoutRef.current = setTimeout(animate, interval);
+    return () => {
+      if (timeoutRef.current !== null) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [callback, interval]);
+};