From: Daniel Karbach Date: Mon, 6 Feb 2023 12:04:17 +0000 (+0100) Subject: list items shown on map X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=e937f3f41b33ba94d36f898573df75a9cd10e5c0;p=alttp.git list items shown on map --- diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js index c9d604a..3e094cc 100644 --- a/resources/js/components/common/Icon.js +++ b/resources/js/components/common/Icon.js @@ -63,6 +63,7 @@ Icon.ALLOWED = makePreset('AllowedIcon', 'square-check'); Icon.APPLY = makePreset('ApplyIcon', 'right-to-bracket'); Icon.APPLICATIONS = makePreset('ApplicationsIcon', 'person-running'); Icon.CHART = makePreset('ChartIcon', 'chart-line'); +Icon.CROSSHAIRS = makePreset('CrosshairsIcon', 'crosshairs'); Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']); Icon.EDIT = makePreset('EditIcon', 'edit'); Icon.FINISHED = makePreset('FinishedIcon', 'square-check'); diff --git a/resources/js/components/map/Item.js b/resources/js/components/map/Item.js new file mode 100644 index 0000000..4bd209a --- /dev/null +++ b/resources/js/components/map/Item.js @@ -0,0 +1,94 @@ +import OpenSeadragon from 'openseadragon'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { Button } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; + +import { useOpenSeadragon } from './OpenSeadragon'; +import Icon from '../common/Icon'; +import Rulesets from '../techniques/Rulesets'; +import { + getLink, + getRelations, + getTranslation, + hasRelations, + sorted, +} from '../../helpers/Technique'; +import i18n from '../../i18n'; + +const Item = ({ pin }) => { + const { viewer } = useOpenSeadragon(); + const { t } = useTranslation(); + + const goToLocation = React.useCallback(pin => { + if (viewer && viewer.viewport) { + viewer.viewport.panTo(new OpenSeadragon.Point(pin.x, pin.y)); + viewer.viewport.zoomTo(4); + viewer.element.scrollIntoView(); + } + }, [viewer]); + + return
  • +
    + {pin.technique.type === 'location' ? <> +

    {getTranslation(pin.technique, 'title', i18n.language)}

    +

    {getTranslation(pin.technique, 'short', i18n.language)}

    + {hasRelations(pin.technique, 'related') ? + sorted(getRelations(pin.technique, 'related')).map(r => +
    +
    +

    + + {getTranslation(r, 'title', i18n.language)} + +

    +

    {getTranslation(r, 'short', i18n.language)}

    +
    + {r.rulesets ? + + : null} +
    + ) + : null} + :
    +
    +

    + + {getTranslation(pin.technique, 'title', i18n.language)} + +

    +

    {getTranslation(pin.technique, 'short', i18n.language)}

    +
    + {pin.technique.rulesets ? + + : null} +
    } +
    + +
  • ; +}; + +Item.propTypes = { + pin: PropTypes.shape({ + technique: PropTypes.shape({ + rulesets: PropTypes.shape({ + }), + type: PropTypes.string, + }), + x: PropTypes.number, + y: PropTypes.number, + }), +}; + +export default Item; diff --git a/resources/js/components/map/List.js b/resources/js/components/map/List.js new file mode 100644 index 0000000..7b66630 --- /dev/null +++ b/resources/js/components/map/List.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { Container } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; + +import Item from './Item'; +import { useOpenSeadragon } from './OpenSeadragon'; +import { compareTranslation } from '../../helpers/Technique'; +import i18n from '../../i18n'; + +const List = () => { + const { pins } = useOpenSeadragon(); + const { t } = useTranslation(); + + const sortedPins = React.useMemo(() => { + const compare = compareTranslation('title', i18n.language); + return pins.sort((a, b) => compare(a.technique, b.technique)); + }, [pins, i18n.language]); + + if (!pins || !pins.length) return null; + + return +

    {t('map.onThisMap')}

    + +
    ; +}; + +export default List; diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js index 44ac0a0..841227c 100644 --- a/resources/js/components/pages/Map.js +++ b/resources/js/components/pages/Map.js @@ -3,6 +3,7 @@ import { Container } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; import Buttons from '../map/Buttons'; +import List from '../map/List'; import OpenSeadragon from '../map/OpenSeadragon'; import Pins from '../map/Pins'; @@ -22,6 +23,7 @@ const Map = () => {
    + ; }; diff --git a/resources/js/components/techniques/List.js b/resources/js/components/techniques/List.js index e18937e..aa80836 100644 --- a/resources/js/components/techniques/List.js +++ b/resources/js/components/techniques/List.js @@ -20,9 +20,9 @@ const List = ({ techniques }) =>

      {getTranslation(tech, 'short', i18n.language)}

    - {tech.rulesets ? - - : null} + {tech.rulesets ? + + : null} )} ; diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js index 0f7c8ff..02adc9d 100644 --- a/resources/js/i18n/de.js +++ b/resources/js/i18n/de.js @@ -379,9 +379,11 @@ export default { map: { dwLong: 'Dark World', dwShort: 'DW', + goToLocation: 'Zur Stelle springen', heading: 'Karte', lwLong: 'Light World', lwShort: 'LW', + onThisMap: 'Auf dieser Karte', spLong: 'Spezielle Gebiete', spShort: 'SP', uwLong: 'Underworld', diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js index 7414796..efb99b3 100644 --- a/resources/js/i18n/en.js +++ b/resources/js/i18n/en.js @@ -379,9 +379,11 @@ export default { map: { dwLong: 'Dark World', dwShort: 'DW', + goToLocation: 'Go to location', heading: 'Map', lwLong: 'Light World', lwShort: 'LW', + onThisMap: 'On this map', spLong: 'Special Areas', spShort: 'SP', uwLong: 'Underworld', diff --git a/resources/sass/map.scss b/resources/sass/map.scss index 95d645a..599cd15 100644 --- a/resources/sass/map.scss +++ b/resources/sass/map.scss @@ -16,3 +16,19 @@ display: none; } } + +.pin-list { + margin: 1em 0; + padding: 0; + list-style: none; + + li { + margin: 1ex 0; + padding: 1ex; + border-top: thin solid silver; + } + + h2 > a, h3 > a { + text-decoration: none; + } +}