X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FMap%2FOverworld.js;h=f899593c1230278a0a6df5afa7cd058a85e6ebec;hb=90922f8595a8d4fd7780a0b137eed66eaf7d6c49;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..f899593 100644
--- 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;