Moved set intervals in timer and pointer to animation frames as they were being blocked on windows

src/network/NetworkedMapPointer.js

@@ -7,8 +7,8 @@ import MapPointer from "../components/map/MapPointer";
 import { isEmpty } from "../helpers/shared";
 import { lerp } from "../helpers/vector2";
 
-// Send pointer updates every 50ms
+// Send pointer updates every 33ms
-const sendTickRate = 50;
+const sendTickRate = 33;
 
 function NetworkedMapPointer({ session, active, gridSize }) {
   const { userId } = useContext(AuthContext);
@@ -21,21 +21,38 @@ function NetworkedMapPointer({ session, active, gridSize }) {
     }
   }, [userId, pointerState]);
 
+  const sessionRef = useRef(session);
+  useEffect(() => {
+    sessionRef.current = session;
+  }, [session]);
+
   // Send pointer updates every sendTickRate to peers to save on bandwidth
+  // We use requestAnimationFrame as setInterval was being blocked during
+  // re-renders on chrome with windows
   const ownPointerUpdateRef = useRef();
   useEffect(() => {
-    function sendOwnPointerUpdates() {
+    let prevTime = performance.now();
-      if (ownPointerUpdateRef.current) {
+    let request = requestAnimationFrame(update);
-        session.send("pointer", ownPointerUpdateRef.current);
+    let counter = 0;
-        ownPointerUpdateRef.current = null;
+    function update(time) {
+      request = requestAnimationFrame(update);
+      const deltaTime = time - prevTime;
+      counter += deltaTime;
+      prevTime = time;
+
+      if (counter > sendTickRate) {
+        counter -= sendTickRate;
+        if (ownPointerUpdateRef.current && sessionRef.current) {
+          sessionRef.current.send("pointer", ownPointerUpdateRef.current);
+          ownPointerUpdateRef.current = null;
+        }
       }
     }
-    const sendInterval = setInterval(sendOwnPointerUpdates, sendTickRate);
 
     return () => {
-      clearInterval(sendInterval);
+      cancelAnimationFrame(request);
     };
-  }, [session]);
+  }, []);
 
   function updateOwnPointerState(position, visible) {
     setPointerState((prev) => ({

src/network/NetworkedParty.js

@@ -77,24 +77,35 @@ function NetworkedParty({ gameId, session }) {
   }
 
   useEffect(() => {
-    function decreaseTimer(previousTimer) {
+    let prevTime = performance.now();
-      return { ...previousTimer, current: previousTimer.current - 1000 };
+    let request = requestAnimationFrame(update);
-    }
+    let counter = 0;
-    function updateTimers() {
+    function update(time) {
+      request = requestAnimationFrame(update);
+      const deltaTime = time - prevTime;
+      prevTime = time;
+
       if (timer) {
-        const newTimer = decreaseTimer(timer);
+        counter += deltaTime;
-        if (newTimer.current < 0) {
+        // Update timer every second
-          setTimer(null);
+        if (counter > 1000) {
-          session.send("timer", { [session.id]: null });
+          const newTimer = {
-        } else {
+            ...timer,
-          setTimer(newTimer);
+            current: timer.current - counter,
-          session.send("timer", { [session.id]: newTimer });
+          };
+          if (newTimer.current < 0) {
+            setTimer(null);
+            session.send("timer", { [session.id]: null });
+          } else {
+            setTimer(newTimer);
+            session.send("timer", { [session.id]: newTimer });
+          }
+          counter = 0;
         }
       }
     }
-    const interval = setInterval(updateTimers, 1000);
     return () => {
-      clearInterval(interval);
+      cancelAnimationFrame(request);
     };
   }, [timer, session]);