]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/tracker/Dungeons.js
remove some useless svg groups
[alttp.git] / 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;