Merge pull request #558 from wanderer-industries/show-passage-direction

fix(Map): Add ability to see character passage direction in list of p…

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/Connections.module.scss

@@ -3,7 +3,7 @@
 }
 
 .SidebarOnTheMap {
-  width: 400px;
+  width: 460px;
   padding: 0 !important;
 
   :global {

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

@@ -5,6 +5,7 @@ import {
   ConnectionType,
   OutCommand,
   Passage,
+  PassageWithSourceTarget,
   SolarSystemConnection,
 } from '@/hooks/Mapper/types';
 import clsx from 'clsx';
@@ -19,7 +20,7 @@ import { PassageCard } from './PassageCard';
 
 const sortByDate = (a: string, b: string) => new Date(a).getTime() - new Date(b).getTime();
 
-const itemTemplate = (item: Passage, options: VirtualScrollerTemplateOptions) => {
+const itemTemplate = (item: PassageWithSourceTarget, options: VirtualScrollerTemplateOptions) => {
   return (
     <div
       className={clsx(classes.CharacterRow, 'w-full box-border', {
@@ -35,7 +36,7 @@ const itemTemplate = (item: Passage, options: VirtualScrollerTemplateOptions) =>
 };
 
 export interface ConnectionPassagesContentProps {
-  passages: Passage[];
+  passages: PassageWithSourceTarget[];
 }
 
 export const ConnectionPassages = ({ passages = [] }: ConnectionPassagesContentProps) => {
@@ -113,6 +114,20 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
     [outCommand],
   );
 
+  const preparedPassages = useMemo(() => {
+    if (!cnInfo) {
+      return [];
+    }
+
+    return passages
+      .sort((a, b) => sortByDate(b.inserted_at, a.inserted_at))
+      .map<PassageWithSourceTarget>(x => ({
+        ...x,
+        source: x.from ? cnInfo.target : cnInfo.source,
+        target: x.from ? cnInfo.source : cnInfo.target,
+      }));
+  }, [cnInfo, passages]);
+
   useEffect(() => {
     if (!selectedConnection) {
       return;
@@ -145,12 +160,14 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
           <InfoDrawer title="Connection" rightSide>
             <div className="flex justify-end gap-2 items-center">
               <SystemView
+                showCustomName
                 systemId={cnInfo.source}
                 className={clsx(classes.InfoTextSize, 'select-none text-center')}
                 hideRegion
               />
               <span className="pi pi-angle-double-right text-stone-500 text-[15px]"></span>
               <SystemView
+                showCustomName
                 systemId={cnInfo.target}
                 className={clsx(classes.InfoTextSize, 'select-none text-center')}
                 hideRegion
@@ -184,7 +201,7 @@ export const Connections = ({ selectedConnection, onHide }: OnTheMapProps) => {
         {/* separator */}
         <div className="w-full h-px bg-neutral-800 px-0.5"></div>
 
-        <ConnectionPassages passages={passages} />
+        <ConnectionPassages passages={preparedPassages} />
       </div>
     </Sidebar>
   );

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.module.scss

@@ -35,6 +35,10 @@
   &.ThreeColumns {
     grid-template-columns: auto 1fr auto;
   }
+
+  &.FourColumns {
+    grid-template-columns: auto auto 1fr auto;
+  }
 }
 
 .CardBorderLeftIsOwn {

assets/js/hooks/Mapper/components/mapRootContent/components/Connections/PassageCard/PassageCard.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import classes from './PassageCard.module.scss';
-import { Passage } from '@/hooks/Mapper/types';
-import { TimeAgo } from '@/hooks/Mapper/components/ui-kit';
+import { PassageWithSourceTarget } from '@/hooks/Mapper/types';
+import { SystemView, TimeAgo, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
 import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
 import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts';
 import { useMemo } from 'react';
@@ -11,7 +11,7 @@ type PassageCardType = {
   showShipName?: boolean;
   // showSystem?: boolean;
   // useSystemsCache?: boolean;
-} & Passage;
+} & PassageWithSourceTarget;
 
 const SHIP_NAME_RX = /u'|'/g;
 export const getShipName = (name: string) => {
@@ -25,7 +25,7 @@ export const getShipName = (name: string) => {
     });
 };
 
-export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardType) => {
+export const PassageCard = ({ inserted_at, character: char, ship, source, target, from }: PassageCardType) => {
   const isOwn = false;
 
   const insertedAt = useMemo(() => {
@@ -37,7 +37,39 @@ export const PassageCard = ({ inserted_at, character: char, ship }: PassageCardT
     <div className={clsx(classes.CharacterCard, 'w-full text-xs', 'flex flex-col box-border')}>
       <div className="flex flex-col justify-between px-2 py-1 gap-1">
         {/*here icon and other*/}
-        <div className={clsx(classes.CharRow, classes.ThreeColumns)}>
+        <div className={clsx(classes.CharRow, classes.FourColumns)}>
+          <WdTooltipWrapper
+            position={TooltipPosition.top}
+            content={
+              <div className="flex justify-between gap-2 items-center">
+                <SystemView
+                  showCustomName
+                  systemId={source}
+                  className="select-none text-center !text-[12px]"
+                  hideRegion
+                />
+                <span className="pi pi-angle-double-right text-stone-500 text-[15px]"></span>
+                <SystemView
+                  showCustomName
+                  systemId={target}
+                  className="select-none text-center !text-[12px]"
+                  hideRegion
+                />
+              </div>
+            }
+          >
+            <div
+              className={clsx(
+                'transition-all transform ease-in duration-200',
+                'pi text-stone-500 text-[15px] w-[35px] h-[33px] !flex items-center justify-center border rounded-[6px]',
+                {
+                  ['pi-angle-double-right !text-orange-400 border-orange-400 hover:bg-orange-400/30']: from,
+                  ['pi-angle-double-left !text-stone-500/70 border-stone-500/70 hover:bg-stone-500/30']: !from,
+                },
+              )}
+            />
+          </WdTooltipWrapper>
+
           {/*portrait*/}
           <span
             className={clsx(classes.EveIcon, classes.CharIcon, 'wd-bg-default')}

assets/js/hooks/Mapper/types/connectionPassages.ts

@@ -6,11 +6,17 @@ export type PassageLimitedCharacterType = Pick<
 >;
 
 export type Passage = {
+  from: boolean;
   inserted_at: string; // Date
   ship: ShipTypeRaw;
   character: PassageLimitedCharacterType;
 };
 
+export type PassageWithSourceTarget = {
+  source: string;
+  target: string;
+} & Passage;
+
 export type ConnectionInfoOutput = {
   marl_eol_time: string;
 };