vertical map layout

diff --git a/resources/js/components/tracker/ConfigDialog.js b/resources/js/components/tracker/ConfigDialog.js
index ca95ba0d2bfe86a1d1ef05e6bab555a969c58963..2a5fbd68645d367609b46de019536653a4e67c7d 100644 (file)
--- 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 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>

diff --git a/resources/js/helpers/tracker.js b/resources/js/helpers/tracker.js
index 33338692bd155bf8a4e3be35d553b44774001725..6307eda6f026824251eb6e36ebdede95728bbcd0 100644 (file)
--- 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 9647da576d49e581c23f015285774cb831946af0..4f010bd1ab7c6c14ef7fafd683960c0000380cb6 100644 (file)
--- 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 7554f6ed4c2013992d5a2235e23116121b46acde..b1cd6d9ee51d688b4512fd2599e0ed1675506fc6 100644 (file)
--- 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: {