UI: Sync UI updates to game updates. (#1512)

There are a bunch of React components that update at the same rate
that the game engine processes cycles. Rather than have each place
that does so start its own timer to update that often, add a new
react hook that triggers an update shortly after the engine completes
a cycle.

src/ui/React/hooks.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { GameCycleEvents } from "../../engine";
 
 /** Hook that returns a function for the component. Optionally set an interval to rerender the component.
  * @param autoRerenderTime: Optional. If provided and nonzero, used as the ms interval to automatically call the rerender function.
@@ -17,6 +18,19 @@ export function useRerender(autoRerenderTime?: number) {
   return rerender;
 }
 
+/** Hook that rerenders the component shortly after the game engine processes a cycle.
+ * @returns a function that will trigger a rerender.
+ */
+export function useCycleRerender(): () => void {
+  const rerender = useRerender();
+
+  useEffect(() => {
+    const unsubscribe = GameCycleEvents.subscribe(rerender);
+    return unsubscribe;
+  }, [rerender]);
+  return rerender;
+}
+
 export function useBoolean(initialValue = false) {
   const [value, setValue] = useState(initialValue);