Z8MB1E
2ffd5e2a84
- NodeShell component wraps all nodes with handle rendering + px-8 content padding
- Handles positioned at node edges with labels outside (no overlap with content)
- Labels: 9px mono font, full opacity, color-matched to socket type
- Removed old TypedHandle + NodeHandles (replaced by NodeShell internals)
- All 18 node components updated to use NodeShell
- Format node dynamically generates handles from template {0}, {1}, etc.
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { type NodeProps } from "@xyflow/react";
|
|
import { DatabaseIcon } from "lucide-react";
|
|
import { NodeShell } from "./NodeShell";
|
|
|
|
const GAME_DATA_FIELDS = [
|
|
{ value: "structure_health", label: "Structure Health" },
|
|
{ value: "structure_storage", label: "Structure Storage" },
|
|
{ value: "deliveries_pending", label: "Pending Deliveries" },
|
|
{ value: "deliveries_completed", label: "Completed Deliveries" },
|
|
{ value: "resources_total", label: "Total Resources" },
|
|
{ value: "faction_reputation", label: "Faction Reputation" },
|
|
{ value: "player_count", label: "Player Count" },
|
|
{ value: "tick_count", label: "Current Tick" },
|
|
];
|
|
|
|
export function GameDataNode({ data }: NodeProps) {
|
|
const d = data as { field?: string };
|
|
const fieldLabel = GAME_DATA_FIELDS.find((f) => f.value === d.field)?.label ?? "Select field";
|
|
|
|
return (
|
|
<NodeShell nodeType="gameData" className="bg-indigo-950/80 border border-indigo-500/50 rounded-lg shadow-md min-w-44">
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-indigo-500/30">
|
|
<DatabaseIcon className="size-4 text-indigo-400 shrink-0" />
|
|
<span className="text-sm font-medium text-indigo-200 flex-1 truncate">
|
|
Game Data
|
|
</span>
|
|
</div>
|
|
<div className="px-3 py-2 text-xs text-indigo-300/80">
|
|
{fieldLabel}
|
|
</div>
|
|
</NodeShell>
|
|
);
|
|
}
|