fix(Map): Refactor Local - show ship name, change placement of ship name. Refactor On the Map - show corp and ally logo. Fixed problem with ellipsis at long character and ship names.

2025-12-02 05:52:55 +00:00 · 2025-04-26 16:22:24 +03:00
parent 99d68dfc0e
commit fac60f7ddd
15 changed files with 307 additions and 95 deletions
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx
@@ -17,13 +17,13 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';

-let render = 0;
+// let render = 0;
 export const SolarSystemNodeDefault = memo((props: NodeProps<MapSolarSystemType>) => {
  const nodeVars = useSolarSystemNode(props);
  const { localCounterCharacters } = useLocalCounter(nodeVars);
  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);

-  console.log('JOipP', `render ${nodeVars.id}`, render++);
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);

  return (
    <>
--- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
+++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeTheme.tsx
@@ -17,13 +17,13 @@ import { KillsCounter } from './SolarSystemKillsCounter';
 import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
 import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts';

-let render = 0;
+// let render = 0;
 export const SolarSystemNodeTheme = memo((props: NodeProps<MapSolarSystemType>) => {
  const nodeVars = useSolarSystemNode(props);
  const { localCounterCharacters } = useLocalCounter(nodeVars);
  const localKillsCount = useNodeKillsCount(nodeVars.solarSystemId, nodeVars.killsCount);

-  console.log('JOipP', `render ${nodeVars.id}`, render++);
+  // console.log('JOipP', `render ${nodeVars.id}`, render++);

  return (
    <>
--- a/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx
+++ b/assets/js/hooks/Mapper/components/mapInterface/widgets/LocalCharacters/components/LocalCharactersItemTemplate/LocalCharactersItemTemplate.tsx
@@ -22,7 +22,7 @@ export const LocalCharactersItemTemplate = ({ showShipName, ...options }: LocalC
      )}
      style={{ height: `${options.props.itemSize}px` }}
    >
-      <CharacterCard showShipName={showShipName} {...options} />
+      <CharacterCard showShipName={showShipName} showTicker {...options} />
    </div>
  );
 };
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.module.scss
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.module.scss
@@ -3,7 +3,7 @@
 }

 .SidebarOnTheMap {
-  width: 400px;
+  width: 500px;
  padding: 0 !important;

  :global {
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/OnTheMap/OnTheMap.tsx
@@ -1,15 +1,17 @@
 import classes from './OnTheMap.module.scss';
 import { Sidebar } from 'primereact/sidebar';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
 import { sortCharacters } from '@/hooks/Mapper/components/mapInterface/helpers/sortCharacters.ts';
 import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
 import clsx from 'clsx';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
-import { CharacterCard, WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
+import { CharacterCard, TooltipPosition, WdCheckbox, WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
 import useLocalStorageState from 'use-local-storage-state';
 import { useMapCheckPermissions, useMapGetOption } from '@/hooks/Mapper/mapRootProvider/hooks/api';
 import { UserPermission } from '@/hooks/Mapper/types/permissions.ts';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';

 type WindowLocalSettingsType = {
  compact: boolean;
@@ -33,7 +35,7 @@ const itemTemplate = (item: CharacterTypeRaw & WithIsOwnCharacter, options: Virt
      })}
      style={{ height: options.props.itemSize + 'px' }}
    >
-      <CharacterCard showSystem {...item} />
+      <CharacterCard showCorporationLogo showAllyLogo showSystem showTicker {...item} />
    </div>
  );
 };
@@ -48,6 +50,8 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
    data: { characters, userCharacters },
  } = useMapRootState();

+  const [searchVal, setSearchVal] = useState('');
+
  const [settings, setSettings] = useLocalStorageState<WindowLocalSettingsType>('window:onTheMap:settings', {
    defaultValue: STORED_DEFAULT_VALUES,
  });
