|  |  |  | 
|---|
|  |  |  | const [app, setApp] = useState(null); | 
|---|
|  |  |  | const [mapContainer, setMapContainer] = useState(null); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [mode, setMode] = useState(null); | 
|---|
|  |  |  | const [mode, setMode] = useState(MAP_MODE.OBSERVER_MODE); | 
|---|
|  |  |  | const [dataFetched, setDataFetched] = useState(false); | 
|---|
|  |  |  | const [insightVisible, setInsightVisible] = useState(false); | 
|---|
|  |  |  | const [deviceVisible, setDeviceVisible] = useState(false); | 
|---|
|  |  |  | 
|---|
|  |  |  | const [batchSelectionVisible, setBatchSelectionVisible] = useState(false); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [curSprite, setCurSprite] = useState(null); | 
|---|
|  |  |  | const prevCurSpriteRef = useRef(); | 
|---|
|  |  |  | const [batchSprites, setBatchSprites] = useState([]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const [rcsStatus, setRcsStatus] = useState(null); | 
|---|
|  |  |  | 
|---|
|  |  |  | Http.setMapContainer(player.mapContainer); | 
|---|
|  |  |  | websocket = new WebSocketClient('/ws/map/websocket'); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | await Http.fetchMapData(curZone, setRcsStatus); | 
|---|
|  |  |  | await Http.fetchMapData(curZone, setRcsStatus, setCurSprite); | 
|---|
|  |  |  | websocket.connect(); | 
|---|
|  |  |  | websocket.onMessage = (wsMsg) => { | 
|---|
|  |  |  | Tool.generateDynamicGraphic(curZone, JSON.parse(wsMsg), setCurSprite); | 
|---|
|  |  |  | 
|---|
|  |  |  | notify.info(translate('page.map.welcome')); | 
|---|
|  |  |  | player.adaptScreen(); | 
|---|
|  |  |  | setDataFetched(true); | 
|---|
|  |  |  | setMode(MAP_MODE.OBSERVER_MODE); | 
|---|
|  |  |  | }, 200) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | initialize(); | 
|---|
|  |  |  | 
|---|
|  |  |  | if (!mapContainer) { | 
|---|
|  |  |  | return; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | prevCurSpriteRef.current = curSprite; | 
|---|
|  |  |  | if (curSprite && prevCurSprite !== curSprite) { | 
|---|
|  |  |  | Tool.removeSelectedEffect(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | Tool.removeSelectedEffect(); | 
|---|
|  |  |  | if (curSprite) { | 
|---|
|  |  |  | if (mode === MAP_MODE.OBSERVER_MODE) { | 
|---|
|  |  |  | Tool.showSelectedEffect(curSprite); | 
|---|
|  |  |  | 
|---|
|  |  |  | setSettingsVisible(false); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, [curSprite]); | 
|---|
|  |  |  | const prevCurSprite = prevCurSpriteRef.current; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // watch batchSprites | 
|---|
|  |  |  | React.useEffect(() => { | 
|---|