299 lines
12 KiB
TypeScript
299 lines
12 KiB
TypeScript
import { useState } from 'react';
|
||
import { BadgeCheck, CheckCircle2, Mountain, Plus } from 'lucide-react';
|
||
import { Button, Select } from '../../components/ui';
|
||
import {
|
||
CERTIFIED_MAP_ASSETS,
|
||
MAP_ASSET_DRAG_MIME,
|
||
MAP_ASSET_PLACEMENT_MIME,
|
||
} from '../../map/editor/assetCatalog';
|
||
import {
|
||
MAP_OBJECT_PLACEMENT_LABELS,
|
||
type EditableMapDocument,
|
||
type EditableMapObjectType,
|
||
type MapObjectPlacementMode,
|
||
} from '../../map/editor/types';
|
||
import {
|
||
PHYSICAL_MAP_PRESET_LABELS,
|
||
SYSTEM_TERRAIN_PRESETS,
|
||
type SystemTerrainPreset,
|
||
} from '../../map/types';
|
||
|
||
function AssetPreview({ type, color }: { type: EditableMapObjectType; color: string }) {
|
||
const shape =
|
||
type === 'cylinder'
|
||
? 'h-9 w-9 rounded-full'
|
||
: type === 'capsule'
|
||
? 'h-10 w-6 rounded-full'
|
||
: type === 'ramp'
|
||
? 'h-0 w-0 border-b-[34px] border-l-[48px] border-l-transparent'
|
||
: type === 'stairs'
|
||
? 'h-9 w-11 [clip-path:polygon(0_100%,0_66%,34%_66%,34%_33%,67%_33%,67%_0,100%_0,100%_100%)]'
|
||
: 'h-9 w-9 rounded-sm';
|
||
return (
|
||
<div className="flex h-16 items-center justify-center rounded bg-black/10" aria-hidden="true">
|
||
<div
|
||
className={`${shape} shadow-[0_6px_14px_rgba(0,0,0,0.22)]`}
|
||
style={type === 'ramp' ? { borderBottomColor: color } : { backgroundColor: color }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TerrainPreview({ preset }: { preset: SystemTerrainPreset }) {
|
||
const grid = (
|
||
<g stroke="currentColor" strokeWidth="0.45" opacity="0.18">
|
||
<path d="M14 50 60 23l46 27-46 27z" />
|
||
<path d="m26 57 46-27m-34 34 46-27m-58 6 46 27m-34-34 46 27" />
|
||
</g>
|
||
);
|
||
let shape;
|
||
if (preset === 'discrete_obstacles')
|
||
shape = (
|
||
<g fill="currentColor" fillOpacity="0.16" stroke="currentColor">
|
||
<path d="m31 48 9-5 9 5-9 5zM40 53V39l9-5v14M40 39l-9-5v14" />
|
||
<path d="m55 39 8-5 8 5-8 5zM63 44V27l8-5v17M63 27l-8-5v17" />
|
||
<path d="m77 51 10-6 10 6-10 6zM87 57V38l10-6v19M87 38l-10-6v19" />
|
||
</g>
|
||
);
|
||
else if (preset === 'gap')
|
||
shape = (
|
||
<g fill="currentColor" fillOpacity="0.12" stroke="currentColor">
|
||
<path d="m21 48 31-18 15 9-31 18zM69 40l15 9 17-10-15-9z" />
|
||
<path d="m36 57 31-18v8L36 65zM69 40l17-10v8L69 48z" fillOpacity="0.24" />
|
||
</g>
|
||
);
|
||
else if (preset === 'inverted_pyramid_stairs' || preset === 'pit')
|
||
shape = (
|
||
<g fill="currentColor" fillOpacity="0.08" stroke="currentColor">
|
||
<path d="m22 47 38-22 38 22-38 22z" />
|
||
<path d="m32 47 28-16 28 16-28 16z" />
|
||
<path d="m43 47 17-10 17 10-17 10z" fillOpacity="0.2" />
|
||
{preset === 'inverted_pyramid_stairs' && (
|
||
<path d="M32 47v7m11-7v10m17-10v16m17-16v10m11-10v7" />
|
||
)}
|
||
</g>
|
||
);
|
||
else if (preset === 'pyramid_stairs')
|
||
shape = (
|
||
<g fill="currentColor" stroke="currentColor" strokeLinejoin="round">
|
||
<path d="m25 52 12 7 52-30-12-7z" fillOpacity="0.1" />
|
||
<path d="m37 45 12 7 40-23-12-7z" fillOpacity="0.17" />
|
||
<path d="m49 38 12 7 28-16-12-7z" fillOpacity="0.24" />
|
||
<path d="m61 31 12 7 16-9-12-7z" fillOpacity="0.32" />
|
||
</g>
|
||
);
|
||
else if (preset === 'rails')
|
||
shape = (
|
||
<g fill="none" stroke="currentColor" strokeLinecap="round">
|
||
<path d="m26 58 53-31m15 40 12-7" strokeWidth="2.3" opacity="0.25" />
|
||
<path d="m26 58 53-31m15 40 12-7M33 58V45m14 5V37m30 12V27m20 39V53" strokeWidth="1.2" />
|
||
</g>
|
||
);
|
||
else if (preset === 'rough')
|
||
shape = (
|
||
<path
|
||
d="m20 54 10-18 9 9 10-22 11 17 10-13 10 20 10-8 10 15-40 18z"
|
||
fill="currentColor"
|
||
fillOpacity="0.16"
|
||
stroke="currentColor"
|
||
strokeLinejoin="round"
|
||
/>
|
||
);
|
||
else if (preset === 'stepping_stones')
|
||
shape = (
|
||
<g fill="currentColor" fillOpacity="0.2" stroke="currentColor">
|
||
<path d="m27 52 10-6 10 6-10 6zM46 39l10-6 10 6-10 6zM66 54l10-6 10 6-10 6zM83 36l10-6 10 6-10 6z" />
|
||
</g>
|
||
);
|
||
else
|
||
shape = (
|
||
<g fill="none" stroke="currentColor" strokeLinecap="round">
|
||
<path d="M19 48c10-17 20-17 30 0s20 17 30 0 20-17 29-2" strokeWidth="5" opacity="0.16" />
|
||
<path d="M19 48c10-17 20-17 30 0s20 17 30 0 20-17 29-2" strokeWidth="1.4" />
|
||
<path d="M25 59c10-17 20-17 30 0s20 17 30 0 15-13 23-7" opacity="0.55" />
|
||
</g>
|
||
);
|
||
return (
|
||
<svg viewBox="0 0 120 80" className="h-[76px] w-full text-accent" aria-hidden="true">
|
||
{grid}
|
||
{shape}
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function AddAction({ label }: { label: string }) {
|
||
return (
|
||
<span className="inline-flex items-center gap-1 text-[11px] font-medium text-accent">
|
||
{label}
|
||
<span className="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-white">
|
||
<Plus className="h-3.5 w-3.5" aria-hidden="true" />
|
||
</span>
|
||
</span>
|
||
);
|
||
}
|
||
|
||
export function MapAssetLibrary({
|
||
disabled,
|
||
terrainSize,
|
||
document,
|
||
onAdd,
|
||
onSelectTerrain,
|
||
onSelectObject,
|
||
}: {
|
||
disabled: boolean;
|
||
terrainSize: number;
|
||
document?: EditableMapDocument | null;
|
||
onAdd: (
|
||
type: EditableMapObjectType,
|
||
placementMode: MapObjectPlacementMode,
|
||
) => void | Promise<void>;
|
||
onSelectTerrain: (preset: SystemTerrainPreset) => void;
|
||
onSelectObject?: (id: string) => void;
|
||
}) {
|
||
const [placementMode, setPlacementMode] = useState<MapObjectPlacementMode>('auto_ground');
|
||
return (
|
||
<section aria-label="认证资产" className="space-y-3 p-3">
|
||
<div className="rounded-lg border border-border-subtle bg-panel-muted/50 p-2.5">
|
||
<div className="flex items-center justify-between text-xs font-medium text-text-primary">
|
||
<span>场景结构</span>
|
||
<span className="technical-value text-[10px] text-text-tertiary">
|
||
{document?.objects.length ?? 0} 个对象
|
||
</span>
|
||
</div>
|
||
{document?.objects.length ? (
|
||
<div className="mt-2 max-h-36 space-y-0.5 overflow-auto panel-scroll">
|
||
{document.objects.map((object) => (
|
||
<button
|
||
key={object.id}
|
||
type="button"
|
||
className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[11px] text-text-secondary hover:bg-element-hover hover:text-text-primary"
|
||
onClick={() => onSelectObject?.(object.id)}
|
||
>
|
||
<span className="h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />
|
||
<span className="min-w-0 flex-1 truncate">{object.name}</span>
|
||
<span className="text-[9px] text-text-tertiary">{object.type}</span>
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<p className="mt-2 text-[10px] leading-relaxed text-text-tertiary">
|
||
选择工程地图后，这里显示场景对象层级；可从下方资产库创建场景。
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-end justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<div className="flex items-center gap-1.5 text-xs font-medium text-text-primary">
|
||
<BadgeCheck className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
|
||
认证资产
|
||
</div>
|
||
<p className="mt-1 text-[10px] leading-relaxed text-text-tertiary">
|
||
点击添加，或按住资产拖到画布落位。
|
||
</p>
|
||
</div>
|
||
<label className="w-36 shrink-0 text-[10px] text-text-secondary">
|
||
放置方式
|
||
<Select
|
||
aria-label="新增资产放置方式"
|
||
className="mt-1 w-full"
|
||
value={placementMode}
|
||
disabled={disabled}
|
||
onChange={(event) => setPlacementMode(event.target.value as MapObjectPlacementMode)}
|
||
>
|
||
{(Object.keys(MAP_OBJECT_PLACEMENT_LABELS) as MapObjectPlacementMode[]).map((mode) => (
|
||
<option key={mode} value={mode}>
|
||
{MAP_OBJECT_PLACEMENT_LABELS[mode]}
|
||
</option>
|
||
))}
|
||
</Select>
|
||
</label>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{CERTIFIED_MAP_ASSETS.map((asset) => (
|
||
<article
|
||
key={asset.type}
|
||
draggable={!disabled}
|
||
data-map-asset={asset.type}
|
||
className={`overflow-hidden rounded-lg border border-border-subtle bg-panel-muted shadow-sm transition-colors ${disabled ? 'opacity-50' : 'cursor-grab hover:border-accent active:cursor-grabbing'}`}
|
||
onDragStart={(event) => {
|
||
if (disabled) {
|
||
event.preventDefault();
|
||
return;
|
||
}
|
||
event.dataTransfer.effectAllowed = 'copy';
|
||
event.dataTransfer.setData(MAP_ASSET_DRAG_MIME, asset.type);
|
||
event.dataTransfer.setData(MAP_ASSET_PLACEMENT_MIME, placementMode);
|
||
event.dataTransfer.setData('text/plain', asset.name);
|
||
}}
|
||
>
|
||
<div className="p-2 pb-0">
|
||
<AssetPreview type={asset.type} color={asset.color} />
|
||
</div>
|
||
<div className="border-t border-border-subtle p-2">
|
||
<div className="truncate text-[11px] font-semibold text-text-primary">
|
||
{asset.name}
|
||
</div>
|
||
<div className="mt-0.5 truncate text-[9px] text-text-tertiary">
|
||
{asset.description}
|
||
</div>
|
||
<Button
|
||
className="mt-2 w-full"
|
||
disabled={disabled}
|
||
aria-label={`添加${asset.name}`}
|
||
onClick={() => void onAdd(asset.type, placementMode)}
|
||
>
|
||
<Plus className="mr-1 h-3 w-3" aria-hidden="true" />
|
||
添加
|
||
</Button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<div className="border-t border-border-subtle pt-3">
|
||
<div className="flex items-center gap-1.5 text-xs font-medium text-text-primary">
|
||
<Mountain className="h-3.5 w-3.5 text-accent" aria-hidden="true" />
|
||
系统参数化地形
|
||
</div>
|
||
<p className="mt-1 text-[10px] leading-relaxed text-text-tertiary">
|
||
本地确定性生成；点击“添加”后在右侧“地图”调整尺寸、难度和随机种子。
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{SYSTEM_TERRAIN_PRESETS.map((preset) => (
|
||
<article
|
||
key={preset}
|
||
data-system-terrain={preset}
|
||
className={`group relative overflow-hidden rounded-lg border border-border-subtle bg-panel-muted shadow-sm transition-colors ${disabled ? 'opacity-50' : 'hover:border-accent'}`}
|
||
>
|
||
<div className="absolute right-2 top-2 z-10 rounded-full bg-panel-bg/90 p-0.5 text-success">
|
||
<CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />
|
||
</div>
|
||
<div className="px-1 pt-1">
|
||
<TerrainPreview preset={preset} />
|
||
</div>
|
||
<div className="border-t border-border-subtle px-2 pb-2 pt-1.5">
|
||
<div className="truncate text-[11px] font-semibold text-text-primary">
|
||
{PHYSICAL_MAP_PRESET_LABELS[preset]}
|
||
</div>
|
||
<div className="mt-0.5 text-[9px] text-text-tertiary">
|
||
{terrainSize.toFixed(2)} × {terrainSize.toFixed(2)} m
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="mt-1 flex w-full justify-end rounded outline-none focus-visible:ring-2 focus-visible:ring-accent/30"
|
||
disabled={disabled}
|
||
aria-label={`添加${PHYSICAL_MAP_PRESET_LABELS[preset]}`}
|
||
onClick={() => onSelectTerrain(preset)}
|
||
>
|
||
<AddAction label="添加" />
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|