]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/map/UWSuperTiles.js
remove some useless svg groups
[alttp.git] / resources / js / components / map / UWSuperTiles.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { useSearchParams } from 'react-router-dom';
4
5 import Overlay from './Overlay';
6 import { useOpenSeadragon } from './OpenSeadragon';
7
8 const dropMap = {
9         '00': '10',
10         '03': '02',
11         '05': '05',
12         '06': '05',
13         '07': '17',
14         '08': '07',
15         '09': '4B',
16         '0A': '09',
17         '0B': '6A',
18         '0D': '0B',
19         '0F': '01',
20         '10': '01',
21         '12': '0D',
22         '13': '0D',
23         '14': '0D',
24         '17': '27',
25         '18': '12',
26         '19': '07',
27         '1E': '3E',
28         '20': '01',
29         '21': '0D',
30         '22': '0D',
31         '23': '0D',
32         '24': '08',
33         '27': '31',
34         '29': '07',
35         '2A': '07',
36         '2C': '12',
37         '2D': '06',
38         '2E': '06',
39         '2F': '02',
40         '31': '77',
41         '33': '08',
42         '35': '08',
43         '36': '08',
44         '37': '08',
45         '39': '29',
46         '3A': '0A',
47         '3C': '0E',
48         '3D': '96',
49         '43': '0A',
50         '44': '0A',
51         '46': '09',
52         '47': '07',
53         '48': '07',
54         '49': '07',
55         '4B': '09',
56         '4D': 'A6',
57         '4F': 'BE',
58         '54': '34',
59         '55': '09',
60         '56': '09',
61         '57': '09',
62         '58': '09',
63         '59': '07',
64         '5A': '0E',
65         '5B': '0E',
66         '5E': '7E',
67         '65': 'AC',
68         '67': '09',
69         '68': '07',
70         '6D': '0B',
71         '73': '05',
72         '74': '05',
73         '75': '08',
74         '77': 'A7',
75         '78': '9D',
76         '79': '9D',
77         '7A': '9D',
78         '7B': '9D',
79         '7C': '0E',
80         '7D': '9B',
81         '7E': '9E',
82         '81': '05',
83         '82': '05',
84         '83': '05',
85         '84': '05',
86         '85': '05',
87         '88': 'A9',
88         '89': 'A9',
89         '8A': '0E',
90         '8B': '0E',
91         '8C': '1C',
92         '8D': '0B',
93         '8F': '0C',
94         '90': '0C',
95         '92': '0C',
96         '94': '0E',
97         '95': '0E',
98         '97': 'D1',
99         '9A': '7D',
100         '9B': '7D',
101         '9C': '0E',
102         '9D': '7B',
103         '9E': 'BE',
104         '9F': '0C',
105         'A1': '0C',
106         'A3': '0C',
107         'A4': '0E',
108         'A7': '17',
109         'A8': '05',
110         'A9': '89',
111         'AA': '0A',
112         'AC': '0B',
113         'AF': '02',
114         'B1': 'B2',
115         'B2': '0C',
116         'B3': '0D',
117         'B7': '0D',
118         'B8': '05',
119         'B9': '05',
120         'BA': '0A',
121         'BB': '0A',
122         'BD': '4F',
123         'BE': '4F',
124         'BF': '02',
125         'C1': '0C',
126         'C2': '0C',
127         'C3': '0D',
128         'C5': '0D',
129         'C6': '0D',
130         'C7': '05',
131         'C8': '05',
132         'C9': '0A',
133         'CA': '0B',
134         'CB': '0B',
135         'CC': '0B',
136         'CD': 'DE',
137         'CE': 'DE',
138         'D1': 'B1',
139         'D3': '05',
140         'D4': '05',
141         'D5': '0D',
142         'D6': '0D',
143         'D7': '05',
144         'D8': '05',
145         'D9': '05',
146         'DB': '0B',
147         'DC': '0B',
148         'DD': '06',
149         'DE': '06',
150         'E1': '06',
151         'E2': '06',
152         'E3': '14',
153         'E4': '06',
154         'E5': '06',
155         'E6': '06',
156         'E7': '06',
157         'E8': 'F8',
158         'E9': 'FA',
159         'EA': 'FA',
160         'EB': 'FB',
161         'EC': 'FD',
162         'ED': 'FD',
163         'EE': 'FE',
164         'EF': 'FF',
165         'F0': '06',
166         'F1': '06',
167         'F4': '06',
168         'F5': '06',
169         'F9': '06',
170         'FE': '06',
171 };
172
173 const strongEG = [
174         '08',
175         '0C',
176         '15',
177         '2F',
178         '40',
179         '51',
180         '52',
181         '59',
182         '5B',
183         '60',
184         '62',
185         '66',
186         '71',
187         '72',
188         '81',
189         'A2',
190         'A8',
191         'A9',
192         'AA',
193         'B2',
194         'B3',
195         'B9',
196         'C2',
197         'C3',
198         'CB',
199         'CC',
200         'DB',
201         'DC',
202         'DF',
203         'E1',
204         'E3',
205         'FA',
206 ];
207
208 const weakEG = [
209         '07',
210         '0A',
211         '16',
212         '28',
213         '2A',
214         '2B',
215         '34',
216         '35',
217         '36',
218         '37',
219         '3A',
220         '4D',
221         '55',
222         '61',
223         '76',
224         '99',
225         'A0',
226         'C9',
227         'E2',
228         'E4',
229         'F0',
230         'FD',
231         'FE',
232 ];
233
234 const kick = [
235         '1B',
236         '29',
237         '3E',
238         '43',
239         '97',
240 ];
241
242 const dark = [
243         '0B',
244         '19',
245         '21',
246         '22',
247         '32',
248         '41',
249         '42',
250         '69',
251         '6A',
252         '92',
253         '93',
254         'B5',
255         'BA',
256         'C0',
257         'D0',
258         'E5',
259         'E6',
260         'E7',
261         'F0',
262         'F1',
263 ];
264
265 const camera = {
266         '00': ['x', 'y'],
267         '01': ['y'],
268         '02': ['y'],
269         '07': ['x', 'y'],
270         '0A': ['x', 'y'],
271         '0C': ['x', 'y'],
272         '0D': ['x', 'y'],
273         '0E': ['yu'],
274         '10': ['x'],
275         '11': ['x'],
276         '12': ['x', 'y'],
277         '13': ['x'],
278         '14': ['x', 'y'],
279         '15': ['x', 'y'],
280         '16': ['y'],
281         '17': ['x', 'y'],
282         '18': ['x'],
283         '19': ['xr'],
284         '1A': ['xl'],
285         '1B': ['yu'],
286         '1D': ['y'],
287         '1F': ['yu'],
288         '20': ['x', 'y'],
289         '21': ['y'],
290         '22': ['y'],
291         '26': ['yd'],
292         '27': ['x', 'y'],
293         '28': ['x', 'y'],
294         '2A': ['x', 'y'],
295         '2B': ['xl'],
296         '2F': ['yd'],
297         '31': ['yu'],
298         '32': ['x', 'y'],
299         '34': ['x', 'y'],
300         '35': ['y'],
301         '36': ['x', 'y'],
302         '37': ['y'],
303         '38': ['x'],
304         '39': ['yu'],
305         '3A': ['x', 'y'],
306         '3B': ['x'],
307         '3C': ['x', 'y'],
308         '3E': ['yd'],
309         '3F': ['yu'],
310         '40': ['xl'],
311         '41': ['x', 'y'],
312         '42': ['y'],
313         '43': ['yu'],
314         '44': ['xr'],
315         '45': ['xr'],
316         '46': ['y'],
317         '49': ['xr'],
318         '4A': ['y'],
319         '4B': ['yd'],
320         '4C': ['x'],
321         '4D': ['x', 'y'],
322         '4E': ['yd'],
323         '50': ['x'],
324         '51': ['x', 'y'],
325         '52': ['xl', 'yd'],
326         '53': ['xr'],
327         '54': ['x', 'y'],
328         '55': ['y'],
329         '56': ['xr'],
330         '58': ['xr'],
331         '59': ['x'],
332         '5B': ['x'],
333         '5C': ['yu'],
334         '60': ['x'],
335         '61': ['x', 'y'],
336         '62': ['x', 'y'],
337         '63': ['xr'],
338         '64': ['yu'],
339         '65': ['yu'],
340         '66': ['yd'],
341         '67': ['x'],
342         '68': ['x', 'y'],
343         '6A': ['x'],
344         '6B': ['yu'],
345         '6D': ['xr'],
346         '72': ['y'],
347         '74': ['y'],
348         '75': ['xr'],
349         '76': ['xl'],
350         '77': ['x', 'y'],
351         '7B': ['yu'],
352         '7C': ['x'],
353         '7D': ['yu'],
354         '7E': ['xr'],
355         '7F': ['xr'],
356         '80': ['y'],
357         '81': ['x', 'y'],
358         '82': ['x', 'y'],
359         '83': ['xr'],
360         '84': ['x', 'y'],
361         '85': ['xl'],
362         '89': ['y'],
363         '8B': ['xl'],
364         '8D': ['xr'],
365         '91': ['x'],
366         '92': ['xr'],
367         '93': ['yu'],
368         '95': ['x'],
369         '96': ['xl'],
370         '97': ['xr'],
371         '98': ['yd'],
372         '99': ['yd'],
373         '9B': ['yd'],
374         '9C': ['x', 'y'],
375         '9D': ['yd'],
376         'A0': ['y'],
377         'A1': ['xr', 'yu'],
378         'A2': ['x', 'y'],
379         'A3': ['x'],
380         'A5': ['yd'],
381         'A6': ['x', 'y'],
382         'A7': ['yd'],
383         'A8': ['xr'],
384         'A9': ['x', 'y'],
385         'AA': ['xl'],
386         'B1': ['xr'],
387         'B2': ['yu'],
388         'B3': ['x'],
389         'B4': ['x', 'y'],
390         'B5': ['x', 'y'],
391         'B7': ['x'],
392         'B8': ['x'],
393         'B9': ['x', 'y'],
394         'BB': ['xl'],
395         'BC': ['xr'],
396         'BE': ['xl'],
397         'C0': ['xl'],
398         'C2': ['x', 'y'],
399         'C3': ['x'],
400         'C4': ['x', 'y'],
401         'C5': ['x'],
402         'C6': ['x', 'y'],
403         'C7': ['x', 'y'],
404         'C9': ['y'],
405         'CB': ['x', 'y'],
406         'CC': ['x', 'y'],
407         'D0': ['xl'],
408         'D2': ['xr'],
409         'D5': ['x'],
410         'D6': ['x'],
411         'D8': ['xl'],
412         'D9': ['yu'],
413         'DA': ['yu'],
414         'DB': ['x', 'y'],
415         'DC': ['x', 'y'],
416         'DF': ['yd'],
417         'E1': ['x'],
418         'E2': ['x'],
419         'E4': ['x'],
420         'E5': ['x', 'y'],
421         'E6': ['xr', 'yd'],
422         'E7': ['xr', 'yu'],
423         'E8': ['x', 'yu'],
424         'EA': ['xl', 'yu'],
425         'EB': ['x'],
426         'ED': ['x', 'yu'],
427         'EE': ['x', 'y'],
428         'EF': ['yd'],
429         'F0': ['x', 'y'],
430         'F1': ['x', 'y'],
431         'F8': ['x', 'y'],
432         'F9': ['xr', 'yd'],
433         'FA': ['x', 'y'],
434         'FB': ['xr', 'yd'],
435         'FD': ['x', 'y'],
436         'FE': ['xr'],
437         'FF': ['yd'],
438 };
439
440 const getClassName = key => {
441         const classNames = [];
442         if (strongEG.includes(key)) {
443                 classNames.push('strong-eg');
444         }
445         if (weakEG.includes(key)) {
446                 classNames.push('weak-eg');
447         }
448         if (kick.includes(key)) {
449                 classNames.push('kick');
450         }
451         if (dark.includes(key)) {
452                 classNames.push('dark');
453         }
454         if (camera[key]) {
455                 camera[key].forEach(c => {
456                         classNames.push(`cam-${c}`);
457                 });
458         }
459         return classNames.join(' ');
460 };
461
462 const UWSuperTiles = ({ show }) => {
463         const { storePosition, viewer } = useOpenSeadragon();
464         const [, setSearchParams] = useSearchParams();
465
466         const onClick = React.useCallback(e => {
467                 if (e.originalTarget.tagName !== 'A') return;
468                 if (e.originalTarget.className !== 'cell-link') return;
469                 const key = e.originalTarget.dataset.key;
470
471                 const x = (parseInt(key[1], 16) + 0.5) / 16;
472                 const y = (parseInt(key[0], 16) + 0.5) / 16;
473                 if (viewer && viewer.viewport) {
474                         storePosition();
475                         setSearchParams({ x, y, z: 4 });
476                         viewer.element.scrollIntoView();
477                 }
478         }, [storePosition, viewer]);
479
480         return <Overlay onClick={onClick} page={3} x={0} y={0} width={1} height={1}>
481                 <div className={`uw-super-tiles ${show ? '' : 'd-none'}`}>
482                         {[...Array(16).keys()].map(x =>
483                                 [...Array(16).keys()].map(y => {
484                                         const key = `${x.toString(16).toUpperCase()}${y.toString(16).toUpperCase()}`;
485                                         return <div className={getClassName(key)} key={key}>
486                                                 <p className="cell-id">{key}</p>
487                                                 {dropMap[key] ?
488                                                         <p className="cell-drop">
489                                                                 <a className="cell-link" data-key={dropMap[key]}>
490                                                                         {`▶ ${dropMap[key]}`}
491                                                                 </a>
492                                                         </p>
493                                                 : null}
494                                         </div>;
495                                 })
496                         )}
497                 </div>
498         </Overlay>;
499 };
500
501 UWSuperTiles.propTypes = {
502         show: PropTypes.bool,
503 };
504
505 export default UWSuperTiles;