X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FZeldaIcon.js;h=18b13eb20664134032a24ce47bff5e2b4f7702ad;hb=9a4e2305bb37cb8c62e3ad332f4a2bf45f720a18;hp=c5da0b554cbc242322ea3f8c2ab0a2510c50a23f;hpb=c9ed47875647d76d5a794f69f173a1d7ac5984b0;p=alttp.git
diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index c5da0b5..18b13eb 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -4,62 +4,124 @@ 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-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',
+ 'fighter-shield',
+ 'fighter-sword',
+ 'fire-rod',
+ 'fire-shield',
+ 'flippers',
+ 'flute',
+ 'ganon',
+ 'glove',
+ 'gold-sword',
+ 'green-mail',
+ 'green-pendant',
+ 'green-potion',
+ 'gt',
+ 'half-magic',
+ 'hammer',
+ 'heart-0',
+ 'heart-1',
+ 'heart-2',
+ 'heart-3',
+ 'heart-container',
+ 'heart-piece',
+ 'helma',
+ 'hookshot',
+ 'ice-rod',
+ 'kholdstare',
+ 'lamp',
+ 'lanmolas',
+ 'link-head',
+ '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',
+ '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 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 => {
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':
@@ -79,19 +141,59 @@ const getIconURL = name => {
}
};
-const ZeldaIcon = ({ name }) => {
+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-');
const strippedName = invert ? name.substr(4) : name;
- const title = t(`icon.zelda.${name}`);
+ const src = getIconURL(strippedName);
+ 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) ?
+
+ : null}
+ {src ?
+
+ : null}
{invert ?
@@ -101,7 +203,9 @@ const ZeldaIcon = ({ name }) => {
};
ZeldaIcon.propTypes = {
- name: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ svg: PropTypes.bool,
+ title: PropTypes.string,
};
export default ZeldaIcon;