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 609dc34cd7c92fd282f566580a9f3a2cc99dc4c3..66433e5e50770010bca2eeda03442c302b6584dd 100644 (file)
--- a/resources/js/components/tracker/Map/Overworld.js
+++ b/resources/js/components/tracker/Map/Overworld.js
@@ -22,17 +22,12 @@ import {
 } from '../../../helpers/tracker';
 import { useTracker } from '../../../hooks/tracker';
 
-const LW_DUNGEONS = [
+const GENERIC_LW_DUNGEONS = [
        {
                id: 'hc',
                x: 0.5,
                y: 0.5,
        },
-       {
-               id: 'ct',
-               x: 0.5,
-               y: 0.4,
-       },
        {
                id: 'ep',
                x: 0.95,
@@ -50,7 +45,25 @@ const LW_DUNGEONS = [
        },
 ];
 
-const LW_LOCATIONS = [
+const LW_DUNGEONS = [
+       ...GENERIC_LW_DUNGEONS,
+       {
+               id: 'ct',
+               x: 0.5,
+               y: 0.4,
+       },
+];
+
+const INVERTED_LW_DUNGEONS = [
+       ...GENERIC_LW_DUNGEONS,
+       {
+               id: 'gt',
+               x: 0.5,
+               y: 0.4,
+       },
+];
+
+const GENERIC_LW_LOCATIONS = [
        {
                id: 'aginah',
                checks: [
@@ -220,14 +233,6 @@ const LW_LOCATIONS = [
                x: 0.15,
                y: 0.65,
        },
-       {
-               id: 'links-house',
-               checks: [
-                       'links-house',
-               ],
-               x: 0.55,
-               y: 0.6875,
-       },
        {
                id: 'lost-woods-hideout',
                checks: [
@@ -420,7 +425,21 @@ const LW_LOCATIONS = [
        },
 ];
 
-const DW_DUNGEONS = [
+const LW_LOCATIONS = [
+       ...GENERIC_LW_LOCATIONS,
+       {
+               id: 'links-house',
+               checks: [
+                       'links-house',
+               ],
+               x: 0.55,
+               y: 0.6875,
+       },
+];
+
+const INVERTED_LW_LOCATIONS = GENERIC_LW_LOCATIONS;
+
+const GENERIC_DW_DUNGEONS = [
        {
                id: 'pd',
                x: 0.95,
@@ -456,6 +475,10 @@ const DW_DUNGEONS = [
                x: 0.94,
                y: 0.06,
        },
+];
+
+const DW_DUNGEONS = [
+       ...GENERIC_DW_DUNGEONS,
        {
                id: 'gt',
                x: 0.56,
@@ -463,7 +486,16 @@ const DW_DUNGEONS = [
        },
 ];
 
-const DW_LOCATIONS = [
+const INVERTED_DW_DUNGEONS = [
+       ...GENERIC_DW_DUNGEONS,
+       {
+               id: 'ct',
+               x: 0.56,
+               y: 0.05,
+       },
+];
+
+const GENERIC_DW_LOCATIONS = [
        {
                id: 'blacksmith',
                checks: [
@@ -619,6 +651,20 @@ const DW_LOCATIONS = [
        },
 ];
 
+const DW_LOCATIONS = GENERIC_DW_LOCATIONS;
+
+const INVERTED_DW_LOCATIONS = [
+       ...GENERIC_DW_LOCATIONS,
+       {
+               id: 'links-house',
+               checks: [
+                       'links-house',
+               ],
+               x: 0.55,
+               y: 0.6875,
+       },
+];
+
 const Location = ({ number, l, size }) => {
        const { t } = useTranslation();
 
@@ -687,7 +733,7 @@ const makeBackground = (src, level) => {
 };
 
 const Overworld = () => {
-       const { dungeons, logic, setManualState, state } = useTracker();
+       const { config, dungeons, logic, setManualState, state } = useTracker();
 
        const mapDungeon = React.useCallback(dungeon => {
                const definition = dungeons.find(d => d.id === dungeon.id);
@@ -769,24 +815,56 @@ const Overworld = () => {
                };
        }, [logic, setManualState, state]);
 
-       const lwDungeons = React.useMemo(() => LW_DUNGEONS.map(mapDungeon), [mapDungeon]);
-       const lwLocations = React.useMemo(() => LW_LOCATIONS.map(mapLocation), [mapLocation]);
+       const lwDungeons = React.useMemo(() =>
+               (config.worldState === 'inverted' ? INVERTED_LW_DUNGEONS : LW_DUNGEONS)
+               .map(mapDungeon)
+       , [mapDungeon]);
+       const lwLocations = React.useMemo(() =>
+               (config.worldState === 'inverted' ? INVERTED_LW_LOCATIONS : LW_LOCATIONS)
+               .map(mapLocation)
+       , [mapLocation]);
 
-       const dwDungeons = React.useMemo(() => DW_DUNGEONS.map(mapDungeon), [mapDungeon]);
-       const dwLocations = React.useMemo(() => DW_LOCATIONS.map(mapLocation), [mapLocation]);
+       const dwDungeons = React.useMemo(() =>
+               (config.worldState === 'inverted' ? INVERTED_DW_DUNGEONS : DW_DUNGEONS)
+               .map(mapDungeon)
+       , [mapDungeon]);
+       const dwLocations = React.useMemo(() =>
+               (config.worldState === 'inverted' ? INVERTED_DW_LOCATIONS : DW_LOCATIONS)
+               .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>
@@ -799,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>