indicate connector throughways

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index 5d1d51637d0c6f6f93b13e4d54511bb17bd5b614..ea5bf1f0dddcae97560b3c91f1daf6d16c388c9c 100644 (file)
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -1417,6 +1417,7 @@ const AREAS = [
                                name: 'Gerudo Fortress',
                                short: 'GF',
                                type: 'Overworld',
+                               throughway: 'hw.dcol',
                        },
                        {
                                id: 'dcol',
@@ -1425,6 +1426,7 @@ const AREAS = [
                                name: 'Desert Colossus',
                                short: 'DCol',
                                type: 'Overworld',
+                               throughway: 'hw.gf',
                        },
                ],
        },
@@ -1687,6 +1689,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'deku.end',
                        },
                        {
                                id: 'end',
@@ -1695,6 +1698,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'ChildBoss',
+                               throughway: 'deku.main',
                        },
                ],
        },
@@ -1720,6 +1724,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'dc.end',
                        },
                        {
                                id: 'end',
@@ -1728,6 +1733,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'ChildBoss',
+                               throughway: 'dc.main',
                        },
                ],
        },
@@ -1753,6 +1759,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'jabu.end',
                        },
                        {
                                id: 'end',
@@ -1761,6 +1768,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'ChildBoss',
+                               throughway: 'jabu.main',
                        },
                ],
        },
@@ -1787,6 +1795,7 @@ const AREAS = [
                                short: 'Main',
                                spacer: true,
                                type: 'Dungeon',
+                               throughway: 'forest.end',
                        },
                        {
                                id: 'end',
@@ -1796,6 +1805,7 @@ const AREAS = [
                                short: 'End',
                                spacer: true,
                                type: 'AdultBoss',
+                               throughway: 'forest.main',
                        },
                ],
        },
@@ -1822,6 +1832,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'fire.end',
                        },
                        {
                                id: 'end',
@@ -1830,6 +1841,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'AdultBoss',
+                               throughway: 'fire.main',
                        },
                ],
        },
@@ -1855,6 +1867,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'water.end',
                        },
                        {
                                id: 'end',
@@ -1863,6 +1876,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'AdultBoss',
+                               throughway: 'water.main',
                        },
                ],
        },
@@ -1888,6 +1902,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'shadow.end',
                        },
                        {
                                id: 'end',
@@ -1896,6 +1911,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'AdultBoss',
+                               throughway: 'shadow.main',
                        },
                ],
        },
@@ -1921,6 +1937,7 @@ const AREAS = [
                                name: 'Main',
                                short: 'Main',
                                type: 'Dungeon',
+                               throughway: 'spirit.end',
                        },
                        {
                                id: 'end',
@@ -1929,6 +1946,7 @@ const AREAS = [
                                name: 'End',
                                short: 'End',
                                type: 'AdultBoss',
+                               throughway: 'spirit.main',
                        },
                ],
        },
@@ -1955,6 +1973,7 @@ const AREAS = [
                                short: 'Main',
                                spacer: true,
                                type: 'Dungeon',
+                               throughway: 'igc.end',
                        },
                        {
                                id: 'end',
@@ -1964,6 +1983,7 @@ const AREAS = [
                                short: 'End',
                                spacer: true,
                                type: 'SpecialBoss',
+                               throughway: 'igc.main',
                        },
                ],
        },
@@ -2438,6 +2458,15 @@ const entranceStyle = (entrance) => {
        };
 };
 
+const resolvePath = (connections, from) => {
+       if (!connections[from]) return { dst: null, via: [] };
+       const dstEntrance = getEntrance(connections[from]);
+       if (!dstEntrance || !dstEntrance.throughway) return { dst: connections[from], via: [] };
+       const path = resolvePath(connections, dstEntrance.throughway);
+       if (!path.dst) return { dst: connections[from], via: path.via };
+       return { dst: path.dst, via: [connections[from], ...path.via] };
+};
+
 const vecAdd = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
 
 const vecMul = (v, f) => ({ x: v.x * f, y: v.y * f });
