feat(Map): Add highlighting for imperial space systems depends on faction

Fixes #11

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

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, forwardRef, MouseEvent, useCallback } from 'react';
+import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
 import ReactFlow, {
   Background,
   ConnectionMode,
@@ -94,6 +94,7 @@ interface MapCompProps {
   minimapClasses?: string;
   isShowMinimap?: boolean;
   onSystemContextMenu: (event: MouseEvent<Element>, systemId: string) => void;
+  showKSpaceBG?: boolean;
 }
 
 const MapComp = ({
@@ -105,6 +106,7 @@ const MapComp = ({
   onConnectionInfoClick,
   onSelectionContextMenu,
   isShowMinimap,
+  showKSpaceBG,
 }: MapCompProps) => {
   const [nodes, , onNodesChange] = useNodesState<SolarSystemRawType>(initialNodes);
   const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>[]>(initialEdges);
@@ -169,6 +171,13 @@ const MapComp = ({
     localStorage.setItem(SESSION_KEY.viewPort, JSON.stringify(viewport));
   };
 
+  useEffect(() => {
+    update(x => ({
+      ...x,
+      showKSpaceBG: showKSpaceBG,
+    }));
+  }, [showKSpaceBG, update]);
+
   return (
     <>
       <div className={classes.MapRoot}>

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

@@ -7,6 +7,7 @@ export type MapData = MapUnionTypes & {
   isConnecting: boolean;
   hoverNodeId: string | null;
   visibleNodes: Set<string>;
+  showKSpaceBG: boolean;
 };
 
 interface MapProviderProps {
@@ -27,6 +28,7 @@ const INITIAL_DATA: MapData = {
   connections: [],
   hoverNodeId: null,
   visibleNodes: new Set(),
+  showKSpaceBG: false,
 };
 
 export interface MapContextProps {
@@ -38,6 +40,7 @@ export interface MapContextProps {
 const MapContext = createContext<MapContextProps>({
   update: () => {},
   data: { ...INITIAL_DATA },
+  // @ts-ignore
   outCommand: async () => void 0,
 });
 

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

@@ -23,6 +23,62 @@ $tooltip-bg: #202020; // Темный фон для подсказок
   border-radius: 5px;
   position: relative;
   z-index: 1;
+  overflow: hidden;
+
+
+  &.Mataria, &.Amarria, &.Gallente, &.Caldaria {
+    &::Before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-size: cover;
+      background-position: 50% 50%;
+      z-index: -1;
+      background-repeat: no-repeat;
+      border-radius: 3px;
+    }
+  }
+
+  &.Mataria {
+    &::before {
+      background-image: url("/images/mataria.png");
+      opacity: 0.6;
+      background-position-x: -28px;
+      background-position-y: -3px;
+    }
+  }
+
+  &.Caldaria {
+    &::before {
+      background-image: url("/images/caldaria.png");
+      opacity: 0.6;
+      background-position-x: -16px;
+      background-position-y: -17px;
+    }
+  }
+
+  &.Amarria {
+    &::before {
+      opacity: 0.45;
+      background-image: url("/images/amarr.png");
+      background-position-x: 0px;
+      background-position-y: -1px;
+      width: calc(100% + 10px)
+    }
+  }
+
+  &.Gallente {
+    &::before {
+      opacity: 0.6;
+      background-image: url("/images/gallente.png");
+      background-position-x: -1px;
+      background-position-y: -10px;
+    }
+  }
+
 
   &.selected {
     border-color: $pastel-pink;

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

@@ -19,6 +19,14 @@ import { PrimeIcons } from 'primereact/api';
 import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
 import { OutCommand } from '@/hooks/Mapper/types';
 import { useDoubleClick } from '@/hooks/Mapper/hooks/useDoubleClick.ts';
+import { REGIONS_MAP, Spaces } from '@/hooks/Mapper/constants';
+
+const SpaceToClass: Record<string, string> = {
+  [Spaces.Caldari]: classes.Caldaria,
+  [Spaces.Matar]: classes.Mataria,
+  [Spaces.Amarr]: classes.Amarria,
+  [Spaces.Gallente]: classes.Gallente,
+};
 
 const sortedLabels = (labels: string[]) => {
   if (labels === null) {
@@ -50,6 +58,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
     statics,
     effect_name,
     region_name,
+    region_id,
     is_shattered,
     solar_system_name,
   } = data.system_static_info;
@@ -69,6 +78,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
       isConnecting,
       hoverNodeId,
       visibleNodes,
+      showKSpaceBG,
     },
     outCommand,
   } = useMapState();
@@ -114,6 +124,9 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
 
   const showHandlers = isConnecting || hoverNodeId === id;
 
+  const space = showKSpaceBG ? REGIONS_MAP[region_id] : '';
+  const regionClass = showKSpaceBG ? SpaceToClass[space] : null;
+
   return (
     <>
       {visible && (
@@ -147,7 +160,11 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
         </div>
       )}
 
-      <div className={clsx(classes.RootCustomNode, classes[STATUS_CLASSES[status]], { [classes.selected]: selected })}>
+      <div
+        className={clsx(classes.RootCustomNode, regionClass, classes[STATUS_CLASSES[status]], {
+          [classes.selected]: selected,
+        })}
+      >
         {visible && (
           <>
             <div className={classes.HeadRow}>
@@ -183,7 +200,13 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
               )}
 
               {!isWormhole && !customName && (
-                <div className="text-stone-400 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
+                <div
+                  className={clsx('text-stone-400 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5', {
+                    ['text-teal-100 font-bold']: space === Spaces.Caldari,
+                    ['text-yellow-100 font-bold']: space === Spaces.Amarr || space === Spaces.Matar,
+                    ['text-lime-200/80 font-bold']: space === Spaces.Gallente,
+                  })}
+                >
                   {region_name}
                 </div>
               )}

assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx

@@ -13,6 +13,8 @@ interface RightBarProps {
 export const RightBar = ({ onShowOnTheMap }: RightBarProps) => {
   const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
 
+  const isShowMinimap = interfaceSettings.isShowMinimap === undefined ? true : interfaceSettings.isShowMinimap;
+
   const handleAddCharacter = useCallback(() => {
     outCommand({
       type: OutCommand.addCharacter,
@@ -27,6 +29,13 @@ export const RightBar = ({ onShowOnTheMap }: RightBarProps) => {
     }));
   }, [setInterfaceSettings]);
 
+  const toggleKSpace = useCallback(() => {
+    setInterfaceSettings(x => ({
+      ...x,
+      isShowKSpace: !x.isShowKSpace,
+    }));
+  }, [setInterfaceSettings]);
+
   const toggleMenu = useCallback(() => {
     setInterfaceSettings(x => ({
       ...x,
@@ -67,19 +76,31 @@ export const RightBar = ({ onShowOnTheMap }: RightBarProps) => {
 
       <div className="flex flex-col items-center mb-2 gap-1">
         <WdTooltipWrapper
-          content={interfaceSettings.isShowMinimap ? 'Hide minimap' : 'Show minimap'}
+          content={
+            interfaceSettings.isShowKSpace ? 'Hide highlighting Imperial Space' : 'Show highlighting Imperial Space'
+          }
           position={TooltipPosition.left}
         >
+          <button
+            className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
+            type="button"
+            onClick={toggleKSpace}
+          >
+            {interfaceSettings.isShowKSpace ? (
+              <i className="pi pi-star-fill text-lg"></i>
+            ) : (
+              <i className="pi pi-star text-lg"></i>
+            )}
+          </button>
+        </WdTooltipWrapper>
+
+        <WdTooltipWrapper content={isShowMinimap ? 'Hide minimap' : 'Show minimap'} position={TooltipPosition.left}>
           <button
             className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
             type="button"
             onClick={toggleMinimap}
           >
-            {interfaceSettings.isShowMinimap ? (
-              <i className="pi pi-eye text-lg"></i>
-            ) : (
-              <i className="pi pi-eye-slash text-lg"></i>
-            )}
+            {isShowMinimap ? <i className="pi pi-eye text-lg"></i> : <i className="pi pi-eye-slash text-lg"></i>}
           </button>
         </WdTooltipWrapper>
 

assets/js/hooks/Mapper/components/mapWrapper/MapWrapper.tsx

@@ -24,7 +24,7 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
     update,
     outCommand,
     data: { selectedConnections, selectedSystems, hubs, systems },
-    interfaceSettings: { isShowMenu, isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap },
+    interfaceSettings: { isShowMenu, isShowMinimap = STORED_INTERFACE_DEFAULT_VALUES.isShowMinimap, isShowKSpace },
   } = useMapRootState();
 
   const { open, ...systemContextProps } = useContextMenuSystemHandlers({ systems, hubs, outCommand });
@@ -99,6 +99,7 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
         onSelectionContextMenu={handleSystemMultipleContext}
         minimapClasses={!isShowMenu ? classes.MiniMap : undefined}
         isShowMinimap={isShowMinimap}
+        showKSpaceBG={isShowKSpace}
       />
 
       {openSettings != null && (

assets/js/hooks/Mapper/constants.ts

@@ -5,3 +5,62 @@ export enum SESSION_KEY {
 }
 
 export const GRADIENT_MENU_ACTIVE_CLASSES = 'bg-gradient-to-br from-transparent/10 to-fuchsia-300/10';
+
+export enum Regions {
+  Derelik = 10000001,
+  TheForge = 10000002,
+  Lonetrek = 10000016,
+  SinqLaison = 10000032,
+  Aridia = 10000054,
+  BlackRise = 10000069,
+  TheBleakLands = 10000038,
+  TheCitadel = 10000033,
+  Devoid = 10000036,
+  Domain = 10000043,
+  Essence = 10000064,
+  Everyshore = 10000037,
+  Genesis = 10000067,
+  Heimatar = 10000030,
+  Kador = 10000052,
+  Khanid = 10000049,
+  KorAzor = 10000065,
+  Metropolis = 10000042,
+  MoldenHeath = 10000028,
+  Placid = 10000048,
+  Solitude = 10000044,
+  TashMurkon = 10000020,
+  VergeVendor = 10000068,
+}
+
+export enum Spaces {
+  'Caldari' = 'Caldari',
+  'Gallente' = 'Gallente',
+  'Matar' = 'Matar',
+  'Amarr' = 'Amarr',
+}
+
+export const REGIONS_MAP: Record<number, Spaces> = {
+  [Regions.Derelik]: Spaces.Amarr,
+  [Regions.TheForge]: Spaces.Caldari,
+  [Regions.Lonetrek]: Spaces.Caldari,
+  [Regions.SinqLaison]: Spaces.Gallente,
+  [Regions.Aridia]: Spaces.Amarr,
+  [Regions.BlackRise]: Spaces.Caldari,
+  [Regions.TheBleakLands]: Spaces.Amarr,
+  [Regions.TheCitadel]: Spaces.Caldari,
+  [Regions.Devoid]: Spaces.Amarr,
+  [Regions.Domain]: Spaces.Amarr,
+  [Regions.Essence]: Spaces.Gallente,
+  [Regions.Everyshore]: Spaces.Gallente,
+  [Regions.Genesis]: Spaces.Amarr,
+  [Regions.Heimatar]: Spaces.Matar,
+  [Regions.Kador]: Spaces.Amarr,
+  [Regions.Khanid]: Spaces.Amarr,
+  [Regions.KorAzor]: Spaces.Amarr,
+  [Regions.Metropolis]: Spaces.Matar,
+  [Regions.MoldenHeath]: Spaces.Matar,
+  [Regions.Placid]: Spaces.Gallente,
+  [Regions.Solitude]: Spaces.Gallente,
+  [Regions.TashMurkon]: Spaces.Amarr,
+  [Regions.VergeVendor]: Spaces.Gallente,
+};

assets/js/hooks/Mapper/mapRootProvider/MapRootProvider.tsx

@@ -30,11 +30,13 @@ const INITIAL_DATA: MapRootData = {
 type InterfaceStoredSettings = {
   isShowMenu: boolean;
   isShowMinimap: boolean;
+  isShowKSpace: boolean;
 };
 
 export const STORED_INTERFACE_DEFAULT_VALUES: InterfaceStoredSettings = {
   isShowMenu: false,
   isShowMinimap: true,
+  isShowKSpace: false,
 };
 
 export interface MapRootContextProps {
@@ -50,6 +52,7 @@ const MapRootContext = createContext<MapRootContextProps>({
   update: () => {},
   data: { ...INITIAL_DATA },
   mapRef: { current: null },
+  // @ts-ignore
   outCommand: async () => void 0,
   interfaceSettings: STORED_INTERFACE_DEFAULT_VALUES,
   setInterfaceSettings: () => null,