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

UI: Beállítások szekció letiltása a feladat kártyáknál

Browse Source 
- Pontszám, Időlimit és Karakterlimit mezők letiltva
- Magyarázat mező is letiltva
- Szöveges válasz típusnál a beállítások (kis/nagy betű, pontos egyezés, stb.) letiltva
- Egységes 'Hamarosan elérhető' effekt az összes letiltott szekción
- Tipp mező továbbra is opcionális és használható
- Ezek a beállítások nem kötelezőek a kártya mentéséhez
This commit is contained in:
GitG0r0
2025-10-22 23:34:34 +02:00
parent edca8f84cd
commit f2a54154f5
1 changed files with 108 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
+106 -88
View File
@@ -374,37 +374,48 @@ export default function TaskCardEditor({ card, onChange }) {
</div> </div>
</div> </div>
{/* Beállítások */} {/* Beállítások - Később elérhető */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="relative">
<label className="flex items-center gap-2 text-sm"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 opacity-50 pointer-events-none blur-[1px]">
<input <label className="flex items-center gap-2 text-sm">
type="checkbox" <input
checked={card.caseSensitive || false} type="checkbox"
onChange={(e) => updateField('caseSensitive', e.target.checked)} checked={false}
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" 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> <span className="text-[color:var(--color-text)]">Kis/nagy betű érzékeny</span>
</label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<input <input
type="checkbox" type="checkbox"
checked={card.exactMatch || false} checked={false}
onChange={(e) => updateField('exactMatch', e.target.checked)} disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" 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> <span className="text-[color:var(--color-text)]">Pontos egyezés</span>
</label> </label>
<label className="flex items-center gap-2 text-sm"> <label className="flex items-center gap-2 text-sm">
<input <input
type="checkbox" type="checkbox"
checked={card.partialAccepted || true} checked={false}
onChange={(e) => updateField('partialAccepted', e.target.checked)} disabled
className="w-4 h-4 text-[color:var(--color-success)] border-[color:var(--color-surface-selected)] rounded focus:ring-[color:var(--color-success)]" 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> <span className="text-[color:var(--color-text)]">Részleges elfogadás</span>
</label> </label>
</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>
{/* Tipp */} {/* Tipp */}
@@ -423,76 +434,83 @@ export default function TaskCardEditor({ card, onChange }) {
</div> </div>
)} )}
{/* Közös beállítások */} {/* Közös beállítások - Később elérhető */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6"> <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"> <h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
⚙️ Beállítások ⚙️ Beállítások
</h3> </h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="relative">
{/* Pontszám */} <div className="opacity-50 pointer-events-none blur-[1px]">
<div> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> {/* Pontszám */}
💰 Pontszám <div>
</label> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
<input 💰 Pontszám
type="number" </label>
value={card.points || 10} <input
onChange={(e) => updateField('points', parseInt(e.target.value) || 0)} type="number"
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" value={10}
min="0" disabled
max="1000" 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"
</div> max="1000"
/>
</div>
{/* Időlimit */} {/* Időlimit */}
<div> <div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
⏱️ Időlimit ⏱️ Időlimit
</label> </label>
<select <select
value={card.timeLimit || 30} disabled
onChange={(e) => updateField('timeLimit', 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"
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>
{timeLimits.map(time => ( </select>
<option key={time.value} value={time.value}> </div>
{time.label}
</option>
))}
</select>
</div>
{/* Karakterlimit (csak szöveges válasznál) */} {/* Karakterlimit (csak szöveges válasznál) */}
{card.subType === 'text' && ( {card.subType === 'text' && (
<div> <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"> <label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
📝 Karakterlimit 💡 Magyarázat (opcionális)
</label> </label>
<input <textarea
type="number" disabled
value={card.characterLimit || 100} 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"
onChange={(e) => updateField('characterLimit', parseInt(e.target.value) || 0)} rows="3"
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="Magyarázat a helyes válaszhoz..."
min="10"
max="500"
/> />
</div> </div>
)} </div>
</div>
{/* Magyarázat */} {/* Hamarosan elérhető felület */}
<div className="mt-6"> <div className="absolute inset-0 flex items-center justify-center">
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2"> <div className="bg-[color:var(--color-warning)]/20 backdrop-blur-sm border-2 border-[color:var(--color-warning)] rounded-lg px-4 py-2">
💡 Magyarázat (opcionális) <span className="text-[color:var(--color-warning)] font-semibold text-sm flex items-center gap-2">
</label> 🚧 Hamarosan elérhető
<textarea </span>
value={card.explanation || ''} </div>
onChange={(e) => updateField('explanation', e.target.value)} </div>
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>
</div> </div>
</div> </div>