@@ -61,13 +65,54 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
  );

  const sorted = useMemo(() => {
-    const out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+    let out = characters.map(x => ({ ...x, isOwn: userCharacters.includes(x.eve_id) })).sort(sortCharacters);
+
+    if (searchVal !== '') {
+      out = out.filter(x => {
+        const normalized = searchVal.toLowerCase();
+
+        if (x.name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_name.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.corporation_ticker.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.alliance_ticker?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        if (x.ship?.ship_type_info.group_name?.toLowerCase().includes(normalized)) {
+          return true;
+        }
+
+        return false;
+      });
+    }
+
    if (showOffline && !settings.hideOffline) {
      return out;
    }

    return out.filter(x => x.online);
-  }, [showOffline, characters, settings.hideOffline, userCharacters]);
+  }, [showOffline, searchVal, characters, settings.hideOffline, userCharacters]);

  return (
    <Sidebar
@@ -79,7 +124,30 @@ export const OnTheMap = ({ show, onHide }: OnTheMapProps) => {
      icons={<></>}
    >
      <div className={clsx(classes.SidebarContent, '')}>
-        <div className={'flex justify-end items-center gap-2 px-3'}>
+        <div className={'flex justify-between items-center gap-2 px-2 pt-1'}>
+          <IconField>
+            {searchVal.length > 0 && (
+              <WdImgButton
+                className="pi pi-trash"
+                textSize={WdImageSize.large}
+                tooltip={{
+                  content: 'Clear',
+                  className: 'pi p-input-icon',
+                  position: TooltipPosition.top,
+                }}
+                onClick={() => setSearchVal('')}
+              />
+            )}
+            <InputText
+              id="label"
+              aria-describedby="label"
+              autoComplete="off"
+              value={searchVal}
+              placeholder="Type to search"
+              onChange={e => setSearchVal(e.target.value)}
+            />
+          </IconField>
+
          {showOffline && (
            <WdCheckbox
              size="m"
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingCharactersList.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingCharactersList.tsx
@@ -44,7 +44,7 @@ export const TrackingCharactersList = () => {
        bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
        headerClassName="[&_div]:ml-2"
        body={row => {
-          return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+          return <CharacterCard showCorporationLogo showTicker isOwn {...row.character} />;
        }}
      />
    </DataTable>
--- a/assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingSettings.tsx
+++ b/assets/js/hooks/Mapper/components/mapRootContent/components/TrackingDialog/TrackingSettings.tsx
@@ -10,8 +10,8 @@ const renderValCharacterTemplate = (row: TrackingCharacter | undefined) => {
  }

  return (
-    <div className="py-1">
-      <CharacterCard compact showShipName={false} showSystem={false} isOwn {...row.character} />
+    <div className="py-1 w-full">
+      <CharacterCard compact isOwn {...row.character} />
    </div>
  );
 };
@@ -21,7 +21,11 @@ const renderCharacterTemplate = (row: TrackingCharacter | undefined) => {
    return <div className="h-[33px] flex items-center">Character is not selected</div>;
  }

-  return <CharacterCard showShipName={false} showSystem={false} isOwn {...row.character} />;
+  return (
+    <div className="w-full">
+      <CharacterCard isOwn {...row.character} />
+    </div>
+  );
 };

 export const TrackingSettings = () => {
--- a/assets/js/hooks/Mapper/components/ui-kit/CharacterCard/CharacterCard.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/CharacterCard/CharacterCard.tsx
@@ -4,15 +4,24 @@ import { SystemView } from '@/hooks/Mapper/components/ui-kit/SystemView';
 import { CharacterTypeRaw, WithIsOwnCharacter } from '@/hooks/Mapper/types';
 import { Commands } from '@/hooks/Mapper/types/mapHandlers';
 import { emitMapEvent } from '@/hooks/Mapper/events';
-import { CharacterPortrait, CharacterPortraitSize } from '@/hooks/Mapper/components/ui-kit';
+import {
+  TooltipPosition,
+  WdEveEntityPortrait,
+  WdEveEntityPortraitSize,
+  WdEveEntityPortraitType,
+  WdTooltipWrapper,
+} from '@/hooks/Mapper/components/ui-kit';
 import { isDocked } from '@/hooks/Mapper/helpers/isDocked.ts';
 import classes from './CharacterCard.module.scss';

 type CharacterCardProps = {
  compact?: boolean;
  showSystem?: boolean;
+  showTicker?: boolean;
  showShipName?: boolean;
  useSystemsCache?: boolean;
+  showCorporationLogo?: boolean;
+  showAllyLogo?: boolean;
 } & CharacterTypeRaw &
  WithIsOwnCharacter;

@@ -29,6 +38,9 @@ export const CharacterCard = ({
  isOwn,
  showSystem,
  showShipName,
+  showCorporationLogo,
+  showAllyLogo,
+  showTicker,
  useSystemsCache,
  ...char
 }: CharacterCardProps) => {
@@ -46,26 +58,80 @@ export const CharacterCard = ({

  if (compact) {
    return (
-      <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
+      <div className="text-xs box-border w-full" onClick={handleSelect}>
        <div className="w-full flex items-center gap-1 relative">
-          <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w18} />
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w18} />
+
+          {showCorporationLogo && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id.toString()}
+                size={WdEveEntityPortraitSize.w18}
+              />
+            </WdTooltipWrapper>
+          )}
+
          {isDocked(char.location) && <span className={classes.Docked} />}
-          <div className="flex flex-grow overflow-hidden text-left">
-            <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-              <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
-              <span className="text-gray-400">
-                {!locationShown && showShipName && shipNameText ? `- ${shipNameText}` : `[${tickerText}]`}
+          <div className="flex flex-grow-[2] overflow-hidden text-left w-[50px]">
+            <div className="flex min-w-0">
+              <span
+                className={clsx(
+                  'overflow-hidden text-ellipsis whitespace-nowrap',
+                  isOwn ? 'text-orange-400' : 'text-gray-200',
+                )}
+                title={char.name}
+              >
+                {char.name}
              </span>
+              {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
            </div>
          </div>
+
          {shipType && (
-            <div
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
-              style={{ maxWidth: '120px' }}
-              title={shipType}
-            >
-              {shipType}
-            </div>
+            <>
+              {!showShipName && (
+                <div
+                  className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+                  style={{ maxWidth: '120px' }}
+                  title={shipType}
+                >
+                  {shipType}
+                </div>
+              )}
+              {showShipName && (
+                <div className="flex flex-grow-[1] justify-end w-[50px]">
+                  <div className="min-w-0">
+                    <div
+                      className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap flex-shrink-0"
+                      style={{ maxWidth: '120px' }}
+                      title={shipNameText}
+                    >
+                      {shipNameText}
+                    </div>
+                  </div>
+                </div>
+              )}
+              {char.ship && (
+                <WdTooltipWrapper position={TooltipPosition.top} content={char.ship.ship_type_info.name}>
+                  <WdEveEntityPortrait
+                    type={WdEveEntityPortraitType.ship}
+                    eveId={char.ship.ship_type_id.toString()}
+                    size={WdEveEntityPortraitSize.w18}
+                  />
+                </WdTooltipWrapper>
+              )}
+            </>
          )}
        </div>
      </div>
@@ -75,11 +141,41 @@ export const CharacterCard = ({
  return (
    <div className={clsx('w-full text-xs box-border')} onClick={handleSelect}>
      <div className="w-full flex items-center gap-2">
-        <CharacterPortrait characterEveId={char.eve_id} size={CharacterPortraitSize.w33} />
-        <div className="flex flex-col flex-grow overflow-hidden">
-          <div className="overflow-hidden text-ellipsis whitespace-nowrap">
-            <span className={clsx(isOwn ? 'text-orange-400' : 'text-gray-200')}>{char.name}</span>{' '}
-            <span className="text-gray-400">[{tickerText}]</span>
+        <div className="flex items-center gap-1">
+          <WdEveEntityPortrait eveId={char.eve_id} size={WdEveEntityPortraitSize.w33} />
+
+          {showCorporationLogo && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.corporation_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.corporation}
+                eveId={char.corporation_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+
+          {showAllyLogo && char.alliance_id && (
+            <WdTooltipWrapper position={TooltipPosition.top} content={char.alliance_name}>
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.alliance}
+                eveId={char.alliance_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            </WdTooltipWrapper>
+          )}
+        </div>
+
+        <div className="flex flex-col flex-grow overflow-hidden  w-[50px]">
+          <div className="flex min-w-0">
+            <span
+              className={clsx(
+                'overflow-hidden text-ellipsis whitespace-nowrap',
+                isOwn ? 'text-orange-400' : 'text-gray-200',
+              )}
+            >
+              {char.name}
+            </span>
+            {showTicker && <span className="flex-shrink-0 text-gray-400 ml-1">[{tickerText}]</span>}
          </div>
          {locationShown ? (
            <div className="text-gray-300 text-xs overflow-hidden text-ellipsis whitespace-nowrap">
@@ -97,15 +193,30 @@ export const CharacterCard = ({
          )}
        </div>
        {shipType && (
-          <div className="flex-shrink-0 self-start">
-            <div
-              className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap"
-              style={{ maxWidth: '200px' }}
-              title={shipType}
-            >
-              {shipType}
+          <>
+            <div className="flex flex-col flex-shrink-0 items-end self-start">
+              <div
+                className="text-gray-300 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                title={shipType}
+              >
+                {shipType}
+              </div>
+              <div
+                className="flex justify-end text-stone-500 overflow-hidden text-ellipsis whitespace-nowrap max-w-[200px]"
+                title={shipNameText}
+              >
+                {shipNameText}
+              </div>
            </div>
-          </div>
+
+            {char.ship && (
+              <WdEveEntityPortrait
+                type={WdEveEntityPortraitType.ship}
+                eveId={char.ship.ship_type_id.toString()}
+                size={WdEveEntityPortraitSize.w33}
+              />
+            )}
+          </>
        )}
      </div>
    </div>
--- a/assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/CharacterPortrait.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/CharacterPortrait.tsx
@@ -1,47 +0,0 @@
-import clsx from 'clsx';
-import { WithClassName } from '@/hooks/Mapper/types/common.ts';
-
-export enum CharacterPortraitSize {
-  default,
-  w18,
-  w33,
-}
-
-// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN CharacterPortraitSize
-const getSize = (size: CharacterPortraitSize) => {
-  switch (size) {
-    case CharacterPortraitSize.w18:
-      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
-    case CharacterPortraitSize.w33:
-      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
-    default:
-      return '';
-  }
-};
-
-export type CharacterPortraitProps = {
-  characterEveId: string | undefined;
-  size?: CharacterPortraitSize;
-} & WithClassName;
-
-export const CharacterPortrait = ({
-  characterEveId,
-  size = CharacterPortraitSize.default,
-  className,
-}: CharacterPortraitProps) => {
-  if (characterEveId == null) {
-    return null;
-  }
-
-  return (
-    <span
-      className={clsx(
-        getSize(size),
-        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
-        'wd-bg-default',
-        className,
-      )}
-      style={{ backgroundImage: `url(https://images.evetech.net/characters/${characterEveId}/portrait)` }}
-    />
-  );
-};
--- a/assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/index.ts
+++ b/assets/js/hooks/Mapper/components/ui-kit/CharacterPortrait/index.ts
@@ -1 +0,0 @@
-export * from './CharacterPortrait';
--- a/assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/WdEveEntityPortrait.tsx
+++ b/assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/WdEveEntityPortrait.tsx
@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+
+export enum WdEveEntityPortraitType {
+  character,
+  corporation,
+  alliance,
+  ship,
+}
+
+export enum WdEveEntityPortraitSize {
+  default,
+  w18,
+  w33,
+}
+
+export const getLogo = (type: WdEveEntityPortraitType, eveId: string | number) => {
+  switch (type) {
+    case WdEveEntityPortraitType.alliance:
+      return `url(https://images.evetech.net/alliances/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.corporation:
+      return `url(https://images.evetech.net/corporations/${eveId}/logo?size=64)`;
+    case WdEveEntityPortraitType.character:
+      return `url(https://images.evetech.net/characters/${eveId}/portrait)`;
+    case WdEveEntityPortraitType.ship:
+      return `url(https://images.evetech.net/types/${eveId}/icon)`;
+  }
+
+  return '';
+};
+
+// TODO IF YOU NEED ANOTHER ONE SIZE PLEASE ADD IT HERE and IN WdEveEntityPortraitSize
+const getSize = (size: WdEveEntityPortraitSize) => {
+  switch (size) {
+    case WdEveEntityPortraitSize.w18:
+      return 'min-w-[18px] min-h-[18px] w-[18px] h-[18px]';
+    case WdEveEntityPortraitSize.w33:
+      return 'min-w-[33px] min-h-[33px] w-[33px] h-[33px]';
+    default:
+      return '';
+  }
+};
+
+export type WdEveEntityPortraitProps = {
+  eveId: string | undefined;
+  type?: WdEveEntityPortraitType;
+  size?: WdEveEntityPortraitSize;
+} & WithClassName;
+
+export const WdEveEntityPortrait = ({
+  eveId,
+  size = WdEveEntityPortraitSize.default,
+  type = WdEveEntityPortraitType.character,
+  className,
+}: WdEveEntityPortraitProps) => {
+  if (eveId == null) {
+    return null;
+  }
+
+  return (
+    <span
+      className={clsx(
+        getSize(size),
+        'flex transition-[border-color,opacity] duration-250 border border-gray-800 bg-transparent rounded-none',
+        'wd-bg-default',
+        className,
+      )}
+      style={{ backgroundImage: getLogo(type, eveId) }}
+    />
+  );
+};
--- a/assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/index.ts
+++ b/assets/js/hooks/Mapper/components/ui-kit/WdEveEntityPortrait/index.ts
@@ -0,0 +1 @@
+export * from './WdEveEntityPortrait.tsx';
--- a/assets/js/hooks/Mapper/components/ui-kit/index.ts
+++ b/assets/js/hooks/Mapper/components/ui-kit/index.ts
@@ -14,6 +14,6 @@ export * from './TimeAgo';
 export * from './WdTooltipWrapper';
 export * from './WdResponsiveCheckBox';
 export * from './WdRadioButton';
-export * from './CharacterPortrait';
+export * from './WdEveEntityPortrait';
 export * from './WdTransition';
 export * from './LoadingWrapper';