| | |
| | | import Settings from "./settings"; |
| | | import * as Http from './http'; |
| | | import WebSocketClient from './websocket' |
| | | import ConfirmButton from "../page/components/ConfirmButton"; |
| | | |
| | | let player; |
| | | let websocket; |
| | |
| | | const [settingsVisible, setSettingsVisible] = useState(false); |
| | | |
| | | const [spriteSettings, setSpriteSettings] = useState(null); |
| | | const prevSpriteSettingsRef = React.useRef(); |
| | | const prevSpriteSettingsRef = useRef(); |
| | | |
| | | const [curZone, setCurZone] = useState(() => { |
| | | const storedValue = localStorage.getItem('curZone'); |
| | | return storedValue !== null ? JSON.parse(storedValue) : null; |
| | | }); |
| | | |
| | | useEffect(() => { |
| | | Tool.patchRaLayout('0px'); |
| | |
| | | handleResize(); |
| | | window.addEventListener('resize', handleResize); |
| | | |
| | | notify('Welcome to Rcs', 'info'); |
| | | notify.info('Welcome to Rcs'); |
| | | |
| | | return () => { |
| | | if (websocket) { |
| | |
| | | window.removeEventListener('resize', handleResize); |
| | | Tool.patchRaLayout(''); |
| | | }; |
| | | }, []) |
| | | |
| | | useEffect(() => { |
| | | player.setTheme(themeMode); |
| | | Tool.setThemeMode(themeMode); |
| | | }, [themeMode]) |
| | | |
| | | const switchMode = (mode) => { |
| | |
| | | switch (mode) { |
| | | case MapMode.OBSERVER_MODE: |
| | | player.hideGridLines(); |
| | | player.hideStarryBackground(); |
| | | |
| | | player.activateMapMultiSelect((selectedSprites, restartFn) => { |
| | | console.log(selectedSprites); |
| | |
| | | break |
| | | case MapMode.MOVABLE_MODE: |
| | | player.showGridLines(); |
| | | player.hideStarryBackground(); |
| | | |
| | | player.activateMapMultiSelect((selectedSprites, restartFn) => { |
| | | Tool.spriteListBeMovable(selectedSprites, () => { |
| | |
| | | break |
| | | case MapMode.SETTINGS_MODE: |
| | | player.hideGridLines(); |
| | | player.showStarryBackground(); // 0x2f68ac |
| | | |
| | | player.activateMapMultiSelect((selectedSprites, restartFn) => { |
| | | console.log(selectedSprites); |
| | |
| | | padding: '0 16px', |
| | | height: '64px', |
| | | flexShrink: 0, // keep height |
| | | zIndex: 200 |
| | | zIndex: 200, |
| | | }} |
| | | > |
| | | <TextField |
| | |
| | | |
| | | {mode === MapMode.SETTINGS_MODE && ( |
| | | <> |
| | | <ConfirmButton |
| | | label="page.map.action.save" |
| | | variant="contained" |
| | | onConfirm={() => { |
| | | Http.saveMapData(curZone, mapContainer); |
| | | }} |
| | | /> |
| | | </> |
| | | )} |
| | | |
| | |
| | | setSettingsVisible(false); |
| | | }} |
| | | sprite={spriteSettings} |
| | | setSpriteSettings={setSpriteSettings} |
| | | width={570} |
| | | /> |
| | | |