mirror of
https://github.com/wanderer-industries/wanderer
synced 2025-11-26 02:53:49 +00:00
Compare commits
3 Commits
v1.13.4
...
refactorin
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d38c828600 | ||
|
|
24196efbac | ||
|
|
83c76e3a67 |
23
.github/workflows/build.yml
vendored
23
.github/workflows/build.yml
vendored
@@ -189,29 +189,6 @@ jobs:
|
||||
- name: Image digest
|
||||
run: echo ${{ steps.build.outputs.digest }}
|
||||
|
||||
- name: Extract release notes
|
||||
id: extract-release-notes
|
||||
uses: ffurrer2/extract-release-notes@v2
|
||||
|
||||
- name: Get content
|
||||
uses: 2428392/gh-truncate-string-action@v1.3.0
|
||||
id: get-content
|
||||
with:
|
||||
stringToTruncate: |
|
||||
📣 Wanderer new release available 🎉
|
||||
|
||||
**Version**: ${{ steps.get-latest-tag.outputs.tag }}
|
||||
|
||||
${{ steps.extract-release-notes.outputs.release_notes }}
|
||||
maxLength: 2000
|
||||
truncationSymbol: "..."
|
||||
|
||||
- name: Discord Webhook Action
|
||||
uses: tsickert/discord-webhook@v5.3.0
|
||||
with:
|
||||
webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
|
||||
content: ${{ steps.get-content.outputs.string }}
|
||||
|
||||
create-release:
|
||||
name: 🏷 Create Release
|
||||
runs-on: ubuntu-22.04
|
||||
|
||||
198
CHANGELOG.md
198
CHANGELOG.md
@@ -2,172 +2,11 @@
|
||||
|
||||
<!-- changelog -->
|
||||
|
||||
## [v1.13.4](https://github.com/wanderer-industries/wanderer/compare/v1.13.3...v1.13.4) (2024-10-28)
|
||||
## [v1.3.1](https://github.com/wanderer-industries/wanderer/compare/v1.3.0...v1.3.1) (2024-10-07)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.13.3](https://github.com/wanderer-industries/wanderer/compare/v1.13.2...v1.13.3) (2024-10-28)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.13.2](https://github.com/wanderer-industries/wanderer/compare/v1.13.1...v1.13.2) (2024-10-28)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.13.1](https://github.com/wanderer-industries/wanderer/compare/v1.13.0...v1.13.1) (2024-10-28)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.13.0](https://github.com/wanderer-industries/wanderer/compare/v1.12.11...v1.13.0) (2024-10-28)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features:
|
||||
|
||||
* Core: Use ESI /characters/affiliation API
|
||||
|
||||
## [v1.12.11](https://github.com/wanderer-industries/wanderer/compare/v1.12.10...v1.12.11) (2024-10-25)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.10](https://github.com/wanderer-industries/wanderer/compare/v1.12.9...v1.12.10) (2024-10-24)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.9](https://github.com/wanderer-industries/wanderer/compare/v1.12.8...v1.12.9) (2024-10-24)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.8](https://github.com/wanderer-industries/wanderer/compare/v1.12.7...v1.12.8) (2024-10-24)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.7](https://github.com/wanderer-industries/wanderer/compare/v1.12.6...v1.12.7) (2024-10-24)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.6](https://github.com/wanderer-industries/wanderer/compare/v1.12.5...v1.12.6) (2024-10-24)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.5](https://github.com/wanderer-industries/wanderer/compare/v1.12.4...v1.12.5) (2024-10-22)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.4](https://github.com/wanderer-industries/wanderer/compare/v1.12.3...v1.12.4) (2024-10-21)
|
||||
|
||||
|
||||
|
||||
|
||||
### Bug Fixes:
|
||||
|
||||
* Map: Fix systems cleanup
|
||||
|
||||
## [v1.12.3](https://github.com/wanderer-industries/wanderer/compare/v1.12.2...v1.12.3) (2024-10-18)
|
||||
|
||||
|
||||
|
||||
|
||||
### Bug Fixes:
|
||||
|
||||
* Map: Fix regression issues
|
||||
|
||||
## [v1.12.2](https://github.com/wanderer-industries/wanderer/compare/v1.12.1...v1.12.2) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.12.1](https://github.com/wanderer-industries/wanderer/compare/v1.12.0...v1.12.1) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
### Bug Fixes:
|
||||
|
||||
* Map: Fix system add error after map page refresh
|
||||
|
||||
## [v1.12.0](https://github.com/wanderer-industries/wanderer/compare/v1.11.5...v1.12.0) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features:
|
||||
|
||||
* Map: Prettify user settings
|
||||
|
||||
## [v1.11.5](https://github.com/wanderer-industries/wanderer/compare/v1.11.4...v1.11.5) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.11.4](https://github.com/wanderer-industries/wanderer/compare/v1.11.3...v1.11.4) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.11.3](https://github.com/wanderer-industries/wanderer/compare/v1.11.2...v1.11.3) (2024-10-16)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.11.2](https://github.com/wanderer-industries/wanderer/compare/v1.11.1...v1.11.2) (2024-10-15)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.11.1](https://github.com/wanderer-industries/wanderer/compare/v1.11.0...v1.11.1) (2024-10-14)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.11.0](https://github.com/wanderer-industries/wanderer/compare/v1.10.0...v1.11.0) (2024-10-14)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features:
|
||||
|
||||
* Map: Add map level option to store custom labels
|
||||
|
||||
## [v1.10.0](https://github.com/wanderer-industries/wanderer/compare/v1.9.0...v1.10.0) (2024-10-13)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features:
|
||||
|
||||
* Map: Link signature on splash
|
||||
|
||||
## [v1.5.0](https://github.com/wanderer-industries/wanderer/compare/v1.4.0...v1.5.0) (2024-10-11)
|
||||
|
||||
|
||||
|
||||
|
||||
### Features:
|
||||
|
||||
* Map: Follow Character on Map and auto select their current system
|
||||
|
||||
## [v1.3.6](https://github.com/wanderer-industries/wanderer/compare/v1.3.5...v1.3.6) (2024-10-09)
|
||||
|
||||
|
||||
|
||||
|
||||
### Bug Fixes:
|
||||
|
||||
* Signatures: Signatures update fixes
|
||||
|
||||
## [v1.3.0](https://github.com/wanderer-industries/wanderer/compare/v1.2.10...v1.3.0) (2024-10-07)
|
||||
|
||||
|
||||
@@ -181,6 +20,26 @@
|
||||
|
||||
* Map: Revision of sorting from also adding ability to sort all columns
|
||||
|
||||
## [v1.2.10](https://github.com/wanderer-industries/wanderer/compare/v1.2.9...v1.2.10) (2024-10-07)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.2.9](https://github.com/wanderer-industries/wanderer/compare/v1.2.8...v1.2.9) (2024-10-07)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.2.8](https://github.com/wanderer-industries/wanderer/compare/v1.2.7...v1.2.8) (2024-10-06)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.2.7](https://github.com/wanderer-industries/wanderer/compare/v1.2.6...v1.2.7) (2024-10-05)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.2.6](https://github.com/wanderer-industries/wanderer/compare/v1.2.5...v1.2.6) (2024-10-05)
|
||||
|
||||
|
||||
@@ -217,6 +76,11 @@
|
||||
|
||||
* Map: Fix map loading after select a different map.
|
||||
|
||||
## [v1.2.2](https://github.com/wanderer-industries/wanderer/compare/v1.2.1...v1.2.2) (2024-10-02)
|
||||
|
||||
|
||||
|
||||
|
||||
## [v1.2.1](https://github.com/wanderer-industries/wanderer/compare/v1.2.0...v1.2.1) (2024-10-02)
|
||||
|
||||
|
||||
@@ -333,10 +197,20 @@
|
||||
|
||||
* docker: Fix DB connection in docker-compose internal network
|
||||
|
||||
## [v1.0.7](https://github.com/wanderer-industries/wanderer/compare/v1.0.6...v1.0.7) (2024-09-19)
|
||||
|
||||
## [v1.0.6](https://github.com/wanderer-industries/wanderer/compare/v1.0.5...v1.0.6) (2024-09-18)
|
||||
|
||||
## [v1.0.5](https://github.com/wanderer-industries/wanderer/compare/v1.0.4...v1.0.5) (2024-09-18)
|
||||
|
||||
## [v1.0.4](https://github.com/wanderer-industries/wanderer/compare/v1.0.3...v1.0.4) (2024-09-18)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* core: skip search results for failed character info request
|
||||
|
||||
## [v1.0.3](https://github.com/wanderer-industries/wanderer/compare/v1.0.2...v1.0.3) (2024-09-18)
|
||||
|
||||
## [v1.0.2](https://github.com/wanderer-industries/wanderer/compare/v1.0.1...v1.0.2) (2024-09-18)
|
||||
|
||||
## [v1.0.1](https://github.com/wanderer-industries/wanderer/compare/v1.0.0...v1.0.1) (2024-09-18)
|
||||
|
||||
@@ -28,12 +28,6 @@ body {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#bg-canvas {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.ccp-font {
|
||||
font-family: 'Shentox', 'Rogan', sans-serif !important;
|
||||
}
|
||||
|
||||
@@ -85,26 +85,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
.p-dropdown-label, .p-inputtext {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.p-dropdown-item {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.p-dropdown-item-group {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.p-dropdown-trigger {
|
||||
width: 14px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.p-dropdown-empty-message {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/* Основной класс диалога */
|
||||
body .p-dialog {
|
||||
.p-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//position: absolute;
|
||||
@@ -7,26 +7,11 @@ body .p-dialog {
|
||||
left: 0;
|
||||
//visibility: hidden;
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
|
||||
transition: box-shadow 0.3s;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
border: 1px solid #212121;
|
||||
background: var(--surface-h);
|
||||
color: var(--text-color);
|
||||
|
||||
.p-dialog-header {
|
||||
background: #171717 !important;
|
||||
color: var(--text-color);
|
||||
|
||||
.p-dialog-header-icon:focus-visible {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-dialog-footer {
|
||||
border-top: 1px solid var(--surface-d);
|
||||
}
|
||||
}
|
||||
|
||||
/* Стиль видимого диалога */
|
||||
@@ -60,12 +45,12 @@ body .p-dialog {
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
background: #f4f4f4;
|
||||
//border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Содержимое диалога */
|
||||
.p-dialog-content {
|
||||
padding: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -93,3 +78,23 @@ body .p-dialog {
|
||||
.p-dialog-header-close .pi {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Тема Saga Blue (пример) */
|
||||
body .p-dialog {
|
||||
background: var(--surface-a);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body .p-dialog .p-dialog-header,
|
||||
body .p-dialog .p-dialog-footer {
|
||||
background: var(--surface-b);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
body .p-dialog .p-dialog-header {
|
||||
border-bottom: 1px solid var(--surface-d);
|
||||
}
|
||||
|
||||
body .p-dialog .p-dialog-footer {
|
||||
border-top: 1px solid var(--surface-d);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
--surface-d: #3f4b5b;
|
||||
--surface-e: #2a323d;
|
||||
--surface-f: #2a323d;
|
||||
--surface-h: #171717;
|
||||
--text-color: rgba(255, 255, 255, 0.87);
|
||||
--text-color-secondary: rgba(255, 255, 255, 0.6);
|
||||
--primary-color: #8dd0ff;
|
||||
|
||||
@@ -11,7 +11,7 @@ const Characters = ({ data }: { data: CharacterTypeRaw[] }) => {
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(character: CharacterTypeRaw) => {
|
||||
mapRef.current?.command(Commands.centerSystem, character?.location?.solar_system_id?.toString());
|
||||
mapRef.current?.command(Commands.selectSystem, character?.location?.solar_system_id?.toString());
|
||||
},
|
||||
[mapRef],
|
||||
);
|
||||
|
||||
@@ -46,7 +46,7 @@ export const useLabelsMenu = (
|
||||
}
|
||||
|
||||
// const labels = getLabels(system.labels);
|
||||
const hasLabels = labels?.list?.length > 0;
|
||||
const hasLabels = labels.list.length > 0;
|
||||
const statusList = hasLabels ? LABELS_ORDER : LABELS_ORDER.slice(1);
|
||||
|
||||
return [
|
||||
|
||||
@@ -18,7 +18,7 @@ export const useTagMenu = (
|
||||
ref.current = { onSystemTag, systems, systemId };
|
||||
|
||||
return useCallback(() => {
|
||||
const { onSystemTag, systemId, systems } = ref.current;
|
||||
const { onSystemTag, systemId , systems} = ref.current;
|
||||
const system = systemId ? getSystemById(systems, systemId) : undefined;
|
||||
|
||||
const isSelectedLetters = AVAILABLE_LETTERS.includes(system?.tag ?? '');
|
||||
|
||||
@@ -4,7 +4,6 @@ import { OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.
|
||||
import { SolarSystemRawType } from '@/hooks/Mapper/types';
|
||||
import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
|
||||
import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
|
||||
import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
|
||||
|
||||
interface UseContextMenuSystemHandlersProps {
|
||||
hubs: string[];
|
||||
@@ -17,10 +16,8 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
|
||||
|
||||
const [system, setSystem] = useState<string>();
|
||||
|
||||
const { deleteSystems } = useDeleteSystems();
|
||||
|
||||
const ref = useRef({ hubs, system, systems, outCommand, deleteSystems });
|
||||
ref.current = { hubs, system, systems, outCommand, deleteSystems };
|
||||
const ref = useRef({ hubs, system, systems, outCommand });
|
||||
ref.current = { hubs, system, systems, outCommand };
|
||||
|
||||
const open = useCallback((ev: any, systemId: string) => {
|
||||
setSystem(systemId);
|
||||
@@ -30,12 +27,12 @@ export const useContextMenuSystemHandlers = ({ systems, hubs, outCommand }: UseC
|
||||
}, []);
|
||||
|
||||
const onDeleteSystem = useCallback(() => {
|
||||
const { system, deleteSystems } = ref.current;
|
||||
const { system, outCommand } = ref.current;
|
||||
if (!system) {
|
||||
return;
|
||||
}
|
||||
|
||||
deleteSystems([system]);
|
||||
outCommand({ type: OutCommand.deleteSystems, data: [system] });
|
||||
setSystem(undefined);
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import { getSystemById } from '@/hooks/Mapper/helpers';
|
||||
import { useWaypointMenu } from '@/hooks/Mapper/components/contexts/hooks';
|
||||
import { WaypointSetContextHandler } from '@/hooks/Mapper/components/contexts/types.ts';
|
||||
import { FastSystemActions } from '@/hooks/Mapper/components/contexts/components';
|
||||
import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks';
|
||||
import { useJumpPlannerMenu } from '@/hooks/Mapper/components/contexts/hooks/useJumpPlannerMenu';
|
||||
import { Route } from '@/hooks/Mapper/types/routes.ts';
|
||||
|
||||
export interface ContextMenuSystemInfoProps {
|
||||
|
||||
@@ -48,19 +48,19 @@ export const useContextMenuSystemInfoHandlers = ({ hubs, outCommand, mapRef }: U
|
||||
}, []);
|
||||
|
||||
const onAddSystem = useCallback(() => {
|
||||
const { system: solarSystemId, outCommand, mapRef } = ref.current;
|
||||
if (!solarSystemId) {
|
||||
const { system, outCommand, mapRef } = ref.current;
|
||||
if (!system) {
|
||||
return;
|
||||
}
|
||||
|
||||
outCommand({
|
||||
type: OutCommand.addSystem,
|
||||
data: {
|
||||
system_id: solarSystemId,
|
||||
system_id: system,
|
||||
},
|
||||
});
|
||||
setTimeout(() => {
|
||||
mapRef.current?.command(Commands.centerSystem, solarSystemId);
|
||||
mapRef.current?.command(Commands.selectSystem, system);
|
||||
setSystem(undefined);
|
||||
}, 200);
|
||||
}, []);
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import { Node } from 'reactflow';
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
import { ContextMenu } from 'primereact/contextmenu';
|
||||
import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { SolarSystemRawType } from '@/hooks/Mapper/types';
|
||||
import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
|
||||
import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
|
||||
|
||||
export const useContextMenuSystemMultipleHandlers = () => {
|
||||
const contextMenuRef = useRef<ContextMenu | null>(null);
|
||||
const { outCommand } = useMapRootState();
|
||||
const [systems, setSystems] = useState<Node<SolarSystemRawType>[]>();
|
||||
|
||||
const { deleteSystems } = useDeleteSystems();
|
||||
|
||||
const handleSystemMultipleContext: NodeSelectionMouseHandler = (ev, systems_) => {
|
||||
setSystems(systems_);
|
||||
ev.preventDefault();
|
||||
@@ -19,7 +19,7 @@ export const useContextMenuSystemMultipleHandlers = () => {
|
||||
contextMenuRef.current?.show(ev);
|
||||
};
|
||||
|
||||
const onDeleteSystems = useCallback(() => {
|
||||
const onDeleteSystems = () => {
|
||||
if (!systems) {
|
||||
return;
|
||||
}
|
||||
@@ -29,11 +29,12 @@ export const useContextMenuSystemMultipleHandlers = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
deleteSystems(sysToDel);
|
||||
}, [deleteSystems, systems]);
|
||||
outCommand({ type: OutCommand.deleteSystems, data: sysToDel });
|
||||
};
|
||||
|
||||
return {
|
||||
handleSystemMultipleContext,
|
||||
|
||||
contextMenuRef,
|
||||
onDeleteSystems,
|
||||
};
|
||||
|
||||
@@ -1,3 +1 @@
|
||||
export * from './useWaypointMenu';
|
||||
export * from './useJumpPlannerMenu';
|
||||
export * from './useDeleteSystems';
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
|
||||
export const useDeleteSystems = () => {
|
||||
const { outCommand } = useMapRootState();
|
||||
|
||||
const deleteSystems = (systemIds: string[]) => {
|
||||
if (!systemIds || !systemIds.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
outCommand({ type: OutCommand.deleteSystems, data: systemIds });
|
||||
};
|
||||
|
||||
return {
|
||||
deleteSystems,
|
||||
};
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './useSystemInfo';
|
||||
export * from './useGetOwnOnlineCharacters';
|
||||
@@ -1,33 +0,0 @@
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { useMemo } from 'react';
|
||||
import { getSystemById } from '@/hooks/Mapper/helpers';
|
||||
import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
|
||||
|
||||
interface UseSystemInfoProps {
|
||||
systemId: string;
|
||||
}
|
||||
|
||||
export const useSystemInfo = ({ systemId }: UseSystemInfoProps) => {
|
||||
const {
|
||||
data: { systems, connections },
|
||||
} = useMapRootState();
|
||||
|
||||
const { systems: systemStatics } = useLoadSystemStatic({ systems: [systemId] });
|
||||
|
||||
return useMemo(() => {
|
||||
const staticInfo = systemStatics.get(parseInt(systemId));
|
||||
const dynamicInfo = getSystemById(systems, systemId);
|
||||
|
||||
if (!staticInfo || !dynamicInfo) {
|
||||
throw new Error(`Error on getting system ${systemId}`);
|
||||
}
|
||||
|
||||
const leadsTo = connections
|
||||
.filter(x => [x.source, x.target].includes(systemId))
|
||||
.map(x => [x.source, x.target])
|
||||
.flat()
|
||||
.filter(x => x !== systemId);
|
||||
|
||||
return { dynamicInfo, staticInfo, leadsTo };
|
||||
}, [systemStatics, systemId, systems, connections]);
|
||||
};
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect, useRef } from 'react';
|
||||
import { ForwardedRef, forwardRef, MouseEvent, useCallback, useEffect } from 'react';
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
ConnectionMode,
|
||||
@@ -13,15 +13,12 @@ import ReactFlow, {
|
||||
SelectionMode,
|
||||
useEdgesState,
|
||||
useNodesState,
|
||||
NodeChange,
|
||||
useReactFlow,
|
||||
} from 'reactflow';
|
||||
import 'reactflow/dist/style.css';
|
||||
import classes from './Map.module.scss';
|
||||
import './styles/neon-theme.scss';
|
||||
import './styles/eve-common.scss';
|
||||
import { MapProvider, useMapState } from './MapProvider';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { useMapHandlers, useUpdateNodes } from './hooks';
|
||||
import { MapHandlers, OutCommand, OutCommandHandler } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import {
|
||||
@@ -37,7 +34,6 @@ import { SESSION_KEY } from '@/hooks/Mapper/constants.ts';
|
||||
import { SolarSystemConnection, SolarSystemRawType } from '@/hooks/Mapper/types';
|
||||
import { ctxManager } from '@/hooks/Mapper/utils/contextManager.ts';
|
||||
import { NodeSelectionMouseHandler } from '@/hooks/Mapper/components/contexts/types.ts';
|
||||
import { useDeleteSystems } from '@/hooks/Mapper/components/contexts/hooks';
|
||||
|
||||
const DEFAULT_VIEW_PORT = { zoom: 1, x: 0, y: 0 };
|
||||
|
||||
@@ -112,7 +108,6 @@ const MapComp = ({
|
||||
isShowMinimap,
|
||||
showKSpaceBG,
|
||||
}: MapCompProps) => {
|
||||
const { getNode } = useReactFlow();
|
||||
const [nodes, , onNodesChange] = useNodesState<SolarSystemRawType>(initialNodes);
|
||||
const [edges, , onEdgesChange] = useEdgesState<Edge<SolarSystemConnection>[]>(initialEdges);
|
||||
|
||||
@@ -120,15 +115,8 @@ const MapComp = ({
|
||||
useUpdateNodes(nodes);
|
||||
const { handleRootContext, ...rootCtxProps } = useContextMenuRootHandlers();
|
||||
const { handleConnectionContext, ...connectionCtxProps } = useContextMenuConnectionHandlers();
|
||||
|
||||
const { update } = useMapState();
|
||||
const {
|
||||
data: { systems },
|
||||
} = useMapRootState();
|
||||
|
||||
const { deleteSystems } = useDeleteSystems();
|
||||
|
||||
const systemsRef = useRef({ systems });
|
||||
systemsRef.current = { systems };
|
||||
|
||||
const onConnect: OnConnect = useCallback(
|
||||
params => {
|
||||
@@ -183,32 +171,6 @@ const MapComp = ({
|
||||
localStorage.setItem(SESSION_KEY.viewPort, JSON.stringify(viewport));
|
||||
};
|
||||
|
||||
const handleNodesChange = useCallback(
|
||||
(changes: NodeChange[]) => {
|
||||
const systemsIdsToRemove: string[] = [];
|
||||
const nextChanges = changes.reduce((acc, change) => {
|
||||
if (change.type === 'remove') {
|
||||
const node = getNode(change.id);
|
||||
const { systems = [] } = systemsRef.current;
|
||||
if (node?.data?.id && !systems.map(s => s.id).includes(node?.data?.id)) {
|
||||
return [...acc, change];
|
||||
} else if (!node?.data?.locked) {
|
||||
systemsIdsToRemove.push(node?.data?.id);
|
||||
}
|
||||
return acc;
|
||||
}
|
||||
return [...acc, change];
|
||||
}, [] as NodeChange[]);
|
||||
|
||||
if (systemsIdsToRemove.length) {
|
||||
deleteSystems(systemsIdsToRemove);
|
||||
}
|
||||
|
||||
onNodesChange(nextChanges);
|
||||
},
|
||||
[deleteSystems, getNode, onNodesChange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
update(x => ({
|
||||
...x,
|
||||
@@ -222,7 +184,7 @@ const MapComp = ({
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={handleNodesChange}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
// TODO we need save into session all of this
|
||||
@@ -257,10 +219,10 @@ const MapComp = ({
|
||||
minZoom={0.2}
|
||||
maxZoom={1.5}
|
||||
elevateNodesOnSelect
|
||||
deleteKeyCode={['Delete']}
|
||||
// TODO need create clear example with problem with that flag
|
||||
// if system is not visible edge not drawing (and any render in Custom node is not happening)
|
||||
// onlyRenderVisibleElements
|
||||
deleteKeyCode={null}
|
||||
selectionMode={SelectionMode.Partial}
|
||||
>
|
||||
{isShowMinimap && <MiniMap pannable zoomable ariaLabel="Mini map" className={minimapClasses} />}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import '@/hooks/Mapper/components/map/styles/eve-common-variables';
|
||||
@import "@/hooks/Mapper/components/map/styles/eve-common-variables";
|
||||
|
||||
$pastel-blue: #5a7d9a;
|
||||
$pastel-pink: #d291bc;
|
||||
@@ -25,11 +25,9 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
&.Mataria,
|
||||
&.Amarria,
|
||||
&.Gallente,
|
||||
&.Caldaria {
|
||||
&::before {
|
||||
|
||||
&.Mataria, &.Amarria, &.Gallente, &.Caldaria {
|
||||
&::Before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -46,40 +44,42 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
|
||||
&.Mataria {
|
||||
&::before {
|
||||
background-image: url('/images/mataria-180.png');
|
||||
background-image: url("/images/mataria.png");
|
||||
opacity: 0.6;
|
||||
background-position-x: 1px;
|
||||
background-position-y: -14px;
|
||||
background-position-x: -28px;
|
||||
background-position-y: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.Caldaria {
|
||||
&::before {
|
||||
background-image: url('/images/caldaria-180.png');
|
||||
background-image: url("/images/caldaria.png");
|
||||
opacity: 0.6;
|
||||
background-position-x: 1px;
|
||||
background-position-y: -10px;
|
||||
background-position-x: -16px;
|
||||
background-position-y: -17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.Amarria {
|
||||
&::before {
|
||||
opacity: 0.45;
|
||||
background-image: url('/images/amarr-180.png');
|
||||
background-position-x: 0;
|
||||
background-position-y: -13px;
|
||||
background-image: url("/images/amarr.png");
|
||||
background-position-x: 0px;
|
||||
background-position-y: -1px;
|
||||
width: calc(100% + 10px)
|
||||
}
|
||||
}
|
||||
|
||||
&.Gallente {
|
||||
&::before {
|
||||
opacity: 0.5;
|
||||
background-image: url('/images/gallente-180.png');
|
||||
background-position-x: 1px;
|
||||
background-position-y: 0;
|
||||
opacity: 0.6;
|
||||
background-image: url("/images/gallente.png");
|
||||
background-position-x: -1px;
|
||||
background-position-y: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.selected {
|
||||
border-color: $pastel-pink;
|
||||
box-shadow: 0 0 10px #9a1af1c2;
|
||||
@@ -95,7 +95,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
|
||||
&.eve-system-status-home {
|
||||
border: 1px solid darken($eve-solar-system-status-color-home, 30%);
|
||||
background-image: linear-gradient(275deg, $eve-solar-system-status-friendly, transparent);
|
||||
background-image: linear-gradient(45deg, $eve-solar-system-status-friendly, transparent);
|
||||
|
||||
&.selected {
|
||||
border-color: $eve-solar-system-status-color-home;
|
||||
@@ -104,7 +104,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
|
||||
&.eve-system-status-friendly {
|
||||
border: 1px solid darken($eve-solar-system-status-color-friendly, 20%);
|
||||
background-image: linear-gradient(275deg, darken($eve-solar-system-status-friendly, 30%), transparent);
|
||||
background-image: linear-gradient(45deg, darken($eve-solar-system-status-friendly, 30%), transparent);
|
||||
|
||||
&.selected {
|
||||
border-color: darken($eve-solar-system-status-color-friendly, 5%);
|
||||
@@ -113,7 +113,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
|
||||
&.eve-system-status-lookingFor {
|
||||
border: 1px solid darken($eve-solar-system-status-color-lookingFor, 15%);
|
||||
background-image: linear-gradient(275deg, #45ff8f2f, #457fff2f);
|
||||
background-image: linear-gradient(45deg, #45ff8f2f, #457fff2f);
|
||||
|
||||
&.selected {
|
||||
border-color: $pastel-pink;
|
||||
@@ -121,16 +121,17 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
}
|
||||
|
||||
&.eve-system-status-warning {
|
||||
background-image: linear-gradient(275deg, $eve-solar-system-status-warning, transparent);
|
||||
background-image: linear-gradient(45deg, $eve-solar-system-status-warning, transparent);
|
||||
}
|
||||
|
||||
&.eve-system-status-dangerous {
|
||||
background-image: linear-gradient(275deg, $eve-solar-system-status-dangerous, transparent);
|
||||
background-image: linear-gradient(45deg, $eve-solar-system-status-dangerous, transparent);
|
||||
}
|
||||
|
||||
&.eve-system-status-target {
|
||||
background-image: linear-gradient(275deg, $eve-solar-system-status-target, transparent);
|
||||
background-image: linear-gradient(45deg, $eve-solar-system-status-target, transparent);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Bookmarks {
|
||||
@@ -157,7 +158,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
//background-color: #833ca4;
|
||||
|
||||
&:not(:first-child) {
|
||||
box-shadow: inset 4px -3px 4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: inset 4px -3px 4px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -180,6 +181,7 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -217,7 +219,9 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
}
|
||||
|
||||
.solarSystemName {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.BottomRow {
|
||||
@@ -284,19 +288,11 @@ $tooltip-bg: #202020; // Темный фон для подсказок
|
||||
border-color: $pastel-pink;
|
||||
}
|
||||
|
||||
&.HandleTop {
|
||||
top: -2px;
|
||||
}
|
||||
&.HandleTop { top: -2px }
|
||||
|
||||
&.HandleRight {
|
||||
right: -2px;
|
||||
}
|
||||
&.HandleRight { right: -2px }
|
||||
|
||||
&.HandleBottom {
|
||||
bottom: -2px;
|
||||
}
|
||||
&.HandleBottom { bottom: -2px }
|
||||
|
||||
&.HandleLeft {
|
||||
left: -2px;
|
||||
}
|
||||
&.HandleLeft { left: -2px }
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ const SpaceToClass: Record<string, string> = {
|
||||
};
|
||||
|
||||
const sortedLabels = (labels: string[]) => {
|
||||
if (!labels) {
|
||||
if (labels === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
@@ -133,7 +133,7 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
|
||||
<div className={classes.Bookmarks}>
|
||||
{labelCustom !== '' && (
|
||||
<div className={clsx(classes.Bookmark, MARKER_BOOKMARK_BG_STYLES.custom)}>
|
||||
<span className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] ">{labelCustom}</span>
|
||||
<div>{labelCustom}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -168,16 +168,14 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
|
||||
{visible && (
|
||||
<>
|
||||
<div className={classes.HeadRow}>
|
||||
<div className={clsx(classes.classTitle, classTitleColor, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
|
||||
{class_title ?? '-'}
|
||||
</div>
|
||||
<div className={clsx(classes.classTitle, classTitleColor)}>{class_title ?? '-'}</div>
|
||||
{tag != null && tag !== '' && (
|
||||
<div className={clsx(classes.TagTitle, 'text-sky-400 font-medium')}>{tag}</div>
|
||||
)}
|
||||
<div
|
||||
className={clsx(
|
||||
classes.classSystemName,
|
||||
'[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
|
||||
'flex-grow overflow-hidden text-ellipsis whitespace-nowrap font-sans',
|
||||
)}
|
||||
>
|
||||
{solar_system_name}
|
||||
@@ -198,16 +196,16 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
|
||||
|
||||
<div className={clsx(classes.BottomRow, 'flex items-center justify-between')}>
|
||||
{customName && (
|
||||
<div className="[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">
|
||||
{customName}
|
||||
</div>
|
||||
<div className="text-blue-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5">{customName}</div>
|
||||
)}
|
||||
|
||||
{!isWormhole && !customName && (
|
||||
<div
|
||||
className={clsx(
|
||||
'[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)] text-stone-300 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5',
|
||||
)}
|
||||
className={clsx('text-stone-400 whitespace-nowrap overflow-hidden text-ellipsis mr-0.5', {
|
||||
['text-teal-100 font-bold']: space === Spaces.Caldari,
|
||||
['text-yellow-100 font-bold']: space === Spaces.Amarr || space === Spaces.Matar,
|
||||
['text-lime-200/80 font-bold']: space === Spaces.Gallente,
|
||||
})}
|
||||
>
|
||||
{region_name}
|
||||
</div>
|
||||
@@ -217,10 +215,10 @@ export const SolarSystemNode = memo(({ data, selected }: WrapNodeProps<MapSolarS
|
||||
|
||||
<div className="flex items-center justify-end">
|
||||
<div className="flex gap-1 items-center">
|
||||
{locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>}
|
||||
{locked && <i className={PrimeIcons.LOCK} style={{ fontSize: '0.45rem' }}></i>}
|
||||
|
||||
{hubs.includes(solar_system_id.toString()) && (
|
||||
<i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem', fontWeight: 'bold' }}></i>
|
||||
<i className={PrimeIcons.MAP_MARKER} style={{ fontSize: '0.45rem' }}></i>
|
||||
)}
|
||||
|
||||
{charactersInSystem.length > 0 && (
|
||||
|
||||
@@ -18,9 +18,5 @@ export const WormholeClassComp = ({ id }: WormholeClassComp) => {
|
||||
}
|
||||
|
||||
const colorClass = WORMHOLE_CLASS_STYLES[wormholeDataAdditional.wormholeClassID.toString()];
|
||||
return (
|
||||
<div className={clsx(colorClass, '[text-shadow:_0_1px_0_rgb(0_0_0_/_40%)]')}>
|
||||
{wormholeDataAdditional.shortName}
|
||||
</div>
|
||||
);
|
||||
return <div className={clsx(colorClass)}>{wormholeDataAdditional.shortName}</div>;
|
||||
};
|
||||
|
||||
@@ -30,77 +30,11 @@ export enum SOLAR_SYSTEM_CLASS_IDS {
|
||||
zarzakh = 10100,
|
||||
}
|
||||
|
||||
export enum SOLAR_SYSTEM_CLASS_GROUPS {
|
||||
ccp = 'ccp',
|
||||
c1 = 'c1',
|
||||
c2 = 'c2',
|
||||
c3 = 'c3',
|
||||
c4 = 'c4',
|
||||
c5 = 'c5',
|
||||
c6 = 'c6',
|
||||
hs = 'hs',
|
||||
ls = 'ls',
|
||||
ns = 'ns',
|
||||
thera = 'thera',
|
||||
c13 = 'c13',
|
||||
drifter = 'drifter',
|
||||
unknown = 'unknown',
|
||||
pochven = 'pochven',
|
||||
jovian = 'jovian',
|
||||
}
|
||||
|
||||
export const SOLAR_SYSTEM_TO_CLASS_GROUPS_CLASSES = {
|
||||
c1: ['c1'],
|
||||
c2: ['c2'],
|
||||
c3: ['c3'],
|
||||
c4: ['c4'],
|
||||
c5: ['c5'],
|
||||
c6: ['c6'],
|
||||
hs: ['hs'],
|
||||
ls: ['ls'],
|
||||
ns: ['ns'],
|
||||
thera: ['thera'],
|
||||
c13: ['c13'],
|
||||
pochven: ['pochven'],
|
||||
drifter: ['sentinel', 'barbican', 'vidette', 'conflux', 'redoubt'],
|
||||
jove: ['jove'],
|
||||
};
|
||||
|
||||
export const SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS = {
|
||||
ccp1: SOLAR_SYSTEM_CLASS_GROUPS.ccp,
|
||||
c1: SOLAR_SYSTEM_CLASS_GROUPS.c1,
|
||||
c2: SOLAR_SYSTEM_CLASS_GROUPS.c2,
|
||||
c3: SOLAR_SYSTEM_CLASS_GROUPS.c3,
|
||||
c4: SOLAR_SYSTEM_CLASS_GROUPS.c4,
|
||||
c5: SOLAR_SYSTEM_CLASS_GROUPS.c5,
|
||||
c6: SOLAR_SYSTEM_CLASS_GROUPS.c6,
|
||||
hs: SOLAR_SYSTEM_CLASS_GROUPS.hs,
|
||||
ls: SOLAR_SYSTEM_CLASS_GROUPS.ls,
|
||||
ns: SOLAR_SYSTEM_CLASS_GROUPS.ns,
|
||||
ccp2: SOLAR_SYSTEM_CLASS_GROUPS.ccp,
|
||||
ccp3: SOLAR_SYSTEM_CLASS_GROUPS.ccp,
|
||||
thera: SOLAR_SYSTEM_CLASS_GROUPS.thera,
|
||||
c13: SOLAR_SYSTEM_CLASS_GROUPS.c13,
|
||||
sentinel: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
|
||||
baribican: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
|
||||
vidette: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
|
||||
conflux: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
|
||||
redoubt: SOLAR_SYSTEM_CLASS_GROUPS.drifter,
|
||||
a1: SOLAR_SYSTEM_CLASS_GROUPS.unknown,
|
||||
a2: SOLAR_SYSTEM_CLASS_GROUPS.unknown,
|
||||
a3: SOLAR_SYSTEM_CLASS_GROUPS.unknown,
|
||||
a4: SOLAR_SYSTEM_CLASS_GROUPS.unknown,
|
||||
a5: SOLAR_SYSTEM_CLASS_GROUPS.unknown,
|
||||
ccp4: SOLAR_SYSTEM_CLASS_GROUPS.ccp,
|
||||
pochven: SOLAR_SYSTEM_CLASS_GROUPS.pochven,
|
||||
};
|
||||
|
||||
type WormholesAdditionalInfoType = {
|
||||
id: string;
|
||||
shortName: string;
|
||||
wormholeClassID: number;
|
||||
title: string;
|
||||
shortTitle: string;
|
||||
effectPower?: number;
|
||||
};
|
||||
|
||||
@@ -111,7 +45,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
shortName: 'CCP',
|
||||
wormholeClassID: -1,
|
||||
title: 'CCP System',
|
||||
shortTitle: 'CCP',
|
||||
},
|
||||
{
|
||||
id: 'c1',
|
||||
@@ -119,7 +52,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 1,
|
||||
effectPower: 1,
|
||||
title: 'Class 1',
|
||||
shortTitle: 'C1',
|
||||
},
|
||||
{
|
||||
id: 'c2',
|
||||
@@ -127,7 +59,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 2,
|
||||
effectPower: 2,
|
||||
title: 'Class 2',
|
||||
shortTitle: 'C2',
|
||||
},
|
||||
{
|
||||
id: 'c3',
|
||||
@@ -135,7 +66,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 3,
|
||||
effectPower: 3,
|
||||
title: 'Class 3',
|
||||
shortTitle: 'C3',
|
||||
},
|
||||
{
|
||||
id: 'c4',
|
||||
@@ -143,7 +73,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 4,
|
||||
effectPower: 4,
|
||||
title: 'Class 4',
|
||||
shortTitle: 'C4',
|
||||
},
|
||||
{
|
||||
id: 'c5',
|
||||
@@ -151,7 +80,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 5,
|
||||
effectPower: 5,
|
||||
title: 'Class 5',
|
||||
shortTitle: 'C5',
|
||||
},
|
||||
{
|
||||
id: 'c6',
|
||||
@@ -159,49 +87,42 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 6,
|
||||
effectPower: 6,
|
||||
title: 'Class 6',
|
||||
shortTitle: 'C6',
|
||||
},
|
||||
{
|
||||
id: 'hs',
|
||||
shortName: 'H',
|
||||
wormholeClassID: 7,
|
||||
title: 'High-sec',
|
||||
shortTitle: 'High-sec',
|
||||
},
|
||||
{
|
||||
id: 'ls',
|
||||
shortName: 'L',
|
||||
wormholeClassID: 8,
|
||||
title: 'Low-sec',
|
||||
shortTitle: 'Low-sec',
|
||||
},
|
||||
{
|
||||
id: 'ns',
|
||||
shortName: 'N',
|
||||
wormholeClassID: 9,
|
||||
title: 'Null-sec',
|
||||
shortTitle: 'Null-sec',
|
||||
},
|
||||
{
|
||||
id: 'ccp2',
|
||||
shortName: 'CCP',
|
||||
wormholeClassID: 10,
|
||||
title: 'CCP System',
|
||||
shortTitle: 'CCP',
|
||||
},
|
||||
{
|
||||
id: 'ccp3',
|
||||
shortName: 'CCP',
|
||||
wormholeClassID: 11,
|
||||
title: 'CCP System',
|
||||
shortTitle: 'CCP',
|
||||
},
|
||||
{
|
||||
id: 'thera',
|
||||
shortName: 'T',
|
||||
wormholeClassID: 12,
|
||||
title: 'Class 12 (Thera)',
|
||||
shortTitle: 'Thera',
|
||||
},
|
||||
{
|
||||
id: 'c13',
|
||||
@@ -209,7 +130,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 13,
|
||||
effectPower: 6,
|
||||
title: 'Class 13 (Shattered Frigate)',
|
||||
shortTitle: 'C13',
|
||||
},
|
||||
{
|
||||
id: 'sentinel',
|
||||
@@ -217,7 +137,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 14,
|
||||
effectPower: 2,
|
||||
title: 'Class 14 (Sentinel Drifter)',
|
||||
shortTitle: 'Sentinel',
|
||||
},
|
||||
{
|
||||
id: 'barbican',
|
||||
@@ -225,7 +144,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 15,
|
||||
effectPower: 2,
|
||||
title: 'Class 15 (Barbican Drifter)',
|
||||
shortTitle: 'Barbican',
|
||||
},
|
||||
{
|
||||
id: 'vidette',
|
||||
@@ -233,7 +151,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 16,
|
||||
effectPower: 2,
|
||||
title: 'Class 16 (Vidette Drifter)',
|
||||
shortTitle: 'Vidette',
|
||||
},
|
||||
{
|
||||
id: 'conflux',
|
||||
@@ -241,7 +158,6 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 17,
|
||||
effectPower: 2,
|
||||
title: 'Class 17 (Conflux Drifter)',
|
||||
shortTitle: 'Conflux',
|
||||
},
|
||||
{
|
||||
id: 'redoubt',
|
||||
@@ -249,79 +165,59 @@ export const WORMHOLES_ADDITIONAL_INFO_RAW: WormholesAdditionalInfoType[] = [
|
||||
wormholeClassID: 18,
|
||||
effectPower: 2,
|
||||
title: 'Class 18 (Redoubt Drifter)',
|
||||
shortTitle: 'Redoubt',
|
||||
},
|
||||
{
|
||||
id: 'a1',
|
||||
shortName: 'A1',
|
||||
wormholeClassID: 19,
|
||||
title: '(Abyssal class 1)',
|
||||
shortTitle: 'A1',
|
||||
},
|
||||
{
|
||||
id: 'a2',
|
||||
shortName: 'A2',
|
||||
wormholeClassID: 20,
|
||||
title: '(Abyssal class 2)',
|
||||
shortTitle: 'A2',
|
||||
},
|
||||
{
|
||||
id: 'a3',
|
||||
shortName: 'A3',
|
||||
wormholeClassID: 21,
|
||||
title: '(Abyssal class 3)',
|
||||
shortTitle: 'A3',
|
||||
},
|
||||
{
|
||||
id: 'a4',
|
||||
shortName: 'A4',
|
||||
wormholeClassID: 22,
|
||||
title: '(Abyssal class 4)',
|
||||
shortTitle: 'A4',
|
||||
},
|
||||
{
|
||||
id: 'a5',
|
||||
shortName: 'A5',
|
||||
wormholeClassID: 23,
|
||||
title: '(Abyssal class 5)',
|
||||
shortTitle: 'A5',
|
||||
},
|
||||
{
|
||||
id: 'ccp4',
|
||||
shortName: 'CCP',
|
||||
wormholeClassID: 24,
|
||||
title: 'CCP System (Penalty)',
|
||||
shortTitle: 'CCP',
|
||||
},
|
||||
{
|
||||
id: 'pochven',
|
||||
shortName: 'P',
|
||||
wormholeClassID: 25,
|
||||
title: 'Triglavian space (Pochven)',
|
||||
shortTitle: 'Pochven',
|
||||
},
|
||||
{
|
||||
id: 'zarzakh',
|
||||
shortName: 'N',
|
||||
wormholeClassID: 10100,
|
||||
title: 'Pirate space',
|
||||
shortTitle: 'Zarzakh',
|
||||
},
|
||||
{
|
||||
id: 'k162',
|
||||
shortName: 'K162',
|
||||
wormholeClassID: 10101,
|
||||
title: 'Reverse',
|
||||
shortTitle: 'K162',
|
||||
},
|
||||
];
|
||||
|
||||
export const WORMHOLES_ADDITIONAL_INFO: Record<string, WormholesAdditionalInfoType> =
|
||||
WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.id]: x }), {});
|
||||
|
||||
export const WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID: Record<string, WormholesAdditionalInfoType> =
|
||||
WORMHOLES_ADDITIONAL_INFO_RAW.reduce((acc, x) => ({ ...acc, [x.wormholeClassID]: x }), {});
|
||||
|
||||
// export const SOLAR_SYSTEM_CLASS_NAMES = {
|
||||
// ccp1 = ,
|
||||
// c1 = ,
|
||||
|
||||
@@ -5,6 +5,5 @@ export * from './useMapRemoveSystems';
|
||||
export * from './useCommandsCharacters';
|
||||
export * from './useCommandsConnections';
|
||||
export * from './useCommandsConnections';
|
||||
export * from './useCenterSystem';
|
||||
export * from './useSelectSystem';
|
||||
export * from './useMapCommands';
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import { useReactFlow } from 'reactflow';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { CommandCenterSystem } from '@/hooks/Mapper/types';
|
||||
|
||||
export const useCenterSystem = () => {
|
||||
const rf = useReactFlow();
|
||||
|
||||
const ref = useRef({ rf });
|
||||
ref.current = { rf };
|
||||
|
||||
return useCallback((systemId: CommandCenterSystem) => {
|
||||
const systemNode = ref.current.rf.getNodes().find(x => x.data.id === systemId);
|
||||
if (!systemNode) {
|
||||
return;
|
||||
}
|
||||
ref.current.rf.setCenter(systemNode.position.x, systemNode.position.y, { duration: 1000 });
|
||||
}, []);
|
||||
};
|
||||
@@ -2,17 +2,28 @@ import { Node, useReactFlow } from 'reactflow';
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { CommandAddSystems } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { convertSystem2Node } from '../../helpers';
|
||||
import { useMapState } from '@/hooks/Mapper/components/map/MapProvider.tsx';
|
||||
|
||||
export const useMapAddSystems = () => {
|
||||
const rf = useReactFlow();
|
||||
const {
|
||||
data: { systems },
|
||||
update,
|
||||
} = useMapState();
|
||||
|
||||
const ref = useRef({ rf });
|
||||
ref.current = { rf };
|
||||
const ref = useRef({ rf, systems, update });
|
||||
ref.current = { update, systems, rf };
|
||||
|
||||
return useCallback((systems: CommandAddSystems) => {
|
||||
const { rf } = ref.current;
|
||||
const nodes = rf.getNodes();
|
||||
const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node);
|
||||
rf.addNodes(prepared);
|
||||
}, []);
|
||||
return useCallback(
|
||||
(systems: CommandAddSystems) => {
|
||||
const nodes = rf.getNodes();
|
||||
const prepared: Node[] = systems.filter(x => !nodes.some(y => x.id === y.id)).map(convertSystem2Node);
|
||||
rf.addNodes(prepared);
|
||||
|
||||
ref.current.update({
|
||||
systems: [...ref.current.systems.filter(sys => systems.some(x => sys.id !== x.id)), ...systems],
|
||||
});
|
||||
},
|
||||
[rf],
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,18 +4,18 @@ import { CommandSelectSystem } from '@/hooks/Mapper/types';
|
||||
|
||||
export const useSelectSystem = () => {
|
||||
const rf = useReactFlow();
|
||||
|
||||
const ref = useRef({ rf });
|
||||
ref.current = { rf };
|
||||
|
||||
return useCallback((systemId: CommandSelectSystem) => {
|
||||
ref.current.rf.setNodes(nds =>
|
||||
nds.map(node => {
|
||||
return {
|
||||
...node,
|
||||
selected: node.id === systemId,
|
||||
};
|
||||
}),
|
||||
);
|
||||
if (!ref.current?.rf) {
|
||||
return;
|
||||
}
|
||||
const systemNode = ref.current.rf.getNodes().find(x => x.data.id === systemId);
|
||||
if (!systemNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
ref.current.rf.setCenter(systemNode.position.x, systemNode.position.y, { duration: 1000 });
|
||||
}, []);
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ForwardedRef, useImperativeHandle, useRef } from 'react';
|
||||
import { ForwardedRef, useImperativeHandle } from 'react';
|
||||
import {
|
||||
CommandAddConnections,
|
||||
CommandAddSystems,
|
||||
@@ -18,9 +18,6 @@ import {
|
||||
CommandUpdateSystems,
|
||||
MapHandlers,
|
||||
} from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
|
||||
import { useMapEventListener } from '@/hooks/Mapper/events';
|
||||
|
||||
import {
|
||||
useCommandsCharacters,
|
||||
useCommandsConnections,
|
||||
@@ -29,7 +26,6 @@ import {
|
||||
useMapInit,
|
||||
useMapRemoveSystems,
|
||||
useMapUpdateSystems,
|
||||
useCenterSystem,
|
||||
useSelectSystem,
|
||||
} from './api';
|
||||
import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
|
||||
@@ -39,12 +35,8 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
|
||||
const mapAddSystems = useMapAddSystems();
|
||||
const mapUpdateSystems = useMapUpdateSystems();
|
||||
const removeSystems = useMapRemoveSystems(onSelectionChange);
|
||||
const centerSystem = useCenterSystem();
|
||||
const selectSystem = useSelectSystem();
|
||||
|
||||
const selectRef = useRef({ onSelectionChange });
|
||||
selectRef.current = { onSelectionChange };
|
||||
|
||||
const { addConnections, removeConnections, updateConnection } = useCommandsConnections();
|
||||
const { mapUpdated, killsUpdated } = useMapCommands();
|
||||
const { charactersUpdated, presentCharacters, characterAdded, characterRemoved, characterUpdated } =
|
||||
@@ -60,13 +52,16 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
|
||||
mapInit(data as CommandInit);
|
||||
break;
|
||||
case Commands.addSystems:
|
||||
mapAddSystems(data as CommandAddSystems);
|
||||
break;
|
||||
case Commands.updateSystems:
|
||||
mapUpdateSystems(data as CommandUpdateSystems);
|
||||
break;
|
||||
case Commands.removeSystems:
|
||||
removeSystems(data as CommandRemoveSystems);
|
||||
break;
|
||||
case Commands.addConnections:
|
||||
addConnections(data as CommandAddConnections);
|
||||
break;
|
||||
case Commands.removeConnections:
|
||||
removeConnections(data as CommandRemoveConnections);
|
||||
@@ -96,32 +91,14 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
|
||||
killsUpdated(data as CommandKillsUpdated);
|
||||
break;
|
||||
|
||||
case Commands.centerSystem:
|
||||
setTimeout(() => {
|
||||
const systemId = `${data}`;
|
||||
centerSystem(systemId as CommandSelectSystem);
|
||||
}, 100);
|
||||
break;
|
||||
|
||||
case Commands.selectSystem:
|
||||
setTimeout(() => {
|
||||
const systemId = `${data}`;
|
||||
selectRef.current.onSelectionChange({
|
||||
systems: [systemId],
|
||||
connections: [],
|
||||
});
|
||||
selectSystem(systemId as CommandSelectSystem);
|
||||
}, 100);
|
||||
selectSystem(data as CommandSelectSystem);
|
||||
break;
|
||||
|
||||
case Commands.routes:
|
||||
// do nothing here
|
||||
break;
|
||||
|
||||
case Commands.linkSignatureToSystem:
|
||||
// do nothing here
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn(`Map handlers: Unknown command: ${type}`, data);
|
||||
break;
|
||||
@@ -131,20 +108,4 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useMapEventListener(event => {
|
||||
switch (event.name) {
|
||||
case Commands.addConnections:
|
||||
addConnections(event.data as CommandAddConnections);
|
||||
break;
|
||||
case Commands.addSystems:
|
||||
mapAddSystems(event.data as CommandAddSystems);
|
||||
break;
|
||||
case Commands.removeSystems:
|
||||
removeSystems(event.data as CommandRemoveSystems);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Button } from 'primereact/button';
|
||||
import { OutCommand } from '@/hooks/Mapper/types';
|
||||
import { IconField } from 'primereact/iconfield';
|
||||
import { LabelsManager } from '@/hooks/Mapper/utils/labelsManager.ts';
|
||||
import { WdImageSize, WdImgButton, TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
|
||||
import { WdImageSize, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
interface SystemCustomLabelDialog {
|
||||
systemId: string;
|
||||
@@ -79,14 +79,14 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
|
||||
|
||||
// @ts-ignore
|
||||
const handleInput = useCallback(e => {
|
||||
e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9[\](){}]/g, '');
|
||||
e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
header="Edit label"
|
||||
visible={visible}
|
||||
draggable={true}
|
||||
draggable={false}
|
||||
style={{ width: '250px' }}
|
||||
onHide={onHide}
|
||||
onShow={onShow}
|
||||
@@ -100,13 +100,9 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
|
||||
<IconField>
|
||||
{label !== '' && (
|
||||
<WdImgButton
|
||||
className="pi pi-trash text-red-400"
|
||||
className="pi pi-trash p-input-icon"
|
||||
textSize={WdImageSize.large}
|
||||
tooltip={{
|
||||
content: 'Remove custom label',
|
||||
className: 'pi p-input-icon',
|
||||
position: TooltipPosition.top,
|
||||
}}
|
||||
tooltip={{ content: 'Reset label' }}
|
||||
onClick={handleReset}
|
||||
/>
|
||||
)}
|
||||
@@ -115,7 +111,7 @@ export const SystemCustomLabelDialog = ({ systemId, visible, setVisible }: Syste
|
||||
aria-describedby="username-help"
|
||||
autoComplete="off"
|
||||
value={label}
|
||||
maxLength={5}
|
||||
maxLength={3}
|
||||
onChange={e => setLabel(e.target.value)}
|
||||
// @ts-expect-error
|
||||
ref={inputRef}
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
|
||||
import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
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 {
|
||||
Setting,
|
||||
COSMIC_SIGNATURE,
|
||||
} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
|
||||
|
||||
interface SystemLinkSignatureDialogProps {
|
||||
data: CommandLinkSignatureToSystem;
|
||||
setVisible: (visible: boolean) => void;
|
||||
}
|
||||
|
||||
const signatureSettings: Setting[] = [{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true }];
|
||||
|
||||
export const SystemLinkSignatureDialog = ({ data, setVisible }: SystemLinkSignatureDialogProps) => {
|
||||
const { outCommand } = useMapRootState();
|
||||
|
||||
const ref = useRef({ outCommand });
|
||||
ref.current = { outCommand };
|
||||
|
||||
const handleHide = useCallback(() => {
|
||||
setVisible(false);
|
||||
}, [setVisible]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(signature: SystemSignature) => {
|
||||
if (!signature) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { outCommand } = ref.current;
|
||||
|
||||
outCommand({
|
||||
type: OutCommand.linkSignatureToSystem,
|
||||
data: {
|
||||
...data,
|
||||
signature_eve_id: signature.eve_id,
|
||||
},
|
||||
});
|
||||
setVisible(false);
|
||||
},
|
||||
[data, setVisible],
|
||||
);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
header="Select signature to link"
|
||||
visible
|
||||
draggable={false}
|
||||
style={{ width: '500px' }}
|
||||
onHide={handleHide}
|
||||
contentClassName="!p-0"
|
||||
>
|
||||
<SystemSignaturesContent
|
||||
systemId={`${data.solar_system_source}`}
|
||||
settings={signatureSettings}
|
||||
onSelect={handleSelect}
|
||||
selectable={true}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SystemLinkSignatureDialog';
|
||||
@@ -90,7 +90,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
|
||||
}, []);
|
||||
|
||||
const handleInput = useCallback((e: any) => {
|
||||
e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9[\](){}]/g, '');
|
||||
e.target.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@@ -160,7 +160,7 @@ export const SystemSettingsDialog = ({ systemId, visible, setVisible }: SystemSe
|
||||
aria-describedby="label"
|
||||
autoComplete="off"
|
||||
value={label}
|
||||
maxLength={5}
|
||||
maxLength={3}
|
||||
onChange={e => setLabel(e.target.value)}
|
||||
onInput={handleInput}
|
||||
/>
|
||||
|
||||
@@ -2,4 +2,3 @@ export * from './Widget';
|
||||
export * from './WidgetsGrid';
|
||||
export * from './SystemSettingsDialog';
|
||||
export * from './SystemCustomLabelDialog';
|
||||
export * from './SystemLinkSignatureDialog';
|
||||
|
||||
@@ -91,7 +91,7 @@ export const RoutesList = ({ data, onContextMenu }: RoutesListProps) => {
|
||||
const { mapRef } = useMapRootState();
|
||||
|
||||
const handleClick = useCallback(
|
||||
(systemId: number) => mapRef.current?.command(Commands.centerSystem, systemId.toString()),
|
||||
(systemId: number) => mapRef.current?.command(Commands.selectSystem, systemId.toString()),
|
||||
[mapRef],
|
||||
);
|
||||
|
||||
|
||||
@@ -13,10 +13,9 @@ export const SystemInfoContent = ({ systemId }: SystemInfoContentProps) => {
|
||||
data: { systems, wormholesData },
|
||||
} = useMapRootState();
|
||||
|
||||
const sys = getSystemById(systems, systemId)! || {};
|
||||
const sys = getSystemById(systems, systemId)!;
|
||||
const { description } = sys;
|
||||
const { system_class, region_name, constellation_name, statics, effect_name, effect_power } =
|
||||
sys.system_static_info || {};
|
||||
const { system_class, region_name, constellation_name, statics, effect_name, effect_power } = sys.system_static_info;
|
||||
const isWH = isWormholeSpace(system_class);
|
||||
const sortedStatics = useMemo(() => sortWHClasses(wormholesData, statics), [wormholesData, statics]);
|
||||
|
||||
|
||||
@@ -5,14 +5,6 @@ import { Checkbox } from 'primereact/checkbox';
|
||||
|
||||
export type Setting = { key: string; name: string; value: boolean };
|
||||
|
||||
export const COSMIC_SIGNATURE = 'Cosmic Signature';
|
||||
export const COSMIC_ANOMALY = 'Cosmic Anomaly';
|
||||
export const DEPLOYABLE = 'Deployable';
|
||||
export const STRUCTURE = 'Structure';
|
||||
export const STARBASE = 'Starbase';
|
||||
export const SHIP = 'Ship';
|
||||
export const DRONE = 'Drone';
|
||||
|
||||
interface SystemSignatureSettingsDialogProps {
|
||||
settings: Setting[];
|
||||
onSave: (settings: Setting[]) => void;
|
||||
|
||||
@@ -1,17 +1,7 @@
|
||||
import { Widget } from '@/hooks/Mapper/components/mapInterface/components';
|
||||
import { InfoDrawer, LayoutEventBlocker, TooltipPosition, WdImgButton } from '@/hooks/Mapper/components/ui-kit';
|
||||
import { SystemSignaturesContent } from './SystemSignaturesContent';
|
||||
import {
|
||||
Setting,
|
||||
SystemSignatureSettingsDialog,
|
||||
COSMIC_SIGNATURE,
|
||||
COSMIC_ANOMALY,
|
||||
DEPLOYABLE,
|
||||
STRUCTURE,
|
||||
STARBASE,
|
||||
SHIP,
|
||||
DRONE,
|
||||
} from './SystemSignatureSettingsDialog';
|
||||
import { Setting, SystemSignatureSettingsDialog } from './SystemSignatureSettingsDialog';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
@@ -19,6 +9,14 @@ import { PrimeIcons } from 'primereact/api';
|
||||
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
|
||||
export const COSMIC_SIGNATURE = 'Cosmic Signature';
|
||||
export const COSMIC_ANOMALY = 'Cosmic Anomaly';
|
||||
export const DEPLOYABLE = 'Deployable';
|
||||
export const STRUCTURE = 'Structure';
|
||||
export const STARBASE = 'Starbase';
|
||||
export const SHIP = 'Ship';
|
||||
export const DRONE = 'Drone';
|
||||
|
||||
const settings: Setting[] = [
|
||||
{ key: COSMIC_ANOMALY, name: 'Show Anomalies', value: true },
|
||||
{ key: COSMIC_SIGNATURE, name: 'Show Cosmic Signatures', value: true },
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { useClipboard } from '@/hooks/Mapper/hooks/useClipboard';
|
||||
import { parseSignatures } from '@/hooks/Mapper/helpers';
|
||||
import { Commands, OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { OutCommand } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { WdTooltip, WdTooltipHandlers } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
import { DataTable, DataTableRowClickEvent, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
|
||||
import { DataTable, DataTableRowMouseEvent, SortOrder } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import useRefState from 'react-usestateref';
|
||||
@@ -22,14 +22,11 @@ import {
|
||||
} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/helpers';
|
||||
import {
|
||||
renderIcon,
|
||||
renderInfoColumn,
|
||||
renderName,
|
||||
renderTimeLeft,
|
||||
} from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
|
||||
// import { PrimeIcons } from 'primereact/api';
|
||||
import useLocalStorageState from 'use-local-storage-state';
|
||||
import { PrimeIcons } from 'primereact/api';
|
||||
import { SignatureSettings } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings';
|
||||
import { useMapEventListener } from '@/hooks/Mapper/events';
|
||||
import { WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper';
|
||||
|
||||
type SystemSignaturesSortSettings = {
|
||||
sortField: string;
|
||||
@@ -44,18 +41,13 @@ const SORT_DEFAULT_VALUES: SystemSignaturesSortSettings = {
|
||||
interface SystemSignaturesContentProps {
|
||||
systemId: string;
|
||||
settings: Setting[];
|
||||
selectable?: boolean;
|
||||
onSelect?: (signature: SystemSignature) => void;
|
||||
}
|
||||
export const SystemSignaturesContent = ({ systemId, settings, selectable, onSelect }: SystemSignaturesContentProps) => {
|
||||
export const SystemSignaturesContent = ({ systemId, settings }: SystemSignaturesContentProps) => {
|
||||
const { outCommand } = useMapRootState();
|
||||
|
||||
const [signatures, setSignatures, signaturesRef] = useRefState<SystemSignature[]>([]);
|
||||
const [selectedSignatures, setSelectedSignatures] = useState<SystemSignature[]>([]);
|
||||
const [nameColumnWidth, setNameColumnWidth] = useState('auto');
|
||||
const [parsedSignatures, setParsedSignatures] = useState<SystemSignature[]>([]);
|
||||
const [askUser, setAskUser] = useState(false);
|
||||
const [selectedSignature, setSelectedSignature] = useState<SystemSignature | null>(null);
|
||||
|
||||
const [hoveredSig, setHoveredSig] = useState<SystemSignature | null>(null);
|
||||
|
||||
@@ -94,33 +86,12 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
|
||||
data: { system_id: systemId },
|
||||
});
|
||||
|
||||
setAskUser(false);
|
||||
setSignatures(signatures);
|
||||
}, [outCommand, systemId]);
|
||||
|
||||
// const updateSignatures = useCallback(
|
||||
// async (newSignatures: SystemSignature[], updateOnly: boolean) => {
|
||||
// const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
|
||||
|
||||
// const { signatures: updatedSignatures } = await outCommand({
|
||||
// type: OutCommand.updateSignatures,
|
||||
// data: {
|
||||
// system_id: systemId,
|
||||
// added,
|
||||
// updated,
|
||||
// removed,
|
||||
// },
|
||||
// });
|
||||
|
||||
// setSignatures(() => updatedSignatures);
|
||||
// setSelectedSignatures([]);
|
||||
// },
|
||||
// [outCommand, systemId],
|
||||
// );
|
||||
|
||||
const handleUpdateSignatures = useCallback(
|
||||
async (newSignatures: SystemSignature[], updateOnly: boolean) => {
|
||||
const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures, updateOnly);
|
||||
async (newSignatures: SystemSignature[]) => {
|
||||
const { added, updated, removed } = getActualSigs(signaturesRef.current, newSignatures);
|
||||
|
||||
const { signatures: updatedSignatures } = await outCommand({
|
||||
type: OutCommand.updateSignatures,
|
||||
@@ -139,96 +110,43 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
|
||||
);
|
||||
|
||||
const handleDeleteSelected = useCallback(async () => {
|
||||
if (selectable) {
|
||||
return;
|
||||
}
|
||||
if (selectedSignatures.length === 0) {
|
||||
return;
|
||||
}
|
||||
const selectedSignaturesEveIds = selectedSignatures.map(x => x.eve_id);
|
||||
await handleUpdateSignatures(
|
||||
signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)),
|
||||
false,
|
||||
);
|
||||
}, [handleUpdateSignatures, selectable, signatures, selectedSignatures]);
|
||||
await handleUpdateSignatures(signatures.filter(x => !selectedSignaturesEveIds.includes(x.eve_id)));
|
||||
}, [handleUpdateSignatures, signatures, selectedSignatures]);
|
||||
|
||||
const handleSelectAll = useCallback(() => {
|
||||
setSelectedSignatures(signatures);
|
||||
}, [signatures]);
|
||||
|
||||
const handleReplaceAll = useCallback(() => {
|
||||
handleUpdateSignatures(parsedSignatures, false);
|
||||
setAskUser(false);
|
||||
}, [parsedSignatures, handleUpdateSignatures]);
|
||||
|
||||
const handleUpdateOnly = useCallback(() => {
|
||||
handleUpdateSignatures(parsedSignatures, true);
|
||||
setAskUser(false);
|
||||
}, [parsedSignatures, handleUpdateSignatures]);
|
||||
|
||||
const handleSelectSignatures = useCallback(
|
||||
// TODO still will be good to define types if we use typescript
|
||||
// @ts-ignore
|
||||
e => {
|
||||
if (selectable) {
|
||||
onSelect?.(e.value);
|
||||
} else {
|
||||
setSelectedSignatures(e.value);
|
||||
}
|
||||
},
|
||||
[onSelect, selectable],
|
||||
);
|
||||
|
||||
useHotkey(true, ['a'], handleSelectAll);
|
||||
|
||||
useHotkey(false, ['Backspace', 'Delete'], handleDeleteSelected);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectable) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!clipboardContent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newSignatures = parseSignatures(
|
||||
const signatures = parseSignatures(
|
||||
clipboardContent,
|
||||
settings.map(x => x.key),
|
||||
);
|
||||
|
||||
const { removed } = getActualSigs(signaturesRef.current, newSignatures, false);
|
||||
|
||||
if (!signaturesRef.current || !signaturesRef.current.length || !removed.length) {
|
||||
handleUpdateSignatures(newSignatures, false);
|
||||
} else {
|
||||
setParsedSignatures(newSignatures);
|
||||
setAskUser(true);
|
||||
}
|
||||
}, [clipboardContent, selectable]);
|
||||
handleUpdateSignatures(signatures);
|
||||
}, [clipboardContent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!systemId) {
|
||||
setSignatures([]);
|
||||
setAskUser(false);
|
||||
return;
|
||||
}
|
||||
|
||||
handleGetSignatures();
|
||||
}, [systemId]);
|
||||
|
||||
useMapEventListener(event => {
|
||||
switch (event.name) {
|
||||
case Commands.signaturesUpdated:
|
||||
if (event.data?.toString() !== systemId.toString()) {
|
||||
return;
|
||||
}
|
||||
|
||||
handleGetSignatures();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new ResizeObserver(handleResize);
|
||||
if (tableRef.current) {
|
||||
@@ -257,147 +175,107 @@ export const SystemSignaturesContent = ({ systemId, settings, selectable, onSele
|
||||
setHoveredSig(null);
|
||||
}, []);
|
||||
|
||||
const renderToolbar = (/*row: SystemSignature*/) => {
|
||||
return (
|
||||
<div className="flex justify-end items-center gap-2 mr-[4px]">
|
||||
<WdTooltipWrapper content="To Edit Signature do double click">
|
||||
<span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
|
||||
</WdTooltipWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const [showSignatureSettings, setShowSignatureSettings] = useState(false);
|
||||
|
||||
const handleRowClick = (e: DataTableRowClickEvent) => {
|
||||
setSelectedSignature(e.data as SystemSignature);
|
||||
setShowSignatureSettings(true);
|
||||
};
|
||||
// const renderToolbar = (/*row: SystemSignature*/) => {
|
||||
// return (
|
||||
// <div className="flex justify-end items-center gap-2">
|
||||
// <span className={clsx(PrimeIcons.PENCIL, 'text-[10px]')}></span>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={tableRef} className={'h-full '}>
|
||||
{filteredSignatures.length === 0 ? (
|
||||
<div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
|
||||
No signatures
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* @ts-ignore */}
|
||||
<DataTable
|
||||
className={classes.Table}
|
||||
value={filteredSignatures}
|
||||
size="small"
|
||||
selectionMode={selectable ? 'single' : 'multiple'}
|
||||
selection={selectedSignatures}
|
||||
metaKeySelection
|
||||
onSelectionChange={handleSelectSignatures}
|
||||
dataKey="eve_id"
|
||||
tableClassName="w-full select-none"
|
||||
resizableColumns={false}
|
||||
onRowDoubleClick={handleRowClick}
|
||||
rowHover
|
||||
selectAll
|
||||
sortField={sortSettings.sortField}
|
||||
sortOrder={sortSettings.sortOrder}
|
||||
onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
|
||||
onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
|
||||
onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
|
||||
rowClassName={row => {
|
||||
if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
|
||||
return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
|
||||
}
|
||||
<div ref={tableRef} className="h-full">
|
||||
{filteredSignatures.length === 0 ? (
|
||||
<div className="w-full h-full flex justify-center items-center select-none text-stone-400/80 text-sm">
|
||||
No signatures
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
className={classes.Table}
|
||||
value={filteredSignatures}
|
||||
size="small"
|
||||
selectionMode="multiple"
|
||||
selection={selectedSignatures}
|
||||
metaKeySelection
|
||||
onSelectionChange={e => setSelectedSignatures(e.value)}
|
||||
dataKey="eve_id"
|
||||
tableClassName="w-full select-none"
|
||||
resizableColumns={false}
|
||||
rowHover
|
||||
selectAll
|
||||
sortField={sortSettings.sortField}
|
||||
sortOrder={sortSettings.sortOrder}
|
||||
onSort={event => setSortSettings(() => ({ sortField: event.sortField, sortOrder: event.sortOrder }))}
|
||||
onRowMouseEnter={compact || medium ? handleEnterRow : undefined}
|
||||
onRowMouseLeave={compact || medium ? handleLeaveRow : undefined}
|
||||
rowClassName={row => {
|
||||
if (selectedSignatures.some(x => x.eve_id === row.eve_id)) {
|
||||
return clsx(classes.TableRowCompact, 'bg-amber-500/50 hover:bg-amber-500/70 transition duration-200');
|
||||
}
|
||||
|
||||
const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
|
||||
if (!dateClass) {
|
||||
return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
|
||||
}
|
||||
const dateClass = getRowColorByTimeLeft(row.updated_at ? new Date(row.updated_at) : undefined);
|
||||
if (!dateClass) {
|
||||
return clsx(classes.TableRowCompact, 'hover:bg-purple-400/20 transition duration-200');
|
||||
}
|
||||
|
||||
return clsx(classes.TableRowCompact, dateClass);
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
bodyClassName="p-0 px-1"
|
||||
field="group"
|
||||
body={x => renderIcon(x)}
|
||||
style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
|
||||
></Column>
|
||||
return clsx(classes.TableRowCompact, dateClass);
|
||||
}}
|
||||
>
|
||||
<Column
|
||||
bodyClassName="p-0 px-1"
|
||||
field="group"
|
||||
body={renderIcon}
|
||||
style={{ maxWidth: 26, minWidth: 26, width: 26, height: 25 }}
|
||||
></Column>
|
||||
|
||||
<Column
|
||||
field="eve_id"
|
||||
header="Id"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
style={{ maxWidth: 72, minWidth: 72, width: 72 }}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="group"
|
||||
header="Group"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
hidden={compact}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="info"
|
||||
// header="Info"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
body={renderInfoColumn}
|
||||
style={{ maxWidth: nameColumnWidth }}
|
||||
hidden={compact || medium}
|
||||
></Column>
|
||||
<Column
|
||||
field="updated_at"
|
||||
header="Updated"
|
||||
dataType="date"
|
||||
bodyClassName="w-[70px] text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
body={renderTimeLeft}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="eve_id"
|
||||
header="Id"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
style={{ maxWidth: 72, minWidth: 72, width: 72 }}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="group"
|
||||
header="Group"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
hidden={compact}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="name"
|
||||
header="Name"
|
||||
bodyClassName="text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
body={renderName}
|
||||
style={{ maxWidth: nameColumnWidth }}
|
||||
hidden={compact || medium}
|
||||
sortable
|
||||
></Column>
|
||||
<Column
|
||||
field="updated_at"
|
||||
header="Updated"
|
||||
dataType="date"
|
||||
bodyClassName="w-[80px] text-ellipsis overflow-hidden whitespace-nowrap"
|
||||
body={renderTimeLeft}
|
||||
sortable
|
||||
></Column>
|
||||
|
||||
<Column
|
||||
bodyClassName="p-0 pl-1 pr-2"
|
||||
field="group"
|
||||
body={renderToolbar}
|
||||
// headerClassName={headerClasses}
|
||||
style={{ maxWidth: 26, minWidth: 26, width: 26 }}
|
||||
></Column>
|
||||
</DataTable>
|
||||
</>
|
||||
)}
|
||||
<WdTooltip
|
||||
className="bg-stone-900/95 text-slate-50"
|
||||
ref={tooltipRef}
|
||||
content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
|
||||
/>
|
||||
|
||||
<SignatureSettings
|
||||
systemId={systemId}
|
||||
show={showSignatureSettings}
|
||||
onHide={() => setShowSignatureSettings(false)}
|
||||
signatureData={selectedSignature}
|
||||
/>
|
||||
|
||||
{askUser && (
|
||||
<div className="absolute left-[1px] top-[29px] h-[calc(100%-30px)] w-[calc(100%-3px)] bg-stone-900/10 backdrop-blur-sm">
|
||||
<div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
|
||||
<div className="text-stone-400/80 text-sm">
|
||||
<div className="flex flex-col text-center gap-2">
|
||||
<button className="p-button p-component p-button-outlined p-button-sm btn-wide">
|
||||
<span className="p-button-label p-c" onClick={handleUpdateOnly}>
|
||||
Update
|
||||
</span>
|
||||
</button>
|
||||
<button className="p-button p-component p-button-outlined p-button-sm btn-wide">
|
||||
<span className="p-button-label p-c" onClick={handleReplaceAll}>
|
||||
Update & Delete missing
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
{/*<Column*/}
|
||||
{/* bodyClassName="p-0 pl-1 pr-2"*/}
|
||||
{/* field="group"*/}
|
||||
{/* body={renderToolbar}*/}
|
||||
{/* headerClassName={headerClasses}*/}
|
||||
{/* style={{ maxWidth: 26, minWidth: 26, width: 26 }}*/}
|
||||
{/*></Column>*/}
|
||||
</DataTable>
|
||||
</>
|
||||
)}
|
||||
<WdTooltip
|
||||
className="bg-stone-900/95 text-slate-50"
|
||||
ref={tooltipRef}
|
||||
content={hoveredSig ? <SignatureView {...hoveredSig} /> : null}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -5,7 +5,6 @@ import { getState } from './getState.ts';
|
||||
export const getActualSigs = (
|
||||
oldSignatures: SystemSignature[],
|
||||
newSignatures: SystemSignature[],
|
||||
updateOnly: boolean,
|
||||
): { added: SystemSignature[]; updated: SystemSignature[]; removed: SystemSignature[] } => {
|
||||
const updated: SystemSignature[] = [];
|
||||
const removed: SystemSignature[] = [];
|
||||
@@ -21,9 +20,7 @@ export const getActualSigs = (
|
||||
updated.push({ ...oldSig, group: newSig.group, name: newSig.name });
|
||||
}
|
||||
} else {
|
||||
if (!updateOnly) {
|
||||
removed.push(oldSig);
|
||||
}
|
||||
removed.push(oldSig);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ export const getState = (_: string[], newSig: SystemSignature) => {
|
||||
let state = -1;
|
||||
if (!newSig.group || newSig.group === '') {
|
||||
state = 0;
|
||||
} else if (!newSig.name || newSig.name === '') {
|
||||
} else if (!!newSig.group && newSig.group !== '' && newSig.name === '') {
|
||||
state = 1;
|
||||
} else if (newSig.name !== '') {
|
||||
} else if (!!newSig.group && newSig.group !== '' && newSig.name !== '') {
|
||||
state = 2;
|
||||
}
|
||||
return state;
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
export * from './renderIcon';
|
||||
export * from './renderName';
|
||||
export * from './renderTimeLeft';
|
||||
export * from './renderLinkedSystem';
|
||||
export * from './renderInfoColumn';
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { GroupType, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { GROUPS } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/constants.ts';
|
||||
|
||||
export const renderIcon = (row: SystemSignature, customSize?: Omit<GroupType, 'icon' | 'id'>) => {
|
||||
export const renderIcon = (row: SystemSignature) => {
|
||||
if (row.group == null) {
|
||||
return null;
|
||||
}
|
||||
@@ -13,7 +13,7 @@ export const renderIcon = (row: SystemSignature, customSize?: Omit<GroupType, 'i
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center">
|
||||
<img src={group.icon} style={{ width: customSize?.w ?? group.w, height: customSize?.h ?? group.h }} />
|
||||
<img src={group.icon} style={{ width: group.w, height: group.h }} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
.whFontSize {
|
||||
font-size: 11px !important;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { SystemViewStandalone, WHClassView } from '@/hooks/Mapper/components/ui-kit';
|
||||
import clsx from 'clsx';
|
||||
import { renderName } from './renderName.tsx';
|
||||
import classes from './renderInfoColumn.module.scss';
|
||||
|
||||
export const renderInfoColumn = (row: SystemSignature) => {
|
||||
if (!row.group || row.group === SignatureGroup.Wormhole) {
|
||||
return (
|
||||
<div className="flex justify-start items-center gap-[6px]">
|
||||
{row.type && (
|
||||
<WHClassView
|
||||
className="text-[11px]"
|
||||
classNameWh={classes.whFontSize}
|
||||
highlightName
|
||||
hideWhClass={!!row.linked_system}
|
||||
whClassName={row.type}
|
||||
noOffset
|
||||
useShortTitle
|
||||
/>
|
||||
)}
|
||||
|
||||
{row.linked_system && (
|
||||
<>
|
||||
{/*<span className="w-4 h-4 hero-arrow-long-right"></span>*/}
|
||||
<span title={row.linked_system?.solar_system_name}>
|
||||
<SystemViewStandalone
|
||||
className={clsx('select-none text-center cursor-context-menu')}
|
||||
hideRegion
|
||||
{...row.linked_system}
|
||||
/>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (row.description != null && row.description.length > 0) {
|
||||
return <span title={row.description}>{row.description}</span>;
|
||||
}
|
||||
|
||||
return renderName(row);
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
|
||||
import { SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { SystemViewStandalone } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
export const renderLinkedSystem = (row: SystemSignature) => {
|
||||
if (!row.linked_system) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span title={row.linked_system?.solar_system_name}>
|
||||
<SystemViewStandalone
|
||||
className={clsx('select-none text-center cursor-context-menu')}
|
||||
hideRegion
|
||||
{...row.linked_system}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -6,8 +6,6 @@ import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { OnTheMap, RightBar } from '@/hooks/Mapper/components/mapRootContent/components';
|
||||
import { MapContextMenu } from '@/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx';
|
||||
import { useSkipContextMenu } from '@/hooks/Mapper/hooks/useSkipContextMenu';
|
||||
import { MapSettings } from "@/hooks/Mapper/components/mapRootContent/components/MapSettings";
|
||||
|
||||
export interface MapRootContentProps {}
|
||||
|
||||
@@ -17,13 +15,9 @@ export const MapRootContent = ({}: MapRootContentProps) => {
|
||||
const { isShowMenu } = interfaceSettings;
|
||||
|
||||
const [showOnTheMap, setShowOnTheMap] = useState(false);
|
||||
const [showMapSettings, setShowMapSettings] = useState(false);
|
||||
const mapInterface = <MapInterface />;
|
||||
|
||||
const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []);
|
||||
const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []);
|
||||
|
||||
useSkipContextMenu();
|
||||
|
||||
return (
|
||||
<Layout map={<MapWrapper refn={mapRef} />}>
|
||||
@@ -34,19 +28,18 @@ export const MapRootContent = ({}: MapRootContentProps) => {
|
||||
{mapInterface}
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 w-14 h-[calc(100%+3.5rem)] pointer-events-auto">
|
||||
<RightBar onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
|
||||
<RightBar onShowOnTheMap={handleShowOnTheMap} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="absolute top-0 left-14 w-[calc(100%-3.5rem)] h-[calc(100%-3.5rem)] pointer-events-none">
|
||||
<Topbar>
|
||||
<MapContextMenu onShowOnTheMap={handleShowOnTheMap} onShowMapSettings={handleShowMapSettings} />
|
||||
<MapContextMenu onShowOnTheMap={handleShowOnTheMap} />
|
||||
</Topbar>
|
||||
{mapInterface}
|
||||
</div>
|
||||
)}
|
||||
<OnTheMap show={showOnTheMap} onHide={() => setShowOnTheMap(false)} />
|
||||
<MapSettings show={showMapSettings} onHide={() => setShowMapSettings(false)} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,11 +8,10 @@ import { MenuItem } from 'primereact/menuitem';
|
||||
|
||||
export interface MapContextMenuProps {
|
||||
onShowOnTheMap?: () => void;
|
||||
onShowMapSettings?: () => void;
|
||||
}
|
||||
|
||||
export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContextMenuProps) => {
|
||||
const { outCommand, setInterfaceSettings } = useMapRootState();
|
||||
export const MapContextMenu = ({ onShowOnTheMap }: MapContextMenuProps) => {
|
||||
const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
|
||||
|
||||
const menuRight = useRef<Menu>(null);
|
||||
|
||||
@@ -23,6 +22,13 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
|
||||
});
|
||||
}, [outCommand]);
|
||||
|
||||
const toggleMinimap = useCallback(() => {
|
||||
setInterfaceSettings(x => ({
|
||||
...x,
|
||||
isShowMinimap: !x.isShowMinimap,
|
||||
}));
|
||||
}, [setInterfaceSettings]);
|
||||
|
||||
const items = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
@@ -37,9 +43,9 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
|
||||
},
|
||||
{ separator: true },
|
||||
{
|
||||
label: 'Settings',
|
||||
icon: `pi pi-cog`,
|
||||
command: onShowMapSettings,
|
||||
label: interfaceSettings.isShowMinimap ? 'Hide minimap' : 'Show minimap',
|
||||
icon: `pi ${interfaceSettings.isShowMinimap ? 'pi-eye-slash' : 'pi-eye'}`,
|
||||
command: toggleMinimap,
|
||||
},
|
||||
{
|
||||
label: 'Dock menu',
|
||||
@@ -51,7 +57,7 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings }: MapContext
|
||||
})),
|
||||
},
|
||||
] as MenuItem[];
|
||||
}, [handleAddCharacter, onShowMapSettings, onShowOnTheMap, setInterfaceSettings]);
|
||||
}, [handleAddCharacter, interfaceSettings.isShowMinimap, onShowOnTheMap, setInterfaceSettings, toggleMinimap]);
|
||||
|
||||
return (
|
||||
<div className="ml-1">
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
.verticalTabsContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
|
||||
:global {
|
||||
.p-tabview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-tabview-panels {
|
||||
padding: 6px 1rem !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-tabview-nav-container {
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-tabview-nav {
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
min-height: 100%;
|
||||
border: none;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
border-right: 4px solid var(--surface-hover);
|
||||
background-color: var(--surface-card);
|
||||
|
||||
transition: background-color 200ms, border-right-color 200ms;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
border-right: 4px solid var(--surface-100);
|
||||
}
|
||||
|
||||
.p-tabview-nav-link {
|
||||
transition: color 200ms;
|
||||
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
//background-color: var(--surface-card);
|
||||
background-color: initial;
|
||||
border: none;
|
||||
color: var(--gray-400);
|
||||
|
||||
border-radius: initial;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.p-tabview-selected {
|
||||
background-color: var(--surface-50);
|
||||
border-right: 4px solid var(--primary-color);
|
||||
|
||||
.p-tabview-nav-link {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//background-color: var(--surface-hover);
|
||||
border-right: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-panel {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.CheckboxContainer {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
color: var(--gray-200);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
& > :nth-child(2){
|
||||
border-bottom: 2px dotted #3f3f3f;
|
||||
height: 2px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Уменьшение размеров InputSwitch с использованием глобальных стилей */
|
||||
.smallInputSwitch {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:global {
|
||||
.p-inputswitch {
|
||||
height: 1rem;
|
||||
width: 2rem;
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider::before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight .p-inputswitch-slider:before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
|
||||
.p-inputswitch-slider::before {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-top: -0.4rem;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,175 +0,0 @@
|
||||
import styles from './MapSettings.module.scss';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { TabPanel, TabView } from 'primereact/tabview';
|
||||
import { PrettySwitchbox } from './components';
|
||||
import { InterfaceStoredSettings, InterfaceStoredSettingsProps, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { OutCommand } from '@/hooks/Mapper/types';
|
||||
|
||||
export enum UserSettingsRemoteProps {
|
||||
link_signature_on_splash = 'link_signature_on_splash',
|
||||
select_on_spash = 'select_on_spash',
|
||||
delete_connection_with_sigs = 'delete_connection_with_sigs',
|
||||
}
|
||||
|
||||
export const DEFAULT_REMOTE_SETTINGS = {
|
||||
[UserSettingsRemoteProps.link_signature_on_splash]: false,
|
||||
[UserSettingsRemoteProps.select_on_spash]: false,
|
||||
[UserSettingsRemoteProps.delete_connection_with_sigs]: false,
|
||||
};
|
||||
|
||||
export const UserSettingsRemoteList = [
|
||||
UserSettingsRemoteProps.link_signature_on_splash,
|
||||
UserSettingsRemoteProps.select_on_spash,
|
||||
UserSettingsRemoteProps.delete_connection_with_sigs,
|
||||
];
|
||||
|
||||
export type UserSettingsRemote = {
|
||||
link_signature_on_splash: boolean;
|
||||
select_on_spash: boolean;
|
||||
delete_connection_with_sigs: boolean;
|
||||
};
|
||||
|
||||
export type UserSettings = UserSettingsRemote & InterfaceStoredSettings;
|
||||
|
||||
export interface MapSettingsProps {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
}
|
||||
|
||||
type CheckboxesList = {
|
||||
prop: keyof UserSettings;
|
||||
label: string;
|
||||
}[];
|
||||
|
||||
const COMMON_CHECKBOXES_PROPS: CheckboxesList = [
|
||||
{ prop: InterfaceStoredSettingsProps.isShowMinimap, label: 'Show Minimap' },
|
||||
];
|
||||
|
||||
const SYSTEMS_CHECKBOXES_PROPS: CheckboxesList = [
|
||||
{ prop: InterfaceStoredSettingsProps.isShowKSpace, label: 'Highlight Low/High-security systems' },
|
||||
{ prop: UserSettingsRemoteProps.select_on_spash, label: 'Auto-select splashed' },
|
||||
];
|
||||
|
||||
const SIGNATURES_CHECKBOXES_PROPS: CheckboxesList = [
|
||||
{ prop: UserSettingsRemoteProps.link_signature_on_splash, label: 'Link signature on splash' },
|
||||
];
|
||||
|
||||
const CONNECTIONS_CHECKBOXES_PROPS: CheckboxesList = [
|
||||
{ prop: UserSettingsRemoteProps.delete_connection_with_sigs, label: 'Delete connections to linked signatures' },
|
||||
];
|
||||
|
||||
const UI_CHECKBOXES_PROPS: CheckboxesList = [
|
||||
{ prop: InterfaceStoredSettingsProps.isShowMenu, label: 'Enable compact map menu bar' },
|
||||
];
|
||||
|
||||
export const MapSettings = ({ show, onHide }: MapSettingsProps) => {
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
|
||||
const [userRemoteSettings, setUserRemoteSettings] = useState<UserSettingsRemote>({ ...DEFAULT_REMOTE_SETTINGS });
|
||||
|
||||
const mergedSettings = useMemo(() => {
|
||||
return {
|
||||
...interfaceSettings,
|
||||
...userRemoteSettings,
|
||||
};
|
||||
}, [userRemoteSettings, interfaceSettings]);
|
||||
|
||||
const handleShow = async () => {
|
||||
const { user_settings } = await outCommand({
|
||||
type: OutCommand.getUserSettings,
|
||||
data: null,
|
||||
});
|
||||
|
||||
setUserRemoteSettings({
|
||||
...user_settings,
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangeChecked = useCallback(
|
||||
(prop: keyof UserSettings) => async (checked: boolean) => {
|
||||
// @ts-ignore
|
||||
if (UserSettingsRemoteList.includes(prop)) {
|
||||
const newRemoteSettings = {
|
||||
...userRemoteSettings,
|
||||
[prop]: checked,
|
||||
};
|
||||
|
||||
await outCommand({
|
||||
type: OutCommand.updateUserSettings,
|
||||
data: newRemoteSettings,
|
||||
});
|
||||
|
||||
setUserRemoteSettings(newRemoteSettings);
|
||||
return;
|
||||
}
|
||||
|
||||
setInterfaceSettings({
|
||||
...interfaceSettings,
|
||||
[prop]: checked,
|
||||
});
|
||||
},
|
||||
[interfaceSettings, outCommand, setInterfaceSettings, userRemoteSettings],
|
||||
);
|
||||
|
||||
const renderCheckboxesList = (list: CheckboxesList) => {
|
||||
return list.map(x => {
|
||||
return (
|
||||
<PrettySwitchbox
|
||||
key={x.prop}
|
||||
label={x.label}
|
||||
checked={mergedSettings[x.prop]}
|
||||
setChecked={handleChangeChecked(x.prop)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
header="Map settings"
|
||||
visible={show}
|
||||
draggable={false}
|
||||
style={{ width: '550px' }}
|
||||
onShow={handleShow}
|
||||
onHide={() => {
|
||||
if (!show) {
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveIndex(0);
|
||||
onHide();
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className={styles.verticalTabsContainer}>
|
||||
<TabView
|
||||
activeIndex={activeIndex}
|
||||
onTabChange={e => setActiveIndex(e.index)}
|
||||
className={styles.verticalTabView}
|
||||
>
|
||||
<TabPanel header="Common" headerClassName={styles.verticalTabHeader}>
|
||||
<div className="w-full h-full flex flex-col gap-1">{renderCheckboxesList(COMMON_CHECKBOXES_PROPS)}</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Systems" headerClassName={styles.verticalTabHeader}>
|
||||
<div className="w-full h-full flex flex-col gap-1">
|
||||
{renderCheckboxesList(SYSTEMS_CHECKBOXES_PROPS)}
|
||||
</div>
|
||||
</TabPanel>
|
||||
<TabPanel header="Connections" headerClassName={styles.verticalTabHeader}>
|
||||
{renderCheckboxesList(CONNECTIONS_CHECKBOXES_PROPS)}
|
||||
</TabPanel>
|
||||
<TabPanel header="Signatures" headerClassName={styles.verticalTabHeader}>
|
||||
{renderCheckboxesList(SIGNATURES_CHECKBOXES_PROPS)}
|
||||
</TabPanel>
|
||||
<TabPanel header="User Interface" headerClassName={styles.verticalTabHeader}>
|
||||
{renderCheckboxesList(UI_CHECKBOXES_PROPS)}
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
.CheckboxContainer {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
|
||||
& > span:nth-child(1) {
|
||||
color: var(--gray-200);
|
||||
font-size: 13px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
& > :nth-child(2){
|
||||
border-bottom: 2px dotted #3f3f3f;
|
||||
height: 1px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Уменьшение размеров InputSwitch с использованием глобальных стилей */
|
||||
.smallInputSwitch {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:global {
|
||||
.p-inputswitch {
|
||||
height: 1rem;
|
||||
width: 2rem;
|
||||
&.p-inputswitch-checked {
|
||||
.p-inputswitch-slider::before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight .p-inputswitch-slider:before {
|
||||
transform: translateX(1rem);
|
||||
}
|
||||
|
||||
.p-inputswitch-slider::before {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-top: -0.4rem;
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import styles from './MapSettings.module.scss';
|
||||
import { WdCheckbox } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
interface PrettySwitchboxProps {
|
||||
checked: boolean;
|
||||
setChecked: (checked: boolean) => void;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const PrettySwitchbox = ({ checked, setChecked, label }: PrettySwitchboxProps) => {
|
||||
return (
|
||||
<label className={styles.CheckboxContainer}>
|
||||
<span>{label}</span>
|
||||
<div />
|
||||
<div className={styles.smallInputSwitch}>
|
||||
<WdCheckbox size="m" label={''} value={checked} onChange={e => setChecked(e.checked ?? false)} />
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './PrettySwitchbox';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './PrettySwitchbox';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './MapSettings';
|
||||
@@ -8,10 +8,9 @@ import { TooltipPosition } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
interface RightBarProps {
|
||||
onShowOnTheMap?: () => void;
|
||||
onShowMapSettings?: () => void;
|
||||
}
|
||||
|
||||
export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) => {
|
||||
export const RightBar = ({ onShowOnTheMap }: RightBarProps) => {
|
||||
const { outCommand, interfaceSettings, setInterfaceSettings } = useMapRootState();
|
||||
|
||||
const isShowMinimap = interfaceSettings.isShowMinimap === undefined ? true : interfaceSettings.isShowMinimap;
|
||||
@@ -60,7 +59,7 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
|
||||
type="button"
|
||||
onClick={handleAddCharacter}
|
||||
>
|
||||
<i className="pi pi-user-plus"></i>
|
||||
<i className="pi pi-user-plus text-lg"></i>
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
|
||||
@@ -70,22 +69,12 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
|
||||
type="button"
|
||||
onClick={onShowOnTheMap}
|
||||
>
|
||||
<i className="pi pi-hashtag"></i>
|
||||
<i className="pi pi-hashtag text-lg"></i>
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center mb-2 gap-1">
|
||||
<WdTooltipWrapper content="User settings" position={TooltipPosition.left}>
|
||||
<button
|
||||
className="btn bg-transparent text-gray-400 hover:text-white border-transparent hover:bg-transparent py-2 h-auto min-h-auto"
|
||||
type="button"
|
||||
onClick={onShowMapSettings}
|
||||
>
|
||||
<i className="pi pi-cog"></i>
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
|
||||
<WdTooltipWrapper
|
||||
content={
|
||||
interfaceSettings.isShowKSpace ? 'Hide highlighting Imperial Space' : 'Show highlighting Imperial Space'
|
||||
@@ -97,7 +86,11 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
|
||||
type="button"
|
||||
onClick={toggleKSpace}
|
||||
>
|
||||
<i className={interfaceSettings.isShowKSpace ? 'hero-cloud-solid' : 'hero-cloud'}></i>
|
||||
{interfaceSettings.isShowKSpace ? (
|
||||
<i className="pi pi-star-fill text-lg"></i>
|
||||
) : (
|
||||
<i className="pi pi-star text-lg"></i>
|
||||
)}
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
|
||||
@@ -107,7 +100,7 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
|
||||
type="button"
|
||||
onClick={toggleMinimap}
|
||||
>
|
||||
<i className={isShowMinimap ? 'pi pi-eye' : 'pi pi-eye-slash'}></i>
|
||||
{isShowMinimap ? <i className="pi pi-eye text-lg"></i> : <i className="pi pi-eye-slash text-lg"></i>}
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
|
||||
@@ -117,7 +110,7 @@ export const RightBar = ({ onShowOnTheMap, onShowMapSettings }: RightBarProps) =
|
||||
type="button"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
<i className="pi pi-window-minimize"></i>
|
||||
<i className="pi pi-window-minimize text-lg"></i>
|
||||
</button>
|
||||
</WdTooltipWrapper>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
import { createGenericContext } from '@/hooks/Mapper/utils/abstractContextProvider.tsx';
|
||||
|
||||
export interface SystemsSettingsProvider {
|
||||
systemId: string;
|
||||
}
|
||||
|
||||
const { Provider, useContextValue } = createGenericContext<SystemsSettingsProvider>();
|
||||
|
||||
export const SystemsSettingsProvider = Provider;
|
||||
export const useSystemsSettingsProvider = useContextValue;
|
||||
@@ -1,81 +0,0 @@
|
||||
.verticalTabsContainer {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.verticalTabsContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
|
||||
:global {
|
||||
.p-tabview {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.p-tabview-panels {
|
||||
padding: 6px 1rem !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-tabview-nav-container {
|
||||
border-right: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-tabview-nav {
|
||||
flex-direction: column;
|
||||
width: 150px;
|
||||
min-height: 100%;
|
||||
border: none;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
border-right: 4px solid var(--surface-hover);
|
||||
background-color: var(--surface-card);
|
||||
|
||||
transition: background-color 200ms, border-right-color 200ms;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--surface-hover);
|
||||
border-right: 4px solid var(--surface-100);
|
||||
}
|
||||
|
||||
.p-tabview-nav-link {
|
||||
transition: color 200ms;
|
||||
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
background-color: initial;
|
||||
border: none;
|
||||
color: var(--gray-400);
|
||||
|
||||
border-radius: initial;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.p-tabview-selected {
|
||||
background-color: var(--surface-50);
|
||||
border-right: 4px solid var(--primary-color);
|
||||
|
||||
.p-tabview-nav-link {
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-right: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tabview-panel {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
// import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { OutCommand, SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { Controller, FormProvider, useForm } from 'react-hook-form';
|
||||
import {
|
||||
SignatureGroupContent,
|
||||
SignatureGroupSelect,
|
||||
} from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { SystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
|
||||
import { Button } from 'primereact/button';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
|
||||
type SystemSignaturePrepared = Omit<SystemSignature, 'linked_system'> & { linked_system: string };
|
||||
|
||||
export interface MapSettingsProps {
|
||||
systemId: string;
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
signatureData: SystemSignature | null;
|
||||
}
|
||||
|
||||
export const SignatureSettings = ({ systemId, show, onHide, signatureData }: MapSettingsProps) => {
|
||||
const { outCommand } = useMapRootState();
|
||||
|
||||
const handleShow = async () => {};
|
||||
const form = useForm<Partial<SystemSignaturePrepared>>({});
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
if (!signatureData) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { group, ...values } = form.getValues();
|
||||
let out = { ...signatureData };
|
||||
|
||||
switch (group) {
|
||||
case SignatureGroup.Wormhole:
|
||||
if (values.linked_system) {
|
||||
await outCommand({
|
||||
type: OutCommand.linkSignatureToSystem,
|
||||
data: {
|
||||
signature_eve_id: signatureData.eve_id,
|
||||
solar_system_source: systemId,
|
||||
solar_system_target: values.linked_system,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (values.type != null) {
|
||||
out = { ...out, type: values.type };
|
||||
}
|
||||
|
||||
if (signatureData.group !== SignatureGroup.Wormhole) {
|
||||
out = { ...out, name: '' };
|
||||
}
|
||||
|
||||
break;
|
||||
case SignatureGroup.CosmicSignature:
|
||||
out = { ...out, type: '', name: '' };
|
||||
break;
|
||||
default:
|
||||
if (values.name != null) {
|
||||
out = { ...out, name: values.name ?? '' };
|
||||
}
|
||||
}
|
||||
|
||||
if (values.description != null) {
|
||||
out = { ...out, description: values.description };
|
||||
}
|
||||
|
||||
// Note: when type of signature changed from WH to other type - we should drop name
|
||||
if (
|
||||
group !== SignatureGroup.Wormhole && // new
|
||||
signatureData.group === SignatureGroup.Wormhole && // prev
|
||||
signatureData.linked_system
|
||||
) {
|
||||
await outCommand({
|
||||
type: OutCommand.unlinkSignature,
|
||||
data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
|
||||
});
|
||||
|
||||
out = { ...out, type: '' };
|
||||
}
|
||||
|
||||
if (group === SignatureGroup.Wormhole && signatureData.linked_system != null && values.linked_system === null) {
|
||||
await outCommand({
|
||||
type: OutCommand.unlinkSignature,
|
||||
data: { signature_eve_id: signatureData.eve_id, solar_system_source: systemId },
|
||||
});
|
||||
}
|
||||
|
||||
// Note: despite groups have optional type - this will always set
|
||||
out = { ...out, group: group! };
|
||||
|
||||
await outCommand({
|
||||
type: OutCommand.updateSignatures,
|
||||
data: {
|
||||
system_id: systemId,
|
||||
added: [],
|
||||
updated: [out],
|
||||
removed: [],
|
||||
},
|
||||
});
|
||||
|
||||
form.reset();
|
||||
onHide();
|
||||
}, [form, onHide, outCommand, signatureData, systemId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!signatureData) {
|
||||
form.reset();
|
||||
return;
|
||||
}
|
||||
|
||||
const { linked_system, ...rest } = signatureData;
|
||||
|
||||
form.reset({
|
||||
linked_system: linked_system?.solar_system_id.toString() ?? undefined,
|
||||
...rest,
|
||||
});
|
||||
}, [form, signatureData]);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
header={`Signature Edit [${signatureData?.eve_id}]`}
|
||||
visible={show}
|
||||
draggable={false}
|
||||
style={{ width: '390px' }}
|
||||
onShow={handleShow}
|
||||
onHide={() => {
|
||||
if (!show) {
|
||||
return;
|
||||
}
|
||||
|
||||
onHide();
|
||||
}}
|
||||
>
|
||||
<SystemsSettingsProvider initialValue={{ systemId }}>
|
||||
<FormProvider {...form}>
|
||||
<div className="flex flex-col gap-2 justify-between">
|
||||
<div className="w-full flex flex-col gap-1 p-1 min-h-[150px]">
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
|
||||
<span>Group:</span>
|
||||
<SignatureGroupSelect name="group" />
|
||||
</label>
|
||||
|
||||
<SignatureGroupContent />
|
||||
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
|
||||
<span>Description:</span>
|
||||
<Controller
|
||||
name="description"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<InputText placeholder="Type description" value={field.value} onChange={field.onChange} />
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button onClick={handleSave} outlined size="small" label="Save"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</FormProvider>
|
||||
</SystemsSettingsProvider>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,45 +0,0 @@
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { useSystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
|
||||
import { SignatureGroupContentWormholes } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureGroupContentWormholes.tsx';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
|
||||
export interface SignatureGroupContentProps {}
|
||||
|
||||
export const SignatureGroupContent = ({}: SignatureGroupContentProps) => {
|
||||
const { watch, control } = useFormContext<SystemSignature>();
|
||||
const group = watch('group');
|
||||
|
||||
const {
|
||||
value: { systemId },
|
||||
} = useSystemsSettingsProvider();
|
||||
|
||||
if (!systemId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (group === SignatureGroup.Wormhole) {
|
||||
return (
|
||||
<>
|
||||
<SignatureGroupContentWormholes />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (group === SignatureGroup.CosmicSignature) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
|
||||
<span>Name:</span>
|
||||
<Controller
|
||||
name="name"
|
||||
control={control}
|
||||
render={({ field }) => <InputText placeholder="Name" value={field.value} onChange={field.onChange} />}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SignatureGroupContent';
|
||||
@@ -1,18 +0,0 @@
|
||||
import { SignatureWormholeTypeSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureWormholeTypeSelect';
|
||||
import { SignatureLeadsToSelect } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/components/SignatureLeadsToSelect';
|
||||
|
||||
export const SignatureGroupContentWormholes = () => {
|
||||
return (
|
||||
<>
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
|
||||
<span>Type:</span>
|
||||
<SignatureWormholeTypeSelect name="type" />
|
||||
</label>
|
||||
|
||||
<label className="grid grid-cols-[100px_250px_1fr] gap-2 items-center text-[14px]">
|
||||
<span>Leads To:</span>
|
||||
<SignatureLeadsToSelect name="linked_system" />
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,59 +0,0 @@
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import clsx from 'clsx';
|
||||
import { SignatureGroup, SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { renderIcon } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/renders';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
|
||||
const signatureGroupOptions = Object.keys(SignatureGroup).map(x => ({
|
||||
value: SignatureGroup[x as keyof typeof SignatureGroup],
|
||||
label: SignatureGroup[x as keyof typeof SignatureGroup],
|
||||
}));
|
||||
|
||||
// @ts-ignore
|
||||
const renderSignatureTemplate = option => {
|
||||
if (!option) {
|
||||
return 'No group selected';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<span className="w-[20px] mt-[1px] flex justify-center items-center">
|
||||
{renderIcon(
|
||||
{ group: option.label } as SystemSignature,
|
||||
option.label === SignatureGroup.CosmicSignature ? { w: 10, h: 10 } : { w: 16, h: 16 },
|
||||
)}
|
||||
</span>
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export interface SignatureGroupSelectProps {
|
||||
name: string;
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
export const SignatureGroupSelect = ({ name, defaultValue = '' }: SignatureGroupSelectProps) => {
|
||||
const { control } = useFormContext();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
defaultValue={defaultValue}
|
||||
render={({ field }) => (
|
||||
<Dropdown
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
options={signatureGroupOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Select group"
|
||||
className={clsx('w-full')}
|
||||
scrollHeight="240px"
|
||||
itemTemplate={renderSignatureTemplate}
|
||||
valueTemplate={renderSignatureTemplate}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SignatureGroupSelect';
|
||||
@@ -1,3 +0,0 @@
|
||||
.SystemView {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import clsx from 'clsx';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { useSystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
|
||||
import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
|
||||
import { useMemo } from 'react';
|
||||
import { SystemView } from '@/hooks/Mapper/components/ui-kit';
|
||||
import classes from './SignatureLeadsToSelect.module.scss';
|
||||
import { useLoadSystemStatic } from '@/hooks/Mapper/mapRootProvider/hooks/useLoadSystemStatic.ts';
|
||||
import { SystemSignature } from '@/hooks/Mapper/types';
|
||||
import { WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID } from '@/hooks/Mapper/components/map/constants.ts';
|
||||
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>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<SystemView systemId={option.value} className={classes.SystemView} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const renderLinkedSystemValue = (option: { value: string }) => {
|
||||
if (!option) {
|
||||
return 'Select Leads To system';
|
||||
}
|
||||
|
||||
if (option.value == null) {
|
||||
return 'Select Leads To system';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<SystemView systemId={option.value} className={classes.SystemView} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderLeadsToEmpty = () => <div className="flex items-center text-[14px]">No wormhole to select</div>;
|
||||
|
||||
export interface SignatureLeadsToSelectProps {
|
||||
name: string;
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
export const SignatureLeadsToSelect = ({ name, defaultValue = '' }: SignatureLeadsToSelectProps) => {
|
||||
const { control, watch } = useFormContext<SystemSignature>();
|
||||
const group = watch('type');
|
||||
|
||||
const {
|
||||
value: { systemId },
|
||||
} = useSystemsSettingsProvider();
|
||||
|
||||
const { leadsTo } = useSystemInfo({ systemId });
|
||||
const { systems: systemStatics } = useLoadSystemStatic({ systems: leadsTo });
|
||||
const {
|
||||
data: { wormholes },
|
||||
} = useMapRootState();
|
||||
|
||||
const leadsToOptions = useMemo(() => {
|
||||
return [
|
||||
{ value: null },
|
||||
...leadsTo
|
||||
.filter(systemId => {
|
||||
const systemStatic = systemStatics.get(parseInt(systemId));
|
||||
const whInfo = wormholes.find(x => x.name === group);
|
||||
|
||||
if (!systemStatic || !whInfo || group === 'K162') {
|
||||
return true;
|
||||
}
|
||||
|
||||
const { id: whType } = WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID[systemStatic.system_class];
|
||||
return whInfo.dest === whType;
|
||||
})
|
||||
.map(x => ({ value: x })),
|
||||
];
|
||||
}, [group, leadsTo, systemStatics, wormholes]);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
// @ts-ignore
|
||||
name={name}
|
||||
control={control}
|
||||
defaultValue={defaultValue}
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<Dropdown
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
options={leadsToOptions}
|
||||
optionValue="value"
|
||||
placeholder="Select Leads To wormhole"
|
||||
className={clsx('w-full')}
|
||||
scrollHeight="240px"
|
||||
itemTemplate={renderLinkedSystemItem}
|
||||
valueTemplate={renderLinkedSystemValue}
|
||||
emptyMessage={renderLeadsToEmpty}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SignatureLeadsToSelect.tsx';
|
||||
@@ -1,134 +0,0 @@
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import clsx from 'clsx';
|
||||
import { Respawn, SolarSystemStaticInfoRaw, WormholeDataRaw } from '@/hooks/Mapper/types';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { useSystemsSettingsProvider } from '@/hooks/Mapper/components/mapRootContent/components/SignatureSettings/Provider.tsx';
|
||||
import { useSystemInfo } from '@/hooks/Mapper/components/hooks';
|
||||
import {
|
||||
SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS,
|
||||
WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID,
|
||||
} from '@/hooks/Mapper/components/map/constants.ts';
|
||||
import { useMemo } from 'react';
|
||||
import { WHClassView } from '@/hooks/Mapper/components/ui-kit';
|
||||
|
||||
const getPossibleWormholes = (systemStatic: SolarSystemStaticInfoRaw, wormholes: WormholeDataRaw[]) => {
|
||||
const { id: whType } = WORMHOLES_ADDITIONAL_INFO_BY_CLASS_ID[systemStatic.system_class];
|
||||
|
||||
// @ts-ignore
|
||||
const spawnClassGroup = SOLAR_SYSTEM_CLASSES_TO_CLASS_GROUPS[whType];
|
||||
const possibleWHTypes = wormholes.filter(x => x.src.includes(spawnClassGroup));
|
||||
|
||||
return {
|
||||
statics: possibleWHTypes
|
||||
.filter(x => x.respawn.some(y => y === Respawn.static))
|
||||
.filter(x => systemStatic.statics.includes(x.name)),
|
||||
k162: wormholes.find(x => x.name === 'K162')!,
|
||||
wanderings: possibleWHTypes.filter(x => x.respawn.some(y => y === Respawn.wandering)),
|
||||
};
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const renderWHTypeGroupTemplate = option => {
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const renderWHTypeTemplateValue = (option: { label: string; data: WormholeDataRaw }) => {
|
||||
if (!option) {
|
||||
return 'Select wormhole type';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 items-center">
|
||||
<WHClassView whClassName={option.data.name} noOffset useShortTitle />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// @ts-ignore
|
||||
const renderWHTypeTemplate = (option: { label: string; data: WormholeDataRaw }) => {
|
||||
return (
|
||||
<div className="flex gap-2 items-center ml-[1rem]">
|
||||
<WHClassView whClassName={option.data.name} noOffset useShortTitle />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export interface SignatureGroupSelectProps {
|
||||
name: string;
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
export const SignatureWormholeTypeSelect = ({ name, defaultValue = '' }: SignatureGroupSelectProps) => {
|
||||
const { control } = useFormContext();
|
||||
|
||||
const {
|
||||
data: { wormholes },
|
||||
} = useMapRootState();
|
||||
|
||||
const {
|
||||
value: { systemId },
|
||||
} = useSystemsSettingsProvider();
|
||||
|
||||
const system = useSystemInfo({ systemId });
|
||||
|
||||
const possibleWormholesOptions = useMemo(() => {
|
||||
const possibleWormholes = getPossibleWormholes(system.staticInfo, wormholes);
|
||||
|
||||
return [
|
||||
{
|
||||
label: 'Statics',
|
||||
items: [
|
||||
...possibleWormholes.statics.map(x => ({
|
||||
label: x.name,
|
||||
value: x.name,
|
||||
data: x,
|
||||
})),
|
||||
{
|
||||
value: possibleWormholes.k162.name,
|
||||
label: possibleWormholes.k162.name,
|
||||
data: possibleWormholes.k162,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Wanderings',
|
||||
items: possibleWormholes.wanderings.map(x => ({
|
||||
label: x.name,
|
||||
value: x.name,
|
||||
data: x,
|
||||
})),
|
||||
},
|
||||
];
|
||||
}, [system, wormholes]);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
defaultValue={defaultValue}
|
||||
render={({ field }) => (
|
||||
<Dropdown
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
options={possibleWormholesOptions}
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
placeholder="Select wormhole type"
|
||||
optionGroupLabel="label"
|
||||
optionGroupChildren="items"
|
||||
className={clsx('w-full')}
|
||||
scrollHeight="240px"
|
||||
optionGroupTemplate={renderWHTypeGroupTemplate}
|
||||
itemTemplate={renderWHTypeTemplate}
|
||||
valueTemplate={renderWHTypeTemplateValue}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SignatureWormholeTypeSelect';
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './SignatureGroupSelect';
|
||||
export * from './SignatureGroupContent';
|
||||
@@ -1 +0,0 @@
|
||||
export * from './SignatureSettings.tsx';
|
||||
@@ -5,20 +5,13 @@ import { MapRootData, useMapRootState } from '@/hooks/Mapper/mapRootProvider';
|
||||
import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import { ContextMenuSystem, useContextMenuSystemHandlers } from '@/hooks/Mapper/components/contexts';
|
||||
import {
|
||||
SystemCustomLabelDialog,
|
||||
SystemSettingsDialog,
|
||||
SystemLinkSignatureDialog,
|
||||
} from '@/hooks/Mapper/components/mapInterface/components';
|
||||
import { SystemCustomLabelDialog, SystemSettingsDialog } from '@/hooks/Mapper/components/mapInterface/components';
|
||||
import classes from './MapWrapper.module.scss';
|
||||
import { Connections } from '@/hooks/Mapper/components/mapRootContent/components/Connections';
|
||||
import { ContextMenuSystemMultiple, useContextMenuSystemMultipleHandlers } from '../contexts/ContextMenuSystemMultiple';
|
||||
import { getSystemById } from '@/hooks/Mapper/helpers';
|
||||
import { Node } from 'reactflow';
|
||||
|
||||
import { Commands } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
import { useMapEventListener } from '@/hooks/Mapper/events';
|
||||
|
||||
import { STORED_INTERFACE_DEFAULT_VALUES } from '@/hooks/Mapper/mapRootProvider/MapRootProvider';
|
||||
|
||||
interface MapWrapperProps {
|
||||
@@ -60,7 +53,6 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
|
||||
);
|
||||
|
||||
const [openSettings, setOpenSettings] = useState<string | null>(null);
|
||||
const [openLinkSignatures, setOpenLinkSignatures] = useState<any | null>(null);
|
||||
const [openCustomLabel, setOpenCustomLabel] = useState<string | null>(null);
|
||||
const handleCommand: OutCommandHandler = useCallback(
|
||||
event => {
|
||||
@@ -68,9 +60,6 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
|
||||
case OutCommand.openSettings:
|
||||
setOpenSettings(event.data.system_id);
|
||||
break;
|
||||
case OutCommand.linkSignatureToSystem:
|
||||
setOpenLinkSignatures(event.data);
|
||||
break;
|
||||
default:
|
||||
return outCommand(event);
|
||||
}
|
||||
@@ -99,14 +88,6 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
|
||||
|
||||
const handleConnectionDbClick = useCallback((e: SolarSystemConnection) => setSelectedConnection(e), []);
|
||||
|
||||
useMapEventListener(event => {
|
||||
switch (event.name) {
|
||||
case Commands.linkSignatureToSystem:
|
||||
setOpenLinkSignatures(event.data);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Map
|
||||
@@ -122,15 +103,19 @@ export const MapWrapper = ({ refn }: MapWrapperProps) => {
|
||||
/>
|
||||
|
||||
{openSettings != null && (
|
||||
<SystemSettingsDialog systemId={openSettings} visible setVisible={() => setOpenSettings(null)} />
|
||||
<SystemSettingsDialog
|
||||
systemId={openSettings}
|
||||
visible={openSettings != null}
|
||||
setVisible={() => setOpenSettings(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{openCustomLabel != null && (
|
||||
<SystemCustomLabelDialog systemId={openCustomLabel} visible setVisible={() => setOpenCustomLabel(null)} />
|
||||
)}
|
||||
|
||||
{openLinkSignatures != null && (
|
||||
<SystemLinkSignatureDialog data={openLinkSignatures} setVisible={() => setOpenLinkSignatures(null)} />
|
||||
<SystemCustomLabelDialog
|
||||
systemId={openCustomLabel}
|
||||
visible={openCustomLabel != null}
|
||||
setVisible={() => setOpenCustomLabel(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Connections selectedConnection={selectedConnection} onHide={() => setSelectedConnection(null)} />
|
||||
|
||||
@@ -37,7 +37,7 @@ export const CharacterCard = ({
|
||||
const { mapRef } = useMapRootState();
|
||||
|
||||
const handleSelect = useCallback(() => {
|
||||
mapRef.current?.command(Commands.centerSystem, char?.location?.solar_system_id?.toString());
|
||||
mapRef.current?.command(Commands.selectSystem, char?.location?.solar_system_id?.toString());
|
||||
}, [mapRef, char]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -5,11 +5,6 @@
|
||||
.WHClassViewContent {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
&.NoOffset {
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.WHClassName {
|
||||
@@ -18,12 +13,3 @@
|
||||
font-weight: bold;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.NoOffset {
|
||||
*.WHClassName {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-weight: initial !important;
|
||||
top: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,42 +16,26 @@ const prepareMass = (mass: number) => {
|
||||
|
||||
export interface WHClassViewProps {
|
||||
whClassName: string;
|
||||
noOffset?: boolean;
|
||||
useShortTitle?: boolean;
|
||||
hideWhClass?: boolean;
|
||||
highlightName?: boolean;
|
||||
className?: string;
|
||||
classNameWh?: string;
|
||||
}
|
||||
|
||||
export const WHClassView = ({
|
||||
whClassName,
|
||||
noOffset,
|
||||
useShortTitle,
|
||||
hideWhClass,
|
||||
highlightName,
|
||||
className,
|
||||
classNameWh,
|
||||
}: WHClassViewProps) => {
|
||||
export const WHClassView = ({ whClassName }: WHClassViewProps) => {
|
||||
const {
|
||||
data: { wormholesData },
|
||||
} = useMapRootState();
|
||||
|
||||
const whData = useMemo(() => wormholesData[whClassName], [whClassName, wormholesData]);
|
||||
const whClass = useMemo(() => WORMHOLES_ADDITIONAL_INFO[whData.dest], [whData.dest]);
|
||||
const whClassStyle = WORMHOLE_CLASS_STYLES[whClass?.wormholeClassID] ?? '';
|
||||
|
||||
const uid = useMemo(() => new Date().getTime().toString(), []);
|
||||
const whClassStyle = WORMHOLE_CLASS_STYLES[whClass.wormholeClassID];
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.WHClassViewRoot, className)}>
|
||||
<div className={classes.WHClassViewRoot}>
|
||||
<Tooltip
|
||||
target={`.wh-name${whClassName}${uid}`}
|
||||
target={`.wh-name${whClassName}`}
|
||||
position="right"
|
||||
mouseTrack
|
||||
mouseTrackLeft={20}
|
||||
mouseTrackTop={30}
|
||||
className="border border-green-300 rounded border-opacity-10 bg-stone-900 bg-opacity-90 "
|
||||
className="border border-green-300 rounded border-opacity-10 bg-stone-900 bg-opacity-70 "
|
||||
>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
@@ -65,20 +49,9 @@ export const WHClassView = ({
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div
|
||||
className={clsx(
|
||||
classes.WHClassViewContent,
|
||||
{ [classes.NoOffset]: noOffset },
|
||||
'wh-name select-none cursor-help',
|
||||
`wh-name${whClassName}${uid}`,
|
||||
)}
|
||||
>
|
||||
<span className={clsx({ [whClassStyle]: highlightName })}>{whClassName}</span>
|
||||
{!hideWhClass && whClass && (
|
||||
<span className={clsx(classes.WHClassName, whClassStyle, classNameWh)}>
|
||||
{useShortTitle ? whClass.shortTitle : whClass.shortName}
|
||||
</span>
|
||||
)}
|
||||
<div className={clsx(classes.WHClassViewContent, 'wh-name select-none cursor-help', `wh-name${whClassName}`)}>
|
||||
<span>{whClassName}</span>
|
||||
<span className={clsx(classes.WHClassName, whClassStyle)}>{whClass.shortName}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { createEvent } from 'react-event-hook';
|
||||
|
||||
import { Command, CommandData } from '@/hooks/Mapper/types/mapHandlers.ts';
|
||||
|
||||
export interface MapEvent<T extends Command> {
|
||||
name: T;
|
||||
data: CommandData[T];
|
||||
}
|
||||
|
||||
const { useMapEventListener, emitMapEvent } = createEvent('map-event')<MapEvent<Command>>();
|
||||
|
||||
export { useMapEventListener, emitMapEvent };
|
||||
@@ -1,4 +1,4 @@
|
||||
import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures/SystemSignatureSettingsDialog';
|
||||
import { COSMIC_SIGNATURE } from '@/hooks/Mapper/components/mapInterface/widgets/SystemSignatures';
|
||||
import { SystemSignature } from '@/hooks/Mapper/types';
|
||||
|
||||
export const parseSignatures = (value: string, availableKeys: string[]): SystemSignature[] => {
|
||||
@@ -19,7 +19,6 @@ export const parseSignatures = (value: string, availableKeys: string[]): SystemS
|
||||
kind: availableKeys.includes(sigArrInfo[1]) ? sigArrInfo[1] : COSMIC_SIGNATURE,
|
||||
group: sigArrInfo[2],
|
||||
name: sigArrInfo[3],
|
||||
type: '',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -2,10 +2,6 @@ import { WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constan
|
||||
import { WormholeDataRaw } from '@/hooks/Mapper/types';
|
||||
|
||||
export const sortWHClasses = (wormholesData: Record<string, WormholeDataRaw>, statics: string[]) => {
|
||||
if (!statics) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return statics
|
||||
.map(x => wormholesData[x])
|
||||
.map(x => ({ name: x.name, ...WORMHOLES_ADDITIONAL_INFO[x.dest] }))
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
export * from './usePageVisibility';
|
||||
export * from './useClipboard';
|
||||
export * from './useHotkey';
|
||||
export * from './useSkipContextMenu';
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export const useSkipContextMenu = () => {
|
||||
useEffect(() => {
|
||||
function handleContextMenu(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
window.addEventListener(`contextmenu`, handleContextMenu);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener(`contextmenu`, handleContextMenu);
|
||||
};
|
||||
}, []);
|
||||
};
|
||||
@@ -4,6 +4,7 @@ import { MapHandlers, MapUnionTypes, OutCommandHandler, SolarSystemConnection }
|
||||
import { useMapRootHandlers } from '@/hooks/Mapper/mapRootProvider/hooks';
|
||||
import { WithChildren } from '@/hooks/Mapper/types/common.ts';
|
||||
import useLocalStorageState from 'use-local-storage-state';
|
||||
import { DEFAULT_SETTINGS } from '@/hooks/Mapper/components/mapInterface/widgets/RoutesWidget/RoutesProvider.tsx';
|
||||
|
||||
export type MapRootData = MapUnionTypes & {
|
||||
selectedSystems: string[];
|
||||
@@ -12,7 +13,6 @@ export type MapRootData = MapUnionTypes & {
|
||||
|
||||
const INITIAL_DATA: MapRootData = {
|
||||
wormholesData: {},
|
||||
wormholes: [],
|
||||
effects: {},
|
||||
characters: [],
|
||||
userCharacters: [],
|
||||
@@ -27,13 +27,7 @@ const INITIAL_DATA: MapRootData = {
|
||||
selectedConnections: [],
|
||||
};
|
||||
|
||||
export enum InterfaceStoredSettingsProps {
|
||||
isShowMenu = 'isShowMenu',
|
||||
isShowMinimap = 'isShowMinimap',
|
||||
isShowKSpace = 'isShowKSpace',
|
||||
}
|
||||
|
||||
export type InterfaceStoredSettings = {
|
||||
type InterfaceStoredSettings = {
|
||||
isShowMenu: boolean;
|
||||
isShowMinimap: boolean;
|
||||
isShowKSpace: boolean;
|
||||
|
||||
@@ -24,7 +24,6 @@ export const useMapInit = () => {
|
||||
|
||||
if (wormholes) {
|
||||
updateData.wormholesData = wormholes.reduce((acc, x) => ({ ...acc, [x.name]: x }), {});
|
||||
updateData.wormholes = wormholes;
|
||||
}
|
||||
|
||||
if (effects) {
|
||||
|
||||
@@ -27,8 +27,6 @@ import {
|
||||
useRoutes,
|
||||
} from './api';
|
||||
|
||||
import { emitMapEvent } from '@/hooks/Mapper/events';
|
||||
|
||||
export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
|
||||
const mapInit = useMapInit();
|
||||
const { addSystems, removeSystems, updateSystems } = useCommandsSystems();
|
||||
@@ -49,25 +47,15 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
|
||||
break;
|
||||
case Commands.addSystems:
|
||||
addSystems(data as CommandAddSystems);
|
||||
setTimeout(() => {
|
||||
emitMapEvent({ name: Commands.addSystems, data });
|
||||
}, 100);
|
||||
break;
|
||||
case Commands.updateSystems:
|
||||
updateSystems(data as CommandUpdateSystems);
|
||||
break;
|
||||
case Commands.removeSystems:
|
||||
removeSystems(data as CommandRemoveSystems);
|
||||
setTimeout(() => {
|
||||
emitMapEvent({ name: Commands.removeSystems, data });
|
||||
}, 100);
|
||||
|
||||
break;
|
||||
case Commands.addConnections:
|
||||
addConnections(data as CommandAddConnections);
|
||||
setTimeout(() => {
|
||||
emitMapEvent({ name: Commands.addConnections, data });
|
||||
}, 100);
|
||||
break;
|
||||
case Commands.removeConnections:
|
||||
removeConnections(data as CommandRemoveConnections);
|
||||
@@ -97,30 +85,14 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
|
||||
mapRoutes(data as CommandRoutes);
|
||||
break;
|
||||
|
||||
case Commands.centerSystem:
|
||||
// do nothing here
|
||||
break;
|
||||
|
||||
case Commands.selectSystem:
|
||||
// do nothing here
|
||||
break;
|
||||
|
||||
case Commands.linkSignatureToSystem:
|
||||
// TODO command data type lost
|
||||
// @ts-ignore
|
||||
emitMapEvent({ name: Commands.linkSignatureToSystem, data });
|
||||
break;
|
||||
|
||||
case Commands.killsUpdated:
|
||||
// do nothing here
|
||||
break;
|
||||
|
||||
case Commands.signaturesUpdated:
|
||||
// TODO command data type lost
|
||||
// @ts-ignore
|
||||
emitMapEvent({ name: Commands.signaturesUpdated, data });
|
||||
break;
|
||||
|
||||
default:
|
||||
console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data);
|
||||
break;
|
||||
|
||||
@@ -21,10 +21,7 @@ export enum Commands {
|
||||
mapUpdated = 'map_updated',
|
||||
killsUpdated = 'kills_updated',
|
||||
routes = 'routes',
|
||||
centerSystem = 'center_system',
|
||||
selectSystem = 'select_system',
|
||||
linkSignatureToSystem = 'link_signature_to_system',
|
||||
signaturesUpdated = 'signatures_updated',
|
||||
}
|
||||
|
||||
export type Command =
|
||||
@@ -43,10 +40,7 @@ export type Command =
|
||||
| Commands.mapUpdated
|
||||
| Commands.killsUpdated
|
||||
| Commands.routes
|
||||
| Commands.selectSystem
|
||||
| Commands.centerSystem
|
||||
| Commands.linkSignatureToSystem
|
||||
| Commands.signaturesUpdated;
|
||||
| Commands.selectSystem;
|
||||
|
||||
export type CommandInit = {
|
||||
systems: SolarSystemRawType[];
|
||||
@@ -78,12 +72,6 @@ export type CommandMapUpdated = Partial<CommandInit>;
|
||||
export type CommandRoutes = RoutesList;
|
||||
export type CommandKillsUpdated = Kill[];
|
||||
export type CommandSelectSystem = string | undefined;
|
||||
export type CommandCenterSystem = string | undefined;
|
||||
export type CommandLinkSignatureToSystem = {
|
||||
solar_system_source: number;
|
||||
solar_system_target: number;
|
||||
};
|
||||
export type CommandLinkSignaturesUpdated = number;
|
||||
|
||||
export interface CommandData {
|
||||
[Commands.init]: CommandInit;
|
||||
@@ -102,9 +90,6 @@ export interface CommandData {
|
||||
[Commands.routes]: CommandRoutes;
|
||||
[Commands.killsUpdated]: CommandKillsUpdated;
|
||||
[Commands.selectSystem]: CommandSelectSystem;
|
||||
[Commands.centerSystem]: CommandCenterSystem;
|
||||
[Commands.linkSignatureToSystem]: CommandLinkSignatureToSystem;
|
||||
[Commands.signaturesUpdated]: CommandLinkSignaturesUpdated;
|
||||
}
|
||||
|
||||
export interface MapHandlers {
|
||||
@@ -122,7 +107,6 @@ export enum OutCommand {
|
||||
updateConnectionMassStatus = 'update_connection_mass_status',
|
||||
updateConnectionShipSizeType = 'update_connection_ship_size_type',
|
||||
updateConnectionLocked = 'update_connection_locked',
|
||||
updateConnectionCustomInfo = 'update_connection_custom_info',
|
||||
updateSignatures = 'update_signatures',
|
||||
updateSystemName = 'update_system_name',
|
||||
updateSystemDescription = 'update_system_description',
|
||||
@@ -139,16 +123,10 @@ export enum OutCommand {
|
||||
setAutopilotWaypoint = 'set_autopilot_waypoint',
|
||||
addSystem = 'add_system',
|
||||
addCharacter = 'add_character',
|
||||
openUserSettings = 'open_user_settings',
|
||||
getPassages = 'get_passages',
|
||||
linkSignatureToSystem = 'link_signature_to_system',
|
||||
|
||||
// Only UI commands
|
||||
openSettings = 'open_settings',
|
||||
|
||||
getUserSettings = 'get_user_settings',
|
||||
updateUserSettings = 'update_user_settings',
|
||||
unlinkSignature = 'unlink_signature',
|
||||
}
|
||||
|
||||
export type OutCommandHandler = <T = any>(event: { type: OutCommand; data: any }) => Promise<T>;
|
||||
|
||||
@@ -7,7 +7,6 @@ import { SolarSystemConnection } from '@/hooks/Mapper/types/connection.ts';
|
||||
|
||||
export type MapUnionTypes = {
|
||||
wormholesData: Record<string, WormholeDataRaw>;
|
||||
wormholes: WormholeDataRaw[];
|
||||
effects: Record<string, EffectRaw>;
|
||||
characters: CharacterTypeRaw[];
|
||||
userCharacters: string[];
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
|
||||
export type SystemSignature = {
|
||||
eve_id: string;
|
||||
kind: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
group: string;
|
||||
updated_at?: string;
|
||||
};
|
||||
|
||||
export enum SignatureGroup {
|
||||
CosmicSignature = 'Cosmic Signature',
|
||||
Wormhole = 'Wormhole',
|
||||
GasSite = 'Gas Site',
|
||||
RelicSite = 'Relic Site',
|
||||
DataSite = 'Data Site',
|
||||
OreSite = 'Ore Site',
|
||||
CombatSite = 'Combat Site',
|
||||
Wormhole = 'Wormhole',
|
||||
CosmicSignature = 'Cosmic Signature',
|
||||
}
|
||||
|
||||
export type GroupType = {
|
||||
@@ -16,14 +23,3 @@ export type GroupType = {
|
||||
w: number;
|
||||
h: number;
|
||||
};
|
||||
|
||||
export type SystemSignature = {
|
||||
eve_id: string;
|
||||
kind: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
group: SignatureGroup;
|
||||
type: string;
|
||||
linked_system?: SolarSystemStaticInfoRaw;
|
||||
updated_at?: string;
|
||||
};
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
export enum Respawn {
|
||||
static = 'static',
|
||||
wandering = 'wandering',
|
||||
reverse = 'reverse',
|
||||
}
|
||||
|
||||
export type WormholeDataRaw = {
|
||||
dest: string;
|
||||
id: number;
|
||||
@@ -11,7 +5,7 @@ export type WormholeDataRaw = {
|
||||
mass_regen: number;
|
||||
max_mass_per_jump: number;
|
||||
name: string;
|
||||
respawn: Respawn[];
|
||||
sibling_groups: any;
|
||||
src: string[];
|
||||
static: boolean;
|
||||
total_mass: number;
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
import { createContext, ReactNode, useContext, useState } from 'react';
|
||||
|
||||
type ContextType<T> = {
|
||||
value: T;
|
||||
setValue: (newValue: T) => void;
|
||||
};
|
||||
|
||||
export const createGenericContext = <T,>() => {
|
||||
const context = createContext<ContextType<T> | undefined>(undefined);
|
||||
|
||||
const Provider = ({ children, initialValue }: { children: ReactNode; initialValue: T }) => {
|
||||
const [value, setValue] = useState<T>(initialValue);
|
||||
|
||||
return <context.Provider value={{ value, setValue }}>{children}</context.Provider>;
|
||||
};
|
||||
|
||||
const useContextValue = () => {
|
||||
const contextValue = useContext(context);
|
||||
if (!contextValue) {
|
||||
throw new Error('useContextValue must be used within a Provider');
|
||||
}
|
||||
return contextValue;
|
||||
};
|
||||
|
||||
return { Provider, useContextValue };
|
||||
};
|
||||
@@ -65,7 +65,7 @@ export class LabelsManager {
|
||||
}
|
||||
|
||||
hasLabel(label: string) {
|
||||
return this.parsedLabels.labels?.includes(label);
|
||||
return this.parsedLabels.labels.includes(label);
|
||||
}
|
||||
|
||||
toggleLabel(label: string) {
|
||||
|
||||
@@ -3,230 +3,7 @@ import 'phoenix_html';
|
||||
|
||||
import './live_reload.css';
|
||||
|
||||
const animateBg = function (bgCanvas) {
|
||||
const { TweenMax, _ } = window;
|
||||
/**
|
||||
* Utility function for returning a random integer in a given range
|
||||
* @param {Int} max
|
||||
* @param {Int} min
|
||||
*/
|
||||
const randomInRange = (max, min) => Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
const BASE_SIZE = 1;
|
||||
const VELOCITY_INC = 1.01;
|
||||
const VELOCITY_INIT_INC = 0.525;
|
||||
const JUMP_VELOCITY_INC = 0.55;
|
||||
const JUMP_SIZE_INC = 1.15;
|
||||
const SIZE_INC = 1.01;
|
||||
const RAD = Math.PI / 180;
|
||||
const WARP_COLORS = [
|
||||
[197, 239, 247],
|
||||
[25, 181, 254],
|
||||
[77, 5, 232],
|
||||
[165, 55, 253],
|
||||
[255, 255, 255],
|
||||
];
|
||||
/**
|
||||
* Class for storing the particle metadata
|
||||
* position, size, length, speed etc.
|
||||
*/
|
||||
class Star {
|
||||
STATE = {
|
||||
alpha: Math.random(),
|
||||
angle: randomInRange(0, 360) * RAD,
|
||||
};
|
||||
reset = () => {
|
||||
const angle = randomInRange(0, 360) * (Math.PI / 180);
|
||||
const vX = Math.cos(angle);
|
||||
const vY = Math.sin(angle);
|
||||
const travelled =
|
||||
Math.random() > 0.5
|
||||
? Math.random() * Math.max(window.innerWidth, window.innerHeight) + Math.random() * (window.innerWidth * 0.24)
|
||||
: Math.random() * (window.innerWidth * 0.25);
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
iX: undefined,
|
||||
iY: undefined,
|
||||
active: travelled ? true : false,
|
||||
x: Math.floor(vX * travelled) + window.innerWidth / 2,
|
||||
vX,
|
||||
y: Math.floor(vY * travelled) + window.innerHeight / 2,
|
||||
vY,
|
||||
size: BASE_SIZE,
|
||||
};
|
||||
};
|
||||
constructor() {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
const generateStarPool = size => new Array(size).fill().map(() => new Star());
|
||||
|
||||
// Class for the actual app
|
||||
// Not too much happens in here
|
||||
// Initiate the drawing process and listen for user interactions 👍
|
||||
class JumpToHyperspace {
|
||||
STATE = {
|
||||
stars: generateStarPool(300),
|
||||
bgAlpha: 0,
|
||||
sizeInc: SIZE_INC,
|
||||
velocity: VELOCITY_INC,
|
||||
};
|
||||
canvas = null;
|
||||
context = null;
|
||||
constructor(canvas) {
|
||||
this.canvas = canvas;
|
||||
this.context = canvas.getContext('2d');
|
||||
this.bind();
|
||||
this.setup();
|
||||
this.render();
|
||||
}
|
||||
render = () => {
|
||||
const {
|
||||
STATE: { bgAlpha, velocity, sizeInc, initiating, jumping, stars },
|
||||
context,
|
||||
render,
|
||||
} = this;
|
||||
// Clear the canvas
|
||||
context.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
if (bgAlpha > 0) {
|
||||
context.fillStyle = `rgba(31, 58, 157, ${bgAlpha})`;
|
||||
context.fillRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
}
|
||||
// 1. Shall we add a new star
|
||||
const nonActive = stars.filter(s => !s.STATE.active);
|
||||
if (!initiating && nonActive.length > 0) {
|
||||
// Introduce a star
|
||||
nonActive[0].STATE.active = true;
|
||||
}
|
||||
// 2. Update the stars and draw them.
|
||||
for (const star of stars.filter(s => s.STATE.active)) {
|
||||
const { active, x, y, iX, iY, iVX, iVY, size, vX, vY } = star.STATE;
|
||||
// Check if the star needs deactivating
|
||||
if (
|
||||
((iX || x) < 0 || (iX || x) > window.innerWidth || (iY || y) < 0 || (iY || y) > window.innerHeight) &&
|
||||
active &&
|
||||
!initiating
|
||||
) {
|
||||
star.reset(true);
|
||||
} else if (active) {
|
||||
const newIX = initiating ? iX : iX + iVX;
|
||||
const newIY = initiating ? iY : iY + iVY;
|
||||
const newX = x + vX;
|
||||
const newY = y + vY;
|
||||
// Just need to work out if it overtakes the original line that's all
|
||||
const caught =
|
||||
(vX < 0 && newIX < x) || (vX > 0 && newIX > x) || (vY < 0 && newIY < y) || (vY > 0 && newIY > y);
|
||||
star.STATE = {
|
||||
...star.STATE,
|
||||
iX: caught ? undefined : newIX,
|
||||
iY: caught ? undefined : newIY,
|
||||
iVX: caught ? undefined : iVX * VELOCITY_INIT_INC,
|
||||
iVY: caught ? undefined : iVY * VELOCITY_INIT_INC,
|
||||
x: newX,
|
||||
vX: star.STATE.vX * velocity,
|
||||
y: newY,
|
||||
vY: star.STATE.vY * velocity,
|
||||
size: initiating ? size : size * (iX || iY ? SIZE_INC : sizeInc),
|
||||
};
|
||||
let color = `rgba(255, 255, 255, ${star.STATE.alpha})`;
|
||||
if (jumping) {
|
||||
const [r, g, b] = WARP_COLORS[randomInRange(0, WARP_COLORS.length)];
|
||||
color = `rgba(${r}, ${g}, ${b}, ${star.STATE.alpha})`;
|
||||
}
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = size;
|
||||
context.beginPath();
|
||||
context.moveTo(star.STATE.iX || x, star.STATE.iY || y);
|
||||
context.lineTo(star.STATE.x, star.STATE.y);
|
||||
context.stroke();
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
};
|
||||
initiate = () => {
|
||||
if (this.STATE.jumping || this.STATE.initiating) return;
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
initiating: true,
|
||||
initiateTimestamp: new Date().getTime(),
|
||||
};
|
||||
TweenMax.to(this.STATE, 0.25, { velocity: VELOCITY_INIT_INC, bgAlpha: 0.3 });
|
||||
// When we initiate, stop the XY origin from moving so that we draw
|
||||
// longer lines until the jump
|
||||
for (const star of this.STATE.stars.filter(s => s.STATE.active)) {
|
||||
star.STATE = {
|
||||
...star.STATE,
|
||||
iX: star.STATE.x,
|
||||
iY: star.STATE.y,
|
||||
iVX: star.STATE.vX,
|
||||
iVY: star.STATE.vY,
|
||||
};
|
||||
}
|
||||
};
|
||||
jump = () => {
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
bgAlpha: 0,
|
||||
jumping: true,
|
||||
};
|
||||
TweenMax.to(this.STATE, 0.25, { velocity: JUMP_VELOCITY_INC, bgAlpha: 0.75, sizeInc: JUMP_SIZE_INC });
|
||||
setTimeout(() => {
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
jumping: false,
|
||||
};
|
||||
TweenMax.to(this.STATE, 0.25, { bgAlpha: 0, velocity: VELOCITY_INC, sizeInc: SIZE_INC });
|
||||
}, 5000);
|
||||
};
|
||||
enter = () => {
|
||||
if (this.STATE.jumping) return;
|
||||
const { initiateTimestamp } = this.STATE;
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
initiating: false,
|
||||
initiateTimestamp: undefined,
|
||||
};
|
||||
if (new Date().getTime() - initiateTimestamp > 600) {
|
||||
this.jump();
|
||||
} else {
|
||||
TweenMax.to(this.STATE, 0.25, { velocity: VELOCITY_INC, bgAlpha: 0 });
|
||||
}
|
||||
};
|
||||
bind = () => {
|
||||
this.canvas.addEventListener('mousedown', this.initiate);
|
||||
this.canvas.addEventListener('touchstart', this.initiate);
|
||||
this.canvas.addEventListener('mouseup', this.enter);
|
||||
this.canvas.addEventListener('touchend', this.enter);
|
||||
};
|
||||
setup = () => {
|
||||
this.context.lineCap = 'round';
|
||||
this.canvas.height = window.innerHeight;
|
||||
this.canvas.width = window.innerWidth;
|
||||
};
|
||||
reset = () => {
|
||||
this.STATE = {
|
||||
...this.STATE,
|
||||
stars: generateStarPool(300),
|
||||
};
|
||||
this.setup();
|
||||
};
|
||||
}
|
||||
window.myJump = new JumpToHyperspace(bgCanvas);
|
||||
window.addEventListener(
|
||||
'resize',
|
||||
_.debounce(() => {
|
||||
window.myJump.reset();
|
||||
}, 250),
|
||||
);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// animage background
|
||||
const canvas = document.getElementById('bg-canvas');
|
||||
if (canvas) {
|
||||
animateBg(canvas);
|
||||
}
|
||||
|
||||
// Select all buttons with the 'share-link' class
|
||||
const buttons = document.querySelectorAll('button.copy-link');
|
||||
|
||||
|
||||
@@ -28,10 +28,8 @@
|
||||
"primeicons": "^7.0.0",
|
||||
"primereact": "^10.6.5",
|
||||
"react-error-boundary": "^4.0.13",
|
||||
"react-event-hook": "^3.1.2",
|
||||
"react-flow-renderer": "^10.3.17",
|
||||
"react-grid-layout": "^1.3.4",
|
||||
"react-hook-form": "^7.53.1",
|
||||
"react-usestateref": "^1.0.9",
|
||||
"reactflow": "^11.10.4",
|
||||
"rxjs": "^7.8.1",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 205 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 262 KiB |
@@ -3199,11 +3199,6 @@ react-error-boundary@^4.0.13:
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
|
||||
react-event-hook@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-event-hook/-/react-event-hook-3.1.2.tgz#445e8f3b751f6abe4ef199f31bff47593c4c13d4"
|
||||
integrity sha512-qQ9LXLdxmWRRZPlnqVjqlw7jovSvDosQEOyQ9cjPHhtDv8JIszjj0td1PuHJHrVW0LS8a1XeJhLe6i7S5u9SbQ==
|
||||
|
||||
react-flow-renderer@^10.3.17:
|
||||
version "10.3.17"
|
||||
resolved "https://registry.npmjs.org/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz"
|
||||
@@ -3230,11 +3225,6 @@ react-grid-layout@^1.3.4:
|
||||
react-resizable "^3.0.5"
|
||||
resize-observer-polyfill "^1.5.1"
|
||||
|
||||
react-hook-form@^7.53.1:
|
||||
version "7.53.1"
|
||||
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.1.tgz#3f2cd1ed2b3af99416a4ac674da2d526625add67"
|
||||
integrity sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==
|
||||
|
||||
react-is@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
||||
|
||||
@@ -60,7 +60,15 @@ config :dart_sass, :version, "1.54.5"
|
||||
|
||||
config :tailwind, :version, "3.2.7"
|
||||
|
||||
config :wanderer_app, WandererApp.PromEx, manual_metrics_start_delay: :no_delay
|
||||
config :wanderer_app, WandererApp.PromEx,
|
||||
manual_metrics_start_delay: :no_delay,
|
||||
metrics_server: [
|
||||
port: 4021,
|
||||
path: "/metrics",
|
||||
protocol: :http,
|
||||
pool_size: 5,
|
||||
cowboy_opts: [ip: {0, 0, 0, 0}]
|
||||
]
|
||||
|
||||
config :wanderer_app,
|
||||
grafana_datasource_id: "wanderer"
|
||||
|
||||
@@ -77,7 +77,7 @@ config :wanderer_app,
|
||||
web_app_url: web_app_url,
|
||||
git_sha: System.get_env("GIT_SHA", "111"),
|
||||
custom_route_base_url: System.get_env("CUSTOM_ROUTE_BASE_URL"),
|
||||
invites: System.get_env("WANDERER_INVITES", "false") |> String.to_existing_atom(),
|
||||
invites: System.get_env("WANDERER_INVITES", "false") == "true",
|
||||
admin_username: System.get_env("WANDERER_ADMIN_USERNAME", "admin"),
|
||||
admin_password: System.get_env("WANDERER_ADMIN_PASSWORD"),
|
||||
admins: admins,
|
||||
|
||||
@@ -30,19 +30,4 @@ defmodule WandererApp do
|
||||
defmacro __using__(which) when is_atom(which) do
|
||||
apply(__MODULE__, which, [])
|
||||
end
|
||||
|
||||
def log_exception(kind, reason, stacktrace) do
|
||||
reason = Exception.normalize(kind, reason, stacktrace)
|
||||
|
||||
crash_reason =
|
||||
case kind do
|
||||
:throw -> {{:nocatch, reason}, stacktrace}
|
||||
_ -> {reason, stacktrace}
|
||||
end
|
||||
|
||||
Logger.error(
|
||||
Exception.format(kind, reason, stacktrace),
|
||||
crash_reason: crash_reason
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
@@ -19,7 +19,6 @@ defmodule WandererApp.Api do
|
||||
resource WandererApp.Api.MapCharacterSettings
|
||||
resource WandererApp.Api.MapSubscription
|
||||
resource WandererApp.Api.MapTransaction
|
||||
resource WandererApp.Api.MapUserSettings
|
||||
resource WandererApp.Api.User
|
||||
resource WandererApp.Api.ShipTypeInfo
|
||||
resource WandererApp.Api.UserActivity
|
||||
|
||||
@@ -18,7 +18,6 @@ defmodule WandererApp.Api.Map do
|
||||
define(:update, action: :update)
|
||||
define(:update_acls, action: :update_acls)
|
||||
define(:update_hubs, action: :update_hubs)
|
||||
define(:update_options, action: :update_options)
|
||||
define(:assign_owner, action: :assign_owner)
|
||||
define(:mark_as_deleted, action: :mark_as_deleted)
|
||||
|
||||
@@ -113,10 +112,6 @@ defmodule WandererApp.Api.Map do
|
||||
accept [:hubs]
|
||||
end
|
||||
|
||||
update :update_options do
|
||||
accept [:options]
|
||||
end
|
||||
|
||||
update :mark_as_deleted do
|
||||
accept([])
|
||||
|
||||
@@ -172,10 +167,6 @@ defmodule WandererApp.Api.Map do
|
||||
allow_nil?(true)
|
||||
end
|
||||
|
||||
attribute :options, :string do
|
||||
allow_nil? true
|
||||
end
|
||||
|
||||
create_timestamp(:inserted_at)
|
||||
update_timestamp(:updated_at)
|
||||
end
|
||||
|
||||
@@ -28,7 +28,6 @@ defmodule WandererApp.Api.MapConnection do
|
||||
define(:update_time_status, action: :update_time_status)
|
||||
define(:update_ship_size_type, action: :update_ship_size_type)
|
||||
define(:update_locked, action: :update_locked)
|
||||
define(:update_custom_info, action: :update_custom_info)
|
||||
end
|
||||
|
||||
actions do
|
||||
@@ -88,10 +87,6 @@ defmodule WandererApp.Api.MapConnection do
|
||||
update :update_locked do
|
||||
accept [:locked]
|
||||
end
|
||||
|
||||
update :update_custom_info do
|
||||
accept [:custom_info]
|
||||
end
|
||||
end
|
||||
|
||||
attributes do
|
||||
@@ -136,10 +131,6 @@ defmodule WandererApp.Api.MapConnection do
|
||||
|
||||
attribute :locked, :boolean
|
||||
|
||||
attribute :custom_info, :string do
|
||||
allow_nil? true
|
||||
end
|
||||
|
||||
create_timestamp(:inserted_at)
|
||||
update_timestamp(:updated_at)
|
||||
end
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user