tracker medallion controler

[alttp.git] / resources / js / components / map / Pin.js

diff --git a/resources/js/components/map/Pin.js b/resources/js/components/map/Pin.js
index 69b6d77e389eccc9609033a8babb7a03afdac8fa..9d9b471430e5c21602725ca5e1264cd813358361 100644 (file)
--- a/resources/js/components/map/Pin.js
+++ b/resources/js/components/map/Pin.js
@@ -2,13 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
+import { useOpenSeadragon } from './OpenSeadragon';
 import Overlay from './Overlay';
 import Popover from './Popover';
 import Icon from '../common/Icon';
+import ZeldaIcon from '../common/ZeldaIcon';
 import { getLink, getTranslation } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const Pin = ({ pin }) => {
+       const { storePosition } = useOpenSeadragon();
        const [showPopover, setShowPopover] = React.useState(false);
        const ref = React.useRef();
 
@@ -17,21 +20,31 @@ const Pin = ({ pin }) => {
        const onClick = React.useCallback((e) => {
                if (ref.current && ref.current.contains(e.originalTarget)) {
                        if (e.originalTarget.tagName === 'A') {
+                               storePosition();
                                navigate(new URL(e.originalTarget.href).pathname);
                        }
                } else {
                        if (pin.technique.type === 'location') {
                                setShowPopover(s => !s);
                        } else {
+                               storePosition();
                                navigate(getLink(pin.technique));
                        }
                }
        }, [pin]);
 
+       const title = React.useMemo(() => {
+               return getTranslation(pin.technique, 'title', i18n.language);
+       }, [pin, i18n.language]);
+
        return <Overlay onClick={onClick} x={pin.x} y={pin.y}>
                <div className="map-pin">
                        <Link to={getLink(pin.technique)}>
-                               <Icon.PIN title={getTranslation(pin.technique, 'title', i18n.language)} />
+                               {pin.marker ?
+                                       <ZeldaIcon title={title} name={pin.marker} />
+                               :
+                                       <Icon.PIN title={title} />
+                               }
                        </Link>
                        {pin.technique.type === 'location' ?
                                <div ref={ref}>
@@ -44,6 +57,7 @@ const Pin = ({ pin }) => {
 
 Pin.propTypes = {
        pin: PropTypes.shape({
+               marker: PropTypes.string,
                technique: PropTypes.shape({
                        type: PropTypes.string,
                }),