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;