Fixed fonts causing shifts in Node positions on firefox

src/components/Context.vue

@@ -12,6 +12,7 @@ import {
 } from "game/layers";
 import type { FeatureNode } from "game/layers";
 import { nextTick, onMounted, provide, ref } from "vue";
+import { globalBus } from "game/events";
 
 const emit = defineEmits<{
     (e: "updateNodes", nodes: Record<string, FeatureNode | undefined>): void;
@@ -31,7 +32,7 @@ onMounted(() => {
 let isDirty = true;
 let boundingRect = ref(resizeListener.value?.getBoundingClientRect());
 function updateBounds() {
-    if (resizeListener.value != null && isDirty) {
+    if (isDirty) {
         isDirty = false;
         nextTick(() => {
             boundingRect.value = resizeListener.value?.getBoundingClientRect();
@@ -43,7 +44,7 @@ function updateBounds() {
         });
     }
 }
-document.fonts.ready.then(updateBounds);
+globalBus.on("fontsLoaded", updateBounds);
 
 const observerOptions = {
     attributes: false,

src/features/particles/Particles.vue

@@ -10,6 +10,7 @@
 <script lang="tsx">
 import { Application } from "@pixi/app";
 import type { StyleValue } from "features/feature";
+import { globalBus } from "game/events";
 import "lib/pixi";
 import { processedPropType } from "util/vue";
 import type { PropType } from "vue";
@@ -63,15 +64,14 @@ export default defineComponent({
             if (isDirty) {
                 isDirty = false;
                 nextTick(() => {
-                    if (resizeListener.value != null && props.onContainerResized) {
-                        props.onContainerResized(resizeListener.value.getBoundingClientRect());
-                        app.value?.resize();
+                    if (resizeListener.value != null) {
+                        props.onContainerResized?.(resizeListener.value.getBoundingClientRect());
                     }
                     isDirty = true;
                 });
             }
         }
-        document.fonts.ready.then(updateBounds);
+        globalBus.on("fontsLoaded", updateBounds);
 
         return {
             unref,

src/game/events.ts

@@ -50,6 +50,11 @@ export interface GlobalEvents {
      * Happens when the page is opened and upon switching saves in the saves manager.
      */
     onLoad: VoidFunction;
+    /**
+     * Using document.fonts.ready returns too early on firefox, so we use document.fonts.onloadingdone instead, which doesn't accept multiple listeners.
+     * This event fires when that callback is called.
+     */
+    fontsLoaded: VoidFunction;
 }
 
 /** A global event bus for hooking into {@link GlobalEvents}. */
@@ -152,3 +157,5 @@ export async function startGameLoop() {
         intervalID = setInterval(update, 50);
     }
 }
+
+document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");