basic map pins

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

diff --git a/resources/js/components/map/Buttons.js b/resources/js/components/map/Buttons.js
index b43fc0e64d8c3d9a772bbbfca408ad1536f8d59a..fdffe92cdbfd57b75f7daeb14f6d7e7fb79c765c 100644 (file)
--- a/resources/js/components/map/Buttons.js
+++ b/resources/js/components/map/Buttons.js
@@ -5,42 +5,21 @@ import { useTranslation } from 'react-i18next';
 import { useOpenSeadragon } from './OpenSeadragon';
 
 const Buttons = () => {
-       const { viewer } = useOpenSeadragon();
+       const { activeMap, setActiveMap } = useOpenSeadragon();
        const { t } = useTranslation();
 
-       const goToPage = React.useCallback((p) => {
-               if (viewer) viewer.goToPage(p);
-       }, [viewer]);
-
        return <div className="button-bar">
-               <Button
-                       onClick={() => goToPage(0)}
-                       title={t('map.lwLong')}
-                       variant="outline-secondary"
-               >
-                       {t('map.lwShort')}
-               </Button>
-               <Button
-                       onClick={() => goToPage(1)}
-                       title={t('map.dwLong')}
-                       variant="outline-secondary"
-               >
-                       {t('map.dwShort')}
-               </Button>
-               <Button
-                       onClick={() => goToPage(2)}
-                       title={t('map.spLong')}
-                       variant="outline-secondary"
-               >
-                       {t('map.spShort')}
-               </Button>
-               <Button
-                       onClick={() => goToPage(3)}
-                       title={t('map.uwLong')}
-                       variant="outline-secondary"
-               >
-                       {t('map.uwShort')}
-               </Button>
+               {['lw', 'dw', 'sp', 'uw'].map(map =>
+                       <Button
+                               active={activeMap === map}
+                               key={map}
+                               onClick={() => setActiveMap(map)}
+                               title={t(`map.${map}Long`)}
+                               variant="outline-secondary"
+                       >
+                               {t(`map.${map}Short`)}
+                       </Button>
+               )}
        </div>;
 };