1 import PropTypes from 'prop-types';
2 import React from 'react';
3 import { useTranslation } from 'react-i18next';
5 import Icon from './Icon';
33 'crystal-switch-blue',
101 const ITEM_MAP_WIDTH = 8;
103 const ITEM_MAP_HEIGHT = Math.ceil(ITEM_MAP.length / ITEM_MAP_WIDTH);
105 const ITEM_MAP_URL = '/items-v2.png';
107 const isOnItemMap = name => ITEM_MAP.includes(name);
109 const getItemMapX = name => ITEM_MAP.indexOf(name) % ITEM_MAP_WIDTH;
111 const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / ITEM_MAP_WIDTH);
113 const getItemMapStyle = name => {
114 const x = getItemMapX(name);
115 const y = getItemMapY(name);
117 backgroundImage: `url(${ITEM_MAP_URL})`,
118 backgroundPosition: `-${x * 100}% -${y * 100}%`,
119 backgroundSize: `${ITEM_MAP_WIDTH * 100}% ${ITEM_MAP_HEIGHT * 100}%`,
123 const getIconURL = name => {
138 return `/dungeon/${name.substr(8)}.png`;
144 const ZeldaIcon = ({ name, svg, title }) => {
145 const { t } = useTranslation();
147 const invert = name.startsWith('not-');
148 const strippedName = invert ? name.substr(4) : name;
149 const src = getIconURL(strippedName);
150 const alt = t(`icon.zelda.${name}`);
151 const realTitle = title !== '' ? title || alt : null;
154 const clipX = getItemMapX(strippedName);
155 const clipY = getItemMapY(strippedName);
157 href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
158 width={ITEM_MAP_WIDTH}
159 height={ITEM_MAP_HEIGHT}
162 transform={`translate(-${clipX} -${clipY})`}
163 clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
166 <title>{realTitle}</title>
171 return <span className="zelda-icon">
172 {isOnItemMap(strippedName) ?
174 className="item-map-icon"
175 style={getItemMapStyle(strippedName)}
187 <span className="strike">
188 <Icon.SLASH title="" />
194 ZeldaIcon.propTypes = {
195 name: PropTypes.string.isRequired,
197 title: PropTypes.string,
200 export default ZeldaIcon;