1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { useTranslation } from 'react-i18next';
5 import Icon from './Icon';
91 const isOnItemMap = name => ITEM_MAP.includes(name);
93 const getItemMapX = name => ITEM_MAP.indexOf(name) % 8;
95 const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / 8);
97 const getItemMapStyle = name => {
98 const x = getItemMapX(name);
99 const y = getItemMapY(name);
100 return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
103 const getIconURL = name => {
118 return `/dungeon/${name.substr(8)}.png`;
119 case 'crystal-switch':
120 case 'crystal-switch-blue':
121 case 'crystal-switch-red':
122 return `/icon/${name}.png`;
128 const ZeldaIcon = ({ name, svg, title }) => {
129 const { t } = useTranslation();
131 const invert = name.startsWith('not-');
132 const strippedName = invert ? name.substr(4) : name;
133 const src = getIconURL(strippedName);
134 const alt = t(`icon.zelda.${name}`);
135 const realTitle = title !== '' ? title || alt : null;
138 const clipX = getItemMapX(strippedName);
139 const clipY = getItemMapY(strippedName);
141 href={isOnItemMap(strippedName) ? '/items-v1.png' : src}
146 transform={`translate(-${clipX} -${clipY})`}
147 clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
150 <title>{realTitle}</title>
155 return <span className="zelda-icon">
156 {isOnItemMap(strippedName) ?
158 className="item-map-icon"
159 style={getItemMapStyle(strippedName)}
171 <span className="strike">
172 <Icon.SLASH title="" />
178 ZeldaIcon.propTypes = {
179 name: PropTypes.string.isRequired,
181 title: PropTypes.string,
184 export default ZeldaIcon;