X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fcommon%2FZeldaIcon.js;h=230b14e9232f8d688b43da1bcf666347249446b2;hb=7a73d355a9f387b1bae2e218af8a7d4d0aab0c0c;hp=c53f4fd68def288ae2f231e11dc65b486796237f;hpb=f1c8c3cc53a09d1c261875d2f482b6e19bc48a9a;p=alttp.git

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index c53f4fd..230b14e 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -4,79 +4,169 @@ 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 getItemMapX = name => ITEM_MAP.indexOf(name) % 8;
+
+const getItemMapY = name => Math.floor(ITEM_MAP.indexOf(name) / 8);
+
+const getItemMapStyle = name => {
+	const x = getItemMapX(name);
+	const y = getItemMapY(name);
+	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 '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':
+		case 'dungeon-gt':
+		case 'dungeon-hc':
+		case 'dungeon-ip':
+		case 'dungeon-mm':
+		case 'dungeon-pd':
+		case 'dungeon-sp':
+		case 'dungeon-sw':
+		case 'dungeon-th':
+		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 }) => {
+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);
+		return <image
+			href={isOnItemMap(strippedName) ? '/items-v1.png' : src}
+			width="8"
+			height="11"
+			x="0"
+			y="0"
+			transform={`translate(-${clipX} -${clipY})`}
+			clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+		>
+			{realTitle ?
+				<title>{realTitle}</title>
+			: null}
+		</image>;
+	}
 
 	return <span className="zelda-icon">
-		<img
-			alt={title}
-			src={getIconURL(strippedName)}
-			title={title}
-		/>
+		{isOnItemMap(strippedName) ?
+			<span
+				className="item-map-icon"
+				style={getItemMapStyle(strippedName)}
+				title={realTitle}
+			/>
+		: null}
+		{src ?
+			<img
+				alt={alt}
+				src={src}
+				title={realTitle}
+			/>
+		: null}
 		{invert ?
 			<span className="strike">
 				<Icon.SLASH title="" />
@@ -86,7 +176,9 @@ const ZeldaIcon = ({ name }) => {
 };
 
 ZeldaIcon.propTypes = {
-	name: PropTypes.string,
+	name: PropTypes.string.isRequired,
+	svg: PropTypes.bool,
+	title: PropTypes.string,
 };
 
 export default ZeldaIcon;