1 import React from 'react';
3 import CountDisplay from './CountDisplay';
4 import ToggleIcon from './ToggleIcon';
7 getDungeonRemainingItems,
8 } from '../../helpers/tracker';
9 import { useTracker } from '../../hooks/tracker';
11 const Dungeons = () => {
12 const { dungeons, state } = useTracker();
14 return <div className="dungeons">
15 {dungeons.map(dungeon =>
16 <div className={`dungeon dungeon-${dungeon.id}`} key={dungeon.id}>
17 <span className="dungeon-tag">{dungeon.id.toUpperCase()}</span>
19 controller={ToggleIcon.dungeonController(dungeon)}
23 controller={ToggleIcon.dungeonController(dungeon)}
26 <span className="dungeon-smalls">
28 controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
31 <CountDisplay count={getDungeonAcquiredSKs(state, dungeon)} />
34 controller={ToggleIcon.dungeonController(dungeon)}
37 <span className="dungeon-checks">
39 controller={ToggleIcon.dungeonCheckController(dungeon)}
40 icons={['open-chest', 'chest']}
42 <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
46 controller={ToggleIcon.dungeonBossController(dungeon)}
47 icons={dungeon.bosses}
52 controller={ToggleIcon.dungeonPrizeController(dungeon)}
66 export default Dungeons;