251 lines
8.2 KiB
React
251 lines
8.2 KiB
React
import React, { useState } from "react"
|
||
import CardDisplayModal from "./CardDisplayModal"
|
||
import ConsequenceModal from "./ConsequenceModal"
|
||
import StepPredictionModal from "./StepPredictionModal"
|
||
|
||
/**
|
||
* Demo oldal a játék modal-ok tesztelésére
|
||
*/
|
||
const GameModalsDemo = () => {
|
||
// Card Display Modal
|
||
const [isCardModalOpen, setIsCardModalOpen] = useState(false)
|
||
const [cardType, setCardType] = useState("QUESTION")
|
||
|
||
// Consequence Modal
|
||
const [isConsequenceModalOpen, setIsConsequenceModalOpen] = useState(false)
|
||
const [isCorrect, setIsCorrect] = useState(true)
|
||
|
||
// Step Prediction Modal
|
||
const [isStepModalOpen, setIsStepModalOpen] = useState(false)
|
||
|
||
// Example cards
|
||
const quizCard = {
|
||
type: 0,
|
||
question: "Mi Magyarország fővárosa?",
|
||
answerOptions: [
|
||
{ answer: "A", text: "Debrecen", correct: false },
|
||
{ answer: "B", text: "Budapest", correct: true },
|
||
{ answer: "C", text: "Szeged", correct: false },
|
||
{ answer: "D", text: "Pécs", correct: false }
|
||
],
|
||
hint: "A Duna partján fekszik"
|
||
}
|
||
|
||
const textCard = {
|
||
type: 2,
|
||
question: "Hány éves vagy?",
|
||
hint: "Számmal válaszolj"
|
||
}
|
||
|
||
const luckCard = {
|
||
text: "Szerencsés vagy! +2 lépés előre! 🍀",
|
||
consequence: { type: 3, value: 2 }
|
||
}
|
||
|
||
const handleCardAnswer = (answer) => {
|
||
console.log("Válasz:", answer)
|
||
setIsCardModalOpen(false)
|
||
// Következmény megjelenítése
|
||
setTimeout(() => {
|
||
setIsCorrect(answer === "B")
|
||
setIsConsequenceModalOpen(true)
|
||
}, 500)
|
||
}
|
||
|
||
const handleStepPrediction = (prediction) => {
|
||
console.log("Tipp:", prediction)
|
||
setIsStepModalOpen(false)
|
||
|
||
// Példa: Számított pozíció = 20 + 4 + 2 + 2 = 28
|
||
const actualPosition = 28
|
||
const isCorrect = prediction === actualPosition
|
||
|
||
// Következmény megjelenítése
|
||
setTimeout(() => {
|
||
setIsCorrect(isCorrect)
|
||
setIsConsequenceModalOpen(true)
|
||
}, 500)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 p-8">
|
||
<div className="max-w-6xl mx-auto">
|
||
<h1 className="text-4xl font-bold text-white mb-8 text-center">
|
||
🎮 Játék Modal-ok Demo
|
||
</h1>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
{/* Card Display Modal Demos */}
|
||
<div className="bg-gray-800 rounded-xl p-6 border border-purple-500">
|
||
<h2 className="text-2xl font-bold text-purple-300 mb-4">
|
||
📝 Kártya Megjelenítés
|
||
</h2>
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={() => {
|
||
setCardType("QUESTION")
|
||
setIsCardModalOpen(true)
|
||
}}
|
||
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
❓ Quiz Kártya
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setCardType("QUESTION")
|
||
setIsCardModalOpen(true)
|
||
}}
|
||
className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
📝 Szöveges Kártya
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setCardType("LUCK")
|
||
setIsCardModalOpen(true)
|
||
}}
|
||
className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
🍀 Szerencse Kártya
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Consequence Modal Demos */}
|
||
<div className="bg-gray-800 rounded-xl p-6 border border-green-500">
|
||
<h2 className="text-2xl font-bold text-green-300 mb-4">
|
||
🎯 Következmények
|
||
</h2>
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={() => {
|
||
setIsCorrect(true)
|
||
setIsConsequenceModalOpen(true)
|
||
}}
|
||
className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
✅ Helyes Válasz
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setIsCorrect(false)
|
||
setIsConsequenceModalOpen(true)
|
||
}}
|
||
className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
❌ Helytelen Válasz
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step Prediction Modal Demo */}
|
||
<div className="bg-gray-800 rounded-xl p-6 border border-yellow-500">
|
||
<h2 className="text-2xl font-bold text-yellow-300 mb-4">
|
||
🎲 Pozíció Tippelés
|
||
</h2>
|
||
<button
|
||
onClick={() => setIsStepModalOpen(true)}
|
||
className="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 rounded-lg transition-all hover:scale-105"
|
||
>
|
||
🎯 Pozíció Tippelés
|
||
</button>
|
||
<p className="text-gray-400 text-sm mt-3">
|
||
Tipppeld meg a végleges pozíciót a számítás alapján!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Info Panel */}
|
||
<div className="mt-8 bg-gray-800 rounded-xl p-6 border border-gray-700">
|
||
<h3 className="text-xl font-bold text-white mb-4">ℹ️ Használat a GameScreen-ben</h3>
|
||
<div className="bg-gray-900 rounded-lg p-4 text-sm">
|
||
<pre className="text-green-400 overflow-x-auto">
|
||
{`// Import-ok
|
||
import CardDisplayModal from "./CardDisplayModal"
|
||
import ConsequenceModal from "./ConsequenceModal"
|
||
import StepPredictionModal from "./StepPredictionModal"
|
||
|
||
// State-ek
|
||
const [isCardModalOpen, setIsCardModalOpen] = useState(false)
|
||
const [currentCard, setCurrentCard] = useState(null)
|
||
const [isConsequenceModalOpen, setIsConsequenceModalOpen] = useState(false)
|
||
const [consequenceData, setConsequenceData] = useState(null)
|
||
|
||
// WebSocket event
|
||
useEffect(() => {
|
||
if (socket) {
|
||
socket.on('game:card-drawn', (data) => {
|
||
setCurrentCard(data.card)
|
||
setIsCardModalOpen(true)
|
||
})
|
||
|
||
socket.on('game:answer-result', (data) => {
|
||
setConsequenceData(data)
|
||
setIsConsequenceModalOpen(true)
|
||
})
|
||
}
|
||
}, [socket])
|
||
|
||
// Render
|
||
<CardDisplayModal
|
||
isOpen={isCardModalOpen}
|
||
onClose={() => setIsCardModalOpen(false)}
|
||
card={currentCard}
|
||
cardType="QUESTION"
|
||
onSubmitAnswer={handleSubmitAnswer}
|
||
/>
|
||
|
||
<ConsequenceModal
|
||
isOpen={isConsequenceModalOpen}
|
||
onClose={() => setIsConsequenceModalOpen(false)}
|
||
{...consequenceData}
|
||
/>`}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modals */}
|
||
<CardDisplayModal
|
||
isOpen={isCardModalOpen}
|
||
onClose={() => setIsCardModalOpen(false)}
|
||
card={cardType === "LUCK" ? luckCard : quizCard}
|
||
cardType={cardType}
|
||
onSubmitAnswer={handleCardAnswer}
|
||
/>
|
||
|
||
<ConsequenceModal
|
||
isOpen={isConsequenceModalOpen}
|
||
onClose={() => setIsConsequenceModalOpen(false)}
|
||
isCorrect={isCorrect}
|
||
consequenceType={isCorrect ? 3 : 4}
|
||
consequenceValue={isCorrect ? 2 : 1}
|
||
playerAnswer={isCorrect ? "Budapest" : "Debrecen"}
|
||
correctAnswer="Budapest"
|
||
explanation={isCorrect
|
||
? "Budapest a magyar főváros, 1873-ban egyesült Buda, Pest és Óbuda városa."
|
||
: "A helyes válasz Budapest. Debrecen Magyarország második legnagyobb városa."
|
||
}
|
||
/>
|
||
|
||
<StepPredictionModal
|
||
isOpen={isStepModalOpen}
|
||
onClose={() => setIsStepModalOpen(false)}
|
||
onSubmitPrediction={handleStepPrediction}
|
||
currentPosition={20}
|
||
diceRoll={4}
|
||
fieldStepValue={2}
|
||
patternModifier={2}
|
||
cardText="Tippeld meg, melyik pozícióra fogsz lépni a számítás alapján!"
|
||
hints={[
|
||
"A végső pozíció = jelenlegi pozíció + dobás + mező lépés + zóna módosító",
|
||
"Ebben a példában: 20 + 4 + 2 + 2 = 28",
|
||
"A zóna módosító a pozíció alapján változik!"
|
||
]}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default GameModalsDemo
|