fix(Map): add ability set the size of wormhole and mark connection with label

2025-12-12 02:35:42 +00:00 · 2024-12-17 13:33:37 +03:00
parent cbc1b6b5c8
commit aadc53c90e
7 changed files with 108 additions and 56 deletions
--- a/assets/js/hooks/Mapper/components/hooks/useSystemInfo.ts
+++ b/assets/js/hooks/Mapper/components/hooks/useSystemInfo.ts
@@ -14,9 +14,6 @@ export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {

  const { systems: systemStatics } = useLoadSystemStatic({ systems: [systemId] });

-  // eslint-disable-next-line no-console
-  console.log('JOipP', `systemStatics`, systemStatics);
-
  return useMemo(() => {
    const staticInfo = systemStatics.get(parseInt(systemId));
    const dynamicInfo = getSystemById(systems, systemId);
--- a/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/ContextMenuConnection/ContextMenuConnection.tsx
@@ -6,7 +6,14 @@ import { Edge } from '@reactflow/core/dist/esm/types/edges';
 import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeStatus } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
 import classes from './ContextMenuConnection.module.scss';
-import { MASS_STATE_NAMES, MASS_STATE_NAMES_ORDER } from '@/hooks/Mapper/components/map/constants.ts';
+import {
+  MASS_STATE_NAMES,
+  MASS_STATE_NAMES_ORDER,
+  SHIP_SIZES_NAMES,
+  SHIP_SIZES_NAMES_ORDER,
+  SHIP_SIZES_NAMES_SHORT,
+  SHIP_SIZES_SIZE,
+} from '@/hooks/Mapper/components/map/constants.ts';

 export interface ContextMenuConnectionProps {
  contextMenuRef: RefObject<ContextMenu>;
@@ -48,10 +55,6 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
              icon: PrimeIcons.CLOCK,
              command: onChangeTimeState,
            },
-          ]
-        : []),
-      ...(isWormhole
-        ? [
            {
              label: `Frigate`,
              className: clsx({
@@ -60,13 +63,9 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
              icon: PrimeIcons.CLOUD,
              command: () =>
                onChangeShipSizeStatus(
-                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.normal : ShipSizeStatus.small,
+                  edge.data?.ship_size_type === ShipSizeStatus.small ? ShipSizeStatus.large : ShipSizeStatus.small,
                ),
            },
-          ]
-        : []),
-      ...(isWormhole
-        ? [
            {
              label: `Save mass`,
              className: clsx({
@@ -75,9 +74,7 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
              icon: PrimeIcons.LOCK,
              command: () => onToggleMassSave(!edge.data?.locked),
            },
-          ]
-        : []),
-      ...(isWormhole && !isFrigateSize
+            ...(!isFrigateSize
              ? [
                  {
                    label: `Mass status`,
@@ -92,13 +89,36 @@ export const ContextMenuConnection: React.FC<ContextMenuConnectionProps> = ({
                  },
                ]
              : []),
+
+            {
+              label: `Ship Size`,
+              icon: PrimeIcons.CLOUD,
+              items: SHIP_SIZES_NAMES_ORDER.map(x => ({
+                label: (
+                  <div className="grid grid-cols-[20px_120px_1fr_40px] gap-2 items-center">
+                    <div className="text-[12px] font-bold text-stone-400">{SHIP_SIZES_NAMES_SHORT[x]}</div>
+                    <div>{SHIP_SIZES_NAMES[x]}</div>
+                    <div></div>
+                    <div className="flex justify-end whitespace-nowrap text-[12px] font-bold text-stone-500">
+                      {SHIP_SIZES_SIZE[x]} t.
+                    </div>
+                  </div>
+                ) as unknown as string, // TODO my lovely kostyl
+                className: clsx({
+                  [classes.SelectedItem]: edge.data?.ship_size_type === x,
+                }),
+                command: () => onChangeShipSizeStatus(x),
+              })),
+            },
+          ]
+        : []),
      {
        label: 'Disconnect',
        icon: PrimeIcons.TRASH,
        command: onDeleteConnection,
      },
    ];
-  }, [edge, onChangeTimeState, onDeleteConnection, onChangeMassState, onChangeShipSizeStatus]);
+  }, [edge, onChangeTimeState, onDeleteConnection, onChangeShipSizeStatus, onToggleMassSave, onChangeMassState]);

  return (
    <>
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemEdge/SolarSystemEdge.tsx
@@ -8,6 +8,7 @@ import { ConnectionType, MassState, ShipSizeStatus, SolarSystemConnection, TimeS
 import { PrimeIcons } from 'primereact/api';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
+import { SHIP_SIZES_DESCRIPTION, SHIP_SIZES_NAMES_SHORT } from '@/hooks/Mapper/components/map/constants.ts';

 const MAP_TRANSLATES: Record<string, string> = {
  [Position.Top]: 'translate(-48%, 0%)',
@@ -30,6 +31,14 @@ const MAP_OFFSETS: Record<string, { x: number; y: number }> = {
  [Position.Right]: { x: 0, y: 0 },
 };

+export const SHIP_SIZES_COLORS = {
+  [ShipSizeStatus.small]: 'bg-indigo-400',
+  [ShipSizeStatus.medium]: 'bg-cyan-500',
+  [ShipSizeStatus.large]: '',
+  [ShipSizeStatus.freight]: 'bg-lime-400',
+  [ShipSizeStatus.capital]: 'bg-red-400',
+};
+
 export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }: EdgeProps<SolarSystemConnection>) => {
  const sourceNode = useStore(useCallback(store => store.nodeInternals.get(source), [source]));
  const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target]));
