]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tracker/Dungeons.js
b997e754fb8c3b31b62c36b7c8e1ad40d5b33863
[alttp.git] / resources / js / components / tracker / Dungeons.js
1 import React from 'react';
2
3 import CountDisplay from './CountDisplay';
4 import ToggleIcon from './ToggleIcon';
5 import {
6         getDungeonAcquiredSKs,
7         getDungeonRemainingItems,
8         shouldShowDungeonItem,
9 } from '../../helpers/tracker';
10 import { useTracker } from '../../hooks/tracker';
11
12 const Dungeons = () => {
13         const { config, dungeons, state } = useTracker();
14
15         return <div className="dungeons">
16                 {dungeons.map(dungeon =>
17                         <div className={`dungeon dungeon-${dungeon.id}`} key={dungeon.id}>
18                                 <span className="dungeon-tag">{dungeon.id.toUpperCase()}</span>
19                                 {shouldShowDungeonItem(config, 'Map') ?
20                                         <ToggleIcon
21                                                 controller={ToggleIcon.dungeonController(dungeon)}
22                                                 icons={['map']}
23                                         />
24                                 : null}
25                                 {shouldShowDungeonItem(config, 'Compass') ?
26                                         <ToggleIcon
27                                                 controller={ToggleIcon.dungeonController(dungeon)}
28                                                 icons={['compass']}
29                                         />
30                                 : null}
31                                 {shouldShowDungeonItem(config, 'Small') ?
32                                         <span className="dungeon-smalls">
33                                                 <ToggleIcon
34                                                         controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
35                                                         icons={['small-key']}
36                                                 />
37                                                 <CountDisplay
38                                                         count={getDungeonAcquiredSKs(state, dungeon)}
39                                                         full={dungeon.sk}
40                                                 />
41                                         </span>
42                                 : null}
43                                 {shouldShowDungeonItem(config, 'Big') ?
44                                         <ToggleIcon
45                                                 controller={ToggleIcon.dungeonController(dungeon)}
46                                                 icons={['big-key']}
47                                         />
48                                 : null}
49                                 <span className="dungeon-checks">
50                                         <ToggleIcon
51                                                 controller={ToggleIcon.dungeonCheckController(dungeon)}
52                                                 icons={['open-chest', 'chest']}
53                                         />
54                                         <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
55                                 </span>
56                                 {dungeon.boss ?
57                                         <ToggleIcon
58                                                 controller={ToggleIcon.dungeonBossController(dungeon)}
59                                                 icons={dungeon.bosses}
60                                         />
61                                 : null}
62                                 {dungeon.prize ?
63                                         <ToggleIcon
64                                                 controller={ToggleIcon.dungeonPrizeController(dungeon)}
65                                                 icons={[
66                                                         'crystal',
67                                                         'red-crystal',
68                                                         'green-pendant',
69                                                         'red-pendant',
70                                                 ]}
71                                         />
72                                 : null}
73                         </div>
74                 )}
75         </div>;
76 };
77
78 export default Dungeons;