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 } from '../../helpers/tracker';
   9 import { useTracker } from '../../hooks/tracker';
  10
  11 const Dungeons = () => {
  12         const { dungeons, state } = useTracker();
  13
  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>
  18                                 <ToggleIcon
  19                                         controller={ToggleIcon.dungeonController(dungeon)}
  20                                         icons={['map']}
  21                                 />
  22                                 <ToggleIcon
  23                                         controller={ToggleIcon.dungeonController(dungeon)}
  24                                         icons={['compass']}
  25                                 />
  26                                 <span className="dungeon-smalls">
  27                                         <ToggleIcon
  28                                                 controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
  29                                                 icons={['small-key']}
  30                                         />
  31                                         <CountDisplay count={getDungeonAcquiredSKs(state, dungeon)} />
  32                                 </span>
  33                                 <ToggleIcon
  34                                         controller={ToggleIcon.dungeonController(dungeon)}
  35                                         icons={['big-key']}
  36                                 />
  37                                 <span className="dungeon-checks">
  38                                         <ToggleIcon
  39                                                 controller={ToggleIcon.dungeonCheckController(dungeon)}
  40                                                 icons={['open-chest', 'chest']}
  41                                         />
  42                                         <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
  43                                 </span>
  44                                 {dungeon.boss ?
  45                                         <ToggleIcon
  46                                                 controller={ToggleIcon.dungeonBossController(dungeon)}
  47                                                 icons={dungeon.bosses}
  48                                         />
  49                                 : null}
  50                                 {dungeon.prize ?
  51                                         <ToggleIcon
  52                                                 controller={ToggleIcon.dungeonPrizeController(dungeon)}
  53                                                 icons={[
  54                                                         'crystal',
  55                                                         'red-crystal',
  56                                                         'green-pendant',
  57                                                         'red-pendant',
  58                                                 ]}
  59                                         />
  60                                 : null}
  61                         </div>
  62                 )}
  63         </div>;
  64 };
  65
  66 export default Dungeons;