From cce28e8619fe87d4be33f82df9a5ec16b2ad9cf6 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Mon, 1 Apr 2024 15:52:30 +0200
Subject: [PATCH] vertical map layout

---
 .../js/components/tracker/ConfigDialog.js     | 27 +++++++++++++++--
 .../js/components/tracker/Map/Overworld.js    | 30 +++++++++++++++----
 resources/js/helpers/tracker.js               |  1 +
 resources/js/i18n/de.js                       |  6 ++++
 resources/js/i18n/en.js                       |  6 ++++
 5 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/tracker/ConfigDialog.js b/resources/js/components/tracker/ConfigDialog.js
index ca95ba0..2a5fbd6 100644
--- a/resources/js/components/tracker/ConfigDialog.js
+++ b/resources/js/components/tracker/ConfigDialog.js
@@ -35,9 +35,9 @@ const ConfigDialog = ({
 						<Form.Label>{t('tracker.config.worldState')}</Form.Label>
 						<Form.Select
 							className="w-auto"
-							name="world-state"
+							name="worldState"
 							onChange={handleChange}
-							value={getConfigValue(config, 'world-state', 'open')}
+							value={getConfigValue(config, 'worldState', 'open')}
 						>
 							{['open', 'inverted'].map(n =>
 								<option key={n} value={n}>
@@ -279,6 +279,29 @@ const ConfigDialog = ({
 					</Form.Group>
 				</Col>
 			</Row>
+			<Row>
+				<Col sm={6}>
+					<h3>{t('tracker.config.layout')}</h3>
+					<Form.Group
+						className="d-flex justify-content-between my-2"
+						controlId="tracker.mapLayout"
+					>
+						<Form.Label>{t('tracker.config.mapLayout')}</Form.Label>
+						<Form.Select
+							className="w-auto"
+							name="mapLayout"
+							onChange={handleChange}
+							value={getConfigValue(config, 'mapLayout', 'horizontal')}
+						>
+							{['horizontal', 'vertical'].map(n =>
+								<option key={n} value={n}>
+									{t(`tracker.config.mapLayouts.${n}`)}
+								</option>
+							)}
+						</Form.Select>
+					</Form.Group>
+				</Col>
+			</Row>
 		</Modal.Body>
 	</Modal>;
 };
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>
diff --git a/resources/js/helpers/tracker.js b/resources/js/helpers/tracker.js
index 3333869..6307eda 100644
--- a/resources/js/helpers/tracker.js
+++ b/resources/js/helpers/tracker.js
@@ -85,6 +85,7 @@ export const BOSSES = [
 export const CONFIG = {
 	bossShuffle: false,
 	glitches: 'none',
+	mapLayout: 'horizontal',
 	showMap: 'situational',
 	showCompass: 'situational',
 	showSmall: 'always',
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 9647da5..4f010bd 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -523,7 +523,13 @@ export default {
 					trinity: 'Trinity',
 				},
 				gtCrystals: 'GT Crystals',
+				layout: 'Layout',
 				logic: 'Logik',
+				mapLayout: 'Karte',
+				mapLayouts: {
+					horizontal: 'Horizontal',
+					vertical: 'Vertikal',
+				},
 				showBig: 'Big Keys',
 				showCompass: 'Kompanden',
 				showItemOptions: {
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 7554f6e..b1cd6d9 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -523,7 +523,13 @@ export default {
 					trinity: 'Trinity',
 				},
 				gtCrystals: 'GT Crystals',
+				layout: 'Layout',
 				logic: 'Logic',
+				mapLayout: 'Map',
+				mapLayouts: {
+					horizontal: 'Horizontal',
+					vertical: 'Vertical',
+				},
 				showBig: 'Big Keys',
 				showCompass: 'Compasses',
 				showItemOptions: {
-- 
2.39.2