diff --git a/src/components/nodes/PartyNode.tsx b/src/components/nodes/PartyNode.tsx new file mode 100644 index 0000000..2b495e1 --- /dev/null +++ b/src/components/nodes/PartyNode.tsx @@ -0,0 +1,184 @@ +import { memo, useState } from 'react'; +import { Handle, Position } from '@xyflow/react'; +import type { NodeProps } from '@xyflow/react'; +import { Users, Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react'; +import type { PartyNodeData } from '../../types/nodes'; +import type { SimplePartyProvider, PartyProvider } from '../../types/npc'; + +export const PartyNode = memo(({ data }: NodeProps) => { + const [isExpanded, setIsExpanded] = useState(true); + const nodeData = data as PartyNodeData; + + const handleChange = (newPartyConfig: PartyProvider) => { + Object.assign(nodeData, { partyConfig: newPartyConfig }); + }; + + const renderSimpleParty = () => { + const party = nodeData.partyConfig as SimplePartyProvider; + + if (!party || !party.pokemon) { + return null; + } + + const addPokemon = () => { + handleChange({ + ...party, + pokemon: [...party.pokemon, ''], + }); + }; + + const removePokemon = (index: number) => { + handleChange({ + ...party, + pokemon: party.pokemon.filter((_, i) => i !== index), + }); + }; + + const updatePokemon = (index: number, value: string) => { + const newPokemon = [...party.pokemon]; + newPokemon[index] = value; + handleChange({ + ...party, + pokemon: newPokemon, + }); + }; + + return ( +
+
+ + Pokemon ({party.pokemon.length}/6) + + +
+ +
+ {party.pokemon.map((pokemon, index) => ( +
+ updatePokemon(index, e.target.value)} + className="flex-1 px-2 py-1 text-xs border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" + placeholder="pikachu level=50 shiny=true" + /> + +
+ ))} +
+ + +
+ ); + }; + + return ( +
+ {/* Node Header */} +
+
+ + Pokemon Party +
+ +
+ + {/* Input Handle */} + + + {/* Node Content */} + {isExpanded && ( +
+
+ + +
+ + {nodeData.partyConfig?.type === 'simple' && renderSimpleParty()} + + {nodeData.partyConfig?.type === 'pool' && ( +
+ Pool configuration available - add Pokemon to the pool +
+ )} + + {nodeData.partyConfig?.type === 'script' && ( +
+ + + handleChange({ type: 'script', script: e.target.value }) + } + className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-green-500 focus:border-green-500" + placeholder="cobblemon:party_script" + /> +
+ )} +
+ )} + + {/* Output Handle */} + +
+ ); +}); + +PartyNode.displayName = 'PartyNode';