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

This commit is contained in:
Mitchell McCaffrey 2020-08-07 20:33:51 +10:00
parent 602631f9b1
commit 91a98def2f
2 changed files with 50 additions and 22 deletions

View File

@ -7,8 +7,8 @@ import MapPointer from "../components/map/MapPointer";
import { isEmpty } from "../helpers/shared"; import { isEmpty } from "../helpers/shared";
import { lerp } from "../helpers/vector2"; 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 }) { function NetworkedMapPointer({ session, active, gridSize }) {
const { userId } = useContext(AuthContext); const { userId } = useContext(AuthContext);
@ -21,21 +21,38 @@ function NetworkedMapPointer({ session, active, gridSize }) {
} }
}, [userId, pointerState]); }, [userId, pointerState]);
const sessionRef = useRef(session);
useEffect(() => {
sessionRef.current = session;
}, [session]);
// Send pointer updates every sendTickRate to peers to save on bandwidth // 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(); const ownPointerUpdateRef = useRef();
useEffect(() => { 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 () => { return () => {
clearInterval(sendInterval); cancelAnimationFrame(request);
}; };
}, [session]); }, []);
function updateOwnPointerState(position, visible) { function updateOwnPointerState(position, visible) {
setPointerState((prev) => ({ setPointerState((prev) => ({

View File

@ -77,24 +77,35 @@ function NetworkedParty({ gameId, session }) {
} }
useEffect(() => { 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) { 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 () => { return () => {
clearInterval(interval); cancelAnimationFrame(request);
}; };
}, [timer, session]); }, [timer, session]);