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

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 13efe31..230b14e 100644
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -90,10 +90,13 @@ const ITEM_MAP = [
 
 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 index = ITEM_MAP.indexOf(name);
-	const x = index % 8;
-	const y = Math.floor(index / 8);
+	const x = getItemMapX(name);
+	const y = getItemMapY(name);
 	return { backgroundPosition: `-${x * 100}% -${y * 100}%` };
 };
 
@@ -122,7 +125,7 @@ const getIconURL = name => {
 	}
 };
 
-const ZeldaIcon = ({ name, title }) => {
+const ZeldaIcon = ({ name, svg, title }) => {
 	const { t } = useTranslation();
 
 	const invert = name.startsWith('not-');
@@ -131,6 +134,24 @@ 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);
+		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">
 		{isOnItemMap(strippedName) ?
 			<span
@@ -156,6 +177,7 @@ const ZeldaIcon = ({ name, title }) => {
 
 ZeldaIcon.propTypes = {
 	name: PropTypes.string.isRequired,
+	svg: PropTypes.bool,
 	title: PropTypes.string,
 };