jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

List incorrect reason as well

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-13 08:04:11 -07:00
commit 2c7ca237a3
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
3 changed files with 21 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
App.tsx
View file

@ -48,7 +48,8 @@ function App() {
hasAnswered, hasAnswered,
lastPointsEarned, lastPointsEarned,
nextQuestion, nextQuestion,
currentCorrectShape currentCorrectShape,
selectedOption
} = useGame(); } = useGame();
const currentQ = quiz?.questions[currentQuestionIndex]; const currentQ = quiz?.questions[currentQuestionIndex];
@ -121,6 +122,7 @@ function App() {
newScore={0} newScore={0}
streak={0} streak={0}
correctOption={correctOpt} correctOption={correctOpt}
selectedOption={selectedOption}
role={role} role={role}
/> />
) : null} ) : null}

10
components/RevealScreen.tsx
View file

@ -11,6 +11,7 @@ interface RevealScreenProps {
newScore: number; newScore: number;
streak: number; streak: number;
correctOption: AnswerOption; correctOption: AnswerOption;
selectedOption?: AnswerOption | null;
role: GameRole; role: GameRole;
} }
@ -20,6 +21,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
newScore, newScore,
streak, streak,
correctOption, correctOption,
selectedOption,
role role
}) => { }) => {
const isHost = role === 'HOST'; const isHost = role === 'HOST';
@ -161,6 +163,14 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
transition={{ delay: 0.5, type: 'spring' }} transition={{ delay: 0.5, type: 'spring' }}
className="bg-black/30 backdrop-blur-md p-6 pb-12" className="bg-black/30 backdrop-blur-md p-6 pb-12"
> >
{selectedOption && selectedOption.reason && (
<div className="mb-4 pb-4 border-b border-white/20">
<p className="text-center text-sm font-bold uppercase tracking-widest mb-2 opacity-70">Why your answer was wrong</p>
<p className="text-center text-sm opacity-90 max-w-md mx-auto">
{selectedOption.reason}
</p>
</div>
)}
<p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p> <p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p>
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">

11
hooks/useGame.ts
View file

@ -16,6 +16,7 @@ export const useGame = () => {
const [gamePin, setGamePin] = useState<string | null>(null); const [gamePin, setGamePin] = useState<string | null>(null);
const [currentCorrectShape, setCurrentCorrectShape] = useState<string | null>(null); const [currentCorrectShape, setCurrentCorrectShape] = useState<string | null>(null);
const [lastPointsEarned, setLastPointsEarned] = useState<number | null>(null); const [lastPointsEarned, setLastPointsEarned] = useState<number | null>(null);
const [selectedOption, setSelectedOption] = useState<AnswerOption | null>(null);
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null); const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
const peerRef = useRef<Peer | null>(null); const peerRef = useRef<Peer | null>(null);
@ -173,6 +174,7 @@ export const useGame = () => {
setGameState('QUESTION'); setGameState('QUESTION');
setHasAnswered(false); setHasAnswered(false);
setLastPointsEarned(null); setLastPointsEarned(null);
setSelectedOption(null);
setTimeLeft(QUESTION_TIME); setTimeLeft(QUESTION_TIME);
setPlayers(prev => prev.map(p => ({ ...p, lastAnswerCorrect: null }))); setPlayers(prev => prev.map(p => ({ ...p, lastAnswerCorrect: null })));
@ -275,6 +277,7 @@ export const useGame = () => {
setGameState('QUESTION'); setGameState('QUESTION');
setHasAnswered(false); setHasAnswered(false);
setLastPointsEarned(null); setLastPointsEarned(null);
setSelectedOption(null);
setCurrentQuestionIndex(data.payload.currentQuestionIndex); setCurrentQuestionIndex(data.payload.currentQuestionIndex);
setTimeLeft(data.payload.timeLimit); setTimeLeft(data.payload.timeLimit);
setCurrentCorrectShape(data.payload.correctShape); setCurrentCorrectShape(data.payload.correctShape);
@ -320,8 +323,9 @@ export const useGame = () => {
setHasAnswered(true); setHasAnswered(true);
if (role === 'HOST') { if (role === 'HOST') {
const isCorrect = arg as boolean; const option = arg as AnswerOption;
// Use Ref for time to be consistent with handleHostData logic const isCorrect = option.isCorrect;
setSelectedOption(option);
const points = isCorrect ? Math.round(POINTS_PER_QUESTION * (timeLeftRef.current / QUESTION_TIME)) : 0; const points = isCorrect ? Math.round(POINTS_PER_QUESTION * (timeLeftRef.current / QUESTION_TIME)) : 0;
setLastPointsEarned(points); setLastPointsEarned(points);
@ -331,6 +335,7 @@ export const useGame = () => {
})); }));
} else { } else {
const option = arg as AnswerOption; const option = arg as AnswerOption;
setSelectedOption(option);
const isCorrect = option.shape === currentCorrectShape; const isCorrect = option.shape === currentCorrectShape;
hostConnectionRef.current?.send({ type: 'ANSWER', payload: { playerId: peerRef.current?.id, isCorrect } }); hostConnectionRef.current?.send({ type: 'ANSWER', payload: { playerId: peerRef.current?.id, isCorrect } });
} }
@ -350,7 +355,7 @@ export const useGame = () => {
}, []); }, []);
return { 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 startQuizGen, startManualCreation, finalizeManualQuiz, joinGame, startGame: startHostGame, handleAnswer, nextQuestion
}; };
}; };