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