72 lines
1.9 KiB
React
72 lines
1.9 KiB
React
|
import { useState } from 'react'
|
||
|
|
import Question from './Question'
|
||
|
|
import { questions } from '../data/questions'
|
||
|
|
import './Game.css'
|
||
|
|
|
||
|
|
const Game = () => {
|
||
|
|
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
|
||
|
|
const [score, setScore] = useState(0)
|
||
|
|
const [gameOver, setGameOver] = useState(false)
|
||
|
|
const [revealedAnswers, setRevealedAnswers] = useState([])
|
||
|
|
|
||
|
|
const currentQuestion = questions[currentQuestionIndex]
|
||
|
|
const isLastQuestion = currentQuestionIndex === questions.length - 1
|
||
|
|
|
||
|
|
const handleAnswerClick = (answerIndex, points) => {
|
||
|
|
if (revealedAnswers.includes(answerIndex)) return
|
||
|
|
|
||
|
|
setRevealedAnswers([...revealedAnswers, answerIndex])
|
||
|
|
setScore(score + points)
|
||
|
|
|
||
|
|
if (revealedAnswers.length === currentQuestion.answers.length - 1) {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (isLastQuestion) {
|
||
|
|
setGameOver(true)
|
||
|
|
} else {
|
||
|
|
nextQuestion()
|
||
|
|
}
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const nextQuestion = () => {
|
||
|
|
setCurrentQuestionIndex(currentQuestionIndex + 1)
|
||
|
|
setRevealedAnswers([])
|
||
|
|
}
|
||
|
|
|
||
|
|
const restartGame = () => {
|
||
|
|
setCurrentQuestionIndex(0)
|
||
|
|
setScore(0)
|
||
|
|
setGameOver(false)
|
||
|
|
setRevealedAnswers([])
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gameOver) {
|
||
|
|
return (
|
||
|
|
<div className="game-over">
|
||
|
|
<div className="game-over-content">
|
||
|
|
<h2 className="game-over-title">🎉 Игра окончена! 🎉</h2>
|
||
|
|
<p className="game-over-score">Ваш итоговый счёт: {score}</p>
|
||
|
|
<button className="restart-button" onClick={restartGame}>
|
||
|
|
Играть снова
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="game">
|
||
|
|
<Question
|
||
|
|
question={currentQuestion}
|
||
|
|
questionNumber={currentQuestionIndex + 1}
|
||
|
|
onAnswerClick={handleAnswerClick}
|
||
|
|
revealedAnswers={revealedAnswers}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Game
|
||
|
|
|