vertical map 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..66433e5e50770010bca2eeda03442c302b6584dd 100644 (file)
--- a/resources/js/components/tracker/Map/Overworld.js
+++ b/resources/js/components/tracker/Map/Overworld.js
@@ -833,18 +833,38 @@ const Overworld = () => {
                .map(mapLocation)
        , [mapLocation]);
 
+       const layout = React.useMemo(() => {
+               if (config.mapLayout === 'vertical') {
+                       return {
+                               width: 1,
+                               height: 2,
+                               viewBox: '0 0 1 2',
+                               lwTransform: '',
+                               dwTransform: 'translate(0 1)',
+                       };
+               } else {
+                       return {
+                               width: 2,
+                               height: 1,
+                               viewBox: '0 0 2 1',
+                               lwTransform: '',
+                               dwTransform: 'translate(1 0)',
+                       };
+               }
+       }, [config]);
+
        return <svg
                xmlns="http://www.w3.org/2000/svg"
                className="canvas"
-               width="2"
-               height="1"
-               viewBox="0 0 2 1"
+               width={layout.width}
+               height={layout.height}
+               viewBox={layout.viewBox}
                onContextMenu={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                }}
        >
-               <g className="light-world">
+               <g className="light-world" transform={layout.lwTransform}>
                        <g className="background">
                                {makeBackground('lw_files', 10)}
                        </g>
@@ -857,7 +877,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>