resources/js/components/tracker/Dungeons.js

   1 import React from 'react';
   2
   3 import CountDisplay from './CountDisplay';
   4 import ToggleIcon from './ToggleIcon';
   5 import { useTracker } from '../../hooks/tracker';
   6
   7 const Dungeons = () => {
   8         const { dungeons, state } = useTracker();
   9
  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>
  14                                 <ToggleIcon
  15                                         controller={ToggleIcon.dungeonController(dungeon)}
  16                                         icons={['map']}
  17                                 />
  18                                 <ToggleIcon
  19                                         controller={ToggleIcon.dungeonController(dungeon)}
  20                                         icons={['compass']}
  21                                 />
  22                                 <span className="dungeon-smalls">
  23                                         <ToggleIcon
  24                                                 controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
  25                                                 icons={['small-key']}
  26                                         />
  27                                         <CountDisplay count={state[`${dungeon.id}-small-key`] || 0} />
  28                                 </span>
  29                                 <ToggleIcon
  30                                         controller={ToggleIcon.dungeonController(dungeon)}
  31                                         icons={['big-key']}
  32                                 />
  33                                 <span className="dungeon-checks">
  34                                         <ToggleIcon
  35                                                 controller={ToggleIcon.dungeonCheckController(dungeon, dungeon.items)}
  36                                                 icons={['open-chest', 'chest']}
  37                                         />
  38                                         <CountDisplay count={dungeon.items - (state[`${dungeon.id}-checks`] || 0)} />
  39                                 </span>
  40                                 {dungeon.boss ?
  41                                         <ToggleIcon
  42                                                 controller={ToggleIcon.dungeonBossController(dungeon)}
  43                                                 icons={dungeon.bosses}
  44                                         />
  45                                 : null}
  46                                 {dungeon.prize ?
  47                                         <ToggleIcon
  48                                                 controller={ToggleIcon.dungeonPrizeController(dungeon)}
  49                                                 icons={[
  50                                                         'crystal',
  51                                                         'red-crystal',
  52                                                         'green-pendant',
  53                                                         'red-pendant',
  54                                                 ]}
  55                                         />
  56                                 : null}
  57                         </div>
  58                 )}
  59         </div>;
  60 };
  61
  62 export default Dungeons;