From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Thu, 29 May 2025 14:03:39 +0000 (+0200)
Subject: mark assigned entrances on map
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=853e422ef18d9dc737cbdeddf51f91215cc2359c;p=alttp.git

mark assigned entrances on map
---

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index a97dd3f..5d1d516 100644
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2656,31 +2656,58 @@ const MapEntrance = ({ entrance }) => {
 		setConnection,
 	} = useTracker();
 
-	const classNames = ['entrance'];
-	if (connections[entrance.id] === 'trash') classNames.push('is-trash');
-	if (isDragging(entrance)) classNames.push('is-dragging');
+	const className = React.useMemo(() => {
+		const cs = ['entrance'];
+		if (connections[entrance.id] === 'trash') cs.push('is-trash');
+		if (isDragging(entrance)) cs.push('is-dragging');
+		return cs.join(' ');
+	}, [connections, entrance, isDragging]);
+
+	const destination = React.useMemo(() => {
+		return getEntrance(connections[entrance.id]) || getRoom(connections[entrance.id]);
+	}, [connections, entrance]);
+
+	const onClick = React.useCallback((e) => {
+		onMapEntranceClick(entrance);
+		e.preventDefault();
+		e.stopPropagation();
+	}, [entrance, onMapEntranceClick]);
+
+	const onContext = React.useCallback((e) => {
+		if (connections[entrance.id]) {
+			setConnection(entrance.id, null);
+		} else {
+			setConnection(entrance.id, 'trash');
+		}
+		e.preventDefault();
+		e.stopPropagation();
+	}, [connections, entrance, setConnection]);
+
+	if (destination) {
+		return <rect
+			x={entrance.pos.x - 3}
+			y={entrance.pos.y - 3}
+			width={6}
+			height={6}
+			className={className}
+			fill={destination.bgColor}
+			stroke={destination.fgColor}
+			onClick={onClick}
+			onContextMenu={onContext}
+		>
+			<title>{destination.name} @ {entrance.name}</title>
+		</rect>;
+	}
 
 	return <circle
 		cx={entrance.pos.x}
 		cy={entrance.pos.y}
 		r="3"
-		className={classNames.join(' ')}
+		className={className}
 		fill={entrance.color}
 		stroke="#000000"
-		onClick={(e) => {
-			onMapEntranceClick(entrance);
-			e.preventDefault();
-			e.stopPropagation();
-		}}
-		onContextMenu={(e) => {
-			if (connections[entrance.id]) {
-				setConnection(entrance.id, null);
-			} else {
-				setConnection(entrance.id, 'trash');
-			}
-			e.preventDefault();
-			e.stopPropagation();
-		}}
+		onClick={onClick}
+		onContextMenu={onContext}
 	>
 		<title>{entrance.name}</title>
 	</circle>;