Merge branch 'loaf-opti' of https://github.com/BibliothecaDAO/eternum …

…into loaf-opti
BibliothecaDAO · Dec 12, 2024 · 88d5523 · 88d5523
2 parents 83d691d + b4ac40d
commit 88d5523
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 32 deletions.
diff --git a/client/src/ui/components/worldmap/armies/SelectedArmy.tsx b/client/src/ui/components/worldmap/armies/SelectedArmy.tsx
@@ -2,6 +2,7 @@ import { useOwnArmiesByPosition } from "@/hooks/helpers/useArmies";
 import { useEntities } from "@/hooks/helpers/useEntities";
 import { useQuery } from "@/hooks/helpers/useQuery";
 import useUIStore from "@/hooks/store/useUIStore";
+import { useWorldStore } from "@/hooks/store/useWorldLoading";
 import { Position } from "@/types/Position";
 import { ArmyChip } from "@/ui/components/military/ArmyChip";
 import { InventoryResources } from "@/ui/components/resources/InventoryResources";
@@ -14,6 +15,8 @@ export const SelectedArmy = () => {
   const updateSelectedEntityId = useUIStore((state) => state.updateSelectedEntityId);
   const { isMapView } = useQuery();
 
+  const isWorldLoading = useWorldStore((state) => state.isWorldLoading);
+
   const [selectedArmyIndex, setSelectedArmyIndex] = useState(0);
 
   useEffect(() => {
@@ -63,34 +66,52 @@ export const SelectedArmy = () => {
   const showTooltip = selectedHex && ownArmy && isMapView;
 
   return (
-    <div
-      className={`
+    <>
+      <div
+        className={`
+        fixed left-1/2 transform -translate-x-1/2
+        bg-black/80 p-2 rounded-lg
+        transition-all duration-200 ease-in-out
+        origin-bottom scale-75 md:scale-100
+        ${isWorldLoading ? "bottom-0 opacity-100" : "translate-y-full opacity-0"}
+      `}
+      >
+        {isWorldLoading && (
+          <div className="flex flex-row items-center justify-center h-full p-2">
+            <img src="/images/eternumloader.png" className="w-10" />
+            <div className="ml-4">World state is loading...</div>
+          </div>
+        )}
+      </div>
+      <div
+        className={`
         fixed left-1/2 transform -translate-x-1/2
         bg-black/80 p-2 rounded-lg
         transition-all duration-200 ease-in-out
         origin-bottom scale-75 md:scale-100
         ${showTooltip ? "bottom-0 opacity-100" : "translate-y-full opacity-0"}
       `}
-    >
-      {showTooltip && (
-        <div>
-          {userArmies.length > 1 && (
-            <div className="flex flex-row justify-between mt-2">
-              <div className="px-2 py-1 text-sm rounded-tl animate-pulse">Press Tab to cycle through armies</div>
-              <div className="px-2 py-1 text-sm rounded-bl ">
-                Army {selectedArmyIndex + 1}/{userArmies.length}
+      >
+        {showTooltip && (
+          <div>
+            {userArmies.length > 1 && (
+              <div className="flex flex-row justify-between mt-2">
+                <div className="px-2 py-1 text-sm rounded-tl animate-pulse">Press Tab to cycle through armies</div>
+                <div className="px-2 py-1 text-sm rounded-bl ">
+                  Army {selectedArmyIndex + 1}/{userArmies.length}
+                </div>
               </div>
-            </div>
-          )}
-          <ArmyWarning army={ownArmy!} />
-          <ArmyChip className="w-[27rem] bg-black/90" army={ownArmy} showButtons={false} />
-          <InventoryResources
-            entityId={ownArmy!.entity_id}
-            className="flex gap-1 h-14 mt-2 overflow-x-auto no-scrollbar"
-            resourcesIconSize="xs"
-          />
-        </div>
-      )}
-    </div>
+            )}
+            <ArmyWarning army={ownArmy!} />
+            <ArmyChip className="w-[27rem] bg-black/90" army={ownArmy} showButtons={false} />
+            <InventoryResources
+              entityId={ownArmy!.entity_id}
+              className="flex gap-1 h-14 mt-2 overflow-x-auto no-scrollbar"
+              resourcesIconSize="xs"
+            />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
diff --git a/client/src/ui/layouts/World.tsx b/client/src/ui/layouts/World.tsx
@@ -1,5 +1,5 @@
 import { Leva } from "leva";
-import { lazy, Suspense, useEffect } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { Redirect } from "wouter";
 import useUIStore from "../../hooks/store/useUIStore";
 
@@ -105,20 +105,36 @@ export const World = ({ backgroundImage }: { backgroundImage: string }) => {
   const structureEntityId = useUIStore((state) => state.structureEntityId);
   const position = useComponentValue(dojo.setup.components.Position, getEntityIdFromKeys([BigInt(structureEntityId)]));
 
+  const [lastFetchTimestamp, setLastFetchTimestamp] = useState<number>(Date.now());
+
   useEffect(() => {
     setWorldLoading(true);
     const fetch = async () => {
-      await addToSubscription(
-        dojo.setup.network.toriiClient,
-        dojo.setup.network.contractComponents as any,
-        structureEntityId.toString(),
-        { x: position?.x || 0, y: position?.y || 0 },
-      );
+      try {
+        await addToSubscription(
+          dojo.network.toriiClient,
+          dojo.network.contractComponents as any,
+          structureEntityId.toString(),
+          { x: position?.x || 0, y: position?.y || 0 },
+        );
+      } catch (error) {
+        console.error("Fetch failed", error);
+      }
+
+      const currentTime = Date.now();
+      setLastFetchTimestamp((prevEndTime) => {
+        if (prevEndTime === null) return currentTime;
+        if (currentTime - prevEndTime >= 3000) {
+          setWorldLoading(false);
+        }
+        return currentTime;
+      });
+
+      console.log("world loading", worldLoading);
     };
+
     fetch();
-    console.log("world loading", worldLoading);
-    setWorldLoading(false);
-  }, [structureEntityId]);
+  }, [structureEntityId, setWorldLoading]);
 
   return (
     <div