basic auto tracking

[alttp.git] / resources / js / components / common / ZeldaIcon.js

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index ef07b9207f3ecbc5bc0d9b28f76889b5be0a8495..13efe31d87498d24c81b94ff3e46c4b1fab3a341 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -4,62 +4,101 @@ import { useTranslation } from 'react-i18next';
 
 import Icon from './Icon';
 
+const ITEM_MAP = [
+    'aga',
+    'armos',
+    'arrghus',
+    'big-key',
+    'blind',
+    'blue-boomerang',
+    'blue-mail',
+    'blue-pendant',
+    'blue-potion',
+    'bombos',
+    'bomb',
+    'book',
+    'boots',
+    'bottle-bee',
+    'bottle',
+    'bowless-silvers',
+    'bow',
+    'bugnet',
+    'byrna',
+    'cape',
+    'chest',
+    'compass',
+    'crystal',
+    'duck',
+    'ether',
+    'fairy',
+    'fighter-shield',
+    'fighter-sword',
+    'fire-rod',
+    'fire-shield',
+    'flippers',
+    'flute',
+    'glove',
+    'gold-sword',
+    'green-mail',
+    'green-pendant',
+    'green-potion',
+    'half-magic',
+    'hammer',
+    'heart-0',
+    'heart-1',
+    'heart-2',
+    'heart-3',
+    'heart-container',
+    'heart-piece',
+    'helma',
+    'hookshot',
+    'ice-rod',
+    'kholdstare',
+    'lamp',
+    'lanmolas',
+    'map',
+    'master-sword',
+    'mirror',
+    'mirror-shield',
+    'mitts',
+    'moldorm',
+    'moonpearl',
+    'mothula',
+    'mushroom',
+    'open-chest',
+    'powder',
+    'quake',
+    'quarter-magic',
+    'red-bomb',
+    'red-boomerang',
+    'red-crystal',
+    'red-mail',
+    'red-pendant',
+    'red-potion',
+    'shovel',
+    'silvers',
+    'small-key',
+    'somaria',
+    'sword-1',
+    'sword-2',
+    'sword-3',
+    'sword-4',
+    'tempered-sword',
+    'trinexx',
+    'vitreous',
+];
+
+const isOnItemMap = name => ITEM_MAP.includes(name);
+
+const getItemMapStyle = name => {
+       const index = ITEM_MAP.indexOf(name);
+       const x = index % 8;
+       const y = Math.floor(index / 8);
+       return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
+};
+
 const getIconURL = name => {
        switch (name) {
-               case 'big-key':
-               case 'blue-boomerang':
-               case 'blue-mail':
-               case 'blue-pendant':
-               case 'blue-potion':
-               case 'bombos':
-               case 'bomb':
-               case 'book':
-               case 'boots':
-               case 'bottle-bee':
-               case 'bottle':
-               case 'bow':
-               case 'bugnet':
-               case 'byrna':
-               case 'cape':
-               case 'compass':
-               case 'crystal':
-               case 'duck':
-               case 'ether':
-               case 'fairy':
-               case 'fighter-shield':
-               case 'fighter-sword':
-               case 'fire-rod':
-               case 'fire-shield':
-               case 'flippers':
-               case 'flute':
-               case 'glove':
-               case 'green-mail':
-               case 'green-pendant':
-               case 'green-potion':
-               case 'hammer':
-               case 'heart-container':
-               case 'heart-piece':
-               case 'hookshot':
-               case 'ice-rod':
-               case 'lamp':
-               case 'map':
-               case 'mirror':
-               case 'mirror-shield':
-               case 'mitts':
-               case 'moonpearl':
-               case 'mushroom':
-               case 'powder':
-               case 'quake':
-               case 'red-bomb':
-               case 'red-boomerang':
-               case 'red-mail':
-               case 'red-pendant':
-               case 'red-potion':
-               case 'shovel':
-               case 'silvers':
-               case 'small-key':
-               case 'somaria':
-                       return `/item/${name}.png`;
                case 'dungeon-ct':
                case 'dungeon-dp':
                case 'dungeon-ep':
@@ -93,6 +132,13 @@ const ZeldaIcon = ({ name, title }) => {
        const realTitle = title !== '' ? title || alt : null;
 
        return <span className="zelda-icon">
+               {isOnItemMap(strippedName) ?
+                       <span
+                               className="item-map-icon"
+                               style={getItemMapStyle(strippedName)}
+                               title={realTitle}
+                       />
+               : null}
                {src ?
                        <img
                                alt={alt}
@@ -109,7 +155,7 @@ const ZeldaIcon = ({ name, title }) => {
 };
 
 ZeldaIcon.propTypes = {
-       name: PropTypes.string,
+       name: PropTypes.string.isRequired,
        title: PropTypes.string,
 };