add: loading

src/world/GameMap.tsx

@@ -1,9 +1,9 @@
 import type { ReactNode } from "react";
-import { Component, useEffect, useRef, useState } from "react";
-import * as THREE from "three";
+import { Component, Suspense, useEffect, useState } from "react";
 import { useClonedObject } from "@/hooks/three/useClonedObject";
 import { useLoggedGLTF } from "@/hooks/three/useLoggedGLTF";
-import { useOctreeGraphNode } from "@/hooks/three/useOctreeGraphNode";
+import { GameMapCollision } from "@/world/GameMapCollision";
+import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
 import { logger } from "@/utils/core/Logger";
 import { loadMapSceneData } from "@/utils/map/loadMapSceneData";
 import { logModelLoadError } from "@/utils/three/modelLoadLogger";
@@ -12,12 +12,13 @@ import type { OctreeReadyHandler } from "@/types/three/three";
 
 interface LoadedMapNode {
   node: MapNode;
-  modelUrl: string;
+  modelUrl: string | null;
 }
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-  modelUrl: string;
+  fallback: ReactNode;
+  modelUrl: string | null;
   node: MapNode;
 }
 
@@ -41,7 +42,7 @@ class ModelErrorBoundary extends Component<
   componentDidCatch(error: Error): void {
     logModelLoadError(
       {
-        modelPath: this.props.modelUrl,
+        modelPath: this.props.modelUrl ?? `missing:${this.props.node.name}`,
         scope: "GameMap.ModelInstance",
         position: this.props.node.position,
         rotation: this.props.node.rotation,
@@ -53,7 +54,7 @@ class ModelErrorBoundary extends Component<
 
   render(): ReactNode {
     if (this.state.hasError) {
-      return null;
+      return this.props.fallback;
     }
 
     return this.props.children;
@@ -61,35 +62,62 @@ class ModelErrorBoundary extends Component<
 }
 
 interface GameMapProps {
+  onLoaded?: (() => void) | undefined;
+  onLoadingStateChange?: SceneLoadingChangeHandler | undefined;
   onOctreeReady: OctreeReadyHandler;
 }
 
-export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
-  const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
-  const groupRef = useRef<THREE.Group>(null);
+const MAP_RENDER_BATCH_SIZE = 12;
 
-  useOctreeGraphNode(groupRef, onOctreeReady, mapNodes.length);
+export function GameMap({
+  onLoaded,
+  onLoadingStateChange,
+  onOctreeReady,
+}: GameMapProps): React.JSX.Element {
+  const [mapNodes, setMapNodes] = useState<LoadedMapNode[]>([]);
+  const [mapLoaded, setMapLoaded] = useState(false);
+  const [visibleNodeCount, setVisibleNodeCount] = useState(0);
+  const visibleMapNodes = mapNodes.slice(0, visibleNodeCount);
+  const mapReady = mapLoaded && visibleNodeCount >= mapNodes.length;
 
   useEffect(() => {
+    onLoadingStateChange?.({
+      currentStep: "Récupération blocking",
+      progress: 0.05,
+      status: "loading",
+    });
+
     const loadMap = async () => {
       try {
         const sceneData = await loadMapSceneData();
         if (!sceneData) {
           logger.warn("GameMap", "map.json not found");
+          onLoadingStateChange?.({
+            currentStep: "Map introuvable",
+            progress: 1,
+            status: "loading",
+          });
           return;
         }
 
-        const loadedMapNodes = sceneData.mapNodes.flatMap((node) => {
-          const modelUrl = sceneData.models.get(node.name);
-          return modelUrl ? [{ node, modelUrl }] : [];
+        onLoadingStateChange?.({
+          currentStep: "Importation des models",
+          progress: 0.18,
+          status: "loading",
         });
-        const missingModelCount =
-          sceneData.mapNodes.length - loadedMapNodes.length;
+
+        const loadedMapNodes = sceneData.mapNodes.map((node) => {
+          const modelUrl = sceneData.models.get(node.name);
+          return { node, modelUrl: modelUrl ?? null };
+        });
+        const missingModelCount = loadedMapNodes.filter(
+          (mapNode) => mapNode.modelUrl === null,
+        ).length;
 
         if (missingModelCount > 0) {
           logger.warn(
             "GameMap",
-            "Map nodes skipped because model files are missing",
+            "Map nodes rendered as fallback cubes because model files are missing",
             {
               missingModelCount,
             },
@@ -97,28 +125,85 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
         }
 
         setMapNodes(loadedMapNodes);
+        setMapLoaded(true);
+        setVisibleNodeCount(0);
+        onLoadingStateChange?.({
+          currentStep: "Montage progressif des models",
+          progress: 0.25,
+          status: "loading",
+        });
       } catch (error) {
         logger.error("GameMap", "Error loading map", {
           error: error instanceof Error ? error : new Error(String(error)),
         });
+        onLoadingStateChange?.({
+          currentStep: "Erreur de chargement de la map",
+          progress: 1,
+          status: "loading",
+        });
       }
     };
 
     loadMap();
-  }, []);
+  }, [onLoaded, onLoadingStateChange]);
+
+  useEffect(() => {
+    if (mapNodes.length === 0 || visibleNodeCount >= mapNodes.length) return;
+
+    const frameId = window.requestAnimationFrame(() => {
+      setVisibleNodeCount((current) =>
+        Math.min(current + MAP_RENDER_BATCH_SIZE, mapNodes.length),
+      );
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [mapNodes.length, visibleNodeCount]);
+
+  useEffect(() => {
+    if (mapNodes.length === 0) return;
+
+    const renderProgress =
+      mapNodes.length === 0 ? 1 : visibleNodeCount / mapNodes.length;
+    onLoadingStateChange?.({
+      currentStep: "Montage progressif des models",
+      progress: 0.25 + renderProgress * 0.45,
+      status: "loading",
+    });
+  }, [mapNodes.length, onLoadingStateChange, visibleNodeCount]);
 
   return (
-    <group ref={groupRef}>
-      {mapNodes.map((mapNode, index) => (
-        <ModelErrorBoundary
-          key={index}
-          modelUrl={mapNode.modelUrl}
-          node={mapNode.node}
-        >
-          <ModelInstance node={mapNode.node} modelUrl={mapNode.modelUrl} />
-        </ModelErrorBoundary>
-      ))}
-    </group>
+    <>
+      <group>
+        {visibleMapNodes.map((mapNode, index) => (
+          <ModelErrorBoundary
+            key={index}
+            fallback={<FallbackMapNode node={mapNode.node} />}
+            modelUrl={mapNode.modelUrl}
+            node={mapNode.node}
+          >
+            {mapNode.modelUrl ? (
+              <Suspense fallback={<FallbackMapNode node={mapNode.node} />}>
+                <ModelInstance
+                  node={mapNode.node}
+                  modelUrl={mapNode.modelUrl}
+                />
+              </Suspense>
+            ) : (
+              <FallbackMapNode node={mapNode.node} />
+            )}
+          </ModelErrorBoundary>
+        ))}
+      </group>
+      <GameMapCollision
+        mapReady={mapReady}
+        nodes={mapNodes}
+        onLoaded={onLoaded}
+        onLoadingStateChange={onLoadingStateChange}
+        onOctreeReady={onOctreeReady}
+      />
+    </>
   );
 }
 
@@ -147,3 +232,14 @@ function ModelInstance({
     />
   );
 }
+
+function FallbackMapNode({ node }: { node: MapNode }): React.JSX.Element {
+  const { position, rotation, scale } = node;
+
+  return (
+    <mesh position={position} rotation={rotation} scale={scale}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color="#64748b" wireframe />
+    </mesh>
+  );
+}