From 1a91fcaca0d75b1761095c9ab712a5e8db11806e Mon Sep 17 00:00:00 2001
From: math-pixel <59537610+math-pixel@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:38:05 +0200
Subject: [PATCH] fix: main model map

---
 src/components/game/GameMap.tsx | 44 ++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/game/GameMap.tsx b/src/components/game/GameMap.tsx
index f166f8a..1afa43c 100644
--- a/src/components/game/GameMap.tsx
+++ b/src/components/game/GameMap.tsx
@@ -1,4 +1,12 @@
-import { useEffect, useState, useMemo, useRef } from "react";
+import {
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  Suspense,
+  Component,
+  type ReactNode,
+} from "react";
 import { useGLTF } from "@react-three/drei";
 import * as THREE from "three";
 import { useOctreeGraphNode } from "@/hooks/useOctreeGraphNode";
@@ -16,6 +24,31 @@ const MAP_JSON_PATH = "/map.json";
 
 const clonedScenesCache = new Map<string, THREE.Group>();
 
+class GameMapErrorBoundary extends Component<
+  { children: ReactNode; fallback?: ReactNode },
+  { hasError: boolean }
+> {
+  constructor(props: { children: ReactNode; fallback?: ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): { hasError: boolean } {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, _errorInfo: React.ErrorInfo): void {
+    console.warn("GameMap model loading error:", error.message);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback || null;
+    }
+    return this.props.children;
+  }
+}
+
 interface GameMapProps {
   onOctreeReady: OctreeReadyHandler;
 }
@@ -50,7 +83,8 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
           try {
             const modelUrl = `/models/${modelName}/model.gltf`;
             const modelResponse = await fetch(modelUrl);
-            if (modelResponse.ok) {
+            const contentType = modelResponse.headers.get("content-type") || "";
+            if (contentType.includes("gltf") || contentType.includes("model")) {
               available.add(modelName);
             }
           } catch {
@@ -79,7 +113,11 @@ export function GameMap({ onOctreeReady }: GameMapProps): React.JSX.Element {
   return (
     <group ref={groupRef}>
       {nodesToRender.map((node, index) => (
-        <ModelInstance key={index} node={node} />
+        <GameMapErrorBoundary key={index} fallback={null}>
+          <Suspense fallback={null}>
+            <ModelInstance node={node} />
+          </Suspense>
+        </GameMapErrorBoundary>
       ))}
     </group>
   );