|  |  | 
 |  |  |     const [mapContainer, setMapContainer] = useState(null); | 
 |  |  |  | 
 |  |  |     const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE); | 
 |  |  |     const modeRef = useRef(mode); | 
 |  |  |     const [dataFetched, setDataFetched] = useState(false); | 
 |  |  |     const [insightVisible, setInsightVisible] = useState(false); | 
 |  |  |     const [deviceVisible, setDeviceVisible] = useState(false); | 
 |  |  | 
 |  |  |             await Http.fetchMapData(curZone, setRcsStatus, setCurSprite); | 
 |  |  |             websocket.connect(); | 
 |  |  |             websocket.onMessage = (wsMsg) => { | 
 |  |  |                 Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); | 
 |  |  |                 if (modeRef.current === MAP_MODE.OBSERVER_MODE) { | 
 |  |  |                     Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |  | 
 |  |  |             player.rotateMap(localStorage.getItem('mapRotation')); | 
 |  |  | 
 |  |  |             player.destroy(); | 
 |  |  |             window.removeEventListener('resize', handleResize); | 
 |  |  |             Tool.patchRaLayout(''); | 
 |  |  |             Tool.isF | 
 |  |  |         }; | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  | 
 |  |  |     }, [themeMode]) | 
 |  |  |  | 
 |  |  |     const switchMode = (mode) => { | 
 |  |  |         modeRef.current = mode; | 
 |  |  |  | 
 |  |  |         Tool.removeSelectedEffect(); | 
 |  |  |         player.hideGridLines(); | 
 |  |  |  | 
 |  |  | 
 |  |  |         sprite.x = mapX; | 
 |  |  |         sprite.y = mapY; | 
 |  |  |  | 
 |  |  |         // sprite.scale.set(mapContainer.scale.x); | 
 |  |  |         sprite.rotation = -mapContainer.rotation; | 
 |  |  |  | 
 |  |  |         Tool.initSprite(sprite, type); | 
 |  |  |         mapContainer.addChild(sprite); | 
 |  |  |         Tool.beMovable(sprite); |