X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Fmap%2FButtons.js;h=fdffe92cdbfd57b75f7daeb14f6d7e7fb79c765c;hb=f17b9f3b6f7f9e678c681c719eea6fb5c41a387f;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..fdffe92 100644
--- 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>;
 };