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 getIconURL = name => {
   8         switch (name) {
   9                 case 'big-key':
  10                 case 'blue-boomerang':
  11                 case 'blue-mail':
  12                 case 'blue-pendant':
  13                 case 'blue-potion':
  14                 case 'bombos':
  15                 case 'bomb':
  16                 case 'book':
  17                 case 'boots':
  18                 case 'bottle-bee':
  19                 case 'bottle':
  20                 case 'bow':
  21                 case 'bugnet':
  22                 case 'byrna':
  23                 case 'cape':
  24                 case 'compass':
  25                 case 'crystal':
  26                 case 'duck':
  27                 case 'ether':
  28                 case 'fairy':
  29                 case 'fighter-shield':
  30                 case 'fighter-sword':
  31                 case 'fire-rod':
  32                 case 'fire-shield':
  33                 case 'flippers':
  34                 case 'flute':
  35                 case 'glove':
  36                 case 'green-mail':
  37                 case 'green-pendant':
  38                 case 'green-potion':
  39                 case 'hammer':
  40                 case 'heart-container':
  41                 case 'heart-piece':
  42                 case 'hookshot':
  43                 case 'ice-rod':
  44                 case 'lamp':
  45                 case 'map':
  46                 case 'mirror':
  47                 case 'mirror-shield':
  48                 case 'mitts':
  49                 case 'moonpearl':
  50                 case 'mushroom':
  51                 case 'powder':
  52                 case 'quake':
  53                 case 'red-bomb':
  54                 case 'red-boomerang':
  55                 case 'red-mail':
  56                 case 'red-pendant':
  57                 case 'red-potion':
  58                 case 'shovel':
  59                 case 'silvers':
  60                 case 'small-key':
  61                 case 'somaria':
  62                         return `/item/${name}.png`;
  63                 case 'dungeon-ct':
  64                 case 'dungeon-dp':
  65                 case 'dungeon-ep':
  66                 case 'dungeon-gt':
  67                 case 'dungeon-hc':
  68                 case 'dungeon-ip':
  69                 case 'dungeon-mm':
  70                 case 'dungeon-pd':
  71                 case 'dungeon-sp':
  72                 case 'dungeon-sw':
  73                 case 'dungeon-th':
  74                 case 'dungeon-tr':
  75                 case 'dungeon-tt':
  76                         return `/dungeon/${name.substr(8)}.png`;
  77                 case 'crystal-switch':
  78                 case 'crystal-switch-blue':
  79                 case 'crystal-switch-red':
  80                         return `/icon/${name}.png`;
  81                 default:
  82                         return '';
  83         }
  84 };
  85
  86 const ZeldaIcon = ({ name, title }) => {
  87         const { t } = useTranslation();
  88
  89         const invert = name.startsWith('not-');
  90         const strippedName = invert ? name.substr(4) : name;
  91         const src = getIconURL(strippedName);
  92         const alt = t(`icon.zelda.${name}`);
  93         const realTitle = title !== '' ? title || alt : null;
  94
  95         return <span className="zelda-icon">
  96                 {src ?
  97                         <img
  98                                 alt={alt}
  99                                 src={src}
 100                                 title={realTitle}
 101                         />
 102                 : null}
 103                 {invert ?
 104                         <span className="strike">
 105                                 <Icon.SLASH title="" />
 106                         </span>
 107                 : null}
 108         </span>;
 109 };
 110
 111 ZeldaIcon.propTypes = {
 112         name: PropTypes.string,
 113         title: PropTypes.string,
 114 };
 115
 116 export default ZeldaIcon;