kartyatorles popup

SerpentRace_Frontend/src/App.jsx

@@ -34,6 +34,18 @@ function App() {
     return () => window.removeEventListener("resize", handleResize)
   }, [])
 
+  // if (isMobile) {
+  //   return (
+  //     <Router>
+  //       <Routes>
+  //         <Route path="/register" element={<AuthRegister />} />
+  //         <Route path="/login" element={<AuthLogin />} />
+  //         <Route path="/verify-email" element={<EmailVerification />} />
+  //       </Routes>
+  //     </Router>
+  //   );
+  // }
+
   return (
     <>
       <Router>

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 React, { useState } from "react"
-import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
+import {
+  FaPlus,
+  FaEdit,
+  FaTrash,
+  FaQuestionCircle,
+  FaCheck,
+  FaTimes,
+  FaDice,
+  FaTheaterMasks
+} from "react-icons/fa"
+import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
 
 const cardTypeIcons = {
   task: { icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -26,38 +36,51 @@ export default function CardsList({
   isCreatingCard,
   newCardType
 }) {
+  const [confirmingDelete, setConfirmingDelete] = useState(null)
 
   const getCardPreview = (card) => {
-    if (card.type === 'task') {
+    if (card.type === "task") {
-      return card.question || card.statement || 'Új feladat kártya'
+      return card.question || card.statement || "Új feladat kártya"
     }
-    if (card.type === 'joker') {
+    if (card.type === "joker") {
-      return card.text || 'Új joker kártya'
+      return card.text || "Új joker kártya"
     }
-    if (card.type === 'luck') {
+    if (card.type === "luck") {
-      return card.text || 'Új szerencse kártya'
+      return card.text || "Új szerencse kártya"
     }
-    return 'Ismeretlen kártya'
+    return "Ismeretlen kártya"
   }
 
   const getCardTypeLabel = (card) => {
-    if (card.type === 'task') {
+    if (card.type === "task") {
       if (card.subType) {
-        return cardSubTypeLabels[card.subType] || 'Feladat'
+        return cardSubTypeLabels[card.subType] || "Feladat"
       }
-      return 'Feladat'
+      return "Feladat"
     }
-    if (card.type === 'joker') {
+    if (card.type === "joker") {
-      return 'Joker'
+      return "Joker"
     }
-    if (card.type === 'luck') {
+    if (card.type === "luck") {
-      return 'Szerencse'
+      return "Szerencse"
     }
-    return 'Ismeretlen'
+    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">
@@ -74,7 +97,7 @@ export default function CardsList({
           {/* 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')}
+              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)]" />
@@ -82,7 +105,7 @@ export default function CardsList({
             </button>
 
             <button
-              onClick={() => onCreateCard('joker')}
+              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)]" />
@@ -90,7 +113,7 @@ export default function CardsList({
             </button>
 
             <button
-              onClick={() => onCreateCard('luck')}
+              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)]" />
@@ -115,7 +138,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...
@@ -136,16 +159,20 @@ export default function CardsList({
               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' 
+                  isSelected
-                  : 'bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80'
+                    ? "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"
@@ -169,7 +196,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"
                   >
@@ -183,10 +210,10 @@ export default function CardsList({
                 <div
                   className="text-[color:var(--color-text)] text-sm leading-relaxed"
                   style={{
-                    display: '-webkit-box',
+                    display: "-webkit-box",
                     WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
+                    WebkitBoxOrient: "vertical",
-                    overflow: 'hidden'
+                    overflow: "hidden"
                   }}
                 >
                   {getCardPreview(card)}
@@ -209,6 +236,34 @@ 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">
@@ -218,9 +273,9 @@ export default function CardsList({
 
           {cards.length > 0 && (
             <div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
-              <span>📋 {cards.filter(c => c.type === 'task').length}</span>
+              <span>📋 {cards.filter((c) => c.type === "task").length}</span>
-              <span>🃏 {cards.filter(c => c.type === 'joker').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 === "luck").length}</span>
             </div>
           )}
         </div>

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -32,10 +32,8 @@ export default function DeckCreator() {
   // Betöltés (később API-ból)
   useEffect(() => {
     if (deckId) {
-      // TODO: Betöltés API-ból
       loadDeck(deckId)
     } else {
-      // Új deck
       setDeck({
         id: null,
         name: "Új Deck",
@@ -99,19 +97,25 @@ export default function DeckCreator() {
       }
 
       const saved = await createDeck(payload)
-      setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
+      setDeck(prev => ({
+        ...prev,
+        id: saved.id ?? prev.id,
+        creationdate: saved.creationdate ?? prev.creationdate,
+        updatedate: saved.updatedate ?? prev.updatedate
+      }))
+
       console.log('Deck saved (backend):', saved)
-      notifySuccess(' Deck sikeresen mentve!')
+      notifySuccess('Deck sikeresen mentve!')
     } catch (error) {
       console.error('Mentési hiba:', error)
-      notifyError(' Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
+      notifyError('Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
     }
   }
 
+  // 🔧 Itt korábban volt confirm(), de most eltávolítottuk
   const handleBack = () => {
-    if (confirm("Biztosan visszamész? A nem mentett változtatások elvesznek.")) {
+    // Egyszerű visszalépés — ha akarsz, később adhatunk hozzá saját modalt
-      navigate("/decks")
+    navigate("/decks")
-    }
   }
 
   const handleCreateCard = (cardType) => {
@@ -152,16 +156,15 @@ export default function DeckCreator() {
     }
   }
 
+  // 🔧 Itt is confirm() volt — most a CardsList popupja kezeli a megerősítést
   const handleDeleteCard = (cardId) => {
-    if (confirm("Biztosan törlöd ezt a kártyát?")) {
+    setDeck(prev => ({
-      setDeck(prev => ({
+      ...prev,
-        ...prev,
+      cards: prev.cards.filter(card => card.id !== cardId)
-        cards: prev.cards.filter(card => card.id !== cardId)
+    }))
-      }))
 
-      if (selectedCard?.id === cardId) {
+    if (selectedCard?.id === cardId) {
-        setSelectedCard(null)
+      setSelectedCard(null)
-      }
     }
   }