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>
   )
-}
+}

SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx

@@ -1,8 +1,18 @@
 // src/components/DeckCreator/CardsList.jsx
 // Bal oldali kártyák listája és új kártya létrehozás
 
-import React from "react"
-import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
+import React, { useState } from "react"
+import {
+  FaPlus,
+  FaEdit,
+  FaTrash,
+  FaQuestionCircle,
+  FaCheck,
+  FaTimes,
+  FaDice,
+  FaTheaterMasks
+} from "react-icons/fa"
+import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
 
 const cardTypeIcons = {
   QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -17,18 +27,28 @@ const cardSubTypeLabels = {
   text: "Szöveges válasz"
 }
 
+<<<<<<< HEAD
 export default function CardsList({ 
   cards, 
   selectedCard,
   deckType, 
   onSelectCard, 
   onCreateCard, 
+=======
+export default function CardsList({
+  cards,
+  selectedCard,
+  onSelectCard,
+  onCreateCard,
+>>>>>>> main
   onDeleteCard,
   isCreatingCard,
-  newCardType 
+  newCardType
 }) {
+  const [confirmingDelete, setConfirmingDelete] = useState(null)
 
   const getCardPreview = (card) => {
+<<<<<<< HEAD
     if (card.type === 'QUESTION') {
       return card.question || card.statement || 'Új feladat kártya'
     }
@@ -37,34 +57,69 @@ export default function CardsList({
     }
     if (card.type === 'LUCK') {
       return card.text || 'Új szerencse kártya'
+=======
+    if (card.type === 'QUESTION') {
+      return card.question || card.statement || 'Új feladat kártya'
     }
-    return 'Ismeretlen kártya'
+    if (card.type === 'JOKER') {
+      return card.text || 'Új joker kártya'
+    }
+    if (card.type === 'LUCK') {
+      return card.text || 'Új szerencse kártya'
+>>>>>>> main
+    }
+    return "Ismeretlen kártya"
   }
 
   const getCardTypeLabel = (card) => {
+<<<<<<< HEAD
     if (card.type === 'QUESTION') {
+=======
+    if (card.type === "task") {
+>>>>>>> main
       if (card.subType) {
-        return cardSubTypeLabels[card.subType] || 'Feladat'
+        return cardSubTypeLabels[card.subType] || "Feladat"
       }
-      return 'Feladat'
+      return "Feladat"
     }
+<<<<<<< HEAD
     if (card.type === 'JOKER') {
       return 'Joker'
     }
     if (card.type === 'LUCK') {
       return 'Szerencse'
+=======
+    if (card.type === "joker") {
+      return "Joker"
     }
-    return 'Ismeretlen'
+    if (card.type === "luck") {
+      return "Szerencse"
+>>>>>>> main
+    }
+    return "Ismeretlen"
+  }
+
+  const handleConfirmDelete = () => {
+    if (confirmingDelete) {
+      onDeleteCard(confirmingDelete)
+      notifySuccess("Kártya sikeresen törölve a pakliból!")
+      setConfirmingDelete(null)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setConfirmingDelete(null)
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full relative">
       {/* Header */}
       <div className="p-4 border-b border-[color:var(--color-surface-selected)]">
         <h2 className="text-lg font-bold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
           🃏 Kártyák
         </h2>
 
+<<<<<<< HEAD
         {/* New Card Button */}
         <button 
           onClick={() => onCreateCard(deckType)}
@@ -77,6 +132,42 @@ export default function CardsList({
             {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
           </span>
         </button>
+=======
+        {/* New Card Dropdown */}
+        <div className="relative group">
+          <button className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
+            <FaPlus />
+            Új kártya
+          </button>
+
+          {/* Dropdown Menu */}
+          <div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+            <button
+              onClick={() => onCreateCard("task")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
+            >
+              <FaQuestionCircle className="text-[color:var(--color-question)]" />
+              📋 Feladat kártya
+            </button>
+
+            <button
+              onClick={() => onCreateCard("joker")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
+            >
+              <FaTheaterMasks className="text-[color:var(--color-fun)]" />
+              🃏 Joker kártya
+            </button>
+
+            <button
+              onClick={() => onCreateCard("luck")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
+            >
+              <FaDice className="text-[color:var(--color-luck)]" />
+              🎲 Szerencse kártya
+            </button>
+          </div>
+        </div>
+>>>>>>> main
       </div>
 
       {/* Cards List */}
@@ -94,7 +185,7 @@ export default function CardsList({
               )}
               <div>
                 <div className="text-[color:var(--color-text)] font-medium">
-                  Új {newCardType === 'task' ? 'feladat' : newCardType === 'joker' ? 'joker' : 'szerencse'} kártya
+                  Új {newCardType === "task" ? "feladat" : newCardType === "joker" ? "joker" : "szerencse"} kártya
                 </div>
                 <div className="text-[color:var(--color-text-muted)] text-sm">
                   Szerkesztés folyamatban...
@@ -108,29 +199,33 @@ export default function CardsList({
         {cards.map((card, index) => {
           const cardIcon = cardTypeIcons[card.type] || cardTypeIcons.task
           const isSelected = selectedCard?.id === card.id
-          
+
           return (
             <div
               key={card.id}
               onClick={() => onSelectCard(card)}
               className={`
                 p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
-                ${isSelected 
-                  ? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg' 
-                  : 'bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80'
+                ${
+                  isSelected
+                    ? "bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg"
+                    : "bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80"
                 }
               `}
             >
               {/* Card Header */}
               <div className="flex items-start justify-between gap-2 mb-3">
                 <div className="flex items-center gap-3 flex-1 min-w-0">
-                  <div className="flex items-center justify-center w-10 h-10 rounded-full border-2" style={{ borderColor: cardIcon.color }}>
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-full border-2"
+                    style={{ borderColor: cardIcon.color }}
+                  >
                     {React.createElement(cardIcon.icon, {
                       style: { color: cardIcon.color },
                       className: "text-lg"
                     })}
                   </div>
-                  
+
                   <div className="flex-1 min-w-0">
                     <div className="text-[color:var(--color-text)] font-bold text-sm mb-1">
                       #{index + 1} - {getCardTypeLabel(card)}
@@ -148,7 +243,7 @@ export default function CardsList({
                   <button
                     onClick={(e) => {
                       e.stopPropagation()
-                      onDeleteCard(card.id)
+                      setConfirmingDelete(card.id)
                     }}
                     className="p-1.5 rounded-lg bg-[color:var(--color-error)]/10 hover:bg-[color:var(--color-error)]/20 text-[color:var(--color-error)] transition-colors duration-200"
                   >
@@ -159,13 +254,13 @@ export default function CardsList({
 
               {/* Card Content Preview */}
               <div className="bg-[color:var(--color-surface)]/30 rounded-lg p-3 mb-2">
-                <div 
+                <div
                   className="text-[color:var(--color-text)] text-sm leading-relaxed"
                   style={{
-                    display: '-webkit-box',
+                    display: "-webkit-box",
                     WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                    overflow: 'hidden'
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
                   }}
                 >
                   {getCardPreview(card)}
@@ -188,22 +283,56 @@ export default function CardsList({
         )}
       </div>
 
+      {/* Confirm Delete Popup */}
+      {confirmingDelete && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl p-6 w-80 text-center animate-fadeIn">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              Biztosan törölni szeretnéd?
+            </h3>
+            <p className="text-sm text-gray-600 mb-6">
+              Ez a művelet nem visszavonható.
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleConfirmDelete}
+                className="bg-[color:var(--color-error)] text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
+              >
+                Igen
+              </button>
+              <button
+                onClick={handleCancelDelete}
+                className="bg-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 transition"
+              >
+                Mégse
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Footer Stats */}
       <div className="p-4 border-t border-[color:var(--color-surface-selected)] bg-[color:var(--color-background)]/30">
         <div className="text-center">
           <div className="text-[color:var(--color-text)] font-semibold">
             📊 Összesen: {cards.length} kártya
           </div>
-          
+
           {cards.length > 0 && (
             <div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
+<<<<<<< HEAD
               <span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
               <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
               <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
+=======
+              <span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
+              <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
+              <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
+>>>>>>> main
             </div>
           )}
         </div>
       </div>
     </div>
   )
-}
+}

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -63,7 +63,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) =
             {/* If not authenticated show Login/Register; if authenticated show Home button */}
             {!auth ? (
               <>
-                <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
+                <ButtonGreen text="Bejelentkezés" onClick={onNavigateToPlay} width="w-60" />
                 <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
                 <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
               </>

SerpentRace_Frontend/src/components/Toastify/toastifyServices.jsx

@@ -0,0 +1,165 @@
+import { toast, ToastContainer, Bounce } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+/**
+ * 🔧 Ezt csak egyszer kell betenni az App.jsx-be!
+ * <ToastConfig /> = az a komponens, ami kirendereli a toastokat
+ */
+export const ToastConfig = () => (
+  <ToastContainer
+    position="bottom-right"
+    autoClose={5000}
+    hideProgressBar={false}
+    newestOnTop={false}
+    closeOnClick={false}
+    rtl={false}
+    pauseOnFocusLoss
+    draggable
+    pauseOnHover
+    theme="light"
+    transition={Bounce}
+  />
+);
+
+/**
+ * 🦄 Alapértelmezett toast üzenet (semleges)
+ * notify("Üzenet szövege")
+ */
+export const notify = (message) => {
+  toast(message, {
+    position: "bottom-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: false,
+    pauseOnHover: true,
+    draggable: true,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ✅ Sikeres művelethez
+ * notifySuccess("Sikeres mentés!")
+ */
+export const notifySuccess = (message) => {
+  toast.success(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ❌ Hibás művelethez
+ * notifyError("Hiba történt a mentés során!")
+ */
+export const notifyError = (message) => {
+  toast.error(message, {
+    position: "bottom-right",
+    autoClose: 5000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ℹ️ Információs üzenethez
+ * notifyInfo("Friss adatok betöltve!")
+ */
+export const notifyInfo = (message) => {
+  toast.info(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+/**
+ * ⚠️ Figyelmeztetéshez
+ * notifyWarning("Figyelem! Nem mentett módosítások vannak!")
+ */
+export const notifyWarning = (message) => {
+  toast.warn(message, {
+    position: "bottom-right",
+    autoClose: 4000,
+    theme: "light",
+    transition: Bounce,
+  });
+};
+
+
+
+
+
+// import React, { useState } from "react";
+// import { notifyWarning } from "../../components/Toastify/toastifyServices";
+
+// function AuthLogin() {
+//   const [email, setEmail] = useState("");
+//   const [password, setPassword] = useState("");
+
+//   const handleLogin = async (e) => {
+//     e.preventDefault();
+
+//     // Példa jelszó ellenőrzés logikára:
+//     if (password !== "titkosjelszo123") {
+//       notifyWarning("⚠️ Hibás jelszó! Kérlek próbáld újra.");
+//       return;
+//     }
+
+//     // Ha jó a jelszó:
+//     notifySuccess("✅ Sikeres bejelentkezés!");
+//   };
+
+//   return (
+//     <form onSubmit={handleLogin} className="login-form">
+//       <input
+//         type="email"
+//         placeholder="Email cím"
+//         value={email}
+//         onChange={(e) => setEmail(e.target.value)}
+//       />
+//       <input
+//         type="password"
+//         placeholder="Jelszó"
+//         value={password}
+//         onChange={(e) => setPassword(e.target.value)}
+//       />
+//       <button type="submit">Bejelentkezés</button>
+//     </form>
+//   );
+// }
+
+// export default AuthLogin;
+
+
+
+// meghivas
+// import { toast } from "react-toastify";
+
+// // 🔔 Alap toast
+// export const notify = (msg) => toast(msg);
+
+// // ✅ Sikeres üzenet
+// export const notifySuccess = (msg) => toast.success(msg);
+
+// // ⚠️ Figyelmeztetés
+// export const notifyWarning = (msg) => toast.warning(msg);
+
+// // ❌ Hiba
+// export const notifyError = (msg) => toast.error(msg);
+
+// // ℹ️ Információ
+// export const notifyInfo = (msg) => toast.info(msg);
+
+
+
+// hasznalat
+// import { notifyWarning } from "../../components/Toastify/toastifyServices";
+
+// if (password !== "titkos") {
+//   notifyWarning("⚠️ Hibás jelszó!");
+// }