diff --git a/App.tsx b/App.tsx index 08a066e..711537a 100644 --- a/App.tsx +++ b/App.tsx @@ -48,7 +48,8 @@ function App() { hasAnswered, lastPointsEarned, nextQuestion, - currentCorrectShape + currentCorrectShape, + selectedOption } = useGame(); const currentQ = quiz?.questions[currentQuestionIndex]; @@ -121,6 +122,7 @@ function App() { newScore={0} streak={0} correctOption={correctOpt} + selectedOption={selectedOption} role={role} /> ) : null} diff --git a/components/RevealScreen.tsx b/components/RevealScreen.tsx index 02f7b2c..99f0f7f 100644 --- a/components/RevealScreen.tsx +++ b/components/RevealScreen.tsx @@ -11,6 +11,7 @@ interface RevealScreenProps { newScore: number; streak: number; correctOption: AnswerOption; + selectedOption?: AnswerOption | null; role: GameRole; } @@ -20,6 +21,7 @@ export const RevealScreen: React.FC = ({ newScore, streak, correctOption, + selectedOption, role }) => { const isHost = role === 'HOST'; @@ -161,6 +163,14 @@ export const RevealScreen: React.FC = ({ transition={{ delay: 0.5, type: 'spring' }} className="bg-black/30 backdrop-blur-md p-6 pb-12" > + {selectedOption && selectedOption.reason && ( +
+

Why your answer was wrong

+

+ {selectedOption.reason} +

+
+ )}

The correct answer was

diff --git a/hooks/useGame.ts b/hooks/useGame.ts index ccafd6e..4a12e3d 100644 --- a/hooks/useGame.ts +++ b/hooks/useGame.ts @@ -16,6 +16,7 @@ export const useGame = () => { const [gamePin, setGamePin] = useState(null); const [currentCorrectShape, setCurrentCorrectShape] = useState(null); const [lastPointsEarned, setLastPointsEarned] = useState(null); + const [selectedOption, setSelectedOption] = useState(null); const timerRef = useRef | null>(null); const peerRef = useRef(null); @@ -173,6 +174,7 @@ export const useGame = () => { setGameState('QUESTION'); setHasAnswered(false); setLastPointsEarned(null); + setSelectedOption(null); setTimeLeft(QUESTION_TIME); setPlayers(prev => prev.map(p => ({ ...p, lastAnswerCorrect: null }))); @@ -275,6 +277,7 @@ export const useGame = () => { setGameState('QUESTION'); setHasAnswered(false); setLastPointsEarned(null); + setSelectedOption(null); setCurrentQuestionIndex(data.payload.currentQuestionIndex); setTimeLeft(data.payload.timeLimit); setCurrentCorrectShape(data.payload.correctShape); @@ -320,8 +323,9 @@ export const useGame = () => { setHasAnswered(true); if (role === 'HOST') { - const isCorrect = arg as boolean; - // Use Ref for time to be consistent with handleHostData logic + const option = arg as AnswerOption; + const isCorrect = option.isCorrect; + setSelectedOption(option); const points = isCorrect ? Math.round(POINTS_PER_QUESTION * (timeLeftRef.current / QUESTION_TIME)) : 0; setLastPointsEarned(points); @@ -331,6 +335,7 @@ export const useGame = () => { })); } else { const option = arg as AnswerOption; + setSelectedOption(option); const isCorrect = option.shape === currentCorrectShape; hostConnectionRef.current?.send({ type: 'ANSWER', payload: { playerId: peerRef.current?.id, isCorrect } }); } @@ -350,7 +355,7 @@ export const useGame = () => { }, []); return { - role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, currentCorrectShape, + role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, currentCorrectShape, selectedOption, startQuizGen, startManualCreation, finalizeManualQuiz, joinGame, startGame: startHostGame, handleAnswer, nextQuestion }; }; \ No newline at end of file