From 6e90a6d5585a8b55a54968aceb28378b07600048 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Thu, 29 May 2025 17:58:45 +0200
Subject: [PATCH] store tracker prefs

---
 .../js/components/zootr/MixedPoolsTracker.js  | 144 ++++++++++--------
 resources/sass/zootr.scss                     |   5 +
 2 files changed, 88 insertions(+), 61 deletions(-)

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index fd4432b..808ccdf 100644
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2828,17 +2828,26 @@ MapAnnotation.propTypes = {
 	}),
 };
 
+const initPrefs = () => {
+	const dump = localStorage.getItem('zootr.mixed-pools-tracker-prefs');
+	if (dump) {
+		return JSON.parse(dump);
+	}
+	return {
+		showConnectors: true,
+		showEntrances: true,
+		showLabels: true,
+		showMaps: false,
+		showWarps: true,
+	};
+};
+
 const MixedPoolsTracker = () => {
 	const { t } = useTranslation();
 
 	const [connections, setConnections] = React.useState({});
 	const [dragging, setDragging] = React.useState(null);
-
-	const [showConnectors, setShowConnectors] = React.useState(true);
-	const [showEntrances, setShowEntrances] = React.useState(true);
-	const [showLabels, setShowLabels] = React.useState(true);
-	const [showMaps, setShowMaps] = React.useState(true);
-	const [showWarps, setShowWarps] = React.useState(true);
+	const [prefs, setPrefs] = React.useState(initPrefs());
 
 	const setConnection = React.useCallback((src, dst) => {
 		setConnections((c) => {
@@ -3034,34 +3043,19 @@ const MixedPoolsTracker = () => {
 		}
 	}, [setConnections, t]);
 
+	const togglePref = React.useCallback((which) => {
+		setPrefs((oldPrefs) => {
+			const newPrefs = {
+				...oldPrefs,
+				[which]: !oldPrefs[which],
+			};
+			localStorage.setItem('zootr.mixed-pools-tracker-prefs', JSON.stringify(newPrefs));
+			return newPrefs;
+		});
+	}, []);
+
 	return <CONTEXT.Provider value={context}>
 		<div className="mixed-pools-tracker">
-			<div className="menu-bar button-bar">
-				<Button
-					onClick={save}
-					size="sm"
-					title={t('button.save')}
-					variant="outline-secondary"
-				>
-					<Icon.SAVE title="" />
-				</Button>
-				<Button
-					onClick={load}
-					size="sm"
-					title={t('button.load')}
-					variant="outline-secondary"
-				>
-					<Icon.LOAD title="" />
-				</Button>
-				<Button
-					onClick={reset}
-					size="sm"
-					title={t('button.reset')}
-					variant="outline-secondary"
-				>
-					<Icon.RESET title="" />
-				</Button>
-			</div>
 			<div className="columns">
 				{superGroups.map((sg) =>
 					<div className="column" key={sg.key}>
@@ -3131,9 +3125,9 @@ const MixedPoolsTracker = () => {
 								pointerEvents="none"
 								x={map.bg.pos.x} y={map.bg.pos.y}
 								width={map.bg.size.x}
-								style={{ opacity: showMaps ? 1 : 0.25 }}
+								style={{ opacity: prefs.showMaps ? 1 : 0.25 }}
 							/>
-							{map.labelPos && showLabels ?
+							{map.labelPos && prefs.showLabels ?
 								<text
 									className="area-label"
 									x={map.labelPos.x}
@@ -3143,12 +3137,12 @@ const MixedPoolsTracker = () => {
 									{map.short}
 								</text>
 							: null}
-							{showEntrances ? map.entrances.map((entrance) =>
+							{prefs.showEntrances ? map.entrances.map((entrance) =>
 								<MapEntrance key={entrance.id} entrance={entrance} />
 							) : null}
 						</g>
 					)}
-					{showConnectors ?
+					{prefs.showConnectors ?
 						<g title="connectors">
 							{connectors.map((c) =>
 								<MapConnector
@@ -3160,7 +3154,7 @@ const MixedPoolsTracker = () => {
 							)}
 						</g>
 					: null}
-					{showWarps ?
+					{prefs.showWarps ?
 						<g title="anotations">
 							{annotations.map((a) =>
 								<MapAnnotation
@@ -3172,43 +3166,71 @@ const MixedPoolsTracker = () => {
 					: null}
 				</svg>
 			</div>
-			<div className="menu-bar button-bar">
-				<Button
-					onClick={() => setShowConnectors(s => !s)}
-					size="sm"
-					variant={showConnectors ? 'secondary' : 'outline-secondary'}
-				>
-					Connectors
-				</Button>
-				<Button
-					onClick={() => setShowEntrances(s => !s)}
-					size="sm"
-					variant={showEntrances ? 'secondary' : 'outline-secondary'}
-				>
-					Entrances
-				</Button>
+			<div className="menu-bar">
+				<div className="button-bar">
+					<Button
+						onClick={() => togglePref('showConnectors')}
+						size="sm"
+						variant={prefs.showConnectors ? 'secondary' : 'outline-secondary'}
+					>
+						Connectors
+					</Button>
+					<Button
+						onClick={() => togglePref('showEntrances')}
+						size="sm"
+						variant={prefs.showEntrances ? 'secondary' : 'outline-secondary'}
+					>
+						Entrances
+					</Button>
+					<Button
+						onClick={() => togglePref('showLabels')}
+						size="sm"
+						variant={prefs.showLabels ? 'secondary' : 'outline-secondary'}
+					>
+						Labels
+					</Button>
+					<Button
+						onClick={() => togglePref('showMaps')}
+						size="sm"
+						variant={prefs.showMaps ? 'secondary' : 'outline-secondary'}
+					>
+						Maps
+					</Button>
+					<Button
+						onClick={() => togglePref('showWarps')}
+						size="sm"
+						variant={prefs.showWarps ? 'secondary' : 'outline-secondary'}
+					>
+						Warps
+					</Button>
+				</div>
+			<div className="button-bar">
 				<Button
-					onClick={() => setShowLabels(s => !s)}
+					onClick={save}
 					size="sm"
-					variant={showLabels ? 'secondary' : 'outline-secondary'}
+					title={t('button.save')}
+					variant="outline-secondary"
 				>
-					Labels
+					<Icon.SAVE title="" />
 				</Button>
 				<Button
-					onClick={() => setShowMaps(s => !s)}
+					onClick={load}
 					size="sm"
-					variant={showMaps ? 'secondary' : 'outline-secondary'}
+					title={t('button.load')}
+					variant="outline-secondary"
 				>
-					Maps
+					<Icon.LOAD title="" />
 				</Button>
 				<Button
-					onClick={() => setShowWarps(s => !s)}
+					onClick={reset}
 					size="sm"
-					variant={showWarps ? 'secondary' : 'outline-secondary'}
+					title={t('button.reset')}
+					variant="outline-secondary"
 				>
-					Warps
+					<Icon.RESET title="" />
 				</Button>
 			</div>
+			</div>
 		</div>
 	</CONTEXT.Provider>;
 };
diff --git a/resources/sass/zootr.scss b/resources/sass/zootr.scss
index 3d0261e..1af50bf 100644
--- a/resources/sass/zootr.scss
+++ b/resources/sass/zootr.scss
@@ -137,4 +137,9 @@
 			}
 		}
 	}
+	.menu-bar {
+		max-width: 104em;
+		display: flex;
+		justify-content: space-between;
+	}
 }
-- 
2.39.5