@@ -137,6 +146,19 @@ export const SolarSystemEdge = ({ id, source, target, markerEnd, style, data }:
              <span className={clsx(PrimeIcons.LOCK, classes.icon)} />
            </WdTooltipWrapper>
          )}
+
+          {isWormhole && data.ship_size_type !== ShipSizeStatus.large && (
+            <WdTooltipWrapper
+              content={SHIP_SIZES_DESCRIPTION[data.ship_size_type]}
+              className={clsx(
+                classes.LinkLabel,
+                'pointer-events-auto rounded opacity-100 cursor-auto text-neutral-900 font-bold',
+                SHIP_SIZES_COLORS[data.ship_size_type],
+              )}
+            >
+              {SHIP_SIZES_NAMES_SHORT[data.ship_size_type]}
+            </WdTooltipWrapper>
+          )}
        </div>
      </EdgeLabelRenderer>
    </>
--- a/assets/js/hooks/Mapper/components/map/constants.ts
+++ b/assets/js/hooks/Mapper/components/map/constants.ts
@@ -1,4 +1,4 @@
-import { ConnectionType, MassState } from '@/hooks/Mapper/types';
+import { ConnectionType, MassState, ShipSizeStatus } from '@/hooks/Mapper/types';

 export enum SOLAR_SYSTEM_CLASS_IDS {
  ccp1 = -1,
@@ -727,16 +727,41 @@ export const MASS_STATE_NAMES = {
  [MassState.verge]: 'Verge of collapse',
 };

-// export const SHIP_SIZES_NAMES_ORDER = [
-//   ShipSizeStatus.small,
-//   ShipSizeStatus.normal,
-//   // ShipSizeStatus.large,
-//   // ShipSizeStatus.capital,
-// ];
-//
-// export const SHIP_SIZES_NAMES = {
-//   [ShipSizeStatus.small]: 'Frigate',
-//   [ShipSizeStatus.normal]: 'Normal',
-//   // [ShipSizeStatus.large]: 'Normal',
-//   // [ShipSizeStatus.capital]: 'Normal',
-// };
+export const SHIP_SIZES_NAMES_ORDER = [
+  ShipSizeStatus.small,
+  ShipSizeStatus.medium,
+  ShipSizeStatus.large,
+  ShipSizeStatus.freight,
+  ShipSizeStatus.capital,
+];
+
+export const SHIP_SIZES_NAMES = {
+  [ShipSizeStatus.small]: 'Frigate',
+  [ShipSizeStatus.medium]: 'Medium',
+  [ShipSizeStatus.large]: 'Normal',
+  [ShipSizeStatus.freight]: 'Huge',
+  [ShipSizeStatus.capital]: 'Capital',
+};
+export const SHIP_SIZES_SIZE = {
+  [ShipSizeStatus.small]: '5K',
+  [ShipSizeStatus.medium]: '62K',
+  [ShipSizeStatus.large]: '375K',
+  [ShipSizeStatus.freight]: '1M',
+  [ShipSizeStatus.capital]: '2M',
+};
+
+export const SHIP_SIZES_DESCRIPTION = {
+  [ShipSizeStatus.small]: 'Frigate wormhole - up to Destroyer | 5K t.',
+  [ShipSizeStatus.medium]: 'Cruise wormhole - up to Battlecruiser | 62K t.',
+  [ShipSizeStatus.large]: 'Large wormhole - up to Battleship | 375K t.',
+  [ShipSizeStatus.freight]: 'Huge wormhole - up to Freighter | 1M t.',
+  [ShipSizeStatus.capital]: 'Capital wormhole - up to Capital | 2M t.',
+};
+
+export const SHIP_SIZES_NAMES_SHORT = {
+  [ShipSizeStatus.small]: 'S',
+  [ShipSizeStatus.medium]: 'M',
+  [ShipSizeStatus.large]: 'L',
+  [ShipSizeStatus.freight]: 'H',
+  [ShipSizeStatus.capital]: 'XL',
+};
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/MapSettings/MapSettings.tsx
@@ -58,11 +58,11 @@ const SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [

 const CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
  { prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked signatures' },
+  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
 ];

 const UI_CHECKBOXES_PROPS: CheckboxesList = [
  { prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
-  { prop: InterfaceStoredSettingsProps.isThickConnections, label: 'Thicker connections' },
  { prop: InterfaceStoredSettingsProps.isShowBackgroundPattern, label: 'Show background pattern' },
  { prop: InterfaceStoredSettingsProps.isSoftBackground, label: 'Enable soft background' },
 ];
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect/SignatureWormholeTypeSelect.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect/SignatureWormholeTypeSelect.tsx
@@ -21,9 +21,6 @@ const getPossibleWormholes = (systemStatic: SolarSystemStaticInfoRaw, wormholes:
    return x.src.some(x => {
      const [group, type] = x.split('-');

-      // eslint-disable-next-line no-console
-      console.log('JOipP', `group, type`, group, type);
-
      if (type === 'shattered') {
        return systemStatic.is_shattered && group === spawnClassGroup;
      }
@@ -32,11 +29,6 @@ const getPossibleWormholes = (systemStatic: SolarSystemStaticInfoRaw, wormholes:
    });
  });

-  // eslint-disable-next-line no-console
-  console.log('JOipP', `possibleWHTypes`, possibleWHTypes);
-
-  // debugger;
-
  return {
    statics: possibleWHTypes
      .filter(x => x.respawn.some(y => y === Respawn.static))
--- a/assets/js/hooks/Mapper/types/connection.ts
+++ b/assets/js/hooks/Mapper/types/connection.ts
@@ -14,16 +14,12 @@ export enum TimeStatus {
  eol,
 }

-// export enum ShipSizeStatus {
-//   small, // frigates, destroyers - less than 5K t
-//   medium, // less than 20K t
-//   large, // less than 375K t
-//   capital, // less than 1.8M t
-// }
-
 export enum ShipSizeStatus {
-  small, // frigates, destroyers - less than 5K t
-  normal,
+  small = 0, // frigates, destroyers - less than 5K t
+  medium = 1, // less than 62K t
+  large = 2, // less than 375K t
+  freight = 3, // less than 1M t
+  capital = 4, // less than 1.8M t
 }

 export type SolarSystemConnection = {