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,250 @@
|
||||
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
|
||||
Reference in New Issue
Block a user