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

deckcreate-oldal-javitas #62

Merged
Donat merged 10 commits from deckcreate-oldal-javitas into main 2025-10-23 17:29:45 +02:00
Conversation 0 Commits 10 Files Changed 13
+879 -419
13 changed files with 879 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Docker/docker-compose.watch.yml
+3 -1
View File
@@ -75,7 +75,9 @@ services:
environment:
- NODE_ENV=development
- VITE_API_URL=http://localhost:3000
volumes: []
volumes:
- ../SerpentRace_Frontend:/app
- /app/node_modules
develop:
watch:
- action: sync
SerpentRace_Frontend/package-lock.json
Generated
+23
View File
@@ -15,6 +15,7 @@
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.0",
"react-toastify": "^11.0.5",
"tailwindcss": "^4.1.7"
},
"devDependencies": {
@@ -1816,6 +1817,15 @@
"node": ">=18"
}
},
"node_modules/clsx": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3363,6 +3373,19 @@
"node": ">=18"
}
},
"node_modules/react-toastify": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
"license": "MIT",
"dependencies": {
"clsx": "^2.1.1"
},
"peerDependencies": {
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
}
},
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
SerpentRace_Frontend/package.json
+1
View File
@@ -17,6 +17,7 @@
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.0",
"react-toastify": "^11.0.5",
"tailwindcss": "^4.1.7"
},
"devDependencies": {
SerpentRace_Frontend/src/components/DeckCreator/CardEditor.jsx
+88 -47
View File
@@ -20,29 +20,32 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
id: null,
type: type,
points: 10,
timeLimit: 30
timeLimit: 30,
consequence: { type: 0, value: 1 }
}
switch (type) {
case 'task':
case 'QUESTION':
return {
...baseData,
subType: 'quiz',
question: '',
options: ['', '', '', ''],
correctAnswer: 0,
explanation: ''
explanation: '',
wrongConsequence: { type: 1, value: 1 }
}
case 'joker':
case 'JOKER':
return {
...baseData,
title: '',
description: '',
effect: '',
actionType: 'skip',
usage: 'once'
usage: 'once',
wrongConsequence: { type: 1, value: 1 }
}
case 'luck':
case 'LUCK':
return {
...baseData,
event: '',
@@ -58,38 +61,55 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
// Kártya adatok inicializálása
useEffect(() => {
if (isCreating && cardType) {
setCardData(getDefaultCardData(cardType))
} else if (card) {
setCardData({ ...card })
} else {
try {
if (isCreating && cardType) {
const defaultData = getDefaultCardData(cardType)
setCardData(defaultData)
} else if (card) {
setCardData({ ...card })
} else {
setCardData(null)
}
} catch (error) {
console.error('Kártya inicializálási hiba:', error)
setCardData(null)
}
}, [card, isCreating, cardType])
const validateCard = (data) => {
if (data.type === 'task') {
if (!data.question && !data.statement) {
notifyError("Kérdés vagy állítás megadása kötelező!")
try {
if (!data || !data.type) {
notifyError("Érvénytelen kártya adatok!")
return false
}
if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
notifyError("Minden válaszlehetőséget ki kell tölteni!")
return false
}
} else if (data.type === 'joker') {
if (!data.text || !data.text.trim()) {
notifyError("Joker kártya szövege nem lehet üres!")
return false
}
} else if (data.type === 'luck') {
if (!data.text || !data.text.trim()) {
notifyError("Szerencse kártya szövege nem lehet üres!")
return false
if (data.type === 'QUESTION') {
if (!data.question && !data.statement) {
notifyError("Kérdés vagy állítás megadása kötelező!")
return false
}
if (data.subType === 'quiz' && data.options && data.options.some(opt => !opt.trim())) {
notifyError("Minden válaszlehetőséget ki kell tölteni!")
return false
}
} else if (data.type === 'JOKER') {
if (!data.text || !data.text.trim()) {
notifyError("Joker kártya szövege nem lehet üres!")
return false
}
} else if (data.type === 'LUCK') {
if (!data.text || !data.text.trim()) {
notifyError("Szerencse kártya szövege nem lehet üres!")
return false
}
}
return true
} catch (error) {
console.error('Validálási hiba:', error)
notifyError("Hiba történt a kártya ellenőrzése során")
return false
}
return true
}
const updateCardData = (updates) => {
@@ -97,16 +117,14 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
}
const handleSave = () => {
if (!cardData) return
if (!cardData) {
notifyError("Nincs mentendő kártya adat!")
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)))
}
onSave(cardData)
}
// Ha nincs kiválasztott kártya vagy új kártya létrehozás
@@ -129,24 +147,47 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
return (
<div className="flex-1 flex flex-col">
{/* Type Mismatch Warning */}
{cardData?.type && cardType && cardData.type !== cardType && !isCreating && (
<div className="bg-[color:var(--color-error)]/10 border-l-4 border-[color:var(--color-error)] px-6 py-4">
<div className="flex items-center gap-3">
<div className="text-[color:var(--color-error)] text-xl">⚠️</div>
<div>
<div className="text-[color:var(--color-error)] font-semibold">
Figyelmeztetés: Nem megfelelő kártya típus
</div>
<div className="text-[color:var(--color-error)]/80 text-sm">
{`Ez egy ${
cardData.type === 'QUESTION' ? 'Feladat' :
cardData.type === 'JOKER' ? 'Joker' : 'Szerencse'
} kártya, de a pakli típusa ${
cardType === 'QUESTION' ? 'Feladat' :
cardType === 'JOKER' ? 'Joker' : 'Szerencse'
}.`}
</div>
</div>
</div>
</div>
)}
{/* Header */}
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="text-2xl">
{cardData.type === 'task' && '📋'}
{cardData.type === 'joker' && '🃏'}
{cardData.type === 'luck' && '🎲'}
{cardData.type === 'QUESTION' && '📋'}
{cardData.type === 'JOKER' && '🃏'}
{cardData.type === 'LUCK' && '🎲'}
</div>
<div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
{isCreating ? 'Új' : 'Szerkesztés'}{' '}
{cardData.type === 'task' && 'Feladat kártya'}
{cardData.type === 'joker' && 'Joker kártya'}
{cardData.type === 'luck' && 'Szerencse kártya'}
{isCreating ? 'Új' : 'Szerkesztés'} {' '}
{(isCreating ? cardType : cardData.type) === 'QUESTION' && 'Feladat kártya'}
{(isCreating ? cardType : cardData.type) === 'JOKER' && 'Joker kártya'}
{(isCreating ? cardType : cardData.type) === 'LUCK' && 'Szerencse kártya'}
</h2>
<div className="text-[color:var(--color-text-muted)] text-sm">
{cardData.type === 'task' && cardData.subType && (
{cardData.type === 'QUESTION' && cardData.subType && (
<>
{cardData.subType === 'quiz' && 'Quiz (A/B/C/D)'}
{cardData.subType === 'truefalse' && 'Igaz/Hamis'}
@@ -203,21 +244,21 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div>
) : (
<div className="h-full overflow-y-auto p-6">
{cardData.type === 'task' && (
{cardData.type === 'QUESTION' && (
<TaskCardEditor
card={cardData}
onChange={updateCardData}
/>
)}
{cardData.type === 'joker' && (
{cardData.type === 'JOKER' && (
<JokerCardEditor
card={cardData}
onChange={updateCardData}
/>
)}
{cardData.type === 'luck' && (
{cardData.type === 'LUCK' && (
<LuckCardEditor
card={cardData}
onChange={updateCardData}
SerpentRace_Frontend/src/components/DeckCreator/CardsList.jsx
+46 -61
View File
@@ -15,9 +15,9 @@ import {
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
const cardTypeIcons = {
task: { icon: FaQuestionCircle, color: "var(--color-question)" },
joker: { icon: FaTheaterMasks, color: "var(--color-fun)" },
luck: { icon: FaDice, color: "var(--color-luck)" }
QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
JOKER: { icon: FaTheaterMasks, color: "var(--color-fun)" },
LUCK: { icon: FaDice, color: "var(--color-luck)" }
}
const cardSubTypeLabels = {
@@ -27,10 +27,11 @@ const cardSubTypeLabels = {
text: "Szöveges válasz"
}
export default function CardsList({
cards,
export default function CardsList({
cards,
selectedCard,
onSelectCard,
deckType,
onSelectCard,
onCreateCard,
onDeleteCard,
isCreatingCard,
@@ -39,30 +40,30 @@ export default function CardsList({
const [confirmingDelete, setConfirmingDelete] = useState(null)
const getCardPreview = (card) => {
if (card.type === "task") {
return card.question || card.statement || "Új feladat kártya"
if (card.type === 'QUESTION') {
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"
}
const getCardTypeLabel = (card) => {
if (card.type === "task") {
if (card.type === 'QUESTION') {
if (card.subType) {
return cardSubTypeLabels[card.subType] || "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"
}
@@ -87,40 +88,22 @@ export default function CardsList({
🃏 Kártyák
</h2>
{/* 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>
{/* New Card Button */}
<button
onClick={() => onCreateCard(deckType)}
className={`w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg ${
deckType === 'QUESTION' ? 'bg-[color:var(--color-question)] hover:bg-[color:var(--color-question)]/80' :
deckType === 'LUCK' ? 'bg-[color:var(--color-luck)] hover:bg-[color:var(--color-luck)]/80' :
'bg-[color:var(--color-fun)] hover:bg-[color:var(--color-fun)]/80'
}`}
>
<FaPlus />
<span>
{deckType === 'QUESTION' && '📋 Új feladat kártya'}
{deckType === 'JOKER' && '🃏 Új joker kártya'}
{deckType === 'LUCK' && '🎲 Új szerencse kártya'}
</span>
</button>
</div>
{/* Cards List */}
@@ -138,7 +121,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 === "QUESTION" ? "feladat" : newCardType === "JOKER" ? "joker" : "szerencse"} kártya
</div>
<div className="text-[color:var(--color-text-muted)] text-sm">
Szerkesztés folyamatban...
@@ -158,14 +141,24 @@ export default function CardsList({
key={card.id}
onClick={() => onSelectCard(card)}
className={`
p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group relative
${
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.type !== deckType ? "opacity-70" : ""}
`}
>
{card.type !== deckType && (
<div className="absolute inset-0 flex items-center justify-center">
<div className="absolute inset-0 bg-[color:var(--color-error)]/5 backdrop-blur-[1px] rounded-xl"></div>
<div className="absolute rotate-[-15deg] border-t-2 border-[color:var(--color-error)] w-full"></div>
<span className="absolute top-1 right-1 text-xs text-[color:var(--color-error)] bg-[color:var(--color-error)]/10 px-2 py-1 rounded-lg">
⚠️ Nem megfelelő típus
</span>
</div>
)}
{/* 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">
@@ -270,14 +263,6 @@ export default function CardsList({
<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)]">
<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>
</div>
</div>
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+153 -93
View File
@@ -1,13 +1,13 @@
// src/components/DeckCreator/DeckHeader.jsx
// Deck alapadatok szerkesztése és mentés
import React from "react"
import React, { useState, useRef, useEffect } from "react"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
const deckTypes = [
{ value: "Question", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
{ value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
{ value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
{ value: "LUCK", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
{ value: "JOKER", label: "Joker", icon: FaLaughBeam, color: "var(--color-fun)" }
]
const privacyOptions = [
@@ -16,17 +16,35 @@ const privacyOptions = [
]
export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
const typeDropdownRef = useRef(null);
const privacyDropdownRef = useRef(null);
const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
useEffect(() => {
function handleClickOutside(event) {
if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
setIsTypeDropdownOpen(false);
}
if (privacyDropdownRef.current && !privacyDropdownRef.current.contains(event.target)) {
setIsPrivacyDropdownOpen(false);
}
}
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
const handleInputChange = (field, value) => {
onUpdate({ [field]: value })
}
const cardsCount = deck.cards?.length || 0
const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0
// Remove unused card count variables
return (
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
@@ -42,7 +60,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
</button>
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">
📝 Deck Szerkesztés
📝 Pakli Szerkesztés
</h1>
</div>
@@ -56,104 +74,146 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
</div>
{/* Main Content Row */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
{/* Deck Basic Info */}
<div className="lg:col-span-2 space-y-4">
{/* Deck Name */}
<div>
<div className="space-y-4">
{/* Two Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Name - Takes up 2 columns */}
<div className="md:col-span-2">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📦 Deck neve
📦 Pakli neve
</label>
<input
type="text"
value={deck.name}
onChange={(e) => handleInputChange('name', e.target.value)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
placeholder="Add meg a deck nevét..."
placeholder="Add meg a pakli nevét..."
/>
</div>
{/* Type and Privacy Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
🎯 Típus
</label>
<select
value={deck.type}
onChange={(e) => handleInputChange('type', e.target.value)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
>
{deckTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
</div>
{/* Privacy */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
👁️ Láthatóság
</label>
<select
value={deck.privacy}
onChange={(e) => handleInputChange('privacy', e.target.value)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
>
{privacyOptions.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
</div>
{/* Description */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Leírás
</label>
<input
type="text"
value={deck.description}
onChange={(e) => handleInputChange('description', e.target.value)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
placeholder="Rövid leírás..."
/>
</div>
</div>
{/* Empty space for visual balance */}
<div className="hidden md:block"></div>
</div>
{/* Stats Panel */}
<div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
<h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
📊 Statisztikák
</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between items-center">
<span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
<span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
{/* Type, Privacy and Description Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
🎯 Típus
</label>
<div className="relative">
<button
type="button"
onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
style={{
paddingLeft: "2.5rem"
}}
>
<div className="absolute left-4 top-1/2 -translate-y-1/2">
{React.createElement(currentDeckType.icon, {
style: { color: currentDeckType.color }
})}
</div>
{currentDeckType.label}
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</button>
{isTypeDropdownOpen && (
<div
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
ref={typeDropdownRef}
>
{deckTypes.map(type => (
<button
key={type.value}
onClick={() => {
handleInputChange('type', type.value);
setIsTypeDropdownOpen(false);
}}
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
>
{React.createElement(type.icon, {
style: { color: type.color }
})}
<span>{type.label}</span>
</button>
))}
</div>
)}
</div>
<div className="flex justify-between items-center">
<span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
<span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
<span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
<span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
</div>
{/* Privacy */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
👁️ Láthatóság
</label>
<div className="relative">
<button
type="button"
onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
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-success)] focus:border-transparent outline-none transition-all duration-200 flex items-center"
style={{
paddingLeft: "2.5rem"
}}
>
<div className="absolute left-4 top-1/2 -translate-y-1/2">
{React.createElement(currentPrivacy.icon, {
className: "text-[color:var(--color-text)]"
})}
</div>
{currentPrivacy.label}
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</div>
</button>
{isPrivacyDropdownOpen && (
<div
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
ref={privacyDropdownRef}
>
{privacyOptions.map(option => (
<button
key={option.value}
onClick={() => {
handleInputChange('privacy', option.value);
setIsPrivacyDropdownOpen(false);
}}
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
>
{React.createElement(option.icon, {
className: "text-[color:var(--color-text)]"
})}
<span>{option.label}</span>
</button>
))}
</div>
)}
</div>
</div>
{/* Description */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Leírás
</label>
<input
type="text"
value={deck.description}
onChange={(e) => handleInputChange('description', e.target.value)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
placeholder="Rövid leírás..."
/>
</div>
</div>
</div>
</div>
SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx
+4 -4
View File
@@ -17,7 +17,7 @@ import DeckInfoPopUp from "../PopUp/DeckInfoPopUp"
const deckTypes = [
{ label: "Luck", color: "var(--color-luck)" },
{ label: "Question", color: "var(--color-question)" },
{ label: "Fun", color: "var(--color-fun)" },
{ label: "Joker", color: "var(--color-fun)" },
]
// initial state will be fetched from backend
@@ -163,8 +163,8 @@ const DeckManager = () => {
? "Szerencse"
: type.label === "Question"
? "Kérdés"
: type.label === "Fun"
? "Szórakozás"
: type.label === "Joker"
? "Joker"
: type.label}
</button>
))}
@@ -303,7 +303,7 @@ const DeckManager = () => {
: deck.type === "Question"
? "Kérdés"
: deck.type === "Fun"
? "Szórakozás"
? "Joker"
: deck.type}
</span>
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
+169 -36
View File
@@ -4,17 +4,29 @@
import React, { useState, useEffect } from 'react'
import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function JokerCardEditor({ card, onChange }) {
const [cardData, setCardData] = useState({
type: 'joker',
text: ''
type: 'JOKER',
text: '',
consequence: { type: 0, value: 1 },
wrongConsequence: { type: 1, value: 1 }
})
useEffect(() => {
if (card) {
setCardData({
type: 'joker',
text: card.text || ''
type: 'JOKER',
text: card.text || '',
consequence: card.consequence || { type: 0, value: 1 },
wrongConsequence: card.wrongConsequence || { type: 1, value: 1 }
})
}
}, [card])
@@ -31,6 +43,36 @@ export default function JokerCardEditor({ card, onChange }) {
}
}
const updateConsequence = (field, value) => {
const newCardData = {
...cardData,
consequence: {
...cardData.consequence,
[field]: value
}
}
setCardData(newCardData)
if (onChange) {
onChange(newCardData)
}
}
const updateWrongConsequence = (field, value) => {
const newCardData = {
...cardData,
wrongConsequence: {
...cardData.wrongConsequence,
[field]: value
}
}
setCardData(newCardData)
if (onChange) {
onChange(newCardData)
}
}
// Példa joker kártyák
const exampleCards = [
"Felelsz vagy mersz? (Az előző játékos kérdez)",
@@ -57,18 +99,10 @@ export default function JokerCardEditor({ card, onChange }) {
}
return (
<div className="max-w-4xl mx-auto">
<div className="space-y-6">
{/* Info box */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<FaTheaterMasks className="text-2xl text-[color:var(--color-fun)]" />
<h3 className="text-xl font-bold text-[color:var(--color-text)]">
Joker Kártya Szerkesztő
</h3>
</div>
{/* Info box */}
<div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4 mb-6">
<div className="bg-[color:var(--color-fun)]/10 border border-[color:var(--color-fun)]/30 rounded-lg p-4">
<div className="flex items-start gap-3">
<FaInfoCircle className="text-[color:var(--color-fun)] mt-1 flex-shrink-0" />
<div>
@@ -86,28 +120,33 @@ export default function JokerCardEditor({ card, onChange }) {
</div>
</div>
</div>
</div>
{/* Card text input */}
<div className="space-y-4">
<div>
<label className="block text-[color:var(--color-text)] font-medium mb-2">
Joker kártya feladat *
</label>
<textarea
value={cardData.text}
onChange={handleTextChange}
placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-fun)] transition-colors"
maxLength={150}
/>
<div className="flex justify-between items-center mt-2">
<span className="text-xs text-[color:var(--color-text-muted)]">
Maximális hossz: 150 karakter
</span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/150
</span>
</div>
{/* Kártya szövege */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
<FaTheaterMasks className="text-[color:var(--color-fun)]" />
Kártya szövege
</h3>
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Joker kártya feladat *
</label>
<textarea
value={cardData.text}
onChange={handleTextChange}
placeholder="Pl: Felelsz vagy mersz? (Az előző játékos kérdez)"
className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-fun)] focus:border-transparent outline-none transition-all duration-200"
maxLength={150}
/>
<div className="flex justify-between items-center mt-2">
<span className="text-xs text-[color:var(--color-text-muted)]">
Maximális hossz: 150 karakter
</span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/150
</span>
</div>
</div>
@@ -147,6 +186,100 @@ export default function JokerCardEditor({ card, onChange }) {
</div>
)}
</div>
{/* Következmények (teljesítés esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények (teljesítés esetén)
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
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-success)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
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-success)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
{/* Következmények (nem teljesítés esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
❌ Következmények (nem teljesítés esetén)
</h3>
<div className="space-y-4">
{/* Wrong Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.wrongConsequence?.type ?? 1}
onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
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-danger)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.wrongConsequence?.type ?? 1))?.description}
</div>
</div>
{/* Wrong Consequence Value - csak ha előre/hátra lépés */}
{(cardData.wrongConsequence?.type === 0 || cardData.wrongConsequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={cardData.wrongConsequence?.value ?? 1}
onChange={(e) => updateWrongConsequence('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-danger)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
</div>
)
}
SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+105 -37
View File
@@ -4,17 +4,27 @@
import React, { useState, useEffect } from 'react'
import { FaDice, FaInfoCircle } from 'react-icons/fa'
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function LuckCardEditor({ card, onChange }) {
const [cardData, setCardData] = useState({
type: 'luck',
text: ''
type: 'LUCK',
text: '',
consequence: { type: 0, value: 1 }
})
useEffect(() => {
if (card) {
setCardData({
type: 'luck',
text: card.text || ''
type: 'LUCK',
text: card.text || '',
consequence: card.consequence || { type: 0, value: 1 }
})
}
}, [card])
@@ -31,19 +41,26 @@ export default function LuckCardEditor({ card, onChange }) {
}
}
return (
<div className="max-w-4xl mx-auto">
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<FaDice className="text-2xl text-[color:var(--color-luck)]" />
<h3 className="text-xl font-bold text-[color:var(--color-text)]">
Szerencse Kártya Szerkesztő
</h3>
</div>
const updateConsequence = (field, value) => {
const newCardData = {
...cardData,
consequence: {
...cardData.consequence,
[field]: value
}
}
setCardData(newCardData)
if (onChange) {
onChange(newCardData)
}
}
{/* Info box */}
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
return (
<div className="space-y-6">
{/* Info box */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4">
<div className="flex items-start gap-3">
<FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
<div>
@@ -60,28 +77,32 @@ export default function LuckCardEditor({ card, onChange }) {
</div>
</div>
</div>
</div>
{/* Card text input */}
<div className="space-y-4">
<div>
<label className="block text-[color:var(--color-text)] font-medium mb-2">
Kártya szövege *
</label>
<textarea
value={cardData.text}
onChange={handleTextChange}
placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
className="w-full h-32 p-4 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-lg text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:outline-none focus:border-[color:var(--color-luck)] transition-colors"
maxLength={200}
/>
<div className="flex justify-between items-center mt-2">
<span className="text-xs text-[color:var(--color-text-muted)]">
Maximális hossz: 200 karakter
</span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/200
</span>
</div>
{/* Kártya szövege */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
<FaDice className="text-[color:var(--color-luck)]" />
Kártya szövege
</h3>
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Szerencse esemény leírása *
</label>
<textarea
value={cardData.text}
onChange={handleTextChange}
placeholder="Pl: Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
className="w-full h-32 px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] placeholder-[color:var(--color-text-muted)] resize-none focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
maxLength={200}
/>
<div className="flex justify-between items-center mt-2">
<span className="text-xs text-[color:var(--color-text-muted)]">
Maximális hossz: 200 karakter
</span>
<span className="text-xs text-[color:var(--color-text-muted)]">
{cardData.text.length}/200
</span>
</div>
</div>
@@ -100,6 +121,53 @@ export default function LuckCardEditor({ card, onChange }) {
</div>
)}
</div>
{/* Következmények */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
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"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
min="1"
max="10"
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>
)}
</div>
</div>
</div>
)
}
SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
+213 -73
View File
@@ -20,6 +20,14 @@ const timeLimits = [
{ value: 120, label: '2 perc' }
]
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function TaskCardEditor({ card, onChange }) {
const updateField = (field, value) => {
@@ -81,6 +89,26 @@ export default function TaskCardEditor({ card, onChange }) {
onChange({ acceptedAnswers: newAnswers })
}
const updateConsequence = (field, value) => {
const currentConsequence = card.consequence || { type: 0, value: 1 }
onChange({
consequence: {
...currentConsequence,
[field]: value
}
})
}
const updateWrongConsequence = (field, value) => {
const currentWrongConsequence = card.wrongConsequence || { type: 1, value: 1 }
onChange({
wrongConsequence: {
...currentWrongConsequence,
[field]: value
}
})
}
return (
<div className="max-w-4xl mx-auto space-y-6">
{/* Feladat típus választó */}
@@ -374,37 +402,48 @@ export default function TaskCardEditor({ card, onChange }) {
</div>
</div>
{/* Beállítások */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={card.caseSensitive || false}
onChange={(e) => updateField('caseSensitive', e.target.checked)}
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
</label>
{/* Beállítások - Később elérhető */}
<div className="relative">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 pointer-events-none blur-[1px]">
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={false}
disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
</label>
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={false}
disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Pontos egyezés</span>
</label>
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={false}
disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
</label>
</div>
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={card.exactMatch || false}
onChange={(e) => updateField('exactMatch', e.target.checked)}
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Pontos egyezés</span>
</label>
<label className="flex items-center gap-2 text-sm">
<input
type="checkbox"
checked={card.partialAccepted || true}
onChange={(e) => updateField('partialAccepted', e.target.checked)}
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]"
/>
<span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
</label>
{/* Hamarosan elérhető felület */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
<span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
🚧 Hamarosan elérhető
</span>
</div>
</div>
</div>
{/* Tipp */}
@@ -423,76 +462,177 @@ export default function TaskCardEditor({ card, onChange }) {
</div>
)}
{/* Közös beállítások */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
{/* Közös beállítások - Később elérhető */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6 relative">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
⚙️ Beállítások
</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Pontszám */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
💰 Pontszám
</label>
<input
type="number"
value={card.points || 10}
onChange={(e) => updateField('points', parseInt(e.target.value) || 0)}
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-success)] focus:border-transparent outline-none transition-all duration-200"
min="0"
max="1000"
/>
</div>
<div className="relative">
<div className="opacity-50 pointer-events-none blur-[1px]">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Pontszám */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
💰 Pontszám
</label>
<input
type="number"
value={10}
disabled
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-success)] focus:border-transparent outline-none transition-all duration-200"
min="0"
max="1000"
/>
</div>
{/* Időlimit */}
{/* Időlimit */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
⏱️ Időlimit
</label>
<select
disabled
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-success)] focus:border-transparent outline-none transition-all duration-200"
>
<option>30 másodperc</option>
</select>
</div>
{/* Karakterlimit (csak szöveges válasznál) */}
{card.subType === 'text' && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Karakterlimit
</label>
<input
type="number"
value={100}
disabled
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-success)] focus:border-transparent outline-none transition-all duration-200"
min="10"
max="500"
/>
</div>
)}
</div>
{/* Magyarázat */}
<div className="mt-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
💡 Magyarázat (opcionális)
</label>
<textarea
disabled
className="w-full px-4 py-3 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-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
rows="3"
placeholder="Magyarázat a helyes válaszhoz..."
/>
</div>
</div>
{/* Hamarosan elérhető felület */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
<span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
🚧 Hamarosan elérhető
</span>
</div>
</div>
</div>
</div>
{/* Következmények (helyes válasz esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények (helyes válasz esetén)
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
⏱️ Időlimit
Hatás típusa
</label>
<select
value={card.timeLimit || 30}
onChange={(e) => updateField('timeLimit', parseInt(e.target.value))}
value={card.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
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-success)] focus:border-transparent outline-none transition-all duration-200"
>
{timeLimits.map(time => (
<option key={time.value} value={time.value}>
{time.label}
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Karakterlimit (csak szöveges válasznál) */}
{card.subType === 'text' && (
{/* Consequence Value - csak ha előre/hátra lépés */}
{(card.consequence?.type === 0 || card.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Karakterlimit
Mezők száma
</label>
<input
type="number"
value={card.characterLimit || 100}
onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)}
value={card.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-success)] focus:border-transparent outline-none transition-all duration-200"
min="10"
max="500"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
{/* Magyarázat */}
<div className="mt-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
💡 Magyarázat (opcionális)
</label>
<textarea
value={card.explanation || ''}
onChange={(e) => updateField('explanation', e.target.value)}
className="w-full px-4 py-3 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-success)] focus:border-transparent outline-none transition-all duration-200 resize-none"
rows="3"
placeholder="Magyarázat a helyes válaszhoz..."
/>
{/* Következmények (rossz válasz esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
❌ Következmények (rossz válasz esetén)
</h3>
<div className="space-y-4">
{/* Wrong Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={card.wrongConsequence?.type ?? 1}
onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
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-danger)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.wrongConsequence?.type ?? 1))?.description}
</div>
</div>
{/* Wrong Consequence Value - csak ha előre/hátra lépés */}
{(card.wrongConsequence?.type === 0 || card.wrongConsequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={card.wrongConsequence?.value ?? 1}
onChange={(e) => updateWrongConsequence('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-danger)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
</div>
SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx
+1 -1
View File
@@ -32,7 +32,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
const deckTypes = {
"Luck": { label: "Szerencse", color: "var(--color-luck)" },
"Question": { label: "Kérdés", color: "var(--color-question)" },
"Fun": { label: "Szórakozás", color: "var(--color-fun)" }
"Fun": { label: "Joker", color: "var(--color-fun)" }
}
const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
SerpentRace_Frontend/src/index.css
+1 -1
View File
@@ -31,7 +31,7 @@
/* Deck típus színek */
--color-luck: #5fa985; /* zöld, mint a success */
--color-question: #4f7be6; /* új kék, illik az oldalhoz */
--color-fun: #e15b64; /* piros, mint az error */
--color-fun: #FFD700; /* citromsárga a joker kártyákhoz */
/* Háttérszínek */
--color-background: #181d23;
SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+72 -65
View File
@@ -8,7 +8,7 @@ import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
import CardsList from "../../components/DeckCreator/CardsList.jsx"
import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
import { createDeck } from '../../api/deckApi'
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
export default function DeckCreator() {
const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -17,8 +17,8 @@ export default function DeckCreator() {
// Deck alapadatok
const [deck, setDeck] = useState({
id: null,
name: "Új Deck",
type: "Question", // Question, Luck, Fun
name: "Új Pakli",
type: "QUESTION", // QUESTION, LUCK, JOKER - backend formátum
privacy: "private", // private, public
description: "",
cards: []
@@ -27,17 +27,17 @@ export default function DeckCreator() {
// UI állapotok
const [selectedCard, setSelectedCard] = useState(null)
const [isCreatingCard, setIsCreatingCard] = useState(false)
const [newCardType, setNewCardType] = useState(null) // task, joker, luck
const [newCardType, setNewCardType] = useState(null)
// Betöltés (később API-ból)
// Betöltés API-ból
useEffect(() => {
if (deckId) {
loadDeck(deckId)
} else {
setDeck({
id: null,
name: "Új Deck",
type: "Question",
name: "Új Pakli",
type: "QUESTION",
privacy: "private",
description: "",
cards: []
@@ -45,55 +45,25 @@ export default function DeckCreator() {
}
}, [deckId])
const loadDeck = async (id) => {
// Mock deck betöltés
const mockDeck = {
id: id,
name: "Quiz Night",
type: "Question",
privacy: "public",
description: "Szórakoztató kvíz este",
cards: [
{
id: 1,
type: "task",
subType: "quiz",
question: "Mi Magyarország fővárosa?",
options: ["Budapest", "Debrecen", "Szeged", "Pécs"],
correctAnswer: 0,
points: 10,
timeLimit: 30,
explanation: "Budapest 1873 óta Magyarország fővárosa."
},
{
id: 2,
type: "task",
subType: "truefalse",
statement: "A Duna Magyarország leghosszabb folyója.",
isTrue: false,
points: 5,
timeLimit: 15,
explanation: "A Tisza a leghosszabb folyó Magyarországon."
}
]
}
setDeck(mockDeck)
}
const handleDeckUpdate = (updates) => {
setDeck(prev => ({ ...prev, ...updates }))
}
const handleSaveDeck = async () => {
try {
console.log("Deck mentése:", deck)
// Konvertálás: Frontend string -> Backend enum number
const typeMapping = {
'LUCK': 0,
'JOKER': 1,
'QUESTION': 2
}
const payload = {
name: deck.name,
type: (deck.type || 'Question').toString().toUpperCase(),
type: typeMapping[deck.type] ?? 2, // Alapértelmezett: QUESTION
ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
description: deck.description || '',
cards: deck.cards.map(c => ({ ...c, text: c.question || c.statement || c.text || '' }))
cards: deck.cards
}
const saved = await createDeck(payload)
@@ -131,28 +101,64 @@ export default function DeckCreator() {
}
const handleSaveCard = (cardData) => {
if (isCreatingCard) {
// Új kártya hozzáadása
const newCard = {
try {
// Biztosítjuk az alapértelmezett consequence értékeket
const defaultConsequence = { type: 0, value: 1 }
const defaultWrongConsequence = { type: 1, value: 1 }
const updatedCard = {
...cardData,
id: Date.now(), // Temporary ID
id: isCreatingCard ? Date.now() : cardData.id,
consequence: cardData.consequence || defaultConsequence,
// wrongConsequence csak QUESTION és JOKER típusoknál
...(cardData.type === 'QUESTION' || cardData.type === 'JOKER'
? { wrongConsequence: cardData.wrongConsequence || defaultWrongConsequence }
: {}
)
}
setDeck(prev => ({
...prev,
cards: [...prev.cards, newCard]
}))
let wasInvalidCardDeleted = false
setDeck(prev => {
// Ellenőrizzük, vannak-e nem megfelelő típusú kártyák
const invalidCards = prev.cards.filter(card => card.type !== prev.type)
// Ha új kártyát mentünk megfelelő típussal és vannak nem megfelelők
if (isCreatingCard && cardData.type === prev.type && invalidCards.length > 0) {
wasInvalidCardDeleted = true
return {
...prev,
cards: [
...prev.cards.filter(card => card.type === prev.type),
updatedCard
]
}
}
// Alap mentési logika
return {
...prev,
cards: isCreatingCard
? [...prev.cards, updatedCard]
: prev.cards.map(card => card.id === updatedCard.id ? updatedCard : card)
}
})
setSelectedCard(updatedCard)
setIsCreatingCard(false)
setNewCardType(null)
setSelectedCard(newCard)
} else {
// Meglévő kártya frissítése
setDeck(prev => ({
...prev,
cards: prev.cards.map(card =>
card.id === cardData.id ? cardData : card
)
}))
setSelectedCard(cardData)
// Csak egy értesítés
if (wasInvalidCardDeleted) {
const invalidCount = deck.cards.filter(card => card.type !== deck.type).length
notifyWarning(`Kártya mentve! ${invalidCount} db nem megfelelő típusú kártya törlésre került.`)
} else {
notifySuccess('Kártya sikeresen mentve!')
}
} catch (error) {
console.error('Kártya mentési hiba:', error)
notifyError('Hiba történt a kártya mentése során')
}
}
@@ -188,6 +194,7 @@ export default function DeckCreator() {
<CardsList
cards={deck.cards}
selectedCard={selectedCard}
deckType={deck.type}
onSelectCard={handleSelectCard}
onCreateCard={handleCreateCard}
onDeleteCard={handleDeleteCard}
@@ -201,7 +208,7 @@ export default function DeckCreator() {
<CardEditor
card={selectedCard}
isCreating={isCreatingCard}
cardType={newCardType}
cardType={isCreatingCard ? newCardType : deck.type}
onSave={handleSaveCard}
onCancel={() => {
setIsCreatingCard(false)