1 import PropTypes from 'prop-types';
2 import React from 'react';
4 import CountDisplay from './CountDisplay';
5 import ToggleIcon from './ToggleIcon';
9 getDungeonRemainingItems,
10 shouldCompactKeysanity,
11 shouldShowDungeonItem,
12 } from '../../helpers/tracker';
13 import { useTracker } from '../../hooks/tracker';
15 const Dungeons = ({ columns }) => {
16 const { config, dungeons, state } = useTracker();
18 const layout = React.useMemo(() => {
19 const compact = shouldCompactKeysanity(config);
21 const compassX = shouldShowDungeonItem(config, 'Map') ? mapX + 1 : mapX;
22 const smallX = shouldShowDungeonItem(config, 'Compass') ? compassX + 1 : compassX;
23 const bigX = shouldShowDungeonItem(config, 'Small') ? smallX + 1 : smallX;
24 const countX = compact ? 2 : shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
25 const bossX = countX + 1;
26 const prizeX = bossX + 1;
27 const dungeonWidth = Math.max(5, prizeX + 1);
28 const width = (columns * dungeonWidth) + Math.max(0, columns - 1);
31 const transform = (col, row) =>
32 `scale(${1 / width}) translate(${
33 (col * dungeonWidth) + 0.5 + (col ? col - (columns > 3 ? 1 : 0) : 0)
39 ? 'translate(0.75 -0.25) scale(0.45)' : `translate(${mapX} 0) scale(0.9)`,
41 ? 'translate(1.25 -0.25) scale(0.45)' : `translate(${compassX} 0) scale(0.9)`,
43 ? 'translate(0.75 0.25) scale(0.45)' : `translate(${smallX} 0) scale(0.9)`,
45 ? 'translate(1.25 0.25) scale(0.45)' : `translate(${bigX} 0) scale(0.9)`,
46 checks: `translate(${countX} 0) scale(0.9)`,
47 boss: `translate(${bossX} 0)`,
48 prize: `translate(${prizeX} 0)`,
52 gtBoss1: `translate(${bossX - 2} 1)`,
53 gtBoss2: `translate(${bossX - 1} 1)`,
54 gtBoss3: `translate(${bossX} 1)`,
58 transforms.ep = transform(0, 4);
59 transforms.dp = transform(0, 5);
60 transforms.th = transform(0, 6);
61 transforms.pd = transform(0, 8);
62 transforms.sp = transform(0, 9);
63 transforms.sw = transform(0, 10);
64 transforms.tt = transform(0, 11);
65 transforms.ip = transform(0, 12);
66 transforms.mm = transform(0, 13);
67 transforms.tr = transform(0, 14);
68 } else if (columns === 2) {
69 transforms.ep = transform(0, 4);
70 transforms.dp = transform(0, 5);
71 transforms.th = transform(0, 6);
72 transforms.pd = transform(1, 0);
73 transforms.sp = transform(1, 1);
74 transforms.sw = transform(1, 2);
75 transforms.tt = transform(1, 3);
76 transforms.ip = transform(1, 4);
77 transforms.mm = transform(1, 5);
78 transforms.tr = transform(1, 6);
80 transforms.ep = transform(1, 0);
81 transforms.dp = transform(1, 1);
82 transforms.th = transform(1, 2);
83 transforms.pd = transform(2, 0);
84 transforms.sp = transform(2, 1);
85 transforms.sw = transform(2, 2);
86 transforms.tt = transform(2, 3);
87 transforms.ip = transform(3, 0);
88 transforms.mm = transform(3, 1);
89 transforms.tr = transform(3, 2);
97 }, [config, dungeons]);
100 {dungeons.map(dungeon =>
102 className={`dungeon dungeon-${dungeon.id}`}
104 transform={layout.transforms[dungeon.id]}
106 <g transform={layout.transforms.tag}>
107 <text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
109 {shouldShowDungeonItem(config, 'Map') ?
111 controller={ToggleIcon.dungeonController(dungeon)}
114 transform={layout.transforms.map}
117 {shouldShowDungeonItem(config, 'Compass') ?
119 controller={ToggleIcon.dungeonController(dungeon)}
122 transform={layout.transforms.compass}
125 {shouldShowDungeonItem(config, 'Small') ?
126 <g transform={layout.transforms.small}>
128 controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
129 icons={['small-key']}
133 count={getDungeonAcquiredSKs(state, dungeon)}
138 {shouldShowDungeonItem(config, 'Big') ?
140 controller={ToggleIcon.dungeonController(dungeon)}
143 transform={layout.transforms.big}
146 <g transform={layout.transforms.checks}>
148 controller={ToggleIcon.dungeonCheckController(dungeon)}
149 icons={['open-chest', 'chest']}
152 <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
156 controller={ToggleIcon.dungeonBossController(dungeon)}
157 icons={dungeon.bosses}
159 transform={layout.transforms.boss}
164 controller={ToggleIcon.dungeonPrizeController(dungeon)}
172 transform={layout.transforms.prize}
175 {dungeon.id === 'gt' && config.bossShuffle ? <>
177 controller={ToggleIcon.gtBossController('bot')}
180 transform={layout.transforms.gtBoss1}
183 controller={ToggleIcon.gtBossController('mid')}
186 transform={layout.transforms.gtBoss2}
189 controller={ToggleIcon.gtBossController('top')}
192 transform={layout.transforms.gtBoss3}
200 Dungeons.propTypes = {
201 columns: PropTypes.number,
204 Dungeons.defaultProps = {
208 export default Dungeons;