second underworld map

[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..b07fba66a69134809195632e6c3b290937ebbef8 100644 (file)
--- a/resources/js/components/map/Buttons.js
+++ b/resources/js/components/map/Buttons.js
@@ -1,47 +1,48 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import { useOpenSeadragon } from './OpenSeadragon';
 
-const Buttons = () => {
-       const { viewer } = useOpenSeadragon();
+const Buttons = ({ setUWOverlay, uwOverlay }) => {
+       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>
+       return <div className="mt-5">
+               <div className="button-bar">
+                       {['lw', 'dw', 'sp', 'uw', 'uw2'].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>
+               {activeMap === 'uw' ?
+                       <div className="mt-2">
+                               <Form.Check
+                                       checked={uwOverlay}
+                                       id="toggle-uw-overlay"
+                                       inline
+                                       onChange={e => setUWOverlay(e.target.checked)}
+                                       type="checkbox"
+                               />
+                               <Form.Label className="mt-0" htmlFor="toggle-uw-overlay">
+                                       {t('map.uwOverlay')}
+                               </Form.Label>
+                       </div>
+               : null}
        </div>;
 };
 
+Buttons.propTypes = {
+       setUWOverlay: PropTypes.func,
+       uwOverlay: PropTypes.bool,
+};
+
 export default Buttons;