} 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,
},
];
-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: [
x: 0.15,
y: 0.65,
},
- {
- id: 'links-house',
- checks: [
- 'links-house',
- ],
- x: 0.55,
- y: 0.6875,
- },
{
id: 'lost-woods-hideout',
checks: [
},
];
-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,
x: 0.94,
y: 0.06,
},
+];
+
+const DW_DUNGEONS = [
+ ...GENERIC_DW_DUNGEONS,
{
id: 'gt',
x: 0.56,
},
];
-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: [
},
];
+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();
};
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);
};
}, [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]);
- 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>
)}
</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>
)}
</g>
</g>
- </svg>;
+ </>;
};
export default Overworld;