X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FZeldaIcon.js;h=18b13eb20664134032a24ce47bff5e2b4f7702ad;hb=ac6921da72ff4b0beab9e5f1308788a55aae3ad9;hp=13efe31d87498d24c81b94ff3e46c4b1fab3a341;hpb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;p=alttp.git
diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 13efe31..18b13eb 100644
--- 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,17 +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) % ITEM_MAP_WIDTH;
+
+const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / ITEM_MAP_WIDTH);
+
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 x = getItemMapX(name);
+ const y = getItemMapY(name);
+ return {
+ backgroundImage: `url(${ITEM_MAP_URL})`,
+ backgroundPosition: `-${x * 100}% -${y * 100}%`,
+ backgroundSize: `${ITEM_MAP_WIDTH * 100}% ${ITEM_MAP_HEIGHT * 100}%`,
+ };
};
const getIconURL = name => {
@@ -113,16 +136,20 @@ 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 ZeldaIcon = ({ name, title }) => {
+const isHalfWidth = name => [
+ 'blue-boomerang',
+ 'fire-rod',
+ 'ice-rod',
+ 'hookshot',
+ 'red-boomerang',
+].includes(name);
+
+const ZeldaIcon = ({ name, svg, title }) => {
const { t } = useTranslation();
const invert = name.startsWith('not-');
@@ -131,6 +158,27 @@ const ZeldaIcon = ({ name, title }) => {
const alt = t(`icon.zelda.${name}`);
const realTitle = title !== '' ? title || alt : null;
+ if (svg) {
+ const clipX = getItemMapX(strippedName);
+ const clipY = getItemMapY(strippedName);
+ const cropX = isHalfWidth(strippedName) ? 0.25 : 0.02;
+ const cropY = 0.02;
+ const cropW = 1 - (2 * cropX);
+ const cropH = 1 - (2 * cropY);
+ return
+ {realTitle ?
+ {realTitle}
+ : null}
+ ;
+ }
+
return
{isOnItemMap(strippedName) ?
{
ZeldaIcon.propTypes = {
name: PropTypes.string.isRequired,
+ svg: PropTypes.bool,
title: PropTypes.string,
};