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: '',
  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                                         <g transform={layout.transforms.map}>
 105                                                 <ToggleIcon
 106                                                         controller={ToggleIcon.dungeonController(dungeon)}
 107                                                         icons={['map']}
 108                                                         svg
 109                                                 />
 110                                         </g>
 111                                 : null}
 112                                 {shouldShowDungeonItem(config, 'Compass') ?
 113                                         <g transform={layout.transforms.compass}>
 114                                                 <ToggleIcon
 115                                                         controller={ToggleIcon.dungeonController(dungeon)}
 116                                                         icons={['compass']}
 117                                                         svg
 118                                                 />
 119                                         </g>
 120                                 : null}
 121                                 {shouldShowDungeonItem(config, 'Small') ?
 122                                         <g transform={layout.transforms.small}>
 123                                                 <ToggleIcon
 124                                                         controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
 125                                                         icons={['small-key']}
 126                                                         svg
 127                                                 />
 128                                                 <CountDisplay
 129                                                         count={getDungeonAcquiredSKs(state, dungeon)}
 130                                                         full={dungeon.sk}
 131                                                 />
 132                                         </g>
 133                                 : null}
 134                                 {shouldShowDungeonItem(config, 'Big') ?
 135                                         <g transform={layout.transforms.big}>
 136                                                 <ToggleIcon
 137                                                         controller={ToggleIcon.dungeonController(dungeon)}
 138                                                         icons={['big-key']}
 139                                                         svg
 140                                                 />
 141                                         </g>
 142                                 : null}
 143                                 <g transform={layout.transforms.checks}>
 144                                         <ToggleIcon
 145                                                 controller={ToggleIcon.dungeonCheckController(dungeon)}
 146                                                 icons={['open-chest', 'chest']}
 147                                                 svg
 148                                         />
 149                                         <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
 150                                 </g>
 151                                 {dungeon.boss ?
 152                                         <g transform={layout.transforms.boss}>
 153                                                 <ToggleIcon
 154                                                         controller={ToggleIcon.dungeonBossController(dungeon)}
 155                                                         icons={dungeon.bosses}
 156                                                         svg
 157                                                 />
 158                                         </g>
 159                                 : null}
 160                                 {dungeon.prize ?
 161                                         <g transform={layout.transforms.prize}>
 162                                                 <ToggleIcon
 163                                                         controller={ToggleIcon.dungeonPrizeController(dungeon)}
 164                                                         icons={[
 165                                                                 'crystal',
 166                                                                 'red-crystal',
 167                                                                 'green-pendant',
 168                                                                 'red-pendant',
 169                                                         ]}
 170                                                         svg
 171                                                 />
 172                                         </g>
 173                                 : null}
 174                                 {dungeon.id === 'gt' && config.bossShuffle ? <>
 175                                         <g transform={layout.transforms.gtBoss1}>
 176                                                 <ToggleIcon
 177                                                         controller={ToggleIcon.gtBossController('bot')}
 178                                                         icons={BOSSES}
 179                                                         svg
 180                                                 />
 181                                         </g>
 182                                         <g transform={layout.transforms.gtBoss2}>
 183                                                 <ToggleIcon
 184                                                         controller={ToggleIcon.gtBossController('mid')}
 185                                                         icons={BOSSES}
 186                                                         svg
 187                                                 />
 188                                         </g>
 189                                         <g transform={layout.transforms.gtBoss3}>
 190                                                 <ToggleIcon
 191                                                         controller={ToggleIcon.gtBossController('top')}
 192                                                         icons={BOSSES}
 193                                                         svg
 194                                                 />
 195                                         </g>
 196                                 </> : null}
 197                         </g>
 198                 )}
 199         </>;
 200 };
 201
 202 Dungeons.propTypes = {
 203         columns: PropTypes.number,
 204 };
 205
 206 Dungeons.defaultProps = {
 207         columns: 4,
 208 };
 209
 210 export default Dungeons;