diff --git a/src/components/Game.css b/src/components/Game.css index 421804e..2f9eaf4 100644 --- a/src/components/Game.css +++ b/src/components/Game.css @@ -35,6 +35,36 @@ transform: translateY(0); } +.game-header-buttons { + display: flex; + gap: 15px; + flex-wrap: wrap; + justify-content: center; +} + +.manage-questions-button { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + padding: 12px 30px; + font-size: 1rem; + font-weight: bold; + border-radius: 25px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); + white-space: nowrap; +} + +.manage-questions-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5); +} + +.manage-questions-button:active { + transform: translateY(0); +} + .game-over { display: flex; justify-content: center; @@ -185,11 +215,17 @@ font-size: 1.2rem; } - .manage-players-button { + .manage-players-button, + .manage-questions-button { font-size: 0.9rem; padding: 10px 20px; } + .game-header-buttons { + flex-direction: column; + width: 100%; + } + .game-header { margin-bottom: 20px; } diff --git a/src/components/Game.jsx b/src/components/Game.jsx index 4de5bba..0c11a72 100644 --- a/src/components/Game.jsx +++ b/src/components/Game.jsx @@ -2,18 +2,21 @@ import { useState } from 'react' import Question from './Question' import Players from './Players' import PlayersModal from './PlayersModal' +import QuestionsModal from './QuestionsModal' import Score from './Score' -import { questions } from '../data/questions' +import { questions as initialQuestions } from '../data/questions' import './Game.css' const Game = () => { const [players, setPlayers] = useState([]) const [currentPlayerId, setCurrentPlayerId] = useState(null) const [playerScores, setPlayerScores] = useState({}) + const [questions, setQuestions] = useState(initialQuestions) const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0) const [gameOver, setGameOver] = useState(false) const [revealedAnswers, setRevealedAnswers] = useState([]) const [isPlayersModalOpen, setIsPlayersModalOpen] = useState(false) + const [isQuestionsModalOpen, setIsQuestionsModalOpen] = useState(false) const currentQuestion = questions[currentQuestionIndex] const isLastQuestion = currentQuestionIndex === questions.length - 1 @@ -69,6 +72,7 @@ const Game = () => { const handleAnswerClick = (answerIndex, points) => { if (revealedAnswers.includes(answerIndex)) return if (!currentPlayerId) return + if (!currentQuestion) return const isLastAnswer = revealedAnswers.length === currentQuestion.answers.length - 1 @@ -126,6 +130,15 @@ const Game = () => { } } + const handleUpdateQuestions = (updatedQuestions) => { + setQuestions(updatedQuestions) + // Если текущий вопрос был удален, сбрасываем индекс + if (currentQuestionIndex >= updatedQuestions.length) { + setCurrentQuestionIndex(0) + setRevealedAnswers([]) + } + } + if (gameOver) { // Находим победителя(ей) const scores = Object.values(playerScores) @@ -172,13 +185,28 @@ const Game = () => { onRemovePlayer={handleRemovePlayer} /> + setIsQuestionsModalOpen(false)} + questions={questions} + onUpdateQuestions={handleUpdateQuestions} + /> +
- +
+ + +
{players.length > 0 && ( { {players.length > 0 && currentPlayerId ? ( <> - - + {questions.length === 0 ? ( +
+

Добавьте вопросы, чтобы начать игру

+
+ ) : currentQuestion ? ( + <> + + + + ) : ( +
+

Ошибка: вопрос не найден

+
+ )} ) : (