+import PropTypes from 'prop-types';
import React from 'react';
import CountDisplay from './CountDisplay';
BOSSES,
getDungeonAcquiredSKs,
getDungeonRemainingItems,
+ shouldCompactKeysanity,
shouldShowDungeonItem,
} from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
-const Dungeons = () => {
+const Dungeons = ({ columns }) => {
const { config, dungeons, state } = useTracker();
const layout = React.useMemo(() => {
+ const compact = shouldCompactKeysanity(config);
const mapX = 1;
const compassX = shouldShowDungeonItem(config, 'Map') ? mapX + 1 : mapX;
const smallX = shouldShowDungeonItem(config, 'Compass') ? compassX + 1 : compassX;
const bigX = shouldShowDungeonItem(config, 'Small') ? smallX + 1 : smallX;
- const countX = shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
+ const countX = compact ? 2 : shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
const bossX = countX + 1;
const prizeX = bossX + 1;
- const dungeonWidth = prizeX + 1;
- const width = (4 * dungeonWidth) + 2;
+ const dungeonWidth = Math.max(5, prizeX + 1);
+ const width = (columns * dungeonWidth) + Math.max(0, columns - 1);
const height = 4;
- const viewBox = `0 0 ${width} ${height}`;
+
+ const transform = (col, row) =>
+ `scale(${1 / width}) translate(${
+ (col * dungeonWidth) + 0.5 + (col ? col - (columns > 3 ? 1 : 0) : 0)
+ } ${row + 0.5})`;
+
+ const transforms = {
+ tag: null,
+ map: compact
+ ? 'translate(0.75 -0.25) scale(0.45)' : `translate(${mapX} 0) scale(0.9)`,
+ compass: compact
+ ? 'translate(1.25 -0.25) scale(0.45)' : `translate(${compassX} 0) scale(0.9)`,
+ small: compact
+ ? 'translate(0.75 0.25) scale(0.45)' : `translate(${smallX} 0) scale(0.9)`,
+ big: compact
+ ? 'translate(1.25 0.25) scale(0.45)' : `translate(${bigX} 0) scale(0.9)`,
+ checks: `translate(${countX} 0) scale(0.9)`,
+ boss: `translate(${bossX} 0)`,
+ prize: `translate(${prizeX} 0)`,
+ hc: transform(0, 0),
+ ct: transform(0, 1),
+ gt: transform(0, 2),
+ gtBoss1: `translate(${bossX - 2} 1)`,
+ gtBoss2: `translate(${bossX - 1} 1)`,
+ gtBoss3: `translate(${bossX} 1)`,
+ };
+
+ if (columns === 1) {
+ transforms.ep = transform(0, 4);
+ transforms.dp = transform(0, 5);
+ transforms.th = transform(0, 6);
+ transforms.pd = transform(0, 8);
+ transforms.sp = transform(0, 9);
+ transforms.sw = transform(0, 10);
+ transforms.tt = transform(0, 11);
+ transforms.ip = transform(0, 12);
+ transforms.mm = transform(0, 13);
+ transforms.tr = transform(0, 14);
+ } else if (columns === 2) {
+ transforms.ep = transform(0, 4);
+ transforms.dp = transform(0, 5);
+ transforms.th = transform(0, 6);
+ transforms.pd = transform(1, 0);
+ transforms.sp = transform(1, 1);
+ transforms.sw = transform(1, 2);
+ transforms.tt = transform(1, 3);
+ transforms.ip = transform(1, 4);
+ transforms.mm = transform(1, 5);
+ transforms.tr = transform(1, 6);
+ } else {
+ transforms.ep = transform(1, 0);
+ transforms.dp = transform(1, 1);
+ transforms.th = transform(1, 2);
+ transforms.pd = transform(2, 0);
+ transforms.sp = transform(2, 1);
+ transforms.sw = transform(2, 2);
+ transforms.tt = transform(2, 3);
+ transforms.ip = transform(3, 0);
+ transforms.mm = transform(3, 1);
+ transforms.tr = transform(3, 2);
+ }
+
return {
width,
height,
- viewBox,
- transform: {
- tag: '',
- map: `translate(${mapX} 0) scale(0.9)`,
- compass: `translate(${compassX} 0) scale(0.9)`,
- small: `translate(${smallX} 0) scale(0.9)`,
- big: `translate(${bigX} 0) scale(0.9)`,
- checks: `translate(${countX} 0) scale(0.9)`,
- boss: `translate(${bossX} 0)`,
- prize: `translate(${prizeX} 0)`,
- hc: 'translate(0.5, 0.5)',
- ct: 'translate(0.5, 1.5)',
- gt: 'translate(0.5, 2.5)',
- gtBoss1: `translate(${bossX - 2} 1)`,
- gtBoss2: `translate(${bossX - 1} 1)`,
- gtBoss3: `translate(${bossX} 1)`,
- ep: `translate(${dungeonWidth + 0.5}, 0.5)`,
- dp: `translate(${dungeonWidth + 0.5}, 1.5)`,
- th: `translate(${dungeonWidth + 0.5}, 2.5)`,
- pd: `translate(${(2 * dungeonWidth) + 1.5}, 0.5)`,
- sp: `translate(${(2 * dungeonWidth) + 1.5}, 1.5)`,
- sw: `translate(${(2 * dungeonWidth) + 1.5}, 2.5)`,
- tt: `translate(${(2 * dungeonWidth) + 1.5}, 3.5)`,
- ip: `translate(${(3 * dungeonWidth) + 2.5}, 0.5)`,
- mm: `translate(${(3 * dungeonWidth) + 2.5}, 1.5)`,
- tr: `translate(${(3 * dungeonWidth) + 2.5}, 2.5)`,
- },
+ transforms,
};
}, [config, dungeons]);
- return <svg
- xmlns="http://www.w3.org/2000/svg"
- className="dungeons"
- width={layout.width}
- height={layout.height}
- viewBox={layout.viewBox}
- onContextMenu={(e) => {
- e.preventDefault();
- e.stopPropagation();
- }}
- >
+ return <>
{dungeons.map(dungeon =>
<g
className={`dungeon dungeon-${dungeon.id}`}
key={dungeon.id}
- transform={layout.transform[dungeon.id]}
+ transform={layout.transforms[dungeon.id]}
>
- <g transform={layout.transform.tag}>
+ <g transform={layout.transforms.tag}>
<text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
</g>
{shouldShowDungeonItem(config, 'Map') ?
- <g transform={layout.transform.map}>
- <ToggleIcon
- controller={ToggleIcon.dungeonController(dungeon)}
- icons={['map']}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.dungeonController(dungeon)}
+ icons={['map']}
+ svg
+ transform={layout.transforms.map}
+ />
: null}
{shouldShowDungeonItem(config, 'Compass') ?
- <g transform={layout.transform.compass}>
- <ToggleIcon
- controller={ToggleIcon.dungeonController(dungeon)}
- icons={['compass']}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.dungeonController(dungeon)}
+ icons={['compass']}
+ svg
+ transform={layout.transforms.compass}
+ />
: null}
{shouldShowDungeonItem(config, 'Small') ?
- <g transform={layout.transform.small}>
+ <g transform={layout.transforms.small}>
<ToggleIcon
controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
icons={['small-key']}
</g>
: null}
{shouldShowDungeonItem(config, 'Big') ?
- <g transform={layout.transform.big}>
- <ToggleIcon
- controller={ToggleIcon.dungeonController(dungeon)}
- icons={['big-key']}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.dungeonController(dungeon)}
+ icons={['big-key']}
+ svg
+ transform={layout.transforms.big}
+ />
: null}
- <g transform={layout.transform.checks}>
+ <g transform={layout.transforms.checks}>
<ToggleIcon
controller={ToggleIcon.dungeonCheckController(dungeon)}
icons={['open-chest', 'chest']}
<CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
</g>
{dungeon.boss ?
- <g transform={layout.transform.boss}>
- <ToggleIcon
- controller={ToggleIcon.dungeonBossController(dungeon)}
- icons={dungeon.bosses}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.dungeonBossController(dungeon)}
+ icons={dungeon.bosses}
+ svg
+ transform={layout.transforms.boss}
+ />
: null}
{dungeon.prize ?
- <g transform={layout.transform.prize}>
- <ToggleIcon
- controller={ToggleIcon.dungeonPrizeController(dungeon)}
- icons={[
- 'crystal',
- 'red-crystal',
- 'green-pendant',
- 'red-pendant',
- ]}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.dungeonPrizeController(dungeon)}
+ icons={[
+ 'crystal',
+ 'red-crystal',
+ 'green-pendant',
+ 'red-pendant',
+ ]}
+ svg
+ transform={layout.transforms.prize}
+ />
: null}
{dungeon.id === 'gt' && config.bossShuffle ? <>
- <g transform={layout.transform.gtBoss1}>
- <ToggleIcon
- controller={ToggleIcon.gtBossController('bot')}
- icons={BOSSES}
- svg
- />
- </g>
- <g transform={layout.transform.gtBoss2}>
- <ToggleIcon
- controller={ToggleIcon.gtBossController('mid')}
- icons={BOSSES}
- svg
- />
- </g>
- <g transform={layout.transform.gtBoss3}>
- <ToggleIcon
- controller={ToggleIcon.gtBossController('top')}
- icons={BOSSES}
- svg
- />
- </g>
+ <ToggleIcon
+ controller={ToggleIcon.gtBossController('bot')}
+ icons={BOSSES}
+ svg
+ transform={layout.transforms.gtBoss1}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.gtBossController('mid')}
+ icons={BOSSES}
+ svg
+ transform={layout.transforms.gtBoss2}
+ />
+ <ToggleIcon
+ controller={ToggleIcon.gtBossController('top')}
+ icons={BOSSES}
+ svg
+ transform={layout.transforms.gtBoss3}
+ />
</> : null}
</g>
)}
- </svg>;
+ </>;
+};
+
+Dungeons.propTypes = {
+ columns: PropTypes.number,
+};
+
+Dungeons.defaultProps = {
+ columns: 4,
};
export default Dungeons;