tracker layout

[alttp.git] / resources / js / components / tracker / Map / Overworld.js

diff --git a/resources/js/components/tracker/Map/Overworld.js b/resources/js/components/tracker/Map/Overworld.js
index a865c19849d7901e74af8b942bef96fc52039b99..f899593c1230278a0a6df5afa7cd058a85e6ebec 100644 (file)
--- a/resources/js/components/tracker/Map/Overworld.js
+++ b/resources/js/components/tracker/Map/Overworld.js
@@ -833,18 +833,22 @@ const Overworld = () => {
                .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>
@@ -857,7 +861,7 @@ const Overworld = () => {
                                )}
                        </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>
@@ -870,7 +874,7 @@ const Overworld = () => {
                                )}
                        </g>
                </g>
-       </svg>;
+       </>;
 };
 
 export default Overworld;