From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Thu, 29 May 2025 15:35:08 +0000 (+0200)
Subject: feature toggles
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=4882bae444db704b3d7319941245ec8acdf6edc8;p=alttp.git

feature toggles
---

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index 0c1e82f..fd4432b 100644
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2834,6 +2834,12 @@ const MixedPoolsTracker = () => {
 	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 setConnection = React.useCallback((src, dst) => {
 		setConnections((c) => {
 			const newConn = { ...c };
@@ -3125,8 +3131,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 }}
 							/>
-							{map.labelPos ?
+							{map.labelPos && showLabels ?
 								<text
 									className="area-label"
 									x={map.labelPos.x}
@@ -3136,31 +3143,72 @@ const MixedPoolsTracker = () => {
 									{map.short}
 								</text>
 							: null}
-							{map.entrances.map((entrance) =>
+							{showEntrances ? map.entrances.map((entrance) =>
 								<MapEntrance key={entrance.id} entrance={entrance} />
-							)}
+							) : null}
 						</g>
 					)}
-					<g title="connectors">
-						{connectors.map((c) =>
-							<MapConnector
-								key={`${c.from.id}-${c.to.id}`}
-								from={c.from}
-								to={c.to}
-								via={c.via}
-							/>
-						)}
-					</g>
-					<g title="anotations">
-						{annotations.map((a) =>
-							<MapAnnotation
-								key={`${a.id}`}
-								annotation={a}
-							/>
-						)}
-					</g>
+					{showConnectors ?
+						<g title="connectors">
+							{connectors.map((c) =>
+								<MapConnector
+									key={`${c.from.id}-${c.to.id}`}
+									from={c.from}
+									to={c.to}
+									via={c.via}
+								/>
+							)}
+						</g>
+					: null}
+					{showWarps ?
+						<g title="anotations">
+							{annotations.map((a) =>
+								<MapAnnotation
+									key={`${a.id}`}
+									annotation={a}
+								/>
+							)}
+						</g>
+					: 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>
+				<Button
+					onClick={() => setShowLabels(s => !s)}
+					size="sm"
+					variant={showLabels ? 'secondary' : 'outline-secondary'}
+				>
+					Labels
+				</Button>
+				<Button
+					onClick={() => setShowMaps(s => !s)}
+					size="sm"
+					variant={showMaps ? 'secondary' : 'outline-secondary'}
+				>
+					Maps
+				</Button>
+				<Button
+					onClick={() => setShowWarps(s => !s)}
+					size="sm"
+					variant={showWarps ? 'secondary' : 'outline-secondary'}
+				>
+					Warps
+				</Button>
+			</div>
 		</div>
 	</CONTEXT.Provider>;
 };