refactor: cleaning up some code

packages/client/src/components/loadingScreen/loadingScreen.tsx

@@ -7,14 +7,6 @@ import "./loadingScreen.css";
 function LoadingScreen() {
   const [hide, setHide] = useState(false);
   const [loading, setLoading] = useState(true);
-
-  const fadeOut = () => {
-    setLoading(false);
-    setTimeout(() => {
-      setHide(true);
-    }, 5000);
-  };
-
   const { progress } = useNProgress({
     isAnimating: loading,
     animationDuration: 300,
@@ -23,6 +15,13 @@ function LoadingScreen() {
   });
 
   useEffect(() => {
+    const fadeOut = () => {
+      setLoading(false);
+      setTimeout(() => {
+        setHide(true);
+      }, 5000);
+    };
+
     document.addEventListener("gameLoaded", () => {
       fadeOut();
     });

packages/client/src/components/ui/inventory.tsx

@@ -10,6 +10,7 @@ import {
   useTransition,
   type SpringValue,
 } from "@react-spring/web";
+import { useOnce } from "@/lib/useOnce";
 
 function Inventory() {
   const {
@@ -19,7 +20,7 @@ function Inventory() {
   const [cardsLoaded, setcardsLoaded] = useState(false);
   const [facilities, setFacilities] = useState<FacilityDataType[]>([]);
 
-  useEffect(() => {
+  useOnce(() => {
     const f = Object.entries(EntityData.facilities)
       .map(([, entityData]) => entityData)
       .filter((entityData) => entityData.tags.includes("startingItem"));
@@ -30,7 +31,7 @@ function Inventory() {
     return () => {
       document.removeEventListener("gameLoaded", () => {});
     };
-  }, []);
+  });
 
   useEffect(() => {
     // TODO: Remove hack to only show gravityhill at startup

packages/client/src/game/systems/gameLoop.tsx

@@ -7,18 +7,27 @@ import { buildFacility } from "./constructionSystem";
 import { useEntityQuery } from "@latticexyz/react";
 import { Has, getComponentValueStrict } from "@latticexyz/recs";
 import { useStore } from "../store";
+import { useOnce } from "@/lib/useOnce";
 
 let loaded = false;
 
 function GameLoop() {
   const {
-    // systemCalls: { mudGetAllFacilityEntityMetadatas },
     components: { Position, EntityType },
   } = useMUD();
   const {
     world: { getEntityByPosition },
   } = useStore();
 
+  // Startup
+  useOnce(() => {
+    for (let i = 0; i < 10; i++) {
+      const { createResource, randomEmptyPosition } = resourceFactory();
+      const position = randomEmptyPosition();
+      createResource(EntityData.resources.crystalFloat, position!);
+    }
+  });
+
   const facilities = useEntityQuery([Has(Position), Has(EntityType)]).map(
     (entity) => {
       const pos = getComponentValueStrict(Position, entity);
@@ -56,15 +65,6 @@ function GameLoop() {
     }
   }, [facilities, getEntityByPosition]);
 
-  // // Startup
-  useEffect(() => {
-    for (let i = 0; i < 10; i++) {
-      const { createResource, randomEmptyPosition } = resourceFactory();
-      const position = randomEmptyPosition();
-      createResource(EntityData.resources.crystalFloat, position!);
-    }
-  }, []);
-
   return <></>;
 }
 

packages/client/src/game/systems/useConstruction.tsx

@@ -6,11 +6,7 @@ import { queueAsyncCall } from "../utils/asyncQueue";
 
 function useConstruction() {
   const {
-    systemCalls: {
-      // mudIsPositionEmpty,
-      mudBuildFacility,
-      // mudGetEntityMetadataAtPosition,
-    },
+    systemCalls: { mudBuildFacility },
   } = useMUD();
   const {
     input: { building },
@@ -29,7 +25,6 @@ function useConstruction() {
       queueAsyncCall(async () => {
         console.trace("buildFacility hook", position);
         console.log(build);
-
         try {
           const result = await mudBuildFacility(...build);
           console.log("mudBuildFacility result", result);

packages/client/src/lib/useOnce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+function useOnce(fn: () => void) {
+  const started = useRef(false);
+  useEffect(() => {
+    fn();
+
+    return () => {
+      started.current = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+
+export { useOnce };