feat: allow filtering of k-space kills (#147)

This commit is contained in:
guarzo
2025-02-05 00:01:46 -07:00
committed by GitHub
parent 97f1808fb5
commit fc41573e70
4 changed files with 53 additions and 11 deletions

View File

@@ -6,6 +6,7 @@ import { KillsHeader } from './components/SystemKillsHeader';
import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings'; import { useKillsWidgetSettings } from './hooks/useKillsWidgetSettings';
import { useSystemKills } from './hooks/useSystemKills'; import { useSystemKills } from './hooks/useSystemKills';
import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog'; import { KillsSettingsDialog } from './components/SystemKillsSettingsDialog';
import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace';
export const SystemKills: React.FC = () => { export const SystemKills: React.FC = () => {
const { const {
@@ -37,10 +38,26 @@ export const SystemKills: React.FC = () => {
const isNothingSelected = !systemId && !visible; const isNothingSelected = !systemId && !visible;
const showLoading = isLoading && kills.length === 0; const showLoading = isLoading && kills.length === 0;
const filteredKills = useMemo(() => {
if (!settings.whOnly) return kills;
return kills.filter(kill => {
const system = systems.find(sys => sys.system_static_info.solar_system_id === kill.solar_system_id);
if (!system) {
console.warn(`System with id ${kill.solar_system_id} not found.`);
return false;
}
return isWormholeSpace(system.system_static_info.system_class);
});
}, [kills, settings.whOnly, systems]);
return ( return (
<div className="h-full flex flex-col min-h-0"> <div className="h-full flex flex-col min-h-0">
<div className="flex flex-col flex-1 min-h-0"> <div className="flex flex-col flex-1 min-h-0">
<Widget label={<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />}> <Widget
label={
<KillsHeader systemId={systemId} onOpenSettings={() => setSettingsDialogVisible(true)} />
}
>
{!isSubscriptionActive && ( {!isSubscriptionActive && (
<div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm"> <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
Kills available with &#39;Active&#39; map subscription only (contact map administrators) Kills available with &#39;Active&#39; map subscription only (contact map administrators)
@@ -66,7 +83,10 @@ export const SystemKills: React.FC = () => {
</div> </div>
)} )}
{!isNothingSelected && !showLoading && !error && (!kills || kills.length === 0) && ( {!isNothingSelected &&
!showLoading &&
!error &&
(!filteredKills || filteredKills.length === 0) && (
<div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm"> <div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
No kills found No kills found
</div> </div>
@@ -76,7 +96,7 @@ export const SystemKills: React.FC = () => {
<div className="flex-1 flex flex-col overflow-y-auto"> <div className="flex-1 flex flex-col overflow-y-auto">
<SystemKillsContent <SystemKillsContent
key={settings.compact ? 'compact' : 'normal'} key={settings.compact ? 'compact' : 'normal'}
kills={kills} kills={filteredKills}
systemNameMap={systemNameMap} systemNameMap={systemNameMap}
compact={settings.compact} compact={settings.compact}
onlyOneSystem={!visible} onlyOneSystem={!visible}

View File

@@ -28,7 +28,7 @@ export const SystemKillsContent: React.FC<SystemKillsContentProps> = ({
<div <div
className={clsx( className={clsx(
'flex flex-col w-full text-stone-200 text-xs transition-all duration-300', 'flex flex-col w-full text-stone-200 text-xs transition-all duration-300',
compact ? 'p-1' : 'p-1', compact ? 'p-1' : 'p-1'
)} )}
> >
{sortedKills.map(kill => { {sortedKills.map(kill => {

View File

@@ -19,6 +19,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
const localRef = useRef({ const localRef = useRef({
compact: globalSettings.compact, compact: globalSettings.compact,
showAll: globalSettings.showAll, showAll: globalSettings.showAll,
whOnly: globalSettings.whOnly,
excludedSystems: globalSettings.excludedSystems || [], excludedSystems: globalSettings.excludedSystems || [],
}); });
@@ -31,6 +32,7 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
localRef.current = { localRef.current = {
compact: globalSettings.compact, compact: globalSettings.compact,
showAll: globalSettings.showAll, showAll: globalSettings.showAll,
whOnly: globalSettings.whOnly,
excludedSystems: globalSettings.excludedSystems || [], excludedSystems: globalSettings.excludedSystems || [],
}; };
forceRender(n => n + 1); forceRender(n => n + 1);
@@ -45,6 +47,14 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
forceRender(n => n + 1); forceRender(n => n + 1);
}, []); }, []);
const handleWHChange = useCallback((checked: boolean) => {
localRef.current = {
...localRef.current,
whOnly: checked,
};
forceRender(n => n + 1);
}, []);
const handleRemoveSystem = useCallback((sysId: number) => { const handleRemoveSystem = useCallback((sysId: number) => {
localRef.current = { localRef.current = {
...localRef.current, ...localRef.current,
@@ -94,6 +104,18 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
</label> </label>
</div> </div>
<div className="flex items-center gap-2">
<input
type="checkbox"
id="kills-wormhole-only-mode"
checked={localData.whOnly}
onChange={e => handleWHChange(e.target.checked)}
/>
<label htmlFor="kills-wh-only-mode" className="cursor-pointer">
Only show wormhole kills
</label>
</div>
<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>
@@ -106,7 +128,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 compact/>
<WdImgButton <WdImgButton
className={PrimeIcons.TRASH} className={PrimeIcons.TRASH}
@@ -117,13 +139,11 @@ export const KillsSettingsDialog: React.FC<KillsSettingsDialogProps> = ({ visibl
))} ))}
</div> </div>
{/* Apply + Close button row */}
<div className="flex gap-2 justify-end mt-4"> <div className="flex gap-2 justify-end mt-4">
<Button onClick={handleApply} label="Apply" outlined size="small" /> <Button onClick={handleApply} label="Apply" outlined size="small" />
</div> </div>
</div> </div>
{/* AddSystemDialog for picking new systems to exclude */}
<AddSystemDialog <AddSystemDialog
title="Add system to kills exclude list" title="Add system to kills exclude list"
visible={addSystemDialogVisible} visible={addSystemDialogVisible}

View File

@@ -4,6 +4,7 @@ import useLocalStorageState from 'use-local-storage-state';
export interface KillsWidgetSettings { export interface KillsWidgetSettings {
compact: boolean; compact: boolean;
showAll: boolean; showAll: boolean;
whOnly: boolean;
excludedSystems: number[]; excludedSystems: number[];
version: number; version: number;
} }
@@ -11,6 +12,7 @@ export interface KillsWidgetSettings {
export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = { export const DEFAULT_KILLS_WIDGET_SETTINGS: KillsWidgetSettings = {
compact: true, compact: true,
showAll: false, showAll: false,
whOnly: true,
excludedSystems: [], excludedSystems: [],
version: 0, version: 0,
}; };