feat: using store-sync for loading progress

Cygnusfear · Oct 21, 2023 · 1399b48 · 1399b48
1 parent a21e12e
commit 1399b48
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 33 deletions.
diff --git a/packages/client/src/components/loadingScreen/loadingScreen.tsx b/packages/client/src/components/loadingScreen/loadingScreen.tsx
@@ -1,35 +1,37 @@
 import { cn } from "@/lib/utils";
-import { useMemo, useState } from "react";
-import { useNProgress } from "@tanem/react-nprogress";
+import { useEffect, useState } from "react";
 
 import "./loadingScreen.css";
+import { useMUD } from "@/useMUD";
+import { useComponentValue } from "@latticexyz/react";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { SyncStep } from "@latticexyz/store-sync";
 
 function LoadingScreen() {
   const [hide, setHide] = useState(false);
   const [loading, setLoading] = useState(true);
-  const { progress } = useNProgress({
-    isAnimating: loading,
-    animationDuration: 1300,
-    incrementDuration: 50,
-    minimum: 0.01,
+  const [progress, setProgress] = useState(0);
+  const {
+    network: {
+      components: { SyncProgress },
+    },
+  } = useMUD();
+
+  const syncProgress = useComponentValue(SyncProgress, singletonEntity, {
+    message: "Connecting",
+    percentage: 0,
+    step: SyncStep.INITIALIZE,
+    latestBlockNumber: 0n,
+    lastBlockNumberProcessed: 0n,
   });
 
-  useMemo(() => {
-    const fadeOut = () => {
+  useEffect(() => {
+    setProgress(syncProgress.percentage);
+    if (syncProgress.percentage >= 100) {
+      setHide(true);
       setLoading(false);
-      setTimeout(() => {
-        setHide(true);
-      }, 5000);
-    };
-
-    document.addEventListener("gameLoaded", () => {
-      fadeOut();
-    });
-
-    return () => {
-      document.removeEventListener("gameLoaded", () => {});
-    };
-  }, []);
+    }
+  }, [syncProgress]);
 
   if (hide) return null;
   return (
@@ -38,17 +40,18 @@ function LoadingScreen() {
       <div className={cn("loading-container", !loading && "fade-out")}>
         <div className="synthwave-lines" />
       </div>
-      <div
-        className={cn(
-          "game-title font-anton fade-in tracking-wide",
-          !loading && "fade-out"
-        )}
-      >
-        LAPUTA
+      <div className={cn("game-title fade-in", !loading && "fade-out")}>
+        <div className=" font-anton tracking-wide">LAPUTA</div>
         <div
           className="loading-bar mx-auto mt-0.5 block h-2.5 bg-white"
           style={{ width: `${progress * 100}%` }}
         />
+        <div className="loading-text mt-20 block text-center font-sans text-xs text-white">
+          {syncProgress.message}{" "}
+          {syncProgress.percentage > 0 && (
+            <>{(syncProgress.percentage * 100).toFixed(2) + "%"}</>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/packages/client/src/game/systems/gameLoop.tsx b/packages/client/src/game/systems/gameLoop.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useMemo } from "react";
+import { singletonEntity } from "@latticexyz/store-sync/recs";
+import { SyncStep } from "@latticexyz/store-sync";
 import resourceFactory from "./resourceFactory";
 import EntityData from "../data/entities";
 import { useMUD } from "@/useMUD";
 import { Vector3 } from "three";
 import { buildFacility } from "./constructionSystem";
-import { useEntityQuery } from "@latticexyz/react";
+import { useComponentValue, useEntityQuery } from "@latticexyz/react";
 import { Has, getComponentValueStrict } from "@latticexyz/recs";
 import { getState } from "../store";
 import { useOnce } from "@/lib/useOnce";
@@ -22,8 +24,19 @@ function GameLoop() {
       EntityCustomization,
       OwnedBy,
     },
+    network: {
+      components: { SyncProgress },
+    },
   } = useMUD();
 
+  const syncProgress = useComponentValue(SyncProgress, singletonEntity, {
+    message: "Connecting",
+    percentage: 0,
+    step: SyncStep.INITIALIZE,
+    latestBlockNumber: 0n,
+    lastBlockNumberProcessed: 0n,
+  });
+
   // Startup
   useOnce(() => {
     for (let i = 0; i < 10; i++) {
@@ -162,14 +175,14 @@ function GameLoop() {
           variant,
           owner,
         });
-        loaded = true;
       }
     }
-    if (loaded) {
+    if (syncProgress.percentage === 100 && !loaded) {
+      loaded = true;
       const event = new Event("gameLoaded");
       document.dispatchEvent(event);
     }
-  }, [facilities]);
+  }, [facilities, syncProgress.percentage]);
 
   useEffect(() => {
     const interval = setInterval(() => {