@@ -2663,10 +2692,14 @@ const MapEntrance = ({ entrance }) => {
                return cs.join(' ');
        }, [connections, entrance, isDragging]);
 
-       const destination = React.useMemo(() => {
-               return getEntrance(connections[entrance.id]) || getRoom(connections[entrance.id]);
+       const path = React.useMemo(() => {
+               return resolvePath(connections, entrance.id);
        }, [connections, entrance]);
 
+       const destination = React.useMemo(() => {
+               return getEntrance(path.dst) || getRoom(path.dst);
+       }, [path]);
+
        const onClick = React.useCallback((e) => {
                onMapEntranceClick(entrance);
                e.preventDefault();
@@ -2683,6 +2716,15 @@ const MapEntrance = ({ entrance }) => {
                e.stopPropagation();
        }, [connections, entrance, setConnection]);
 
+       const description = React.useMemo(() => {
+               const parts = [
+                       entranceShort(destination),
+                       ...path.via.map((id) => `via ${entranceShort(getEntrance(id))}`),
+                       `@ ${entranceShort(getEntrance(entrance.id))}`,
+               ];
+               return parts.join(' ');
+       }, [destination, entrance, path]);
+
        if (destination) {
                return <rect
                        x={entrance.pos.x - 3}
@@ -2695,7 +2737,7 @@ const MapEntrance = ({ entrance }) => {
                        onClick={onClick}
                        onContextMenu={onContext}
                >
-                       <title>{destination.name} @ {entrance.name}</title>
+                       <title>{description}</title>
                </rect>;
        }
 
@@ -2725,9 +2767,14 @@ MapEntrance.propTypes = {
        }),
 };
 
-const MapConnector = ({ from, to }) => {
+const MapConnector = ({ from, to, via }) => {
+       const className = React.useMemo(() => {
+               const cs = ['connector'];
+               if (via.length) cs.push('is-via');
+               return cs.join(' ');
+       }, [via]);
        return <line
-               className="connector"
+               className={className}
                x1={from.pos.x}
                y1={from.pos.y}
                x2={to.pos.x}
@@ -2747,7 +2794,8 @@ MapConnector.propTypes = {
                        x: PropTypes.number,
                        y: PropTypes.number,
                })
-       })
+       }),
+       via: PropTypes.arrayOf(PropTypes.string),
 };
 
 const MapAnnotation = ({ annotation }) => {
@@ -2886,17 +2934,20 @@ const MixedPoolsTracker = () => {
 
        const connectors = React.useMemo(() => {
                const cs = [];
-               Object.entries(connections).forEach(([from, to]) => {
+               Object.entries(connections).forEach(([from]) => {
                        const fromEntrance = getEntrance(from);
                        if (!fromEntrance) return;
-                       if (from > to && !fromEntrance.oneway) return;
+                       const path = resolvePath(connections, from);
+                       if (!path.dst) return;
+                       if (from > path.dst && !fromEntrance.oneway) return;
                        const fromMap = getMapEntrance(from);
                        if (!fromMap) return;
-                       const toMap = getMapEntrance(to);
+                       const toMap = getMapEntrance(path.dst);
                        if (!toMap) return;
                        cs.push({
                                from: fromMap,
                                to: toMap,
+                               via: path.via,
                        });
                });
                return cs;
@@ -3025,6 +3076,7 @@ const MixedPoolsTracker = () => {
                                                                key={`${c.from.id}-${c.to.id}`}
                                                                from={c.from}
                                                                to={c.to}
+                                                               via={c.via}
                                                        />
                                                )}
                                        </g>

diff --git a/resources/sass/zootr.scss b/resources/sass/zootr.scss
index 766a2fd7205cde643e70fdccb7e858f26a8806b7..3d0261e7c3ccb47ea9c41b378168d061284a292f 100644 (file)
--- a/resources/sass/zootr.scss
+++ b/resources/sass/zootr.scss
@@ -100,6 +100,9 @@
                .connector {
                        stroke: #cc0000;
                        pointer-events: none;
+                       &.is-via {
+                               stroke-dasharray: 3 3;
+                       }
                }
                .annotation {
                        pointer-events: none;