fix(Map): Fix icons of main, follow and shattered (#321)

assets/js/hooks/Mapper/components/characters/Characters.module.scss

@@ -1,38 +1,3 @@
-.MainCharacter,
-.FollowingCharacter {
-  &::before, &::after {
-    content: " ";
-    display: inline-block;
-    width: 11px;
-    height: 11px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-    position: absolute;
-    z-index: 1;
-    overflow: hidden;
-    border-radius: 1px;
-  }
-}
-
-.MainCharacter {
-  &::before {
-    background-image: url(/images/73_16_247.png);
-    left: 22px;
-    top: 0px;
-    transform: rotateZ(90deg);
-  }
-}
-
-.FollowingCharacter {
-  &::after {
-    background-image: url(/images/73_16_241.png);
-    left: 22px;
-    top: 22px;
-    transform: rotateZ(180deg);
-  }
-}
-
 .Docked {
   content: " ";
   display: inline-block;

assets/js/hooks/Mapper/components/characters/Characters.tsx

@@ -7,6 +7,7 @@ import { emitMapEvent } from '@/hooks/Mapper/events';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import classes from './Characters.module.scss';
 import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
+import { PrimeIcons } from 'primereact/api';
 
 interface CharactersProps {
   data: CharacterTypeRaw[];
@@ -34,18 +35,35 @@ export const Characters = ({ data }: CharactersProps) => {
     >
       <div
         className={clsx(
+          'overflow-hidden relative',
           'flex w-[35px] h-[35px] rounded-[4px] border-[1px] border-solid bg-transparent cursor-pointer',
           'transition-colors duration-250',
           {
-            ['overflow-hidden relative']: true,
             ['border-stone-800/90']: !character.online,
             ['border-lime-600/70']: character.online,
-            [classes.MainCharacter]: mainCharacterEveId === character.eve_id,
-            [classes.FollowingCharacter]: followingCharacterEveId === character.eve_id,
           },
         )}
         title={character.name}
       >
+        {mainCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[2px] left-[22px] w-[9px] h-[9px]',
+              'text-yellow-500 text-[9px] rounded-[1px] z-10',
+              'pi',
+              PrimeIcons.STAR_FILL,
+            )}
+          />
+        )}
+        {followingCharacterEveId === character.eve_id && (
+          <span
+            className={clsx(
+              'absolute top-[23px] left-[22px] w-[10px] h-[10px]',
+              'text-sky-300 text-[10px] rounded-[1px] z-10',
+              'pi pi-angle-double-right',
+            )}
+          />
+        )}
         {isDocked(character.location) && <div className={classes.Docked} />}
         <div
           className={clsx(

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

@@ -355,3 +355,15 @@ $tooltip-bg: #202020;
     }
   }
 }
+
+.ShatteredIcon {
+  position: relative;
+  //top: -1px;
+  left: -1px;
+
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  background-image: url(/images/chart-network-svgrepo-com.svg)
+}

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

@@ -4,7 +4,7 @@ import { Handle, NodeProps, Position } from 'reactflow';
 import clsx from 'clsx';
 import classes from './SolarSystemNodeDefault.module.scss';
 import { PrimeIcons } from 'primereact/api';
-import { useLocalCounter, useSolarSystemNode, useNodeKillsCount } from '../../hooks';
+import { useLocalCounter, useNodeKillsCount, useSolarSystemNode } from '../../hooks';
 import {
   EFFECT_BACKGROUND_STYLES,
   MARKER_BOOKMARK_BG_STYLES,
@@ -14,6 +14,8 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 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';
 
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
@@ -31,8 +33,10 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
           )}
 
           {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
@@ -40,7 +44,7 @@ export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >

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

@@ -14,6 +14,8 @@ import { WormholeClassComp } from '@/hooks/Mapper/components/map/components/Worm
 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';
 
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
   const nodeVars = useSolarSystemNode(props);
@@ -31,8 +33,10 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
           )}
 
           {nodeVars.isShattered && (
-            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered)}>
+            <div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.shattered, '!pr-[2px]')}>
-              <span className={clsx('pi pi-chart-pie', classes.icon)} />
+              <WdTooltipWrapper content="Shattered" position={TooltipPosition.top}>
+                <span className={clsx('block w-[10px] h-[10px]', classes.ShatteredIcon)} />
+              </WdTooltipWrapper>
             </div>
           )}
 
@@ -40,7 +44,7 @@ export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>)
             <KillsCounter
               killsCount={localKillsCount}
               systemId={nodeVars.solarSystemId}
-              size="lg"
+              size={TooltipSize.lg}
               killsActivityType={nodeVars.killsActivityType}
               className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES[nodeVars.killsActivityType!])}
             >

assets/js/hooks/Mapper/mapRootProvider/hooks/api/useMapInit.ts

@@ -9,23 +9,25 @@ export const useMapInit = () => {
   const { addSystemStatic } = useLoadSystemStatic({ systems: [] });
 
   return useCallback(
-    ({
+    (props: CommandInit) => {
-      systems,
+      const {
-      system_signatures,
+        systems,
-      connections,
+        system_signatures,
-      effects,
+        connections,
-      wormholes,
+        effects,
-      system_static_infos,
+        wormholes,
-      characters,
+        system_static_infos,
-      user_characters,
+        characters,
-      present_characters,
+        user_characters,
-      hubs,
+        present_characters,
-      user_permissions,
+        hubs,
-      options,
+        user_permissions,
-      is_subscription_active,
+        options,
-      main_character_eve_id,
+        is_subscription_active,
-      following_character_eve_id,
+        main_character_eve_id,
-    }: CommandInit) => {
+        following_character_eve_id,
+      } = props;
+
       const updateData: Partial<MapRootData> = {};
 
       if (wormholes) {
@@ -87,7 +89,7 @@ export const useMapInit = () => {
         updateData.mainCharacterEveId = main_character_eve_id;
       }
 
-      if (following_character_eve_id) {
+      if ('following_character_eve_id' in props) {
         updateData.followingCharacterEveId = following_character_eve_id;
       }
 

assets/static/images/chart-network-svgrepo-com.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+