lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-12 02:35:42 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

System Kills cleanup (#166)

Browse Source 
* fix: styling and count of kills tooltip
This commit is contained in:
guarzo
2025-02-12 14:23:36 -07:00
committed by GitHub
parent cf7069b3b2
commit 70b589a359
13 changed files with 103 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemKillsCounter.tsx
View File

@@ -11,35 +11,28 @@ type KillsBookmarkTooltipProps = {
systemId: string; systemId: string;
className?: string; className?: string;
size?: TooltipSize; size?: TooltipSize;
timeRange?: number;
} & WithChildren & } & WithChildren &
WithClassName; WithClassName;
export const KillsCounter = ({ export const KillsCounter = ({ killsCount, systemId, className, children, size = 'xs' }: KillsBookmarkTooltipProps) => {
killsCount,
systemId,
className,
children,
size = 'xs',
timeRange = 1,
}: KillsBookmarkTooltipProps) => {
const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId }); const { isLoading, kills: detailedKills, systemNameMap } = useKillsCounter({ realSystemId: systemId });
if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null; if (!killsCount || detailedKills.length === 0 || !systemId || isLoading) return null;
const tooltipContent = ( const tooltipContent = (
<div style={{ width: '100%', minWidth: '300px', overflow: 'hidden' }}>
<SystemKillsContent <SystemKillsContent
kills={detailedKills} kills={detailedKills}
systemNameMap={systemNameMap} systemNameMap={systemNameMap}
compact={true} compact={true}
onlyOneSystem={true} onlyOneSystem={true}
autoSize={true} autoSize={true}
timeRange={timeRange} limit={killsCount}
/> />
</div>
); );
return ( return (
// @ts-ignore
<WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}> <WdTooltipWrapper content={tooltipContent} className={className} size={size} interactive={true}>
{children} {children}
</WdTooltipWrapper> </WdTooltipWrapper>

2
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKills.tsx
View File

@@ -91,10 +91,8 @@ export const SystemKills: React.FC = React.memo(() => {
) : ( ) : (
<div className="w-full h-full" style={{ height: '100%' }}> <div className="w-full h-full" style={{ height: '100%' }}>
<SystemKillsContent <SystemKillsContent
key={settings.compact ? 'compact' : 'normal'}
kills={filteredKills} kills={filteredKills}
systemNameMap={systemNameMap} systemNameMap={systemNameMap}
compact={settings.compact}
onlyOneSystem={!visible} onlyOneSystem={!visible}
timeRange={settings.timeRange} timeRange={settings.timeRange}
/> />

20
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.module.scss
View File

@@ -1,18 +1,12 @@
.TableRowCompact { .wrapper {
height: 8px; overflow-x: hidden;
max-height: 8px; box-sizing: border-box;
font-size: 12px !important;
line-height: 8px;
} }
.Table { .scrollerContent {
font-size: 12px; width: 100%;
border-collapse: collapse; box-sizing: border-box;
} overflow-x: hidden;
.Tooltip {
white-space: pre-line;
line-height: 1.2rem;
} }
.VirtualScroller { .VirtualScroller {

60
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/SystemKillsContent/SystemKillsContent.tsx
View File

@@ -2,57 +2,52 @@ import React, { useMemo, useRef, useEffect, useState } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import { DetailedKill } from '@/hooks/Mapper/types/kills'; import { DetailedKill } from '@/hooks/Mapper/types/kills';
import { VirtualScroller } from 'primereact/virtualscroller'; import { VirtualScroller } from 'primereact/virtualscroller';
import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsTemplate'; import { useSystemKillsItemTemplate } from '../hooks/useSystemKillsItemTemplate';
import classes from './SystemKillsContent.module.scss';
export interface SystemKillsContentProps { export interface SystemKillsContentProps {
kills: DetailedKill[]; kills: DetailedKill[];
systemNameMap: Record<string, string>; systemNameMap: Record<string, string>;
compact?: boolean;
onlyOneSystem?: boolean; onlyOneSystem?: boolean;
autoSize?: boolean; autoSize?: boolean;
timeRange: number; timeRange?: number;
limit?: number;
} }
export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
kills, kills,
systemNameMap, systemNameMap,
compact = false,
onlyOneSystem = false, onlyOneSystem = false,
autoSize = false, autoSize = false,
timeRange = 1, timeRange = 4,
limit,
}) => { }) => {
const processedKills = useMemo(() => { const processedKills = useMemo(() => {
const validKills = kills.filter(kill => kill.kill_time); const sortedKills = kills
.filter(k => k.kill_time)
const sortedKills = validKills.sort((a, b) => { .sort((a, b) => new Date(b.kill_time!).getTime() - new Date(a.kill_time!).getTime());
const timeA = a.kill_time ? new Date(a.kill_time).getTime() : 0;
const timeB = b.kill_time ? new Date(b.kill_time).getTime() : 0;
return timeB - timeA;
});
if (limit !== undefined) {
return sortedKills.slice(0, limit);
} else {
const now = Date.now(); const now = Date.now();
const cutoff = now - timeRange * 60 * 60 * 1000; const cutoff = now - timeRange * 60 * 60 * 1000;
return sortedKills.filter(kill => { return sortedKills.filter(k => new Date(k.kill_time!).getTime() >= cutoff);
if (!kill.kill_time) return false; }
const killTime = new Date(kill.kill_time).getTime(); }, [kills, timeRange, limit]);
return killTime >= cutoff;
});
}, [kills, timeRange]);
const itemSize = compact ? 35 : 50; const itemSize = 35;
const computedHeight = autoSize ? Math.max(processedKills.length, 1) * itemSize + 5 : undefined; const computedHeight = autoSize ? Math.max(processedKills.length, 1) * itemSize : undefined;
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any const scrollerRef = useRef<VirtualScroller | null>(null);
const scrollerRef = useRef<any>(null);
const [containerHeight, setContainerHeight] = useState<number>(0); const [containerHeight, setContainerHeight] = useState<number>(0);
useEffect(() => { useEffect(() => {
if (!autoSize && containerRef.current) { if (!autoSize && containerRef.current) {
const measure = () => { const measure = () => {
const newHeight = containerRef.current?.clientHeight ?? 0; const newHeight = containerRef.current?.clientHeight || 0;
setContainerHeight(newHeight); setContainerHeight(newHeight);
scrollerRef.current?.refresh?.();
}; };
measure(); measure();
@@ -67,18 +62,27 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
} }
}, [autoSize]); }, [autoSize]);
const itemTemplate = useSystemKillsItemTemplate(systemNameMap, compact, onlyOneSystem); const itemTemplate = useSystemKillsItemTemplate(systemNameMap, onlyOneSystem);
const scrollerHeight = autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%';
return ( return (
<div ref={autoSize ? undefined : containerRef} className="w-full h-full"> <div ref={autoSize ? undefined : containerRef} className={clsx('w-full h-full', classes.wrapper)}>
<VirtualScroller <VirtualScroller
ref={autoSize ? undefined : scrollerRef} ref={autoSize ? undefined : scrollerRef}
items={processedKills} items={processedKills}
itemSize={itemSize} itemSize={itemSize}
itemTemplate={itemTemplate} itemTemplate={itemTemplate}
autoSize={autoSize} autoSize={autoSize}
style={{ height: autoSize ? `${computedHeight}px` : containerHeight ? `${containerHeight}px` : '100%' }} scrollWidth="100%"
className={clsx('w-full h-full overflow-x-hidden overflow-y-auto custom-scrollbar select-none')} style={{ height: scrollerHeight }}
className={clsx('w-full h-full custom-scrollbar select-none overflow-x-hidden overflow-y-auto', {
[classes.VirtualScroller]: !autoSize,
})}
pt={{
content: {
className: classes.scrollerContent,
},
}}
/> />
</div> </div>
); );

214
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/FullKillRow.tsx
View File

@@ -1,214 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import { DetailedKill } from '@/hooks/Mapper/types/kills';
import {
formatISK,
formatTimeMixed,
zkillLink,
getAttackerSubscript,
buildVictimImageUrls,
buildAttackerImageUrls,
getPrimaryLogoAndTooltip,
getAttackerPrimaryImageAndTooltip,
} from '../helpers';
import { VictimRowSubInfo } from './VictimRowSubInfo';
import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper';
import classes from './SystemKillRow.module.scss';
import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
export interface FullKillRowProps {
killDetails: DetailedKill;
systemName: string;
onlyOneSystem: boolean;
}
export const FullKillRow: React.FC<FullKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
const {
killmail_id = 0,
// Victim data
victim_char_name = '',
victim_alliance_ticker = '',
victim_corp_ticker = '',
victim_ship_name = '',
victim_char_id = 0,
victim_corp_id = 0,
victim_alliance_id = 0,
victim_ship_type_id = 0,
victim_corp_name = '',
victim_alliance_name = '',
// Attacker data
final_blow_char_id = 0,
final_blow_char_name = '',
final_blow_alliance_ticker = '',
final_blow_corp_ticker = '',
final_blow_corp_name = '',
final_blow_alliance_name = '',
final_blow_corp_id = 0,
final_blow_alliance_id = 0,
final_blow_ship_name = '',
final_blow_ship_type_id = 0,
total_value = 0,
kill_time = '',
} = killDetails || {};
const attackerIsNpc = final_blow_char_id === 0;
const victimAffiliation = victim_alliance_ticker || victim_corp_ticker || null;
const attackerAffiliation = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
// Build victim images
const { victimPortraitUrl, victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
victim_char_id,
victim_ship_type_id,
victim_corp_id,
victim_alliance_id,
});
// Build attacker images
const { attackerPortraitUrl, attackerCorpLogoUrl, attackerAllianceLogoUrl } = buildAttackerImageUrls({
final_blow_char_id,
final_blow_corp_id,
final_blow_alliance_id,
});
// Primary image for victim
const { url: victimPrimaryImageUrl, tooltip: victimPrimaryTooltip } = getPrimaryLogoAndTooltip(
victimAllianceLogoUrl,
victimCorpLogoUrl,
victim_alliance_name,
victim_corp_name,
'Victim',
);
// Primary image for attacker
const { url: attackerPrimaryImageUrl, tooltip: attackerPrimaryTooltip } = getAttackerPrimaryImageAndTooltip(
attackerIsNpc,
attackerAllianceLogoUrl,
attackerCorpLogoUrl,
final_blow_alliance_name,
final_blow_corp_name,
final_blow_ship_type_id,
);
const attackerSubscript = getAttackerSubscript(killDetails);
return (
<div className={clsx(classes.killRowContainer, 'w-full text-sm py-1 px-2', 'flex flex-col sm:flex-row')}>
<div className="w-full flex flex-col sm:flex-row items-start gap-2">
{/* Victim Section */}
<div className="flex items-start gap-1 min-w-0">
{victimShipUrl && (
<div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
<a
href={zkillLink('kill', killmail_id)}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<img
src={victimShipUrl}
alt="VictimShip"
className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/>
</a>
</div>
)}
{victimPrimaryImageUrl && (
<WdTooltipWrapper content={victimPrimaryTooltip} position={TooltipPosition.top}>
<div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
<a
href={zkillLink('kill', killmail_id)}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<img
src={victimPrimaryImageUrl}
alt="VictimPrimaryLogo"
className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/>
</a>
</div>
</WdTooltipWrapper>
)}
<VictimRowSubInfo
victimCharName={victim_char_name}
victimCharacterId={victim_char_id}
victimPortraitUrl={victimPortraitUrl}
/>
<div className="flex flex-col flex-1 text-stone-200 leading-4 min-w-0 overflow-hidden">
<div className="truncate font-semibold">
{victim_char_name}
{victimAffiliation && <span className="ml-1 text-stone-400">/ {victimAffiliation}</span>}
</div>
<div className="truncate text-stone-300">
{victim_ship_name}
{killValueFormatted && (
<>
<span className="ml-1 text-stone-400">/</span>
<span className="ml-1 text-green-400">{killValueFormatted}</span>
</>
)}
</div>
<div className="truncate text-stone-400">{!onlyOneSystem && systemName && <span>{systemName}</span>}</div>
</div>
</div>
<div className="flex items-start gap-1 min-w-0 sm:ml-auto">
<div className="flex flex-col flex-1 items-end leading-4 min-w-0 overflow-hidden text-right">
{!attackerIsNpc && (
<div className="truncate font-semibold">
{final_blow_char_name}
{attackerAffiliation && <span className="ml-1 text-stone-400">/ {attackerAffiliation}</span>}
</div>
)}
{!attackerIsNpc && final_blow_ship_name && (
<div className="truncate text-stone-300">{final_blow_ship_name}</div>
)}
<div className="truncate text-red-400">{killTimeAgo}</div>
</div>
{!attackerIsNpc && attackerPortraitUrl && final_blow_char_id &&final_blow_char_id > 0 && (
<div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
<a
href={zkillLink('character', final_blow_char_id)}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<img
src={attackerPortraitUrl}
alt="AttackerPortrait"
className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/>
</a>
</div>
)}
{attackerPrimaryImageUrl && (
<WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
<div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
<a
href={zkillLink('kill', killmail_id)}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<img
src={attackerPrimaryImageUrl}
alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'}
className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/>
{attackerSubscript && (
<span className={clsx(attackerSubscript.cssClass, classes.attackerCountLabel)}>
{attackerSubscript.label}
</span>
)}
</a>
</div>
</WdTooltipWrapper>
)}
</div>
</div>
</div>
);
};

3
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillItemTemplate.tsx
View File

@@ -5,7 +5,6 @@ import clsx from 'clsx';
export function KillItemTemplate( export function KillItemTemplate(
systemNameMap: Record<string, string>, systemNameMap: Record<string, string>,
compact: boolean,
onlyOneSystem: boolean, onlyOneSystem: boolean,
kill: DetailedKill, kill: DetailedKill,
options: VirtualScrollerTemplateOptions, options: VirtualScrollerTemplateOptions,
@@ -15,7 +14,7 @@ export function KillItemTemplate(
return ( return (
<div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}> <div style={{ height: `${options.props.itemSize}px` }} className={clsx({ 'bg-gray-900': options.odd })}>
<KillRow killDetails={kill} systemName={systemName} isCompact={compact} onlyOneSystem={onlyOneSystem} /> <KillRow killDetails={kill} systemName={systemName} onlyOneSystem={onlyOneSystem} />
</div> </div>
); );
} }

0
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillRow.module.scss → assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillRowDetail.module.scss
View File

36
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/CompactKillRow.tsx → assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/KillRowDetail.tsx
View File

@@ -11,8 +11,8 @@ import {
getPrimaryLogoAndTooltip, getPrimaryLogoAndTooltip,
getAttackerPrimaryImageAndTooltip, getAttackerPrimaryImageAndTooltip,
} from '../helpers'; } from '../helpers';
import { WdTooltipWrapper } from '../../../../ui-kit/WdTooltipWrapper'; import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';
import classes from './SystemKillRow.module.scss'; import classes from './KillRowDetail.module.scss';
import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit'; import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
export interface CompactKillRowProps { export interface CompactKillRowProps {
@@ -21,10 +21,10 @@ export interface CompactKillRowProps {
onlyOneSystem: boolean; onlyOneSystem: boolean;
} }
export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => { export const KillRowDetail: React.FC<CompactKillRowProps> = ({ killDetails, systemName, onlyOneSystem }) => {
const { const {
killmail_id = 0, killmail_id = 0,
// Victim // Victim data
victim_char_name = 'Unknown Pilot', victim_char_name = 'Unknown Pilot',
victim_alliance_ticker = '', victim_alliance_ticker = '',
victim_corp_ticker = '', victim_corp_ticker = '',
@@ -35,7 +35,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
victim_corp_id = 0, victim_corp_id = 0,
victim_alliance_id = 0, victim_alliance_id = 0,
victim_ship_type_id = 0, victim_ship_type_id = 0,
// Attacker // Attacker data
final_blow_char_id = 0, final_blow_char_id = 0,
final_blow_char_name = '', final_blow_char_name = '',
final_blow_alliance_ticker = '', final_blow_alliance_ticker = '',
@@ -51,11 +51,12 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
const attackerIsNpc = final_blow_char_id === 0; const attackerIsNpc = final_blow_char_id === 0;
// Define victim affiliation ticker.
const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker'; const victimAffiliationTicker = victim_alliance_ticker || victim_corp_ticker || 'No Ticker';
const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null; const killValueFormatted = total_value != null && total_value > 0 ? `${formatISK(total_value)} ISK` : null;
const attackerName = attackerIsNpc ? '' : final_blow_char_name;
const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago'; const killTimeAgo = kill_time ? formatTimeMixed(kill_time) : '0h ago';
const attackerSubscript = getAttackerSubscript(killDetails); const attackerSubscript = getAttackerSubscript(killDetails);
const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({ const { victimCorpLogoUrl, victimAllianceLogoUrl, victimShipUrl } = buildVictimImageUrls({
@@ -88,6 +89,12 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
final_blow_ship_type_id, final_blow_ship_type_id,
); );
// Define attackerTicker to use the alliance ticker if available, otherwise the corp ticker.
const attackerTicker = attackerIsNpc ? '' : final_blow_alliance_ticker || final_blow_corp_ticker || '';
// For the attacker image link: if the attacker is not an NPC, link to the character page; otherwise, link to the kill page.
const attackerLink = attackerIsNpc ? zkillLink('kill', killmail_id) : zkillLink('character', final_blow_char_id);
return ( return (
<div <div
className={clsx( className={clsx(
@@ -95,6 +102,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
'text-xs whitespace-nowrap overflow-hidden leading-none', 'text-xs whitespace-nowrap overflow-hidden leading-none',
)} )}
> >
{/* Victim Section */}
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{victimShipUrl && ( {victimShipUrl && (
<div className="relative shrink-0 w-8 h-8 overflow-hidden"> <div className="relative shrink-0 w-8 h-8 overflow-hidden">
@@ -106,7 +114,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
> >
<img <img
src={victimShipUrl} src={victimShipUrl}
alt="VictimShip" alt="Victim Ship"
className={clsx(classes.killRowImage, 'w-full h-full object-contain')} className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/> />
</a> </a>
@@ -122,7 +130,7 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
> >
<img <img
src={victimPrimaryLogoUrl} src={victimPrimaryLogoUrl}
alt="VictimPrimaryLogo" alt="Victim Primary Logo"
className={clsx(classes.killRowImage, 'w-full h-full object-contain')} className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/> />
</a> </a>
@@ -146,10 +154,10 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
</div> </div>
<div className="flex items-center ml-auto gap-2"> <div className="flex items-center ml-auto gap-2">
<div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]"> <div className="flex flex-col items-end flex-1 min-w-0 overflow-hidden text-right leading-[1rem]">
{!attackerIsNpc && (attackerName || attackerTicker) && ( {!attackerIsNpc && (final_blow_char_name || attackerTicker) && (
<div className="truncate text-stone-200"> <div className="truncate text-stone-200">
{attackerName} {final_blow_char_name}
{attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>} {!attackerIsNpc && attackerTicker && <span className="ml-1 text-stone-400">/ {attackerTicker}</span>}
</div> </div>
)} )}
<div className="truncate text-stone-400"> <div className="truncate text-stone-400">
@@ -165,14 +173,14 @@ export const CompactKillRow: React.FC<CompactKillRowProps> = ({ killDetails, sys
{attackerPrimaryImageUrl && ( {attackerPrimaryImageUrl && (
<WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}> <WdTooltipWrapper content={attackerPrimaryTooltip} position={TooltipPosition.top}>
<a <a
href={zkillLink('kill', killmail_id)} href={attackerLink}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="relative block shrink-0 w-8 h-8 overflow-hidden" className="relative block shrink-0 w-8 h-8 overflow-hidden"
> >
<img <img
src={attackerPrimaryImageUrl} src={attackerPrimaryImageUrl}
alt={attackerIsNpc ? 'NpcShip' : 'AttackerPrimaryLogo'} alt={attackerIsNpc ? 'NPC Ship' : 'Attacker Primary Logo'}
className={clsx(classes.killRowImage, 'w-full h-full object-contain')} className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/> />
{attackerSubscript && ( {attackerSubscript && (

16
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsRow.tsx
View File

@@ -1,25 +1,15 @@
import React from 'react'; import React from 'react';
import { DetailedKill } from '@/hooks/Mapper/types/kills'; import { DetailedKill } from '@/hooks/Mapper/types/kills';
import { CompactKillRow } from './CompactKillRow'; import { KillRowDetail } from './KillRowDetail.tsx';
import { FullKillRow } from './FullKillRow';
export interface KillRowProps { export interface KillRowProps {
killDetails: DetailedKill; killDetails: DetailedKill;
systemName: string; systemName: string;
isCompact?: boolean;
onlyOneSystem?: boolean; onlyOneSystem?: boolean;
} }
const KillRowComponent: React.FC<KillRowProps> = ({ const KillRowComponent: React.FC<KillRowProps> = ({ killDetails, systemName, onlyOneSystem = false }) => {
killDetails, return <KillRowDetail killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
systemName,
isCompact = false,
onlyOneSystem = false,
}) => {
if (isCompact) {
return <CompactKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
}
return <FullKillRow killDetails={killDetails} systemName={systemName} onlyOneSystem={onlyOneSystem} />;
}; };
export const KillRow = React.memo(KillRowComponent); export const KillRow = React.memo(KillRowComponent);

53
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/SystemKillsSettingsDialog.tsx
View File

@@ -1,14 +1,14 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Dialog } from 'primereact/dialog'; import { Dialog } from 'primereact/dialog';
import { Button } from 'primereact/button'; import { Button } from 'primereact/button';
import { InputSwitch } from 'primereact/inputswitch'; import { WdImgButton } from '@/hooks/Mapper/components/ui-kit';
import { WdImgButton, SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
import { PrimeIcons } from 'primereact/api'; import { PrimeIcons } from 'primereact/api';
import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings'; import { useKillsWidgetSettings } from '../hooks/useKillsWidgetSettings';
import { import {
AddSystemDialog, AddSystemDialog,
SearchOnSubmitCallback, SearchOnSubmitCallback,
} from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog'; } from '@/hooks/Mapper/components/mapInterface/components/AddSystemDialog';
import { SystemView, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
interface KillsSettingsDialogProps { interface KillsSettingsDialogProps {
visible: boolean; visible: boolean;
@@ -18,7 +18,6 @@ interface KillsSettingsDialogProps {
export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => { export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visible, setVisible }) => {
const [globalSettings, setGlobalSettings] = useKillsWidgetSettings(); const [globalSettings, setGlobalSettings] = useKillsWidgetSettings();
const localRef = useRef({ const localRef = useRef({
compact: globalSettings.compact,
showAll: globalSettings.showAll, showAll: globalSettings.showAll,
whOnly: globalSettings.whOnly, whOnly: globalSettings.whOnly,
excludedSystems: globalSettings.excludedSystems || [], excludedSystems: globalSettings.excludedSystems || [],
@@ -31,7 +30,6 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
localRef.current = { localRef.current = {
compact: globalSettings.compact,
showAll: globalSettings.showAll, showAll: globalSettings.showAll,
whOnly: globalSettings.whOnly, whOnly: globalSettings.whOnly,
excludedSystems: globalSettings.excludedSystems || [], excludedSystems: globalSettings.excludedSystems || [],
@@ -41,14 +39,6 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
} }
}, [visible, globalSettings]); }, [visible, globalSettings]);
const handleCompactChange = useCallback((checked: boolean) => {
localRef.current = {
...localRef.current,
compact: checked,
};
forceRender(n => n + 1);
}, []);
const handleWHChange = useCallback((checked: boolean) => { const handleWHChange = useCallback((checked: boolean) => {
localRef.current = { localRef.current = {
...localRef.current, ...localRef.current,
@@ -57,8 +47,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
forceRender(n => n + 1); forceRender(n => n + 1);
}, []); }, []);
// Updated handler to set time range as a number: 1 or 24 const handleTimeRangeChange = useCallback((newTimeRange: number) => {
const handleTimeRangeChange = useCallback((newTimeRange: 1 | 24) => {
localRef.current = { localRef.current = {
...localRef.current, ...localRef.current,
timeRange: newTimeRange, timeRange: newTimeRange,
@@ -99,22 +88,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
const localData = localRef.current; const localData = localRef.current;
const excluded = localData.excludedSystems || []; const excluded = localData.excludedSystems || [];
const timeRangeOptions = [4, 12, 24];
return ( return (
<Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}> <Dialog header="Kills Settings" visible={visible} style={{ width: '440px' }} draggable={false} onHide={handleHide}>
<div className="flex flex-col gap-3 p-2.5"> <div className="flex flex-col gap-3 p-2.5">
<div className="flex items-center gap-2">
<input
type="checkbox"
id="kills-compact-mode"
checked={localData.compact}
onChange={e => handleCompactChange(e.target.checked)}
/>
<label htmlFor="kills-compact-mode" className="cursor-pointer">
Use compact mode
</label>
</div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
@@ -127,13 +105,25 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
</label> </label>
</div> </div>
{/* Time Range Toggle using InputSwitch */} <div className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<span className="text-sm">Time Range:</span> <span className="text-sm">Time Range:</span>
<InputSwitch checked={localData.timeRange === 24} onChange={e => handleTimeRangeChange(e.value ? 24 : 1)} /> <div className="flex flex-wrap gap-2">
<span className="text-sm">{localData.timeRange === 24 ? '24 Hours' : '1 Hour'}</span> {timeRangeOptions.map(option => (
<label key={option} className="cursor-pointer flex items-center gap-1">
<input
type="radio"
name="timeRange"
value={option}
checked={localData.timeRange === option}
onChange={() => handleTimeRangeChange(option)}
/>
<span className="text-sm">{option} Hours</span>
</label>
))}
</div>
</div> </div>
{/* Excluded Systems */}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<label className="text-sm text-stone-400">Excluded Systems</label> <label className="text-sm text-stone-400">Excluded Systems</label>
@@ -146,8 +136,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
{excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>} {excluded.length === 0 && <div className="text-stone-500 text-xs italic">No systems excluded.</div>}
{excluded.map(sysId => ( {excluded.map(sysId => (
<div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs"> <div key={sysId} className="flex items-center justify-between border-b border-stone-600 py-1 px-1 text-xs">
<SystemView systemId={sysId.toString()} hideRegion compact /> <SystemView systemId={sysId.toString()} hideRegion />
<WdImgButton <WdImgButton
className={PrimeIcons.TRASH} className={PrimeIcons.TRASH}
onClick={() => handleRemoveSystem(sysId)} onClick={() => handleRemoveSystem(sysId)}

39
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/components/VictimRowSubInfo.tsx
View File

@@ -1,39 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import { zkillLink } from '../helpers';
import classes from './SystemKillRow.module.scss';
interface VictimRowSubInfoProps {
victimCharacterId: number | null;
victimPortraitUrl: string | null;
victimCharName?: string;
}
export const VictimRowSubInfo: React.FC<VictimRowSubInfoProps> = ({
victimCharacterId = 0,
victimPortraitUrl,
victimCharName,
}) => {
if (!victimPortraitUrl || !victimCharacterId || victimCharacterId <= 0) {
return null;
}
return (
<div className="flex items-start gap-1">
<div className="relative shrink-0 w-12 h-12 sm:w-14 sm:h-14 overflow-hidden">
<a
href={zkillLink('character', victimCharacterId)}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<img
src={victimPortraitUrl}
alt={victimCharName || 'Victim Portrait'}
className={clsx(classes.killRowImage, 'w-full h-full object-contain')}
/>
</a>
</div>
</div>
);
};

4
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useKillsWidgetSettings.ts
View File

@@ -2,7 +2,6 @@ import { useMemo, useCallback } from 'react';
import useLocalStorageState from 'use-local-storage-state'; import useLocalStorageState from 'use-local-storage-state';
export interface KillsWidgetSettings { export interface KillsWidgetSettings {
compact: boolean;
showAll: boolean; showAll: boolean;
whOnly: boolean; whOnly: boolean;
excludedSystems: number[]; excludedSystems: number[];
@@ -11,11 +10,10 @@ export interface KillsWidgetSettings {
} }
export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = { export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
compact: true,
showAll: false, showAll: false,
whOnly: true, whOnly: true,
excludedSystems: [], excludedSystems: [],
version: 1, version: 2,
timeRange: 1, timeRange: 1,
}; };

10
assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKillsTemplate.tsx → assets/js/hooks/Mapper/components/mapInterface/widgets/SystemKills/hooks/useSystemKillsItemTemplate.ts
View File

@@ -4,14 +4,10 @@ import { VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
import { DetailedKill } from '@/hooks/Mapper/types/kills'; import { DetailedKill } from '@/hooks/Mapper/types/kills';
import { KillItemTemplate } from '../components/KillItemTemplate'; import { KillItemTemplate } from '../components/KillItemTemplate';
export function useSystemKillsItemTemplate( export function useSystemKillsItemTemplate(systemNameMap: Record<string, string>, onlyOneSystem: boolean) {
systemNameMap: Record<string, string>,
compact: boolean,
onlyOneSystem: boolean,
) {
return useCallback( return useCallback(
(kill: DetailedKill, options: VirtualScrollerTemplateOptions) => (kill: DetailedKill, options: VirtualScrollerTemplateOptions) =>
KillItemTemplate(systemNameMap, compact, onlyOneSystem, kill, options), KillItemTemplate(systemNameMap, onlyOneSystem, kill, options),
[systemNameMap, compact, onlyOneSystem], [systemNameMap, onlyOneSystem],
); );
} }