GitG0r0
105 lines
3.9 KiB
React
105 lines
3.9 KiB
React
// src/components/DeckCreator/LuckCardEditor.jsx
|
|
// Szerencse kártya szerkesztő
|
|
|
|
import React, { useState, useEffect } from 'react'
|
|
import { FaDice, FaInfoCircle } from 'react-icons/fa'
|
|
|
|
export default function LuckCardEditor({ card, onChange }) {
|
|
const [cardData, setCardData] = useState({
|
|
type: 'luck',
|
|
text: ''
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (card) {
|
|
setCardData({
|
|
type: 'luck',
|
|
text: card.text || ''
|
|
})
|
|
}
|
|
}, [card])
|
|
|
|
const handleTextChange = (e) => {
|
|
const newCardData = {
|
|
...cardData,
|
|
text: e.target.value
|
|
}
|
|
setCardData(newCardData)
|
|
|
|
if (onChange) {
|
|
onChange(newCardData)
|
|
}
|
|
}
|
|
|
|
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>
|
|
|
|
{/* Info box */}
|
|
<div className="bg-[color:var(--color-luck)]/10 border border-[color:var(--color-luck)]/30 rounded-lg p-4 mb-6">
|
|
<div className="flex items-start gap-3">
|
|
<FaInfoCircle className="text-[color:var(--color-luck)] mt-1 flex-shrink-0" />
|
|
<div>
|
|
<h4 className="font-semibold text-[color:var(--color-text)] mb-2">
|
|
Szerencse kártya működése:
|
|
</h4>
|
|
<p className="text-[color:var(--color-text-muted)] text-sm mb-2">
|
|
Amikor egy játékos szerencse mezőre lép, kap egy kártyát amit felolvas.
|
|
A kártyán lévő utasítás azonnal teljesül.
|
|
</p>
|
|
<p className="text-[color:var(--color-luck)] text-sm font-medium">
|
|
Példa: "Órai projektekkel kiváltottál több vizsgát is! Lépj előre 4 mezőt"
|
|
</p>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Preview */}
|
|
{cardData.text.trim() && (
|
|
<div className="mt-6 p-4 bg-[color:var(--color-luck)]/5 border border-[color:var(--color-luck)]/20 rounded-lg">
|
|
<h4 className="text-sm font-medium text-[color:var(--color-text)] mb-2">
|
|
Kártya előnézet:
|
|
</h4>
|
|
<div className="bg-[color:var(--color-surface)] border-2 border-[color:var(--color-luck)] rounded-lg p-4 text-center">
|
|
<FaDice className="text-2xl text-[color:var(--color-luck)] mx-auto mb-2" />
|
|
<p className="text-[color:var(--color-text)] font-medium">
|
|
{cardData.text}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
} |