X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Fmap%2FButtons.js;h=fa023927bd230aee191c9d1cebbfb29adafa10a4;hb=939bf6d3ab44e3ce08116c2e9fdab160c35e894b;hp=fdffe92cdbfd57b75f7daeb14f6d7e7fb79c765c;hpb=2730f0f38f5c6d52079c2bae7515ee5896e4de81;p=alttp.git

diff --git a/resources/js/components/map/Buttons.js b/resources/js/components/map/Buttons.js
index fdffe92..fa02392 100644
--- a/resources/js/components/map/Buttons.js
+++ b/resources/js/components/map/Buttons.js
@@ -1,26 +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 Buttons = ({ setUWOverlay, uwOverlay }) => {
 	const { activeMap, setActiveMap } = useOpenSeadragon();
 	const { t } = useTranslation();
 
-	return <div className="button-bar">
-		{['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>
-		)}
+	return <div className="mt-5">
+		<div className="button-bar">
+			{['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>
+		{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;