ui fixes
This commit is contained in:
parent
be00cc009d
commit
876010ef8f
2 changed files with 53 additions and 5 deletions
27
src/App.jsx
27
src/App.jsx
|
|
@ -16,6 +16,7 @@ function App() {
|
||||||
const savedIndex = getCookie('gameQuestionIndex')
|
const savedIndex = getCookie('gameQuestionIndex')
|
||||||
return savedIndex !== null ? savedIndex : 0
|
return savedIndex !== null ? savedIndex : 0
|
||||||
})
|
})
|
||||||
|
const [areAllRevealed, setAreAllRevealed] = useState(false)
|
||||||
const gameRef = useRef(null)
|
const gameRef = useRef(null)
|
||||||
|
|
||||||
const currentQuestion = questions[currentQuestionIndex]
|
const currentQuestion = questions[currentQuestionIndex]
|
||||||
|
|
@ -32,6 +33,22 @@ function App() {
|
||||||
setCookie('gameQuestionIndex', currentQuestionIndex)
|
setCookie('gameQuestionIndex', currentQuestionIndex)
|
||||||
}, [currentQuestionIndex])
|
}, [currentQuestionIndex])
|
||||||
|
|
||||||
|
// Обновляем состояние открытых ответов при смене вопроса или изменении состояния
|
||||||
|
useEffect(() => {
|
||||||
|
const checkRevealedState = () => {
|
||||||
|
if (gameRef.current && gameRef.current.areAllAnswersRevealed) {
|
||||||
|
setAreAllRevealed(gameRef.current.areAllAnswersRevealed())
|
||||||
|
} else {
|
||||||
|
setAreAllRevealed(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkRevealedState()
|
||||||
|
// Проверяем состояние периодически для обновления кнопки
|
||||||
|
const interval = setInterval(checkRevealedState, 200)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [currentQuestionIndex, questions])
|
||||||
|
|
||||||
const handleUpdateQuestions = (updatedQuestions) => {
|
const handleUpdateQuestions = (updatedQuestions) => {
|
||||||
setQuestions(updatedQuestions)
|
setQuestions(updatedQuestions)
|
||||||
// Если текущий вопрос был удален, сбрасываем индекс
|
// Если текущий вопрос был удален, сбрасываем индекс
|
||||||
|
|
@ -68,6 +85,12 @@ function App() {
|
||||||
const handleShowAll = () => {
|
const handleShowAll = () => {
|
||||||
if (gameRef.current && gameRef.current.showAllAnswers) {
|
if (gameRef.current && gameRef.current.showAllAnswers) {
|
||||||
gameRef.current.showAllAnswers()
|
gameRef.current.showAllAnswers()
|
||||||
|
// Обновляем состояние после изменения
|
||||||
|
setTimeout(() => {
|
||||||
|
if (gameRef.current && gameRef.current.areAllAnswersRevealed) {
|
||||||
|
setAreAllRevealed(gameRef.current.areAllAnswersRevealed())
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -114,9 +137,9 @@ function App() {
|
||||||
<button
|
<button
|
||||||
className="show-all-button-top"
|
className="show-all-button-top"
|
||||||
onClick={handleShowAll}
|
onClick={handleShowAll}
|
||||||
title="Показать все ответы"
|
title={areAllRevealed ? "Скрыть все ответы" : "Показать все ответы"}
|
||||||
>
|
>
|
||||||
Показать все
|
{areAllRevealed ? "Скрыть все" : "Показать все"}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -75,7 +75,11 @@ const Game = forwardRef(({
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCookie('gameRevealedAnswers', revealedAnswers)
|
setCookie('gameRevealedAnswers', revealedAnswers)
|
||||||
}, [revealedAnswers])
|
// Уведомляем родительский компонент об изменении состояния открытых ответов
|
||||||
|
if (onQuestionIndexChange) {
|
||||||
|
// Это вызовет перерендер в App, который обновит состояние кнопки
|
||||||
|
}
|
||||||
|
}, [revealedAnswers, currentQuestionIndex])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCookie('gameOver', gameOver)
|
setCookie('gameOver', gameOver)
|
||||||
|
|
@ -86,8 +90,28 @@ const Game = forwardRef(({
|
||||||
|
|
||||||
const handleShowAllAnswers = () => {
|
const handleShowAllAnswers = () => {
|
||||||
if (!currentQuestion) return
|
if (!currentQuestion) return
|
||||||
const allAnswerIndices = currentQuestion.answers.map((_, index) => index)
|
const currentRevealed = getCurrentRevealedAnswers()
|
||||||
updateRevealedAnswers(allAnswerIndices)
|
const allAnswersRevealed = currentRevealed.length === currentQuestion.answers.length
|
||||||
|
|
||||||
|
if (allAnswersRevealed) {
|
||||||
|
// Если все открыты - скрываем все
|
||||||
|
updateRevealedAnswers([])
|
||||||
|
} else {
|
||||||
|
// Если не все открыты - открываем все
|
||||||
|
const allAnswerIndices = currentQuestion.answers.map((_, index) => index)
|
||||||
|
updateRevealedAnswers(allAnswerIndices)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasRevealedAnswers = () => {
|
||||||
|
const currentRevealed = getCurrentRevealedAnswers()
|
||||||
|
return currentRevealed.length > 0
|
||||||
|
}
|
||||||
|
|
||||||
|
const areAllAnswersRevealed = () => {
|
||||||
|
if (!currentQuestion) return false
|
||||||
|
const currentRevealed = getCurrentRevealedAnswers()
|
||||||
|
return currentRevealed.length === currentQuestion.answers.length
|
||||||
}
|
}
|
||||||
|
|
||||||
useImperativeHandle(ref, () => ({
|
useImperativeHandle(ref, () => ({
|
||||||
|
|
@ -101,6 +125,7 @@ const Game = forwardRef(({
|
||||||
setRevealedAnswers({})
|
setRevealedAnswers({})
|
||||||
},
|
},
|
||||||
showAllAnswers: handleShowAllAnswers,
|
showAllAnswers: handleShowAllAnswers,
|
||||||
|
areAllAnswersRevealed: areAllAnswersRevealed,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
const handleAddPlayer = (name) => {
|
const handleAddPlayer = (name) => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue