Deck törlés funkció implementálása modal-lal és consequence értékek finomítása

SerpentRace_Frontend/src/api/deckApi.js

@@ -40,8 +40,19 @@ export const updateDeck = async (deckId, deck) => {
   }
 }
 
+// Delete a deck (soft delete) (authenticated)
+export const deleteDeck = async (deckId) => {
+  try {
+    const response = await apiClient.delete(`/decks/${deckId}`)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
 export default {
   createDeck,
   getDeckById,
-  updateDeck
+  updateDeck,
+  deleteDeck
 }

SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx

@@ -2,7 +2,7 @@
 // Deck alapadatok szerkesztése és mentés
 
 import React, { useState, useRef, useEffect } from "react"
-import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
+import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash } from "react-icons/fa"
 
 const deckTypes = [
   { value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -15,7 +15,7 @@ const privacyOptions = [
   { value: "public", label: "Publikus", icon: FaGlobe }
 ]
 
-export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
+export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) {
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
   const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
   const typeDropdownRef = useRef(null);
@@ -64,13 +64,25 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
           </h1>
         </div>
 
-        <button
-          onClick={onSave}
-          className="flex items-center gap-2 px-6 py-2 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"
-        >
-          <FaSave />
-          Mentés
-        </button>
+        <div className="flex items-center gap-3">
+          {deck.id && (
+            <button
+              onClick={onDelete}
+              className="flex items-center gap-2 px-6 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
+            >
+              <FaTrash />
+              Törlés
+            </button>
+          )}
+          
+          <button
+            onClick={onSave}
+            className="flex items-center gap-2 px-6 py-2 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"
+          >
+            <FaSave />
+            Mentés
+          </button>
+        </div>
       </div>
 
       {/* Main Content Row */}

SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx

@@ -150,20 +150,23 @@ export default function LuckCardEditor({ card, onChange }) {
             </div>
           </div>
           
-          {/* Consequence Value - csak ha előre/hátra lépés */}
-          {(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
+          {/* Consequence Value - csak kör kihagyás és extra kör */}
+          {(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
             <div>
               <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
-                Mezők száma
+                {cardData.consequence?.type === 2 ? 'Körök kihagyása' : 'Extra körök száma'}
               </label>
               <input
                 type="number"
                 min="1"
-                max="10"
+                max="5"
                 value={cardData.consequence?.value ?? 1}
                 onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
                 className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
               />
+              <div className="text-xs text-[color:var(--color-text-muted)] mt-1">
+                Érték: 1-5 között
+              </div>
             </div>
           )}
         </div>

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -7,7 +7,7 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
 import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
 import CardsList from "../../components/DeckCreator/CardsList.jsx"
 import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
-import { createDeck, getDeckById, updateDeck } from '../../api/deckApi'
+import { createDeck, getDeckById, updateDeck, deleteDeck } from '../../api/deckApi'
 import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
 
 export default function DeckCreator() {
@@ -29,6 +29,7 @@ export default function DeckCreator() {
   const [isCreatingCard, setIsCreatingCard] = useState(false)
   const [newCardType, setNewCardType] = useState(null)
   const [isLoading, setIsLoading] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
 
   // Betöltés API-ból
   useEffect(() => {
@@ -239,6 +240,36 @@ export default function DeckCreator() {
     navigate("/decks")
   }
 
+  const handleDeleteDeck = () => {
+    if (!deck.id) {
+      notifyWarning('Nincs mit törölni - a pakli még nincs elmentve!')
+      return
+    }
+    
+    setShowDeleteModal(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    try {
+      await deleteDeck(deck.id)
+      setShowDeleteModal(false)
+      notifySuccess('Pakli sikeresen törölve!')
+      navigate('/decks')
+    } catch (error) {
+      console.error('Pakli törlési hiba:', error)
+      const errorMessage = error?.response?.data?.error 
+        || error?.response?.data?.message 
+        || error?.message 
+        || 'Ismeretlen hiba történt'
+      notifyError('Hiba történt a törlés során: ' + errorMessage)
+      setShowDeleteModal(false)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setShowDeleteModal(false)
+  }
+
   const handleCreateCard = (cardType) => {
     setNewCardType(cardType)
     setIsCreatingCard(true)
@@ -351,6 +382,7 @@ export default function DeckCreator() {
             onUpdate={handleDeckUpdate}
             onSave={handleSaveDeck}
             onBack={handleBack}
+            onDelete={handleDeleteDeck}
           />
 
           {/* Main Content */}
@@ -386,6 +418,35 @@ export default function DeckCreator() {
         </div>
         </main>
       )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-[color:var(--color-surface)] rounded-xl shadow-xl p-6 w-96 text-center animate-fadeIn">
+            <div className="text-4xl mb-4">🗑️</div>
+            <h3 className="text-lg font-semibold mb-4 text-[color:var(--color-text)]">
+              Biztosan törölni szeretnéd a(z) "{deck.name}" paklit?
+            </h3>
+            <p className="text-sm text-[color:var(--color-text-muted)] mb-6">
+              Ez a művelet nem visszavonható!
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleConfirmDelete}
+                className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition font-semibold"
+              >
+                Igen, törlöm
+              </button>
+              <button
+                onClick={handleCancelDelete}
+                className="bg-[color:var(--color-background)] text-[color:var(--color-text)] px-6 py-2 rounded-lg hover:bg-[color:var(--color-surface-selected)] transition"
+              >
+                Mégse
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }