Merge: Konfliktusok feloldása és toastify integráció

- Megtartva az új kártya típusok (QUESTION, LUCK, JOKER)
- Hozzáadva toastify notifikációk
- Egyszerűsített új kártya létrehozás

SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx

@@ -7,6 +7,8 @@ import TaskCardEditor from "./TaskCardEditor.jsx"
 import JokerCardEditor from "./JokerCardEditor.jsx"
 import LuckCardEditor from "./LuckCardEditor.jsx"
 import CardPreview from "./CardPreview.jsx"
+import { notifySuccess, notifyError,notifyWarning } from "../../components/Toastify/toastifyServices"
+
 
 export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
   const [cardData, setCardData] = useState(null)
@@ -65,33 +67,24 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     }
   }, [card, isCreating, cardType])
 
-  const handleSave = () => {
-    if (!cardData) return
-    
-    // Validáció
-    if (!validateCard(cardData)) return
-    
-    onSave(cardData)
-  }
-
   const validateCard = (data) => {
     if (data.type === 'QUESTION') {
       if (!data.question && !data.statement) {
-        alert("❌ Kérdés vagy állítás megadása kötelező!")
+        notifyError("Kérdés vagy állítás megadása kötelező!")
         return false
       }
       if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
-        alert("❌ Minden válaszlehetőséget ki kell tölteni!")
+        notifyError("Minden válaszlehetőséget ki kell tölteni!")
         return false
       }
     } else if (data.type === 'JOKER') {
       if (!data.text || !data.text.trim()) {
-        alert("❌ Joker kártya szövege nem lehet üres!")
+        notifyError("Joker kártya szövege nem lehet üres!")
         return false
       }
     } else if (data.type === 'LUCK') {
       if (!data.text || !data.text.trim()) {
-        alert("❌ Szerencse kártya szövege nem lehet üres!")
+        notifyError("Szerencse kártya szövege nem lehet üres!")
         return false
       }
     }
@@ -103,6 +96,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
     setCardData(prev => prev ? { ...prev, ...updates } : null)
   }
 
+  const handleSave = () => {
+    if (!cardData) return
+
+    if (!validateCard(cardData)) return
+
+    try {
+      onSave(cardData)
+      notifySuccess('Kártya sikeresen mentve!')
+    } catch (error) {
+      notifyError('Hiba történt a kártya mentése során: ' + (error?.message || String(error)))
+    }
+  }
+
   // Ha nincs kiválasztott kártya vagy új kártya létrehozás
   if (!cardData) {
     return (
@@ -134,10 +140,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </div>
             <div>
               <h2 className="text-xl font-bold text-[color:var(--color-text)]">
+<<<<<<< HEAD
                 {isCreating ? 'Új' : 'Szerkesztés'} {' '}
                 {cardData.type === 'QUESTION' && 'Feladat kártya'}
                 {cardData.type === 'JOKER' && 'Joker kártya'}
                 {cardData.type === 'LUCK' && 'Szerencse kártya'}
+=======
+                {isCreating ? 'Új' : 'Szerkesztés'} {' '}
+                {cardData.type === 'QUESTION' && 'Feladat kártya'}
+                {cardData.type === 'JOKER' && 'Joker kártya'}
+                {cardData.type === 'LUCK' && 'Szerencse kártya'}
+>>>>>>> main
               </h2>
               <div className="text-[color:var(--color-text-muted)] text-sm">
                 {cardData.type === 'QUESTION' && cardData.subType && (
@@ -157,8 +170,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
               onClick={() => setShowPreview(!showPreview)}
               className={`
                 flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
-                ${showPreview 
-                  ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]' 
+                ${showPreview
+                  ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
                   : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
                 }
               `}
@@ -168,12 +181,15 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
             </button>
             
             <button
-              onClick={onCancel}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
-            >
-              <FaTimes />
-              Mégse
-            </button>
+  onClick={() => {
+    notifyWarning('Kártya készítés megszakítva')
+    onCancel()
+  }}
+  className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
+>
+  <FaTimes />
+  Mégse
+</button>
             
             <button
               onClick={handleSave}
@@ -189,12 +205,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       {/* Content */}
       <div className="flex-1 overflow-hidden">
         {showPreview ? (
-          /* Preview Mode */
           <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
             <CardPreview card={cardData} />
           </div>
         ) : (
-          /* Edit Mode */
           <div className="h-full overflow-y-auto p-6">
             {cardData.type === 'QUESTION' && (
               <TaskCardEditor 
@@ -221,4 +235,4 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
       </div>
     </div>
   )
-}
+}