Donat nezd majd át mert a backenden is lett valtozas nem tudom pontosan hogy kell e vagy sem Köszi
This commit is contained in:
@@ -0,0 +1,202 @@
|
||||
import React from "react"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
|
||||
/**
|
||||
* ConsequenceModal - Következmények megjelenítése (jó/rossz válasz után)
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {boolean} props.isOpen - Modal megjelenítése
|
||||
* @param {Function} props.onClose - Modal bezárása
|
||||
* @param {boolean} props.isCorrect - Helyes volt-e a válasz
|
||||
* @param {string} props.consequence - Következmény szövege
|
||||
* @param {number} props.consequenceType - Következmény típusa:
|
||||
* 0 = MOVE_FORWARD (előre lépés)
|
||||
* 1 = MOVE_BACKWARD (hátra lépés)
|
||||
* 2 = LOSE_TURN (körkihagyás)
|
||||
* 3 = EXTRA_TURN (extra kör)
|
||||
* 5 = GO_TO_START (vissza a starthoz)
|
||||
* @param {number} props.consequenceValue - Következmény értéke (hány mező/kör)
|
||||
* @param {string} props.playerAnswer - Játékos válasza
|
||||
* @param {string} props.correctAnswer - Helyes válasz
|
||||
* @param {string} props.explanation - Magyarázat
|
||||
*/
|
||||
const ConsequenceModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
isCorrect,
|
||||
consequence,
|
||||
consequenceType,
|
||||
consequenceValue,
|
||||
playerAnswer,
|
||||
correctAnswer,
|
||||
explanation
|
||||
}) => {
|
||||
|
||||
const getConsequenceIcon = (type) => {
|
||||
switch(type) {
|
||||
case 0: return "🚀" // MOVE_FORWARD
|
||||
case 1: return "⬅️" // MOVE_BACKWARD
|
||||
case 2: return "😴" // LOSE_TURN
|
||||
case 3: return "🎉" // EXTRA_TURN
|
||||
case 5: return "🏁" // GO_TO_START
|
||||
default: return "📢"
|
||||
}
|
||||
}
|
||||
|
||||
const getConsequenceText = (type, value) => {
|
||||
switch(type) {
|
||||
case 0: return `${value} mezőt léphetsz előre! 🚀`
|
||||
case 1: return `${value} mezőt lépsz vissza! �`
|
||||
case 2: return `${value} kört ki kell hagyni! �`
|
||||
case 3: return `${value} extra kör jár neked! 🎉`
|
||||
case 5: return "Vissza a starthoz! 🏁"
|
||||
default: return consequence || "Következmény"
|
||||
}
|
||||
}
|
||||
|
||||
const getBgGradient = () => {
|
||||
if (isCorrect) {
|
||||
return "from-green-600 via-teal-600 to-green-600"
|
||||
}
|
||||
return "from-red-600 via-orange-600 to-red-600"
|
||||
}
|
||||
|
||||
const getBorderColor = () => {
|
||||
if (isCorrect) return "border-green-500/50"
|
||||
return "border-red-500/50"
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal Content */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.5, opacity: 0, rotate: -10 }}
|
||||
animate={{ scale: 1, opacity: 1, rotate: 0 }}
|
||||
exit={{ scale: 0.5, opacity: 0, rotate: 10 }}
|
||||
transition={{ type: "spring", duration: 0.6 }}
|
||||
className={`relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 ${getBorderColor()} max-w-2xl w-full overflow-hidden`}
|
||||
>
|
||||
{/* Header with result */}
|
||||
<div className={`bg-gradient-to-r ${getBgGradient()} p-6 relative overflow-hidden`}>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse" />
|
||||
|
||||
<div className="relative text-center">
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.2, type: "spring" }}
|
||||
className="text-8xl mb-2"
|
||||
>
|
||||
{isCorrect ? "✅" : "❌"}
|
||||
</motion.div>
|
||||
<h2 className="text-3xl font-bold text-white mb-2">
|
||||
{isCorrect ? "Helyes válasz!" : "Helytelen válasz!"}
|
||||
</h2>
|
||||
<p className="text-white/90 text-lg">
|
||||
{isCorrect ? "Gratulálunk! 🎉" : "Ne add fel! 💪"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Player Answer */}
|
||||
{playerAnswer && (
|
||||
<div className="bg-gray-800/50 rounded-xl p-4 border border-gray-700">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl">💭</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-gray-400 text-sm mb-1">A te válaszod:</p>
|
||||
<p className="text-white font-semibold">{playerAnswer}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Correct Answer - ha helytelen volt */}
|
||||
{!isCorrect && correctAnswer && (
|
||||
<div className="bg-green-900/20 rounded-xl p-4 border border-green-500/30">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl">✔️</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-green-300 text-sm mb-1">A helyes válasz:</p>
|
||||
<p className="text-white font-semibold">{correctAnswer}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Explanation */}
|
||||
{explanation && (
|
||||
<div className="bg-blue-900/20 rounded-xl p-4 border border-blue-500/30">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="text-2xl">💡</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-blue-300 text-sm mb-1">Magyarázat:</p>
|
||||
<p className="text-gray-300">{explanation}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Consequence */}
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className={`${isCorrect ? 'bg-gradient-to-br from-green-900/30 to-teal-900/30 border-green-500/40' : 'bg-gradient-to-br from-red-900/30 to-orange-900/30 border-red-500/40'} rounded-xl p-6 border-2`}
|
||||
>
|
||||
<div className="text-center">
|
||||
<motion.div
|
||||
animate={{ rotate: [0, 10, -10, 10, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 2 }}
|
||||
className="text-6xl mb-3"
|
||||
>
|
||||
{getConsequenceIcon(consequenceType)}
|
||||
</motion.div>
|
||||
<h3 className={`text-xl font-bold mb-2 ${isCorrect ? 'text-green-300' : 'text-red-300'}`}>
|
||||
Következmény:
|
||||
</h3>
|
||||
<p className="text-white text-2xl font-bold">
|
||||
{getConsequenceText(consequenceType, consequenceValue)}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className={`w-full bg-gradient-to-r ${
|
||||
isCorrect
|
||||
? 'from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500 border-green-500/50'
|
||||
: 'from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 border-red-500/50'
|
||||
} text-white font-bold py-4 px-6 rounded-xl shadow-lg
|
||||
transform transition-all duration-200 hover:scale-105 active:scale-95 border`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span className="text-2xl">👍</span>
|
||||
<span className="text-lg">Rendben, folytatom!</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConsequenceModal
|
||||
Reference in New Issue
Block a user