'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',
'fire-shield',
'flippers',
'flute',
+ 'ganon',
'glove',
'gold-sword',
'green-mail',
'green-pendant',
'green-potion',
+ 'gt',
'half-magic',
'hammer',
'heart-0',
'kholdstare',
'lamp',
'lanmolas',
+ 'link-head',
'map',
'master-sword',
'mirror',
'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 => {
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 '';
}
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})`}