Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kartyatorles popup

Browse Source
This commit is contained in:
Pintér Zsolt
2025-10-22 14:24:24 +02:00
parent 825e9d1a08
commit 3ad9ba3e3f
3 changed files with 138 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/App.jsx
+12
View File
@@ -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
+88 -33
View File
@@ -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 = {
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') {
return card.question || card.statement || 'Új feladat kártya'
if (card.type === "task") {
return card.question || card.statement || "Új feladat kártya"
}
if (card.type === 'joker') {
return card.text || 'Új joker kártya'
if (card.type === "joker") {
return card.text || "Új joker kártya"
}
if (card.type === 'luck') {
return card.text || 'Új szerencse kártya'
if (card.type === "luck") {
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') {
return 'Joker'
if (card.type === "joker") {
return "Joker"
}
if (card.type === 'luck') {
return 'Szerencse'
if (card.type === "luck") {
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'
: '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"
@@ -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',
overflow: 'hidden'
WebkitBoxOrient: "vertical",
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 === 'joker').length}</span>
<span>🎲 {cards.filter(c => c.type === 'luck').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 === "luck").length}</span>
</div>
)}
</div>
SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+12 -9
View File
@@ -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,20 +97,26 @@ 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")
}
}
const handleCreateCard = (cardType) => {
setNewCardType(cardType)
@@ -152,8 +156,8 @@ 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 => ({
...prev,
cards: prev.cards.filter(card => card.id !== cardId)
@@ -163,7 +167,6 @@ export default function DeckCreator() {
setSelectedCard(null)
}
}
}
return (
<div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">