]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/ZeldaIcon.js
tracker medallion controler
[alttp.git] / resources / js / components / common / ZeldaIcon.js
1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { useTranslation } from 'react-i18next';
4
5 import Icon from './Icon';
6
7 const ITEM_MAP = [
8     'aga',
9     'armos',
10     'arrghus',
11     'big-key',
12     'blind',
13     'blue-boomerang',
14     'blue-mail',
15     'blue-pendant',
16     'blue-potion',
17     'bombos',
18     'bomb',
19     'book',
20     'boots',
21     'bottle-bee',
22     'bottle',
23     'bowless-silvers',
24     'bow',
25     'bugnet',
26     'byrna',
27     'cape',
28     'chest',
29     'compass',
30     'crystal',
31     'duck',
32     'ether',
33     'fairy',
34     'fighter-shield',
35     'fighter-sword',
36     'fire-rod',
37     'fire-shield',
38     'flippers',
39     'flute',
40     'glove',
41     'gold-sword',
42     'green-mail',
43     'green-pendant',
44     'green-potion',
45     'half-magic',
46     'hammer',
47     'heart-0',
48     'heart-1',
49     'heart-2',
50     'heart-3',
51     'heart-container',
52     'heart-piece',
53     'helma',
54     'hookshot',
55     'ice-rod',
56     'kholdstare',
57     'lamp',
58     'lanmolas',
59     'map',
60     'master-sword',
61     'mirror',
62     'mirror-shield',
63     'mitts',
64     'moldorm',
65     'moonpearl',
66     'mothula',
67     'mushroom',
68     'open-chest',
69     'powder',
70     'quake',
71     'quarter-magic',
72     'red-bomb',
73     'red-boomerang',
74     'red-crystal',
75     'red-mail',
76     'red-pendant',
77     'red-potion',
78     'shovel',
79     'silvers',
80     'small-key',
81     'somaria',
82     'sword-1',
83     'sword-2',
84     'sword-3',
85     'sword-4',
86     'tempered-sword',
87     'trinexx',
88     'vitreous',
89 ];
90
91 const isOnItemMap = name => ITEM_MAP.includes(name);
92
93 const getItemMapStyle = name => {
94         const index = ITEM_MAP.indexOf(name);
95         const x = index % 8;
96         const y = Math.floor(index / 8);
97         return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
98 };
99
100 const getIconURL = name => {
101         switch (name) {
102                 case 'dungeon-ct':
103                 case 'dungeon-dp':
104                 case 'dungeon-ep':
105                 case 'dungeon-gt':
106                 case 'dungeon-hc':
107                 case 'dungeon-ip':
108                 case 'dungeon-mm':
109                 case 'dungeon-pd':
110                 case 'dungeon-sp':
111                 case 'dungeon-sw':
112                 case 'dungeon-th':
113                 case 'dungeon-tr':
114                 case 'dungeon-tt':
115                         return `/dungeon/${name.substr(8)}.png`;
116                 case 'crystal-switch':
117                 case 'crystal-switch-blue':
118                 case 'crystal-switch-red':
119                         return `/icon/${name}.png`;
120                 default:
121                         return '';
122         }
123 };
124
125 const ZeldaIcon = ({ name, title }) => {
126         const { t } = useTranslation();
127
128         const invert = name.startsWith('not-');
129         const strippedName = invert ? name.substr(4) : name;
130         const src = getIconURL(strippedName);
131         const alt = t(`icon.zelda.${name}`);
132         const realTitle = title !== '' ? title || alt : null;
133
134         return <span className="zelda-icon">
135                 {isOnItemMap(strippedName) ?
136                         <span
137                                 className="item-map-icon"
138                                 style={getItemMapStyle(strippedName)}
139                                 title={realTitle}
140                         />
141                 : null}
142                 {src ?
143                         <img
144                                 alt={alt}
145                                 src={src}
146                                 title={realTitle}
147                         />
148                 : null}
149                 {invert ?
150                         <span className="strike">
151                                 <Icon.SLASH title="" />
152                         </span>
153                 : null}
154         </span>;
155 };
156
157 ZeldaIcon.propTypes = {
158         name: PropTypes.string.isRequired,
159         title: PropTypes.string,
160 };
161
162 export default ZeldaIcon;