questions

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;
   }

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}
       />
 
+      <QuestionsModal
+        isOpen={isQuestionsModalOpen}
+        onClose={() => setIsQuestionsModalOpen(false)}
+        questions={questions}
+        onUpdateQuestions={handleUpdateQuestions}
+      />
+
       <div className="game-header">
-        <button
+        <div className="game-header-buttons">
-          className="manage-players-button"
+          <button
-          onClick={() => setIsPlayersModalOpen(true)}
+            className="manage-players-button"
-        >
+            onClick={() => setIsPlayersModalOpen(true)}
-          {players.length === 0 ? 'Добавить участников' : 'Управление участниками'}
+          >
-        </button>
+            {players.length === 0 ? 'Добавить участников' : 'Управление участниками'}
+          </button>
+          <button
+            className="manage-questions-button"
+            onClick={() => setIsQuestionsModalOpen(true)}
+          >
+            Управление вопросами
+          </button>
+        </div>
         
         {players.length > 0 && (
           <Players
@@ -192,17 +220,29 @@ const Game = () => {
       
       {players.length > 0 && currentPlayerId ? (
         <>
-          <Score
+          {questions.length === 0 ? (
-            score={playerScores[currentPlayerId] || 0}
+            <div className="no-players-message">
-            questionNumber={currentQuestionIndex + 1}
+              <p>Добавьте вопросы, чтобы начать игру</p>
-            totalQuestions={questions.length}
+            </div>
-          />
+          ) : currentQuestion ? (
-          <Question
+            <>
-            question={currentQuestion}
+              <Score
-            questionNumber={currentQuestionIndex + 1}
+                score={playerScores[currentPlayerId] || 0}
-            onAnswerClick={handleAnswerClick}
+                questionNumber={currentQuestionIndex + 1}
-            revealedAnswers={revealedAnswers}
+                totalQuestions={questions.length}
-          />
+              />
+              <Question
+                question={currentQuestion}
+                questionNumber={currentQuestionIndex + 1}
+                onAnswerClick={handleAnswerClick}
+                revealedAnswers={revealedAnswers}
+              />
+            </>
+          ) : (
+            <div className="no-players-message">
+              <p>Ошибка: вопрос не найден</p>
+            </div>
+          )}
         </>
       ) : (
         <div className="no-players-message">