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;