mirror of
https://github.com/wanderer-industries/wanderer
synced 2025-12-12 02:35:42 +00:00
feat: allow filtering of k-space kills (#147)
This commit is contained in:
@@ -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 'Active' map subscription only (contact map administrators)
|
Kills available with 'Active' map subscription only (contact map administrators)
|
||||||
@@ -66,17 +83,20 @@ export const SystemKills: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isNothingSelected && !showLoading && !error && (!kills || kills.length === 0) && (
|
{!isNothingSelected &&
|
||||||
<div className="w-full h-full flex justify-center items-center select-none text-center text-stone-400/80 text-sm">
|
!showLoading &&
|
||||||
No kills found
|
!error &&
|
||||||
</div>
|
(!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">
|
||||||
|
No kills found
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{!isNothingSelected && !showLoading && !error && (
|
{!isNothingSelected && !showLoading && !error && (
|
||||||
<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}
|
||||||
|
|||||||
@@ -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 => {
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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,
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user