feat: arbitrary render throttling

client/index.js

@@ -7,7 +7,7 @@ import {Vector} from '@avocado/math';
 import {World} from '@avocado/physics/matter/world';
 import {Synchronizer, Unpacker} from '@avocado/state';
 import {Room, RoomView} from '@avocado/topdown';
-import {clearAnimation, setAnimation} from '@avocado/timing';
+import {clearAnimation, setAnimation, Ticker} from '@avocado/timing';
 // 1st party.
 import {WorldTime} from '../common/world-time';
 // DOM.
@@ -170,6 +170,11 @@ const messageHandle = setInterval(() => {
   }
 }, 1000 / 60);
 // Prediction.
+let mayRender = false;
+const renderTicker = new Ticker(1 / 60);
+renderTicker.on('tick', () => {
+  mayRender = true;
+});
 let lastIntensity = undefined;
 let lastIsFocused = undefined;
 let lastTime = performance.now();
@@ -184,6 +189,8 @@ const predictionHandle = setInterval(() => {
   synchronizer.tick(elapsed);
   dirty = dirty || synchronizer.state !== state;
   state = synchronizer.state;
+  // Render timing.
+  renderTicker.tick(elapsed);
   // Apply environmental lighting.
   let intensity = 0;
   if (worldTime.hour >= 21 || worldTime.hour < 4) {
@@ -230,6 +237,10 @@ function render() {
   if (!dirty) {
     return;
   }
+  if (!mayRender) {
+    return false;
+  }
+  mayRender = false;
   if (worldTime.humanReadable() !== lastWorldTime) {
     timeUi.textContent = worldTime.humanReadable();
     lastWorldTime = worldTime.humanReadable();