lee/wanderer
1
0
Fork 0
mirror of https://github.com/wanderer-industries/wanderer synced 2025-12-11 18:26:04 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat: rework wormholes reference

Browse Source
This commit is contained in:
DanSylvest
2025-11-29 21:07:48 +03:00
parent 5c515d6acd
commit ac71b0af64
10 changed files with 126 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/js/hooks/Mapper/components/mapRootContent/MapRootContent.tsx
View File

@@ -35,7 +35,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
const [showOnTheMap, setShowOnTheMap] = useState(false); const [showOnTheMap, setShowOnTheMap] = useState(false);
const [showMapSettings, setShowMapSettings] = useState(false); const [showMapSettings, setShowMapSettings] = useState(false);
const [showTrackingDialog, setShowTrackingDialog] = useState(false); const [showTrackingDialog, setShowTrackingDialog] = useState(false);
const [showWormholeSignatures, setShowWormholeSignatures] = useState(false); const [showWormholeList, setShowWormholeList] = useState(false);
/* Important Notice - this solution needs for use one instance of MapInterface */ /* Important Notice - this solution needs for use one instance of MapInterface */
const mapInterface = isReady ? <MapInterface /> : null; const mapInterface = isReady ? <MapInterface /> : null;
@@ -43,16 +43,13 @@ export const MapRootContent = ({}: MapRootContentProps) => {
const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []); const handleShowOnTheMap = useCallback(() => setShowOnTheMap(true), []);
const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []); const handleShowMapSettings = useCallback(() => setShowMapSettings(true), []);
const handleShowTrackingDialog = useCallback(() => setShowTrackingDialog(true), []); const handleShowTrackingDialog = useCallback(() => setShowTrackingDialog(true), []);
const handleShowWormholesReference = useCallback(() => setShowWormholeList(true), []);
useMapEventListener(event => { useMapEventListener(event => {
if (event.name === Commands.showTracking) { if (event.name === Commands.showTracking) {
setShowTrackingDialog(true); setShowTrackingDialog(true);
return true; return true;
} }
if (event.name === Commands.showWormholeSignatures) {
setShowWormholeSignatures(true);
return true;
}
}); });
useSkipContextMenu(); useSkipContextMenu();
@@ -71,6 +68,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
onShowOnTheMap={handleShowOnTheMap} onShowOnTheMap={handleShowOnTheMap}
onShowMapSettings={handleShowMapSettings} onShowMapSettings={handleShowMapSettings}
onShowTrackingDialog={handleShowTrackingDialog} onShowTrackingDialog={handleShowTrackingDialog}
onShowWormholesReference={handleShowWormholesReference}
additionalContent={<PingsInterface hasLeftOffset />} additionalContent={<PingsInterface hasLeftOffset />}
/> />
</div> </div>
@@ -85,6 +83,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
onShowOnTheMap={handleShowOnTheMap} onShowOnTheMap={handleShowOnTheMap}
onShowMapSettings={handleShowMapSettings} onShowMapSettings={handleShowMapSettings}
onShowTrackingDialog={handleShowTrackingDialog} onShowTrackingDialog={handleShowTrackingDialog}
onShowWormholesReference={handleShowWormholesReference}
/> />
</div> </div>
</Topbar> </Topbar>
@@ -99,12 +98,7 @@ export const MapRootContent = ({}: MapRootContentProps) => {
{showTrackingDialog && ( {showTrackingDialog && (
<TrackingDialog visible={showTrackingDialog} onHide={() => setShowTrackingDialog(false)} /> <TrackingDialog visible={showTrackingDialog} onHide={() => setShowTrackingDialog(false)} />
)} )}
{showWormholeSignatures && ( <WormholeSignaturesDialog visible={showWormholeList} onHide={() => setShowWormholeList(false)} />
<WormholeSignaturesDialog
visible={showWormholeSignatures}
onHide={() => setShowWormholeSignatures(false)}
/>
)}
{hasOldSettings && <OldSettingsDialog />} {hasOldSettings && <OldSettingsDialog />}
</Layout> </Layout>

14
assets/js/hooks/Mapper/components/mapRootContent/components/MapContextMenu/MapContextMenu.tsx
View File

@@ -12,9 +12,15 @@ export interface MapContextMenuProps {
onShowOnTheMap?: () => void; onShowOnTheMap?: () => void;
onShowMapSettings?: () => void; onShowMapSettings?: () => void;
onShowTrackingDialog?: () => void; onShowTrackingDialog?: () => void;
onShowWormholesReference?: () => void;
} }
export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTrackingDialog }: MapContextMenuProps) => { export const MapContextMenu = ({
onShowOnTheMap,
onShowMapSettings,
onShowTrackingDialog,
onShowWormholesReference,
}: MapContextMenuProps) => {
const { const {
outCommand, outCommand,
storedSettings: { setInterfaceSettings }, storedSettings: { setInterfaceSettings },
@@ -52,6 +58,12 @@ export const MapContextMenu = ({ onShowOnTheMap, onShowMapSettings, onShowTracki
command: onShowOnTheMap, command: onShowOnTheMap,
visible: canTrackCharacters, visible: canTrackCharacters,
}, },
{
label: 'Wormholes Ref.',
icon: 'pi pi-bullseye',
command: onShowWormholesReference,
visible: canTrackCharacters,
},
{ separator: true, visible: true }, { separator: true, visible: true },
{ {
label: 'Settings', label: 'Settings',

12
assets/js/hooks/Mapper/components/mapRootContent/components/RightBar/RightBar.tsx
View File

@@ -14,6 +14,7 @@ interface RightBarProps {
onShowOnTheMap?: () => void; onShowOnTheMap?: () => void;
onShowMapSettings?: () => void; onShowMapSettings?: () => void;
onShowTrackingDialog?: () => void; onShowTrackingDialog?: () => void;
onShowWormholesReference?: () => void;
additionalContent?: ReactNode; additionalContent?: ReactNode;
} }
@@ -21,6 +22,7 @@ export const RightBar = ({
onShowOnTheMap, onShowOnTheMap,
onShowMapSettings, onShowMapSettings,
onShowTrackingDialog, onShowTrackingDialog,
onShowWormholesReference,
additionalContent, additionalContent,
}: RightBarProps) => { }: RightBarProps) => {
const { const {
@@ -90,6 +92,16 @@ export const RightBar = ({
<i className="pi pi-hashtag"></i> <i className="pi pi-hashtag"></i>
</button> </button>
</WdTooltipWrapper> </WdTooltipWrapper>
<WdTooltipWrapper content="Wormholes Reference" 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={onShowWormholesReference}
>
<i className="pi pi-bullseye"></i>
</button>
</WdTooltipWrapper>
</div> </div>
</> </>
)} )}

153
assets/js/hooks/Mapper/components/mapRootContent/components/WormholeSignaturesDialog/WormholeSignaturesDialog.tsx
View File

@@ -4,7 +4,7 @@ import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column'; import { Column } from 'primereact/column';
import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; import { useMapRootState } from '@/hooks/Mapper/mapRootProvider';
import { WormholeDataRaw } from '@/hooks/Mapper/types'; import { WormholeDataRaw } from '@/hooks/Mapper/types';
import { WHClassView } from '@/hooks/Mapper/components/ui-kit'; import { RespawnTag, WHClassView } from '@/hooks/Mapper/components/ui-kit';
import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts'; import { kgToTons } from '@/hooks/Mapper/utils/kgToTons.ts';
import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts'; import { WORMHOLE_CLASS_STYLES, WORMHOLES_ADDITIONAL_INFO } from '@/hooks/Mapper/components/map/constants.ts';
import clsx from 'clsx'; import clsx from 'clsx';
@@ -12,15 +12,61 @@ import { InputText } from 'primereact/inputtext';
import { IconField } from 'primereact/iconfield'; import { IconField } from 'primereact/iconfield';
import { InputIcon } from 'primereact/inputicon'; import { InputIcon } from 'primereact/inputicon';
const renderSpawns = (w: WormholeDataRaw) => (
<div className="flex gap-1 flex-wrap">
{w.src.map(s => {
const group = s.split('-')[0];
const info = WORMHOLES_ADDITIONAL_INFO[group];
if (!info) {
return (
<span
key={s}
className="px-[4px] py-[1px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700"
>
{s}
</span>
);
}
const cls = WORMHOLE_CLASS_STYLES[String(info.wormholeClassID)] || '';
const label = `${info.shortName}`;
return (
<span
key={s}
className={clsx(cls, 'px-[4px] py-[1px] rounded text-xs border border-stone-700 bg-stone-900/40')}
>
{label}
</span>
);
})}
</div>
);
const renderName = (w: WormholeDataRaw) => (
<div className="flex items-center gap-2">
<WHClassView
whClassName={w.name}
noOffset
useShortTitle
classNameWh="overflow-hidden text-ellipsis whitespace-nowrap"
/>
</div>
);
const renderRespawn = (w: WormholeDataRaw) => (
<div className="flex gap-1 flex-wrap">
{w.respawn.map(r => (
<RespawnTag key={r} value={r} />
))}
</div>
);
export interface WormholeSignaturesDialogProps { export interface WormholeSignaturesDialogProps {
visible: boolean; visible: boolean;
onHide: () => void; onHide: () => void;
} }
const RespawnTag = ({ value }: { value: string }) => (
<span className="px-2 py-[2px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700">{value}</span>
);
export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignaturesDialogProps) => { export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignaturesDialogProps) => {
const { const {
data: { wormholes }, data: { wormholes },
@@ -61,49 +107,13 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
}); });
}, [wormholes, filter]); }, [wormholes, filter]);
const renderName = (w: WormholeDataRaw) => (
<div className="flex items-center gap-2">
<WHClassView whClassName={w.name} noOffset useShortTitle />
</div>
);
const renderRespawn = (w: WormholeDataRaw) => (
<div className="flex gap-1 flex-wrap">
{w.respawn.map(r => (
<RespawnTag key={r} value={r} />
))}
</div>
);
const renderSpawns = (w: WormholeDataRaw) => (
<div className="flex gap-1 flex-wrap">
{w.src.map(s => {
const group = s.split('-')[0];
const info = WORMHOLES_ADDITIONAL_INFO[group];
if (!info)
return (
<span key={s} className="px-2 py-[2px] rounded bg-stone-800 text-stone-300 text-xs border border-stone-700">
{s}
</span>
);
const cls = WORMHOLE_CLASS_STYLES[String(info.wormholeClassID)] || '';
const label = `${info.shortName}`;
return (
<span key={s} className={clsx(cls, 'px-2 py-[2px] rounded text-xs border border-stone-700 bg-stone-900/40')}>
{label}
</span>
);
})}
</div>
);
return ( return (
<Dialog <Dialog
header="Wormhole Signatures Reference" header="Wormholes Reference"
visible={visible} visible={visible}
draggable={true} draggable={false}
resizable={false} resizable={false}
style={{ width: '820px', height: '600px' }} className="w-[950px] h-[600px]"
onHide={onHide} onHide={onHide}
contentClassName="!p-0 flex flex-col h-full" contentClassName="!p-0 flex flex-col h-full"
> >
@@ -111,12 +121,10 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
<div className="font-semibold text-sm text-stone-200">Reference list of all wormhole types</div> <div className="font-semibold text-sm text-stone-200">Reference list of all wormhole types</div>
<IconField iconPosition="right"> <IconField iconPosition="right">
<InputIcon <InputIcon
className={clsx( className={clsx('pi pi-times', {
'pi pi-times', ['cursor-pointer text-stone-400 hover:text-stone-200']: filter,
filter ['text-stone-700 opacity-50 cursor-default']: !filter,
? 'cursor-pointer text-stone-400 hover:text-stone-200' })}
: 'text-stone-700 opacity-50 cursor-default',
)}
onClick={() => filter && setFilter('')} onClick={() => filter && setFilter('')}
role="button" role="button"
aria-label="Clear search" aria-label="Clear search"
@@ -127,47 +135,34 @@ export const WormholeSignaturesDialog = ({ visible, onHide }: WormholeSignatures
</IconField> </IconField>
</div> </div>
<div className="flex-1 p-2 overflow-x-hidden"> <div className="flex-1 p-3 overflow-x-hidden">
<DataTable <DataTable value={filtered} size="small" scrollable scrollHeight="flex" stripedRows>
value={filtered} <Column header="Type" body={renderName} className="w-[160px]" bodyClassName="whitespace-normal break-words" />
size="small" <Column header="Spawns In" body={renderSpawns} bodyClassName="whitespace-normal break-words text-[13px]" />
scrollable
scrollHeight="flex"
stripedRows
style={{ width: '100%', height: '100%' }}
tableStyle={{ tableLayout: 'fixed', width: '100%' }}
>
<Column
header="Type"
body={renderName}
style={{ width: '140px' }}
bodyClassName="whitespace-normal break-words"
/>
<Column
header="Spawns In"
body={renderSpawns}
style={{ width: '200px' }}
bodyClassName="whitespace-normal break-words"
/>
<Column <Column
field="lifetime" field="lifetime"
header="Lifetime" header="Lifetime"
style={{ width: '90px' }} className="w-[90px]"
bodyClassName="whitespace-normal break-words" bodyClassName="whitespace-normal break-words text-[13px]"
/> />
<Column <Column
header="Total Mass" header="Total Mass"
style={{ width: '120px' }} className="w-[120px]"
body={(w: WormholeDataRaw) => kgToTons(w.total_mass)} body={(w: WormholeDataRaw) => kgToTons(w.total_mass)}
bodyClassName="whitespace-normal break-words" bodyClassName="whitespace-normal break-words text-[13px]"
/> />
<Column <Column
header="Max/jump" header="Max/jump"
style={{ width: '120px' }} className="w-[120px]"
body={(w: WormholeDataRaw) => kgToTons(w.max_mass_per_jump)} body={(w: WormholeDataRaw) => kgToTons(w.max_mass_per_jump)}
bodyClassName="whitespace-normal break-words" bodyClassName="whitespace-normal break-words text-[13px]"
/>
<Column
header="Respawn"
className="w-[150px]"
body={renderRespawn}
bodyClassName="whitespace-normal break-words text-[13px]"
/> />
<Column header="Respawn" body={renderRespawn} bodyClassName="whitespace-normal break-words" />
</DataTable> </DataTable>
</div> </div>
</Dialog> </Dialog>

20
assets/js/hooks/Mapper/components/ui-kit/RespawnTag.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { Respawn } from '@/hooks/Mapper/types';
import clsx from 'clsx';
export const WORMHOLE_SPAWN_CLASSES_BG = {
[Respawn.static]: 'bg-lime-400/80 text-stone-950',
[Respawn.wandering]: 'bg-stone-800',
[Respawn.reverse]: 'bg-blue-400 text-stone-950',
};
type RespawnTagProps = { value: string };
export const RespawnTag = ({ value }: RespawnTagProps) => (
<span
className={clsx(
'px-[6px] py-[0px] rounded text-stone-300 text-[12px] font-[500] border border-stone-700',
WORMHOLE_SPAWN_CLASSES_BG[value as Respawn],
)}
>
{value}
</span>
);

1
assets/js/hooks/Mapper/components/ui-kit/index.ts
View File

@@ -23,3 +23,4 @@ export * from './MenuItemWithInfo';
export * from './MarkdownTextViewer.tsx'; export * from './MarkdownTextViewer.tsx';
export * from './WdButton.tsx'; export * from './WdButton.tsx';
export * from './constants.ts'; export * from './constants.ts';
export * from './RespawnTag';

4
assets/js/hooks/Mapper/mapRootProvider/hooks/useMapRootHandlers.ts
View File

@@ -172,10 +172,6 @@ export const useMapRootHandlers = (ref: ForwardedRef<MapHandlers>) => {
case Commands.pingCancelled: case Commands.pingCancelled:
pingCancelled(data as CommandPingCancelled); pingCancelled(data as CommandPingCancelled);
break; break;
case Commands.showWormholeSignatures:
break;
default: default:
console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data); console.warn(`JOipP Interface handlers: Unknown command: ${type}`, data);
break; break;

5
assets/js/hooks/Mapper/types/mapHandlers.ts
View File

@@ -40,7 +40,6 @@ export enum Commands {
showTracking = 'show_tracking', showTracking = 'show_tracking',
pingAdded = 'ping_added', pingAdded = 'ping_added',
pingCancelled = 'ping_cancelled', pingCancelled = 'ping_cancelled',
showWormholeSignatures = 'show_wormhole_signatures',
} }
export type Command = export type Command =
@@ -76,8 +75,7 @@ export type Command =
| Commands.updateTracking | Commands.updateTracking
| Commands.showTracking | Commands.showTracking
| Commands.pingAdded | Commands.pingAdded
| Commands.pingCancelled | Commands.pingCancelled;
| Commands.showWormholeSignatures;
export type CommandInit = { export type CommandInit = {
systems: SolarSystemRawType[]; systems: SolarSystemRawType[];
@@ -211,7 +209,6 @@ export interface CommandData {
[Commands.showTracking]: CommandShowTracking; [Commands.showTracking]: CommandShowTracking;
[Commands.pingAdded]: CommandPingAdded; [Commands.pingAdded]: CommandPingAdded;
[Commands.pingCancelled]: CommandPingCancelled; [Commands.pingCancelled]: CommandPingCancelled;
[Commands.showWormholeSignatures]: CommandShowWormholeSignatures;
} }
export interface MapHandlers { export interface MapHandlers {

9
lib/wanderer_app_web/live/map/event_handlers/map_core_event_handler.ex
View File

@@ -219,15 +219,6 @@ defmodule WandererAppWeb.MapCoreEventHandler do
{:reply, %{user_settings: user_settings}, socket} {:reply, %{user_settings: user_settings}, socket}
end end
def handle_ui_event("show_wormhole_signatures", _event, socket) do
{:noreply,
socket
|> MapEventHandler.push_map_event(
"show_wormhole_signatures",
%{}
)}
end
def handle_ui_event( def handle_ui_event(
"update_user_settings", "update_user_settings",
user_settings_form, user_settings_form,

9
lib/wanderer_app_web/live/map/map_live.html.heex
View File

@@ -32,15 +32,6 @@
<.icon name="hero-chart-bar-solid" class="w-6 h-6" /> <.icon name="hero-chart-bar-solid" class="w-6 h-6" />
</button> </button>
<button
id="show-wormhole-signatures-button"
class="h-8 w-8 hover:text-white"
phx-click="show_wormhole_signatures"
title="Wormhole Signatures Reference"
>
<.icon name="hero-sparkles-solid" class="w-6 h-6" />
</button>
<.link <.link
:if={(@user_permissions || %{}) |> Map.get(:delete_map, false)} :if={(@user_permissions || %{}) |> Map.get(:delete_map, false)}
id={"map-audit-#{@map_slug}"} id={"map-audit-#{@map_slug}"}