X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FButtons.js;h=b07fba66a69134809195632e6c3b290937ebbef8;hb=22ba8bff0adc15aa70c35314f8b7f75e749fa5eb;hp=b43fc0e64d8c3d9a772bbbfca408ad1536f8d59a;hpb=18424fc6de2fc902ee2b2d3143955081263adff4;p=alttp.git

diff --git a/resources/js/components/map/Buttons.js b/resources/js/components/map/Buttons.js
index b43fc0e..b07fba6 100644
--- 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;