From f604099a9b322f98a777f1b2250374c169052a4b Mon Sep 17 00:00:00 2001
From: matthieu <mashuuu.r@gmail.com>
Date: Wed, 29 Oct 2025 16:26:46 +0100
Subject: [PATCH] [ISSUE-1] Add src/components/nodes/BattleConfigNode.tsx -
 Modular NPC system

---
 src/components/nodes/BattleConfigNode.tsx | 137 ++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 src/components/nodes/BattleConfigNode.tsx

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 (
+    <div className="bg-white rounded-lg shadow-xl border-2 border-red-500 min-w-[350px]">
+      {/* Node Header */}
+      <div className="bg-red-500 text-white px-4 py-2 rounded-t-lg flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sword className="h-4 w-4" />
+          <span className="font-semibold text-sm">Battle Configuration</span>
+        </div>
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="text-white hover:bg-red-600 rounded p-1 transition-colors"
+        >
+          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </button>
+      </div>
+
+      {/* Input Handle */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="w-3 h-3 bg-red-500 border-2 border-white"
+      />
+
+      {/* Node Content */}
+      {isExpanded && (
+        <div className="p-4 space-y-3">
+          <div className="space-y-2">
+            <label className="flex items-center text-sm">
+              <input
+                type="checkbox"
+                checked={nodeData.canBattle || false}
+                onChange={(e) => handleChange('canBattle', e.target.checked)}
+                className="mr-2 h-4 w-4 text-red-600 rounded focus:ring-red-500"
+              />
+              <span className="font-medium">Can Battle</span>
+            </label>
+            <label className="flex items-center text-sm">
+              <input
+                type="checkbox"
+                checked={nodeData.canChallenge || false}
+                onChange={(e) => handleChange('canChallenge', e.target.checked)}
+                className="mr-2 h-4 w-4 text-red-600 rounded focus:ring-red-500"
+              />
+              <span className="font-medium">Can Challenge</span>
+            </label>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Battle Theme
+            </label>
+            <input
+              type="text"
+              value={nodeData.battleTheme || ''}
+              onChange={(e) => 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"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Victory Theme
+            </label>
+            <input
+              type="text"
+              value={nodeData.victoryTheme || ''}
+              onChange={(e) => 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"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-gray-700 mb-1">
+              Defeat Theme
+            </label>
+            <input
+              type="text"
+              value={nodeData.defeatTheme || ''}
+              onChange={(e) => 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"
+            />
+          </div>
+
+          <div className="border-t pt-3">
+            <div className="text-xs font-medium text-gray-700 mb-2">Options</div>
+            <div className="space-y-2">
+              <label className="flex items-center text-xs">
+                <input
+                  type="checkbox"
+                  checked={nodeData.simultaneousBattles || false}
+                  onChange={(e) => handleChange('simultaneousBattles', e.target.checked)}
+                  className="mr-1.5 h-3 w-3 text-red-600 rounded focus:ring-red-500"
+                />
+                Simultaneous Battles
+              </label>
+              <label className="flex items-center text-xs">
+                <input
+                  type="checkbox"
+                  checked={nodeData.healAfterwards || false}
+                  onChange={(e) => handleChange('healAfterwards', e.target.checked)}
+                  className="mr-1.5 h-3 w-3 text-red-600 rounded focus:ring-red-500"
+                />
+                Heal Party After Battle
+              </label>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Output Handle */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="w-3 h-3 bg-red-500 border-2 border-white"
+      />
+    </div>
+  );
+});
+
+BattleConfigNode.displayName = 'BattleConfigNode';