.map(mapLocation)
, [mapLocation]);
- return <svg
- xmlns="http://www.w3.org/2000/svg"
- className="canvas"
- width="2"
- height="1"
- viewBox="0 0 2 1"
- onContextMenu={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
- <g className="light-world">
+ const layout = React.useMemo(() => {
+ if (config.mapLayout === 'vertical') {
+ return {
+ lwTransform: '',
+ dwTransform: 'translate(0 1)',
+ };
+ } else {
+ return {
+ lwTransform: 'scale(0.5)',
+ dwTransform: 'scale(0.5) translate(1 0)',
+ };
+ }
+ }, [config]);
+
+ return <>
+ <g className="light-world" transform={layout.lwTransform}>
<g className="background">
{makeBackground('lw_files', 10)}
</g>
)}
</g>
</g>
- <g className="dark-world" transform="translate(1 0)">
+ <g className="dark-world" transform={layout.dwTransform}>
<g className="background">
{makeBackground('dw_files', 10)}
</g>
)}
</g>
</g>
- </svg>;
+ </>;
};
export default Overworld;