resources/js/components/tracker/Dungeons.js

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