diff --git a/src/components/nodes/BattleConfigNode.tsx b/src/components/nodes/BattleConfigNode.tsx new file mode 100644 index 0000000..1c691ee --- /dev/null +++ b/src/components/nodes/BattleConfigNode.tsx @@ -0,0 +1,137 @@ +import { memo, useState } from 'react'; +import { Handle, Position } from '@xyflow/react'; +import type { NodeProps } from '@xyflow/react'; +import { Sword, ChevronDown, ChevronUp } from 'lucide-react'; +import type { BattleConfigNodeData } from '../../types/nodes'; + +export const BattleConfigNode = memo(({ data }: NodeProps) => { + const [isExpanded, setIsExpanded] = useState(true); + const nodeData = data as BattleConfigNodeData; + + const handleChange = (field: keyof BattleConfigNodeData, value: string | boolean | undefined) => { + Object.assign(nodeData, { [field]: value }); + }; + + return ( +
+ {/* Node Header */} +
+
+ + Battle Configuration +
+ +
+ + {/* Input Handle */} + + + {/* Node Content */} + {isExpanded && ( +
+
+ + +
+ +
+ + handleChange('battleTheme', e.target.value)} + className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500" + placeholder="cobblemon:battle_theme" + /> +
+ +
+ + handleChange('victoryTheme', e.target.value)} + className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500" + placeholder="cobblemon:victory_theme" + /> +
+ +
+ + handleChange('defeatTheme', e.target.value)} + className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-red-500 focus:border-red-500" + placeholder="cobblemon:defeat_theme" + /> +
+ +
+
Options
+
+ + +
+
+
+ )} + + {/* Output Handle */} + +
+ ); +}); + +BattleConfigNode.displayName = 'BattleConfigNode';