X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FMap%2FOverworld.js;h=66433e5e50770010bca2eeda03442c302b6584dd;hb=60fd718e3b558eaea02a8d64bd6aac74be91f782;hp=a865c19849d7901e74af8b942bef96fc52039b99;hpb=07c9bbbb2c6ddde460f48245699f27eaf66b8ac3;p=alttp.git

diff --git a/resources/js/components/tracker/Map/Overworld.js b/resources/js/components/tracker/Map/Overworld.js
index a865c19..66433e5 100644
--- 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>