Signatures k162 types (#77)

* feat(Signatures): Added ability to specify K162 type (actually next types supported Hi/Low/Null/C1-C6/Thera/Pochven)
This commit is contained in:
Dmitry Popov
2024-11-27 19:37:10 +04:00
committed by GitHub
parent 099650420d
commit ef5f36e4c4
20 changed files with 649 additions and 721 deletions

View File

@@ -26,8 +26,8 @@ $eve-effect-republicStellarObservatory: #6991ce;
$eve-effect-federalStellarObservatory: #6991ce;
$eve-wh-type-color-high: #5dffd2;
$eve-wh-type-color-low: #f79400;
$eve-wh-type-color-null: #fc3c3c;
$eve-wh-type-color-low: #d96c07;
$eve-wh-type-color-null: #8b3263;
$eve-wh-type-color-c1: #69bfce;
$eve-wh-type-color-c2: #6991ce;
$eve-wh-type-color-c3: #a8cb70;

View File

@@ -6,6 +6,7 @@ import { SystemSignature } from '@/hooks/Mapper/types';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import { CommandLinkSignatureToSystem } from '@/hooks/Mapper/types';
import { SystemSignaturesContent } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignaturesContent';
import { SHOW_DESCRIPTION_COLUMN_SETTING } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatures';
import {
Setting,
COSMIC_SIGNATURE,
@@ -20,6 +21,7 @@ interface SystemLinkSignatureDialogProps {
const signatureSettings: Setting[] = [
{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
{ key: SignatureGroup.Wormhole, name: 'Wormhole', value: true },
{ key: SHOW_DESCRIPTION_COLUMN_SETTING, name: 'Show Description Column', value: true, isFilter: false },
];
export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {

View File

@@ -84,7 +84,7 @@ export const SystemSignaturesContent = ({
const tooltipRef = useRef<WdTooltipHandlers>(null);
const lazyDeleteValue = useMemo(() => {
return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)!.value;
return settings.find(setting => setting.key === LAZY_DELETE_SIGNATURES_SETTING)?.value ?? false;
}, [settings]);
const handleResize = useCallback(() => {

View File

@@ -2,6 +2,10 @@ import { PrimeIcons } from 'primereact/api';
import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
import { SystemViewStandalone, WHClassView } from '@/hooks/Mapper/components/ui-kit';
import {
k162Types,
renderK162Type,
} from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
import clsx from 'clsx';
@@ -10,6 +14,14 @@ import classes from './renderInfoColumn.module.scss';
export const renderInfoColumn = (row: SystemSignature) => {
if (!row.group || row.group === SignatureGroup.Wormhole) {
let k162TypeOption = null;
if (row.custom_info) {
const customInfo = JSON.parse(row.custom_info);
if (customInfo.k162Type) {
k162TypeOption = k162Types.find(x => x.value === customInfo.k162Type);
}
}
return (
<div className="flex justify-start items-center gap-[6px]">
{row.type && (
@@ -24,6 +36,8 @@ export const renderInfoColumn = (row: SystemSignature) => {
/>
)}
{!row.linked_system && !!k162TypeOption && <>{renderK162Type(k162TypeOption, 'text-[11px]')}</>}
{row.linked_system && (
<>
{/*<span className="w-4 h-4 hero-arrow-long-right"></span>*/}

View File

@@ -49,6 +49,13 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
});
}
out = {
...out,
custom_info: JSON.stringify({
k162Type: values.k162Type,
}),
};
if (values.type != null) {
out = { ...out, type: values.type };
}
@@ -117,10 +124,17 @@ export const SignatureSettings = ({ systemId, show, onHide, signatureData }: Map
return;
}
const { linked_system, ...rest } = signatureData;
const { linked_system, custom_info, ...rest } = signatureData;
let k162Type = null;
if (custom_info) {
const customInfo = JSON.parse(custom_info);
k162Type = customInfo.k162Type;
}
signatureForm.reset({
linked_system: linked_system?.solar_system_id.toString() ?? undefined,
k162Type: k162Type,
...rest,
});
}, [signatureForm, signatureData]);

View File

@@ -1,7 +1,13 @@
import { useFormContext } from 'react-hook-form';
import { SystemSignature } from '@/hooks/Mapper/types';
import { SignatureWormholeTypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect';
import { SignatureK162TypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureK162TypeSelect';
import { SignatureLeadsToSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLeadsToSelect';
export const SignatureGroupContentWormholes = () => {
const { watch } = useFormContext<SystemSignature>();
const type = watch('type');
return (
<>
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
@@ -9,6 +15,13 @@ export const SignatureGroupContentWormholes = () => {
<SignatureWormholeTypeSelect name="type" />
</label>
{type === 'K162' && (
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
<span>K162 Type:</span>
<SignatureK162TypeSelect name="k162Type" />
</label>
)}
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
<span>Leads To:</span>
<SignatureLeadsToSelect name="linked_system" />

View File

@@ -0,0 +1,160 @@
import { Dropdown } from 'primereact/dropdown';
import clsx from 'clsx';
import { Controller, useFormContext } from 'react-hook-form';
import { useMemo } from 'react';
import { SystemView } from '@/hooks/Mapper/components/ui-kit';
import classes from './SignatureK162TypeSelect.module.scss';
import { SystemSignature } from '@/hooks/Mapper/types';
import { SOLAR_SYSTEM_CLASS_IDS } from '@/hooks/Mapper/components/map/constants.ts';
export const k162Types = [
{
label: 'Hi-Sec',
value: 'hs',
system_class: SOLAR_SYSTEM_CLASS_IDS.hs,
security: '0.8',
},
{
label: 'Low-Sec',
value: 'ls',
system_class: SOLAR_SYSTEM_CLASS_IDS.ls,
security: '0.4',
},
{
label: 'Null-Sec',
value: 'ns',
system_class: SOLAR_SYSTEM_CLASS_IDS.ns,
security: '-0.5',
},
{
label: 'C1',
value: 'c1',
system_class: SOLAR_SYSTEM_CLASS_IDS.c1,
},
{
label: 'C2',
value: 'c2',
system_class: SOLAR_SYSTEM_CLASS_IDS.c2,
},
{
label: 'C3',
value: 'c3',
system_class: SOLAR_SYSTEM_CLASS_IDS.c3,
},
{
label: 'C4',
value: 'c4',
system_class: SOLAR_SYSTEM_CLASS_IDS.c4,
},
{
label: 'C5',
value: 'c5',
system_class: SOLAR_SYSTEM_CLASS_IDS.c5,
},
{
label: 'C6',
value: 'c6',
system_class: SOLAR_SYSTEM_CLASS_IDS.c6,
},
{
label: 'Thera',
value: 'thera',
system_class: SOLAR_SYSTEM_CLASS_IDS.thera,
},
{
label: 'Pochven',
value: 'pochven',
system_class: SOLAR_SYSTEM_CLASS_IDS.pochven,
},
];
import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
const renderNoValue = () => <div className="flex gap-2 items-center">-Unknown-</div>;
// @ts-ignore
export const renderK162Type = (
option: {
label?: string;
value: string;
security?: string;
system_class?: number;
},
className?: string,
) => {
if (!option) {
return renderNoValue();
}
const { value, label = '', system_class = 0, security = '1.0' } = option;
if (value == null) {
return renderNoValue();
}
const systemInfo: SolarSystemStaticInfoRaw = {
region_id: 0,
constellation_id: 0,
solar_system_id: 0,
constellation_name: '',
region_name: '',
system_class: system_class,
security: security,
type_description: '',
class_title: label,
is_shattered: false,
effect_name: '',
effect_power: 0,
statics: [],
wandering: [],
triglavian_invasion_status: '',
sun_type_id: 0,
solar_system_name: '',
solar_system_name_lc: '',
};
return (
<div className="flex gap-2 items-center">
<SystemView systemId="" className={className} showCustomName hideRegion systemInfo={systemInfo} />
</div>
);
};
// @ts-ignore
export const renderK162TypeOption = option => {
return renderK162Type(option, classes.SystemView);
};
export interface SignatureK162TypeSelectProps {
name: string;
defaultValue?: string;
}
export const SignatureK162TypeSelect = ({ name, defaultValue = '' }: SignatureK162TypeSelectProps) => {
const { control } = useFormContext<SystemSignature>();
const options = useMemo(() => {
return [{ value: null }, ...k162Types];
}, []);
return (
<Controller
// @ts-ignore
name={name}
control={control}
defaultValue={defaultValue}
render={({ field }) => {
return (
<Dropdown
value={field.value}
onChange={field.onChange}
options={options}
optionValue="value"
placeholder="Select K162 type"
className={clsx('w-full')}
scrollHeight="240px"
itemTemplate={renderK162TypeOption}
valueTemplate={renderK162TypeOption}
/>
);
}}
/>
);
};

View File

@@ -0,0 +1 @@
export * from './SignatureK162TypeSelect.tsx';

View File

@@ -13,13 +13,14 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
// @ts-ignore
const renderLinkedSystemItem = (option: { value: string }) => {
if (option.value == null) {
return <div className="flex gap-2 items-center">No linked system</div>;
const { value } = option;
if (value == null) {
return <div className="flex gap-2 items-center">- Unknown -</div>;
}
return (
<div className="flex gap-2 items-center">
<SystemView systemId={option.value} className={classes.SystemView} />
<SystemView systemId={value} className={classes.SystemView} />
</div>
);
};
@@ -65,6 +66,7 @@ export const SignatureLeadsToSelect = ({ name, defaultValue = '' }: SignatureLea
const leadsToOptions = useMemo(() => {
return [
{ value: null },
...leadsTo
.filter(systemId => {
const systemStatic = systemStatics.get(parseInt(systemId));

View File

@@ -1,2 +1,3 @@
export * from './SignatureGroupSelect';
export * from './SignatureGroupContent';
export * from './SignatureK162TypeSelect';

View File

@@ -3,15 +3,23 @@ import { SystemViewStandalone } from '@/hooks/Mapper/components/ui-kit';
import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
import { useMemo } from 'react';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
export type SystemViewProps = {
systemId: string;
systemInfo?: SolarSystemStaticInfoRaw;
hideRegion?: boolean;
useSystemsCache?: boolean;
showCustomName?: boolean;
} & WithClassName;
export const SystemView = ({ systemId, hideRegion, className, showCustomName }: SystemViewProps) => {
export const SystemView = ({
systemId,
systemInfo: customSystemInfo,
hideRegion,
className,
showCustomName,
}: SystemViewProps) => {
const memSystems = useMemo(() => [systemId], [systemId]);
const { systems, loading } = useLoadSystemStatic({ systems: memSystems });
@@ -20,9 +28,12 @@ export const SystemView = ({ systemId, hideRegion, className, showCustomName }:
} = useMapRootState();
const systemInfo = useMemo(() => {
if (!systemId) {
return customSystemInfo;
}
return systems.get(parseInt(systemId));
// eslint-disable-next-line
}, [systemId, systems, loading]);
}, [customSystemInfo, systemId, systems, loading]);
const mapSystemInfo = useMemo(() => {
if (!showCustomName) {

View File

@@ -25,7 +25,6 @@ export const SystemViewStandalone = ({
className,
hideRegion,
customName,
class_title,
system_class,
solar_system_name,
@@ -38,6 +37,7 @@ export const SystemViewStandalone = ({
...props
}: SystemViewStandaloneProps) => {
const classTitleColor = getSystemClassStyles({ systemClass: system_class, security });
const isWH = isWormholeSpace(system_class);
const handleClick = useCallback(