1 import React from 'react';
3 import CountDisplay from './CountDisplay';
4 import ToggleIcon from './ToggleIcon';
5 import { useTracker } from '../../hooks/tracker';
7 const Dungeons = () => {
8 const { dungeons, state } = useTracker();
10 return <div className="dungeons">
11 {dungeons.map(dungeon =>
12 <div className={`dungeon dungeon-${dungeon.id}`} key={dungeon.id}>
13 <span className="dungeon-tag">{dungeon.id.toUpperCase()}</span>
15 controller={ToggleIcon.dungeonController(dungeon)}
19 controller={ToggleIcon.dungeonController(dungeon)}
22 <span className="dungeon-smalls">
24 controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
27 <CountDisplay count={state[`${dungeon.id}-small-key`] || 0} />
30 controller={ToggleIcon.dungeonController(dungeon)}
33 <span className="dungeon-checks">
35 controller={ToggleIcon.dungeonCheckController(dungeon, dungeon.items)}
36 icons={['open-chest', 'chest']}
38 <CountDisplay count={dungeon.items - (state[`${dungeon.id}-checks`] || 0)} />
42 controller={ToggleIcon.dungeonBossController(dungeon)}
43 icons={dungeon.bosses}
48 controller={ToggleIcon.dungeonPrizeController(dungeon)}
62 export default Dungeons;