X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fcommon%2FZeldaIcon.js;h=18b13eb20664134032a24ce47bff5e2b4f7702ad;hb=31131fc56ecc52ba5ce8aa9854755b22620a7139;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 <image
+			href={isOnItemMap(strippedName) ? ITEM_MAP_URL : src}
+			width={ITEM_MAP_WIDTH}
+			height={ITEM_MAP_HEIGHT}
+			x={`-${clipX + 0.5}`}
+			y={`-${clipY + 0.5}`}
+			clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
+		>
+			{realTitle ?
+				<title>{realTitle}</title>
+			: null}
+		</image>;
+	}
+
 	return <span className="zelda-icon">
 		{isOnItemMap(strippedName) ?
 			<span
@@ -156,6 +204,7 @@ const ZeldaIcon = ({ name, title }) => {
 
 ZeldaIcon.propTypes = {
 	name: PropTypes.string.isRequired,
+	svg: PropTypes.bool,
 	title: PropTypes.string,
 };