fix(Map): Add background for Pochven's systems. Changed from Region name to constellation name for pochven systems. Changed connection style for gates (display like common connection). Changed behaviour of connections.

assets/js/hooks/Mapper/components/map/components/KillsCounter/KillsCounter.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
-import { useKillsCounter } from '../../hooks/useKillsCounter';
+import { useKillsCounter } from '../../hooks/useKillsCounter.ts';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
-import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common';
+import { WithChildren, WithClassName } from '@/hooks/Mapper/types/common.ts';
 import {
   KILLS_ROW_HEIGHT,
   SystemKillsList,

assets/js/hooks/Mapper/components/map/components/KillsCounter/index.ts

@@ -0,0 +1 @@
+export * from './KillsCounter.tsx';

assets/js/hooks/Mapper/components/map/components/LocalCounter/LocalCounter.tsx

@@ -3,11 +3,11 @@ import clsx from 'clsx';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit/WdTooltip';
 import { CharItemProps, LocalCharactersList } from '../../../mapInterface/widgets/LocalCharacters/components';
-import { useLocalCharactersItemTemplate } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters';
-import { useLocalCharacterWidgetSettings } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings';
-import classes from './SolarSystemLocalCounter.module.scss';
+import { useLocalCharactersItemTemplate } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalCharacters.tsx';
+import { useLocalCharacterWidgetSettings } from '../../../mapInterface/widgets/LocalCharacters/hooks/useLocalWidgetSettings.ts';
 import { useTheme } from '@/hooks/Mapper/hooks/useTheme.ts';
 import { AvailableThemes } from '@/hooks/Mapper/mapRootProvider/types.ts';
+import classes from './LocalCounter.module.scss';
 
 interface LocalCounterProps {
   localCounterCharacters: Array<CharItemProps>;

assets/js/hooks/Mapper/components/map/components/LocalCounter/index.ts

@@ -0,0 +1 @@
+export * from './LocalCounter';

assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import classes from './SolarSystemEdge.module.scss';
-import { EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, Position, useStore } from 'reactflow';
+import { EdgeLabelRenderer, EdgeProps, getBezierPath, Position, useStore } from 'reactflow';
 import { getEdgeParams } from '@/hooks/Mapper/components/map/utils.ts';
 import clsx from 'clsx';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
@@ -51,11 +51,11 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
   const [hovered, setHovered] = useState(false);
 
   const [path, labelX, labelY, sx, sy, tx, ty, sourcePos, targetPos] = useMemo(() => {
-    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
+    const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode!, targetNode!);
 
     const offset = isThickConnections ? MAP_OFFSETS_TICK[targetPos] : MAP_OFFSETS[targetPos];
 
-    const method = isWormhole ? getBezierPath : getSmoothStepPath;
+    const method = isWormhole ? getBezierPath : getBezierPath;
 
     const [edgePath, labelX, labelY] = method({
       sourceX: sx - offset.x,

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.module.scss

@@ -40,6 +40,7 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
   z-index: 3;
   overflow: hidden;
 
+  &.Pochven,
   &.Mataria,
   &.Amarria,
   &.Gallente,
@@ -95,6 +96,15 @@ $neon-color-3: rgba(27, 132, 236, 0.40);
     }
   }
 
+  &.Pochven {
+    &::after {
+      opacity: 0.8;
+      background-image: url('/images/pochven.webp');
+      background-position-x: 0;
+      background-position-y: -13px;
+    }
+  }
+
   &.selected {
     border-color: $pastel-pink;
     box-shadow: 0 0 10px #9a1af1c2;

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx

@@ -12,11 +12,11 @@ import {
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { Tag } from 'primereact/tag';
+import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
+import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
 
 // let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {

assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx

@@ -12,10 +12,10 @@ import {
 } from '@/hooks/Mapper/components/map/constants';
 import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/WormholeClassComp';
 import { UnsplashedSignature } from '@/hooks/Mapper/components/map/components/UnsplashedSignature';
-import { LocalCounter } from './SolarSystemLocalCounter';
-import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
+import { LocalCounter } from '@/hooks/Mapper/components/map/components/LocalCounter';
+import { KillsCounter } from '@/hooks/Mapper/components/map/components/KillsCounter';
 
 // let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {

assets/js/hooks/Mapper/components/map/hooks/useSolarSystemNode.ts

@@ -5,7 +5,7 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider';
 import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick';
-import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+import { Regions, REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
 import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
 import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
 import { sortWHClasses } from '@/hooks/Mapper/helpers';
@@ -65,6 +65,7 @@ const SpaceToClass: Record<string, string> = {
   [Spaces.Matar]: 'Mataria',
   [Spaces.Amarr]: 'Amarria',
   [Spaces.Gallente]: 'Gallente',
+  [Spaces.Pochven]: 'Pochven',
 };
 
 export function useLocalCounter(nodeVars: SolarSystemNodeVars) {
@@ -112,6 +113,7 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
     region_id,
     is_shattered,
     solar_system_name,
+    constellation_name,
   } = systemStaticInfo;
 
   const { isShowUnsplashedSignatures } = interfaceSettings;
@@ -195,10 +197,18 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
   const hubsAsStrings = useMemo(() => hubs.map(item => item.toString()), [hubs]);
 
   const isRally = useMemo(
-    () => pings.find(x => x.solar_system_id === solar_system_id && x.type === PingType.Rally),
+    () => !!pings.find(x => x.solar_system_id === solar_system_id && x.type === PingType.Rally),
     [pings, solar_system_id],
   );
 
+  const regionName = useMemo(() => {
+    if (region_id === Regions.Pochven) {
+      return constellation_name;
+    }
+
+    return region_name;
+  }, [constellation_name, region_id, region_name]);
+
   const nodeVars: SolarSystemNodeVars = {
     id,
     selected,
@@ -233,7 +243,7 @@ export const useSolarSystemNode = (props: NodeProps<MapSolarSystemType>): SolarS
     isThickConnections,
     classTitle: class_title,
     temporaryName: computedTemporaryName,
-    regionName: region_name,
+    regionName,
     solarSystemName: solar_system_name,
     isRally,
   };

assets/js/hooks/Mapper/components/map/utils.ts

@@ -1,37 +1,48 @@
-import { Position, internalsSymbol } from 'reactflow';
+import { Position, internalsSymbol, Node } from 'reactflow';
 
-// returns the position (top,right,bottom or right) passed node compared to
-function getParams(nodeA, nodeB) {
+type Coords = [number, number];
+type CoordsWithPosition = [number, number, Position];
+
+function segmentsIntersect(a1: number, a2: number, b1: number, b2: number): boolean {
+  const [minA, maxA] = a1 < a2 ? [a1, a2] : [a2, a1];
+  const [minB, maxB] = b1 < b2 ? [b1, b2] : [b2, b1];
+
+  return maxA >= minB && maxB >= minA;
+}
+
+function getParams(nodeA: Node, nodeB: Node): CoordsWithPosition {
   const centerA = getNodeCenter(nodeA);
   const centerB = getNodeCenter(nodeB);
 
-  const horizontalDiff = Math.abs(centerA.x - centerB.x);
-  const verticalDiff = Math.abs(centerA.y - centerB.y);
-
   let position: Position;
 
-  // when the horizontal difference between the nodes is bigger, we use Position.Left or Position.Right for the handle
-  if (horizontalDiff > verticalDiff) {
-    position = centerA.x > centerB.x ? Position.Left : Position.Right;
-  } else {
-    // here the vertical difference between the nodes is bigger, so we use Position.Top or Position.Bottom for the handle
+  if (
+    segmentsIntersect(
+      nodeA.positionAbsolute!.x - 10,
+      nodeA.positionAbsolute!.x - 10 + nodeA.width! + 20,
+      nodeB.positionAbsolute!.x,
+      nodeB.positionAbsolute!.x + nodeB.width!,
+    )
+  ) {
     position = centerA.y > centerB.y ? Position.Top : Position.Bottom;
+  } else {
+    position = centerA.x > centerB.x ? Position.Left : Position.Right;
   }
 
   const [x, y] = getHandleCoordsByPosition(nodeA, position);
   return [x, y, position];
 }
 
-function getHandleCoordsByPosition(node, handlePosition) {
-  // all handles are from type source, that's why we use handleBounds.source here
-  const handle = node[internalsSymbol].handleBounds.source.find(h => h.position === handlePosition);
+function getHandleCoordsByPosition(node: Node, handlePosition: Position): Coords {
+  const handle = node[internalsSymbol]!.handleBounds!.source!.find(h => h.position === handlePosition);
+
+  if (!handle) {
+    throw new Error(`Handle with position ${handlePosition} not found on node ${node.id}`);
+  }
 
   let offsetX = handle.width / 2;
   let offsetY = handle.height / 2;
 
-  // this is a tiny detail to make the markerEnd of an edge visible.
-  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
   switch (handlePosition) {
     case Position.Left:
       offsetX = 0;
@@ -47,21 +58,20 @@ function getHandleCoordsByPosition(node, handlePosition) {
       break;
   }
 
-  const x = node.positionAbsolute.x + handle.x + offsetX;
-  const y = node.positionAbsolute.y + handle.y + offsetY;
+  const x = node.positionAbsolute!.x + handle.x + offsetX;
+  const y = node.positionAbsolute!.y + handle.y + offsetY;
 
   return [x, y];
 }
 
-function getNodeCenter(node) {
+function getNodeCenter(node: Node): { x: number; y: number } {
   return {
-    x: node.positionAbsolute.x + node.width / 2,
-    y: node.positionAbsolute.y + node.height / 2,
+    x: node.positionAbsolute!.x + node.width! / 2,
+    y: node.positionAbsolute!.y + node.height! / 2,
   };
 }
 
-// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source, target) {
+export function getEdgeParams(source: Node, target: Node) {
   const [sx, sy, sourcePos] = getParams(source, target);
   const [tx, ty, targetPos] = getParams(target, source);