tentative inverted logic

[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 230b14e9232f8d688b43da1bcf666347249446b2..3504dcf17b719bb1b483f63fca3170f26b1dca44 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -19,15 +19,20 @@ const ITEM_MAP = [
     'book',
     'boots',
     'bottle-bee',
+    'bottle-good-bee',
     'bottle',
     'bowless-silvers',
     'bow',
     'bugnet',
+    'bunny-head',
     'byrna',
     'cape',
     'chest',
     'compass',
     'crystal',
+    'crystal-switch-blue',
+    'crystal-switch',
+    'crystal-switch-red',
     'duck',
     'ether',
     'fairy',
@@ -37,11 +42,13 @@ const ITEM_MAP = [
     'fire-shield',
     'flippers',
     'flute',
+    'ganon',
     'glove',
     'gold-sword',
     'green-mail',
     'green-pendant',
     'green-potion',
+    'gt',
     'half-magic',
     'hammer',
     'heart-0',
@@ -56,6 +63,7 @@ const ITEM_MAP = [
     'kholdstare',
     'lamp',
     'lanmolas',
+    'link-head',
     'map',
     'master-sword',
     'mirror',
@@ -84,20 +92,32 @@ const ITEM_MAP = [
     'sword-3',
     'sword-4',
     'tempered-sword',
+    'triforce-piece',
+    'triforce',
     'trinexx',
     'vitreous',
 ];
 
+const ITEM_MAP_WIDTH = 8;
+
+const ITEM_MAP_HEIGHT = Math.ceil(ITEM_MAP.length / ITEM_MAP_WIDTH);
+
+const ITEM_MAP_URL = '/items-v2.png';
+
 const isOnItemMap = name => ITEM_MAP.includes(name);
 
-const getItemMapX = name => ITEM_MAP.indexOf(name) % 8;
+const getItemMapX = name => ITEM_MAP.indexOf(name) % ITEM_MAP_WIDTH;
 
-const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / 8);
+const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / ITEM_MAP_WIDTH);
 
 const getItemMapStyle = name => {
        const x = getItemMapX(name);
        const y = getItemMapY(name);
-       return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
+       return {
+               backgroundImage: `url(${ITEM_MAP_URL})`,
+               backgroundPosition: `-${x * 100}% -${y * 100}%`,
+               backgroundSize: `${ITEM_MAP_WIDTH * 100}% ${ITEM_MAP_HEIGHT * 100}%`,
+       };
 };
 
 const getIconURL = name => {
@@ -116,10 +136,6 @@ const getIconURL = name => {
                case 'dungeon-tr':
                case 'dungeon-tt':
                        return `/dungeon/${name.substr(8)}.png`;
-               case 'crystal-switch':
-               case 'crystal-switch-blue':
-               case 'crystal-switch-red':
-                       return `/icon/${name}.png`;
                default:
                        return '';
        }
@@ -138,9 +154,9 @@ const ZeldaIcon = ({ name, svg, title }) => {
                const clipX = getItemMapX(strippedName);
                const clipY = getItemMapY(strippedName);
                return <image
-                       href={isOnItemMap(strippedName) ? '/items-v1.png' : src}
-                       width="8"
-                       height="11"
+                       href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
+                       width={ITEM_MAP_WIDTH}
+                       height={ITEM_MAP_HEIGHT}
                        x="0"
                        y="0"
                        transform={`translate(-${clipX} -${clipY})`}