tracker items as svg

[alttp.git] / resources / js / components / common / ZeldaIcon.js

diff --git a/resources/js/components/common/ZeldaIcon.js b/resources/js/components/common/ZeldaIcon.js
index 3504dcf17b719bb1b483f63fca3170f26b1dca44..457e6e91ba177c933dcb92cfe3bf39486f376a22 100644 (file)
--- a/resources/js/components/common/ZeldaIcon.js
+++ b/resources/js/components/common/ZeldaIcon.js
@@ -141,6 +141,14 @@ const getIconURL = name => {
        }
 };
 
+const isHalfWidth = name => [
+       'blue-boomerang',
+       'fire-rod',
+       'ice-rod',
+       'hookshot',
+       'red-boomerang',
+].includes(name);
+
 const ZeldaIcon = ({ name, svg, title }) => {
        const { t } = useTranslation();
 
@@ -153,14 +161,18 @@ const ZeldaIcon = ({ name, svg, title }) => {
        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="0"
                        y="0"
-                       transform={`translate(-${clipX} -${clipY})`}
-                       clipPath={`xywh(${clipX + 0.02} ${clipY + 0.02} 0.96 0.96)`}
+                       transform={`translate(-${clipX + 0.5} -${clipY + 0.5})`}
+                       clipPath={`xywh(${clipX + cropX} ${clipY + cropY} ${cropW} ${cropH})`}
                >
                        {realTitle ?
                                <title>{realTitle}</title>