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         BOSSES,
   7         getDungeonAcquiredSKs,
   8         getDungeonRemainingItems,
   9         shouldShowDungeonItem,
  10 } from '../../helpers/tracker';
  11 import { useTracker } from '../../hooks/tracker';
  12
  13 const Dungeons = () => {
  14         const { config, dungeons, state } = useTracker();
  15
  16         const layout = React.useMemo(() => {
  17                 const mapX = 1;
  18                 const compassX = shouldShowDungeonItem(config, 'Map') ? mapX + 1 : mapX;
  19                 const smallX = shouldShowDungeonItem(config, 'Compass') ? compassX + 1 : compassX;
  20                 const bigX =  shouldShowDungeonItem(config, 'Small') ? smallX + 1 : smallX;
  21                 const countX = shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
  22                 const bossX = countX + 1;
  23                 const prizeX = bossX + 1;
  24                 const dungeonWidth = prizeX + 1;
  25                 const width = (4 * dungeonWidth) + 2;
  26                 const height = 4;
  27                 const viewBox = `0 0 ${width} ${height}`;
  28                 return {
  29                         width,
  30                         height,
  31                         viewBox,
  32                         transform: {
  33                                 tag: '',
  34                                 map: `translate(${mapX} 0) scale(0.9)`,
  35                                 compass: `translate(${compassX} 0) scale(0.9)`,
  36                                 small: `translate(${smallX} 0) scale(0.9)`,
  37                                 big: `translate(${bigX} 0) scale(0.9)`,
  38                                 checks: `translate(${countX} 0) scale(0.9)`,
  39                                 boss: `translate(${bossX} 0)`,
  40                                 prize: `translate(${prizeX} 0)`,
  41                                 hc: 'translate(0.5, 0.5)',
  42                                 ct: 'translate(0.5, 1.5)',
  43                                 gt: 'translate(0.5, 2.5)',
  44                                 gtBoss1: `translate(${bossX - 2} 1)`,
  45                                 gtBoss2: `translate(${bossX - 1} 1)`,
  46                                 gtBoss3: `translate(${bossX} 1)`,
  47                                 ep: `translate(${dungeonWidth + 0.5}, 0.5)`,
  48                                 dp: `translate(${dungeonWidth + 0.5}, 1.5)`,
  49                                 th: `translate(${dungeonWidth + 0.5}, 2.5)`,
  50                                 pd: `translate(${(2 * dungeonWidth) + 1.5}, 0.5)`,
  51                                 sp: `translate(${(2 * dungeonWidth) + 1.5}, 1.5)`,
  52                                 sw: `translate(${(2 * dungeonWidth) + 1.5}, 2.5)`,
  53                                 tt: `translate(${(2 * dungeonWidth) + 1.5}, 3.5)`,
  54                                 ip: `translate(${(3 * dungeonWidth) + 2.5}, 0.5)`,
  55                                 mm: `translate(${(3 * dungeonWidth) + 2.5}, 1.5)`,
  56                                 tr: `translate(${(3 * dungeonWidth) + 2.5}, 2.5)`,
  57                         },
  58                 };
  59         }, [config, dungeons]);
  60
  61         return <svg
  62                 xmlns="http://www.w3.org/2000/svg"
  63                 className="dungeons"
  64                 width={layout.width}
  65                 height={layout.height}
  66                 viewBox={layout.viewBox}
  67                 onContextMenu={(e) => {
  68                         e.preventDefault();
  69                         e.stopPropagation();
  70                 }}
  71         >
  72                 {dungeons.map(dungeon =>
  73                         <g
  74                                 className={`dungeon dungeon-${dungeon.id}`}
  75                                 key={dungeon.id}
  76                                 transform={layout.transform[dungeon.id]}
  77                         >
  78                                 <g transform={layout.transform.tag}>
  79                                         <text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
  80                                 </g>
  81                                 {shouldShowDungeonItem(config, 'Map') ?
  82                                         <g transform={layout.transform.map}>
  83                                                 <ToggleIcon
  84                                                         controller={ToggleIcon.dungeonController(dungeon)}
  85                                                         icons={['map']}
  86                                                         svg
  87                                                 />
  88                                         </g>
  89                                 : null}
  90                                 {shouldShowDungeonItem(config, 'Compass') ?
  91                                         <g transform={layout.transform.compass}>
  92                                                 <ToggleIcon
  93                                                         controller={ToggleIcon.dungeonController(dungeon)}
  94                                                         icons={['compass']}
  95                                                         svg
  96                                                 />
  97                                         </g>
  98                                 : null}
  99                                 {shouldShowDungeonItem(config, 'Small') ?
 100                                         <g transform={layout.transform.small}>
 101                                                 <ToggleIcon
 102                                                         controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
 103                                                         icons={['small-key']}
 104                                                         svg
 105                                                 />
 106                                                 <CountDisplay
 107                                                         count={getDungeonAcquiredSKs(state, dungeon)}
 108                                                         full={dungeon.sk}
 109                                                 />
 110                                         </g>
 111                                 : null}
 112                                 {shouldShowDungeonItem(config, 'Big') ?
 113                                         <g transform={layout.transform.big}>
 114                                                 <ToggleIcon
 115                                                         controller={ToggleIcon.dungeonController(dungeon)}
 116                                                         icons={['big-key']}
 117                                                         svg
 118                                                 />
 119                                         </g>
 120                                 : null}
 121                                 <g transform={layout.transform.checks}>
 122                                         <ToggleIcon
 123                                                 controller={ToggleIcon.dungeonCheckController(dungeon)}
 124                                                 icons={['open-chest', 'chest']}
 125                                                 svg
 126                                         />
 127                                         <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
 128                                 </g>
 129                                 {dungeon.boss ?
 130                                         <g transform={layout.transform.boss}>
 131                                                 <ToggleIcon
 132                                                         controller={ToggleIcon.dungeonBossController(dungeon)}
 133                                                         icons={dungeon.bosses}
 134                                                         svg
 135                                                 />
 136                                         </g>
 137                                 : null}
 138                                 {dungeon.prize ?
 139                                         <g transform={layout.transform.prize}>
 140                                                 <ToggleIcon
 141                                                         controller={ToggleIcon.dungeonPrizeController(dungeon)}
 142                                                         icons={[
 143                                                                 'crystal',
 144                                                                 'red-crystal',
 145                                                                 'green-pendant',
 146                                                                 'red-pendant',
 147                                                         ]}
 148                                                         svg
 149                                                 />
 150                                         </g>
 151                                 : null}
 152                                 {dungeon.id === 'gt' && config.bossShuffle ? <>
 153                                         <g transform={layout.transform.gtBoss1}>
 154                                                 <ToggleIcon
 155                                                         controller={ToggleIcon.gtBossController('bot')}
 156                                                         icons={BOSSES}
 157                                                         svg
 158                                                 />
 159                                         </g>
 160                                         <g transform={layout.transform.gtBoss2}>
 161                                                 <ToggleIcon
 162                                                         controller={ToggleIcon.gtBossController('mid')}
 163                                                         icons={BOSSES}
 164                                                         svg
 165                                                 />
 166                                         </g>
 167                                         <g transform={layout.transform.gtBoss3}>
 168                                                 <ToggleIcon
 169                                                         controller={ToggleIcon.gtBossController('top')}
 170                                                         icons={BOSSES}
 171                                                         svg
 172                                                 />
 173                                         </g>
 174                                 </> : null}
 175                         </g>
 176                 )}
 177         </svg>;
 178 };
 179
 180 export default Dungeons;