42 lines
965 B
TypeScript
42 lines
965 B
TypeScript
import react, { useMemo, useEffect, Fragment } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { mapActions } from '../../store/map';
|
|
import _ from 'lodash';
|
|
|
|
import Layer from '../slippy/layer';
|
|
import Slippy from '../slippy/slippy';
|
|
import TiledMap from './tiled-map';
|
|
import GetLocation from './get-location';
|
|
import Whiteboard from './whiteboard';
|
|
|
|
const Map: react.FC<{}> = (props: {}) => {
|
|
const dispatch = useDispatch();
|
|
|
|
const resizeHandler = () => {
|
|
dispatch(mapActions.resize());
|
|
};
|
|
const debouncedResizeHandler = useMemo(
|
|
() => _.debounce(resizeHandler, 500),
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('resize', debouncedResizeHandler);
|
|
// dispatch(mapActions.shift({ x: -50, y: 0 }));
|
|
}, []);
|
|
|
|
return (
|
|
<Fragment>
|
|
<Slippy>
|
|
<GetLocation />
|
|
<Whiteboard />
|
|
</Slippy>
|
|
<Layer>
|
|
<TiledMap />
|
|
</Layer>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default Map;
|