1115 lines
37 KiB
TypeScript
1115 lines
37 KiB
TypeScript
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { Quiz, Player, GameState, GameRole, NetworkMessage, AnswerOption, Question, GenerateQuizOptions, ProcessedDocument, GameConfig, DEFAULT_GAME_CONFIG, PointsBreakdown } from '../types';
|
|
import { generateQuiz } from '../services/geminiService';
|
|
import { QUESTION_TIME, QUESTION_TIME_MS, PLAYER_COLORS, calculatePointsWithBreakdown, getPlayerRank } from '../constants';
|
|
import { Peer, DataConnection } from 'peerjs';
|
|
|
|
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
|
|
const SESSION_STORAGE_KEY = 'kaboot_session';
|
|
const STATE_SYNC_INTERVAL = 5000;
|
|
|
|
interface StoredSession {
|
|
pin: string;
|
|
role: GameRole;
|
|
hostSecret?: string;
|
|
playerName?: string;
|
|
playerId?: string;
|
|
}
|
|
|
|
const getStoredSession = (): StoredSession | null => {
|
|
try {
|
|
const stored = localStorage.getItem(SESSION_STORAGE_KEY);
|
|
return stored ? JSON.parse(stored) : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const storeSession = (session: StoredSession) => {
|
|
localStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(session));
|
|
};
|
|
|
|
const clearStoredSession = () => {
|
|
localStorage.removeItem(SESSION_STORAGE_KEY);
|
|
};
|
|
|
|
export const useGame = () => {
|
|
const [role, setRole] = useState<GameRole>('HOST');
|
|
const [gameState, setGameState] = useState<GameState>('LANDING');
|
|
const [quiz, setQuiz] = useState<Quiz | null>(null);
|
|
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
|
|
const [players, setPlayers] = useState<Player[]>([]);
|
|
const [timeLeft, setTimeLeft] = useState(0);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [hasAnswered, setHasAnswered] = useState(false);
|
|
const [gamePin, setGamePin] = useState<string | null>(null);
|
|
const [currentCorrectShape, setCurrentCorrectShape] = useState<string | null>(null);
|
|
const [lastPointsEarned, setLastPointsEarned] = useState<number | null>(null);
|
|
const [lastAnswerCorrect, setLastAnswerCorrect] = useState<boolean | null>(null);
|
|
const [selectedOption, setSelectedOption] = useState<AnswerOption | null>(null);
|
|
const [currentPlayerScore, setCurrentPlayerScore] = useState(0);
|
|
const [currentStreak, setCurrentStreak] = useState(0);
|
|
const [currentPlayerId, setCurrentPlayerId] = useState<string | null>(null);
|
|
const [currentPlayerName, setCurrentPlayerName] = useState<string | null>(null);
|
|
const [pendingQuizToSave, setPendingQuizToSave] = useState<{ quiz: Quiz; topic: string } | null>(null);
|
|
const [sourceQuizId, setSourceQuizId] = useState<string | null>(null);
|
|
const [gameConfig, setGameConfig] = useState<GameConfig>(DEFAULT_GAME_CONFIG);
|
|
const [firstCorrectPlayerId, setFirstCorrectPlayerId] = useState<string | null>(null);
|
|
const [hostSecret, setHostSecret] = useState<string | null>(null);
|
|
const [isReconnecting, setIsReconnecting] = useState(false);
|
|
|
|
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const syncTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const peerRef = useRef<Peer | null>(null);
|
|
const connectionsRef = useRef<Map<string, DataConnection>>(new Map());
|
|
const hostConnectionRef = useRef<DataConnection | null>(null);
|
|
|
|
const timeLeftRef = useRef(0);
|
|
const playersRef = useRef<Player[]>([]);
|
|
const currentQuestionIndexRef = useRef(0);
|
|
const quizRef = useRef<Quiz | null>(null);
|
|
const gameConfigRef = useRef<GameConfig>(DEFAULT_GAME_CONFIG);
|
|
const gamePinRef = useRef<string | null>(null);
|
|
const hostSecretRef = useRef<string | null>(null);
|
|
const gameStateRef = useRef<GameState>('LANDING');
|
|
|
|
useEffect(() => { timeLeftRef.current = timeLeft; }, [timeLeft]);
|
|
useEffect(() => { playersRef.current = players; }, [players]);
|
|
useEffect(() => { currentQuestionIndexRef.current = currentQuestionIndex; }, [currentQuestionIndex]);
|
|
useEffect(() => { quizRef.current = quiz; }, [quiz]);
|
|
useEffect(() => { gameConfigRef.current = gameConfig; }, [gameConfig]);
|
|
useEffect(() => { gamePinRef.current = gamePin; }, [gamePin]);
|
|
useEffect(() => { hostSecretRef.current = hostSecret; }, [hostSecret]);
|
|
useEffect(() => { gameStateRef.current = gameState; }, [gameState]);
|
|
|
|
const generateGamePin = () => Math.floor(Math.random() * 900000) + 100000 + "";
|
|
|
|
const syncGameState = useCallback(async () => {
|
|
if (!gamePinRef.current || !hostSecretRef.current) return;
|
|
if (gameStateRef.current === 'LANDING' || gameStateRef.current === 'EDITING' || gameStateRef.current === 'CREATING' || gameStateRef.current === 'GENERATING') return;
|
|
|
|
try {
|
|
await fetch(`${BACKEND_URL}/api/games/${gamePinRef.current}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Host-Secret': hostSecretRef.current,
|
|
},
|
|
body: JSON.stringify({
|
|
gameState: gameStateRef.current,
|
|
currentQuestionIndex: currentQuestionIndexRef.current,
|
|
players: playersRef.current,
|
|
}),
|
|
});
|
|
} catch (err) {
|
|
console.error('Failed to sync game state:', err);
|
|
}
|
|
}, []);
|
|
|
|
const createGameSession = async (pin: string, peerId: string, quizData: Quiz, config: GameConfig): Promise<string | null> => {
|
|
try {
|
|
const response = await fetch(`${BACKEND_URL}/api/games`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
pin,
|
|
hostPeerId: peerId,
|
|
quiz: quizData,
|
|
gameConfig: config,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
console.error('Failed to create game session');
|
|
return null;
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data.hostSecret;
|
|
} catch (err) {
|
|
console.error('Error creating game session:', err);
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const updateHostPeerId = async (pin: string, secret: string, newPeerId: string) => {
|
|
try {
|
|
await fetch(`${BACKEND_URL}/api/games/${pin}`, {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Host-Secret': secret,
|
|
},
|
|
body: JSON.stringify({ hostPeerId: newPeerId }),
|
|
});
|
|
} catch (err) {
|
|
console.error('Error updating host peer ID:', err);
|
|
}
|
|
};
|
|
|
|
const fetchHostSession = async (pin: string, secret: string) => {
|
|
try {
|
|
const response = await fetch(`${BACKEND_URL}/api/games/${pin}/host`, {
|
|
headers: { 'X-Host-Secret': secret },
|
|
});
|
|
|
|
if (!response.ok) return null;
|
|
return response.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const fetchGameInfo = async (pin: string) => {
|
|
try {
|
|
const response = await fetch(`${BACKEND_URL}/api/games/${pin}`);
|
|
if (!response.ok) return null;
|
|
return response.json();
|
|
} catch {
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const deleteGameSession = async (pin: string, secret: string) => {
|
|
try {
|
|
await fetch(`${BACKEND_URL}/api/games/${pin}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-Host-Secret': secret },
|
|
});
|
|
} catch (err) {
|
|
console.error('Error deleting game session:', err);
|
|
}
|
|
};
|
|
|
|
const handleHostDataRef = useRef<(conn: DataConnection, data: NetworkMessage) => void>(() => {});
|
|
const handleClientDataRef = useRef<(data: NetworkMessage) => void>(() => {});
|
|
|
|
const setupHostPeer = (pin: string, onReady: (peerId: string) => void) => {
|
|
const peer = new Peer(`kaboot-${pin}`);
|
|
peerRef.current = peer;
|
|
|
|
peer.on('open', (id) => {
|
|
onReady(id);
|
|
});
|
|
|
|
peer.on('connection', (conn) => {
|
|
conn.on('data', (data: any) => {
|
|
handleHostDataRef.current(conn, data);
|
|
});
|
|
conn.on('close', () => {
|
|
connectionsRef.current.delete(conn.peer);
|
|
});
|
|
});
|
|
|
|
peer.on('error', (err) => {
|
|
if (err.type === 'unavailable-id') {
|
|
peer.destroy();
|
|
const newPeer = new Peer();
|
|
peerRef.current = newPeer;
|
|
|
|
newPeer.on('open', (id) => {
|
|
onReady(id);
|
|
});
|
|
|
|
newPeer.on('connection', (conn) => {
|
|
conn.on('data', (data: any) => {
|
|
handleHostDataRef.current(conn, data);
|
|
});
|
|
});
|
|
|
|
newPeer.on('error', () => {
|
|
setError("Network error. Please reload.");
|
|
setGameState('LANDING');
|
|
clearStoredSession();
|
|
});
|
|
} else {
|
|
setError("Network error. Please reload.");
|
|
setGameState('LANDING');
|
|
clearStoredSession();
|
|
}
|
|
});
|
|
};
|
|
|
|
const initializeHostGame = async (newQuiz: Quiz, hostParticipates: boolean = true) => {
|
|
setQuiz(newQuiz);
|
|
const pin = generateGamePin();
|
|
setGamePin(pin);
|
|
|
|
setupHostPeer(pin, async (peerId) => {
|
|
const secret = await createGameSession(pin, peerId, newQuiz, gameConfigRef.current);
|
|
|
|
if (!secret) {
|
|
setError("Failed to create game. Please try again.");
|
|
setGameState('LANDING');
|
|
return;
|
|
}
|
|
|
|
setHostSecret(secret);
|
|
storeSession({ pin, role: 'HOST', hostSecret: secret });
|
|
|
|
if (hostParticipates) {
|
|
const hostPlayer: Player = {
|
|
id: 'host',
|
|
name: 'Host',
|
|
score: 0,
|
|
previousScore: 0,
|
|
streak: 0,
|
|
lastAnswerCorrect: null,
|
|
selectedShape: null,
|
|
pointsBreakdown: null,
|
|
isBot: false,
|
|
avatarSeed: Math.random(),
|
|
color: PLAYER_COLORS[0]
|
|
};
|
|
setPlayers([hostPlayer]);
|
|
setCurrentPlayerId('host');
|
|
setCurrentPlayerName('Host');
|
|
} else {
|
|
setPlayers([]);
|
|
setCurrentPlayerId(null);
|
|
setCurrentPlayerName(null);
|
|
}
|
|
setGameState('LOBBY');
|
|
|
|
syncTimerRef.current = setInterval(syncGameState, STATE_SYNC_INTERVAL);
|
|
});
|
|
};
|
|
|
|
const reconnectAsHost = async (session: StoredSession) => {
|
|
if (!session.hostSecret) {
|
|
clearStoredSession();
|
|
return;
|
|
}
|
|
|
|
setIsReconnecting(true);
|
|
const hostData = await fetchHostSession(session.pin, session.hostSecret);
|
|
|
|
if (!hostData) {
|
|
clearStoredSession();
|
|
setIsReconnecting(false);
|
|
return;
|
|
}
|
|
|
|
setRole('HOST');
|
|
setGamePin(session.pin);
|
|
setHostSecret(session.hostSecret);
|
|
setQuiz(hostData.quiz);
|
|
setGameConfig(hostData.gameConfig);
|
|
setCurrentQuestionIndex(hostData.currentQuestionIndex || 0);
|
|
|
|
const hostPlayer = (hostData.players || []).find((p: Player) => p.id === 'host');
|
|
if (hostPlayer) {
|
|
setCurrentPlayerId('host');
|
|
setCurrentPlayerName('Host');
|
|
setCurrentPlayerScore(hostPlayer.score);
|
|
setCurrentStreak(hostPlayer.streak);
|
|
setPlayers([hostPlayer]);
|
|
|
|
if (hostPlayer.lastAnswerCorrect !== null) {
|
|
setHasAnswered(true);
|
|
if (hostPlayer.pointsBreakdown) {
|
|
setLastPointsEarned(hostPlayer.pointsBreakdown.total);
|
|
}
|
|
}
|
|
} else {
|
|
setPlayers([]);
|
|
}
|
|
|
|
setupHostPeer(session.pin, async (peerId) => {
|
|
if (peerId !== hostData.hostPeerId) {
|
|
await updateHostPeerId(session.pin, session.hostSecret!, peerId);
|
|
}
|
|
|
|
if (hostData.gameState === 'LOBBY') {
|
|
setGameState('LOBBY');
|
|
} else if (hostData.gameState === 'PODIUM') {
|
|
setGameState('PODIUM');
|
|
} else {
|
|
setGameState('HOST_RECONNECTED');
|
|
}
|
|
|
|
setIsReconnecting(false);
|
|
syncTimerRef.current = setInterval(syncGameState, STATE_SYNC_INTERVAL);
|
|
});
|
|
};
|
|
|
|
const reconnectAsClient = async (session: StoredSession) => {
|
|
if (!session.playerName) {
|
|
clearStoredSession();
|
|
return;
|
|
}
|
|
|
|
setIsReconnecting(true);
|
|
setRole('CLIENT');
|
|
setGamePin(session.pin);
|
|
setCurrentPlayerName(session.playerName);
|
|
|
|
const gameInfo = await fetchGameInfo(session.pin);
|
|
|
|
if (!gameInfo) {
|
|
setGameState('DISCONNECTED');
|
|
setIsReconnecting(false);
|
|
return;
|
|
}
|
|
|
|
if (gameInfo.gameState === 'PODIUM') {
|
|
clearStoredSession();
|
|
setIsReconnecting(false);
|
|
return;
|
|
}
|
|
|
|
const peer = new Peer();
|
|
peerRef.current = peer;
|
|
|
|
peer.on('open', (id) => {
|
|
setCurrentPlayerId(id);
|
|
storeSession({ ...session, playerId: id });
|
|
connectToHost(peer, gameInfo.hostPeerId, session.playerName!, true, session.playerId);
|
|
});
|
|
|
|
peer.on('error', () => {
|
|
setError("Network error");
|
|
setIsReconnecting(false);
|
|
setGameState('DISCONNECTED');
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const session = getStoredSession();
|
|
if (session) {
|
|
if (session.role === 'HOST') {
|
|
reconnectAsHost(session);
|
|
} else {
|
|
reconnectAsClient(session);
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
if (syncTimerRef.current) clearInterval(syncTimerRef.current);
|
|
if (peerRef.current) peerRef.current.destroy();
|
|
};
|
|
}, []);
|
|
|
|
const uploadDocument = async (file: File, useOcr: boolean = false): Promise<ProcessedDocument> => {
|
|
const formData = new FormData();
|
|
formData.append('document', file);
|
|
formData.append('useOcr', String(useOcr));
|
|
|
|
const response = await fetch(`${BACKEND_URL}/api/upload`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.error || 'Failed to upload document');
|
|
}
|
|
|
|
return response.json();
|
|
};
|
|
|
|
const startQuizGen = async (options: { topic?: string; questionCount?: number; files?: File[]; useOcr?: boolean }) => {
|
|
try {
|
|
setGameState('GENERATING');
|
|
setError(null);
|
|
setRole('HOST');
|
|
|
|
let documents: ProcessedDocument[] | undefined;
|
|
if (options.files && options.files.length > 0) {
|
|
documents = await Promise.all(
|
|
options.files.map(file => uploadDocument(file, options.useOcr))
|
|
);
|
|
}
|
|
|
|
const generateOptions: GenerateQuizOptions = {
|
|
topic: options.topic,
|
|
questionCount: options.questionCount,
|
|
documents
|
|
};
|
|
|
|
const generatedQuiz = await generateQuiz(generateOptions);
|
|
const saveLabel = options.topic || options.files?.map(f => f.name).join(', ') || '';
|
|
setPendingQuizToSave({ quiz: generatedQuiz, topic: saveLabel });
|
|
setQuiz(generatedQuiz);
|
|
setGameState('EDITING');
|
|
} catch (e) {
|
|
const message = e instanceof Error ? e.message : "Failed to generate quiz.";
|
|
setError(message);
|
|
setGameState('LANDING');
|
|
}
|
|
};
|
|
|
|
const dismissSavePrompt = () => {
|
|
setPendingQuizToSave(null);
|
|
};
|
|
|
|
const startManualCreation = () => {
|
|
setRole('HOST');
|
|
setGameState('CREATING');
|
|
};
|
|
|
|
const finalizeManualQuiz = (manualQuiz: Quiz, saveToLibrary: boolean = false) => {
|
|
if (saveToLibrary) {
|
|
setPendingQuizToSave({ quiz: manualQuiz, topic: '' });
|
|
}
|
|
initializeHostGame(manualQuiz);
|
|
};
|
|
|
|
const loadSavedQuiz = (savedQuiz: Quiz, quizId?: string) => {
|
|
setRole('HOST');
|
|
setQuiz(savedQuiz);
|
|
setSourceQuizId(quizId || null);
|
|
setGameState('EDITING');
|
|
};
|
|
|
|
const updateQuizFromEditor = (updatedQuiz: Quiz) => {
|
|
setQuiz(updatedQuiz);
|
|
setPendingQuizToSave(prev => prev ? { ...prev, quiz: updatedQuiz } : { quiz: updatedQuiz, topic: '' });
|
|
};
|
|
|
|
const startGameFromEditor = (finalQuiz: Quiz, config: GameConfig) => {
|
|
setQuiz(finalQuiz);
|
|
setGameConfig(config);
|
|
initializeHostGame(finalQuiz, config.hostParticipates);
|
|
};
|
|
|
|
const backFromEditor = () => {
|
|
setQuiz(null);
|
|
setPendingQuizToSave(null);
|
|
setSourceQuizId(null);
|
|
setGameState('LANDING');
|
|
};
|
|
|
|
const handleHostData = (conn: DataConnection, data: NetworkMessage) => {
|
|
if (data.type === 'JOIN') {
|
|
const payload = data.payload as { name: string; reconnect?: boolean; previousId?: string };
|
|
|
|
connectionsRef.current.set(conn.peer, conn);
|
|
|
|
const existingByPreviousId = payload.previousId ? playersRef.current.find(p => p.id === payload.previousId) : null;
|
|
const existingByName = playersRef.current.find(p => p.name === payload.name && p.id !== 'host');
|
|
const reconnectedPlayer = existingByPreviousId || existingByName;
|
|
|
|
console.log('[HOST] JOIN received:', {
|
|
name: payload.name,
|
|
previousId: payload.previousId,
|
|
reconnect: payload.reconnect,
|
|
foundByPreviousId: !!existingByPreviousId,
|
|
foundByName: !!existingByName,
|
|
reconnectedPlayer: reconnectedPlayer ? {
|
|
id: reconnectedPlayer.id,
|
|
hasAnswered: reconnectedPlayer.lastAnswerCorrect !== null,
|
|
lastAnswerCorrect: reconnectedPlayer.lastAnswerCorrect,
|
|
selectedShape: reconnectedPlayer.selectedShape
|
|
} : null,
|
|
allPlayers: playersRef.current.map(p => ({ id: p.id, name: p.name, lastAnswerCorrect: p.lastAnswerCorrect }))
|
|
});
|
|
|
|
if (reconnectedPlayer) {
|
|
setPlayers(prev => prev.map(p => p.id === reconnectedPlayer.id ? { ...p, id: conn.peer } : p));
|
|
} else if (!playersRef.current.find(p => p.id === conn.peer)) {
|
|
const colorIndex = playersRef.current.length % PLAYER_COLORS.length;
|
|
const newPlayer: Player = {
|
|
id: conn.peer,
|
|
name: payload.name,
|
|
score: 0,
|
|
previousScore: 0,
|
|
streak: 0,
|
|
lastAnswerCorrect: null,
|
|
selectedShape: null,
|
|
pointsBreakdown: null,
|
|
isBot: false,
|
|
avatarSeed: Math.random(),
|
|
color: PLAYER_COLORS[colorIndex]
|
|
};
|
|
setPlayers(prev => [...prev, newPlayer]);
|
|
}
|
|
|
|
const currentState = gameStateRef.current;
|
|
const currentQuiz = quizRef.current;
|
|
const currentIndex = currentQuestionIndexRef.current;
|
|
const currentQuestion = currentQuiz?.questions[currentIndex];
|
|
|
|
const welcomePayload: any = {
|
|
playerId: conn.peer,
|
|
quizTitle: currentQuiz?.title || 'Kaboot',
|
|
players: playersRef.current,
|
|
gameState: currentState,
|
|
currentQuestionIndex: currentIndex,
|
|
totalQuestions: currentQuiz?.questions.length || 0,
|
|
timeLeft: timeLeftRef.current,
|
|
score: 0,
|
|
streak: 0,
|
|
hasAnswered: false,
|
|
lastAnswerCorrect: null,
|
|
selectedShape: null,
|
|
};
|
|
|
|
if (currentQuestion) {
|
|
welcomePayload.questionText = currentQuestion.text;
|
|
const correctOpt = currentQuestion.options.find(o => o.isCorrect);
|
|
welcomePayload.correctShape = correctOpt?.shape;
|
|
welcomePayload.options = currentQuestion.options.map(o => ({
|
|
...o,
|
|
isCorrect: false
|
|
}));
|
|
}
|
|
|
|
if (reconnectedPlayer) {
|
|
welcomePayload.score = reconnectedPlayer.score;
|
|
welcomePayload.streak = reconnectedPlayer.streak;
|
|
welcomePayload.hasAnswered = reconnectedPlayer.lastAnswerCorrect !== null;
|
|
welcomePayload.lastAnswerCorrect = reconnectedPlayer.lastAnswerCorrect;
|
|
welcomePayload.selectedShape = reconnectedPlayer.selectedShape;
|
|
if (reconnectedPlayer.pointsBreakdown) {
|
|
welcomePayload.lastPointsEarned = reconnectedPlayer.pointsBreakdown.total;
|
|
}
|
|
}
|
|
|
|
console.log('[HOST] Sending WELCOME:', {
|
|
hasAnswered: welcomePayload.hasAnswered,
|
|
lastAnswerCorrect: welcomePayload.lastAnswerCorrect,
|
|
selectedShape: welcomePayload.selectedShape,
|
|
gameState: welcomePayload.gameState
|
|
});
|
|
conn.send({ type: 'WELCOME', payload: welcomePayload });
|
|
}
|
|
|
|
if (data.type === 'ANSWER') {
|
|
const { playerId, isCorrect, selectedShape } = data.payload;
|
|
console.log('[HOST] ANSWER received:', { playerId, isCorrect, selectedShape });
|
|
|
|
const currentPlayer = playersRef.current.find(p => p.id === playerId);
|
|
console.log('[HOST] Current player:', currentPlayer ? { id: currentPlayer.id, lastAnswerCorrect: currentPlayer.lastAnswerCorrect } : 'NOT FOUND');
|
|
|
|
if (!currentPlayer || currentPlayer.lastAnswerCorrect !== null) {
|
|
console.log('[HOST] Ignoring answer - player not found or already answered');
|
|
return;
|
|
}
|
|
|
|
const isFirstCorrect = isCorrect && firstCorrectPlayerId === null;
|
|
if (isFirstCorrect) {
|
|
setFirstCorrectPlayerId(playerId);
|
|
}
|
|
|
|
const newStreak = isCorrect ? currentPlayer.streak + 1 : 0;
|
|
const playerRank = getPlayerRank(playerId, playersRef.current);
|
|
|
|
const breakdown = calculatePointsWithBreakdown({
|
|
isCorrect,
|
|
timeLeftMs: timeLeftRef.current,
|
|
questionTimeMs: QUESTION_TIME_MS,
|
|
streak: newStreak,
|
|
playerRank,
|
|
isFirstCorrect,
|
|
config: gameConfigRef.current,
|
|
});
|
|
const newScore = Math.max(0, currentPlayer.score + breakdown.total);
|
|
|
|
setPlayers(prev => prev.map(p => {
|
|
if (p.id !== playerId) return p;
|
|
return { ...p, score: newScore, previousScore: p.score, streak: newStreak, lastAnswerCorrect: isCorrect, selectedShape, pointsBreakdown: breakdown };
|
|
}));
|
|
|
|
conn.send({ type: 'RESULT', payload: { isCorrect, scoreAdded: breakdown.total, newScore, breakdown } });
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleHostDataRef.current = handleHostData;
|
|
handleClientDataRef.current = handleClientData;
|
|
});
|
|
|
|
const broadcast = (msg: NetworkMessage) => {
|
|
connectionsRef.current.forEach(conn => { if (conn.open) conn.send(msg); });
|
|
};
|
|
|
|
const startHostGame = () => {
|
|
setCurrentQuestionIndex(0);
|
|
broadcast({ type: 'GAME_START', payload: {} });
|
|
startCountdown();
|
|
};
|
|
|
|
const resumeGame = () => {
|
|
broadcast({ type: 'GAME_START', payload: {} });
|
|
startCountdown(true);
|
|
};
|
|
|
|
const startCountdown = (isResume: boolean = false) => {
|
|
setGameState('COUNTDOWN');
|
|
broadcast({ type: 'START_COUNTDOWN', payload: { duration: 3 } });
|
|
|
|
let count = 3;
|
|
setTimeLeft(count);
|
|
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = setInterval(() => {
|
|
count--;
|
|
setTimeLeft(count);
|
|
if (count <= 0) {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
startQuestion(isResume);
|
|
}
|
|
}, 1000);
|
|
};
|
|
|
|
const startQuestion = (isResume: boolean = false) => {
|
|
setGameState('QUESTION');
|
|
setTimeLeft(QUESTION_TIME_MS);
|
|
setFirstCorrectPlayerId(null);
|
|
|
|
if (isResume) {
|
|
const hostPlayer = playersRef.current.find(p => p.id === 'host');
|
|
const hostAlreadyAnswered = hostPlayer?.lastAnswerCorrect !== null;
|
|
|
|
if (hostAlreadyAnswered) {
|
|
setHasAnswered(true);
|
|
} else {
|
|
setHasAnswered(false);
|
|
setLastPointsEarned(null);
|
|
setSelectedOption(null);
|
|
}
|
|
} else {
|
|
setHasAnswered(false);
|
|
setLastPointsEarned(null);
|
|
setSelectedOption(null);
|
|
setPlayers(prev => prev.map(p => ({ ...p, lastAnswerCorrect: null, selectedShape: null, pointsBreakdown: null })));
|
|
}
|
|
|
|
const currentQuiz = quizRef.current;
|
|
const currentIndex = currentQuestionIndexRef.current;
|
|
|
|
if (currentQuiz) {
|
|
const currentQ = currentQuiz.questions[currentIndex];
|
|
const options = currentQ.options || [];
|
|
const correctOpt = options.find(o => o.isCorrect);
|
|
const correctShape = correctOpt?.shape || 'triangle';
|
|
setCurrentCorrectShape(correctShape);
|
|
|
|
const optionsForClient = options.map(o => ({
|
|
...o,
|
|
isCorrect: false
|
|
}));
|
|
|
|
broadcast({
|
|
type: 'QUESTION_START',
|
|
payload: {
|
|
totalQuestions: currentQuiz.questions.length,
|
|
currentQuestionIndex: currentIndex,
|
|
timeLimit: QUESTION_TIME,
|
|
correctShape,
|
|
questionText: currentQ.text,
|
|
options: optionsForClient
|
|
}
|
|
});
|
|
}
|
|
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
let tickCount = 0;
|
|
timerRef.current = setInterval(() => {
|
|
setTimeLeft(prev => {
|
|
if (prev <= 100) { endQuestion(); return 0; }
|
|
const newTime = prev - 100;
|
|
tickCount++;
|
|
if (tickCount % 10 === 0) {
|
|
broadcast({ type: 'TIME_SYNC', payload: { timeLeft: newTime } });
|
|
}
|
|
return newTime;
|
|
});
|
|
}, 100);
|
|
};
|
|
|
|
const endQuestion = () => {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
setGameState('REVEAL');
|
|
broadcast({ type: 'TIME_UP', payload: {} });
|
|
};
|
|
|
|
const showScoreboard = () => {
|
|
setGameState('SCOREBOARD');
|
|
broadcast({ type: 'SHOW_SCOREBOARD', payload: { players: playersRef.current } });
|
|
};
|
|
|
|
const nextQuestion = () => {
|
|
const currentQuiz = quizRef.current;
|
|
const currentIndex = currentQuestionIndexRef.current;
|
|
|
|
if (!currentQuiz) return;
|
|
|
|
if (currentIndex < currentQuiz.questions.length - 1) {
|
|
setCurrentQuestionIndex(prev => prev + 1);
|
|
setTimeout(() => startCountdown(), 0);
|
|
} else {
|
|
setGameState('PODIUM');
|
|
broadcast({ type: 'GAME_OVER', payload: { players } });
|
|
|
|
if (gamePinRef.current && hostSecretRef.current) {
|
|
deleteGameSession(gamePinRef.current, hostSecretRef.current);
|
|
}
|
|
clearStoredSession();
|
|
}
|
|
};
|
|
|
|
const connectToHost = (peer: Peer, hostPeerId: string, playerName: string, isReconnect: boolean = false, previousId?: string) => {
|
|
const conn = peer.connect(hostPeerId);
|
|
hostConnectionRef.current = conn;
|
|
|
|
conn.on('open', () => {
|
|
conn.send({
|
|
type: 'JOIN',
|
|
payload: {
|
|
name: playerName,
|
|
reconnect: isReconnect,
|
|
previousId
|
|
}
|
|
});
|
|
setIsReconnecting(false);
|
|
});
|
|
|
|
conn.on('data', (data: any) => handleClientDataRef.current(data));
|
|
|
|
conn.on('close', () => {
|
|
if (gameStateRef.current !== 'PODIUM') {
|
|
setGameState('DISCONNECTED');
|
|
}
|
|
});
|
|
|
|
conn.on('error', () => {
|
|
if (gameStateRef.current !== 'PODIUM') {
|
|
setGameState('DISCONNECTED');
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
if (!conn.open && gameStateRef.current === 'LANDING') {
|
|
setError("Could not connect to host");
|
|
setIsReconnecting(false);
|
|
}
|
|
}, 5000);
|
|
};
|
|
|
|
const joinGame = async (pin: string, name: string) => {
|
|
setRole('CLIENT');
|
|
setError(null);
|
|
setGamePin(pin);
|
|
setCurrentPlayerName(name);
|
|
|
|
const gameInfo = await fetchGameInfo(pin);
|
|
|
|
if (!gameInfo) {
|
|
setError("Game not found. Check the PIN.");
|
|
return;
|
|
}
|
|
|
|
const peer = new Peer();
|
|
peerRef.current = peer;
|
|
|
|
peer.on('open', (id) => {
|
|
setCurrentPlayerId(id);
|
|
storeSession({ pin, role: 'CLIENT', playerName: name, playerId: id });
|
|
connectToHost(peer, gameInfo.hostPeerId, name, false);
|
|
});
|
|
|
|
peer.on('error', () => {
|
|
setError("Network error");
|
|
});
|
|
};
|
|
|
|
const attemptReconnect = async () => {
|
|
const session = getStoredSession();
|
|
if (!session || !session.playerName || !session.pin) {
|
|
clearStoredSession();
|
|
setGameState('LANDING');
|
|
return;
|
|
}
|
|
|
|
setIsReconnecting(true);
|
|
setError(null);
|
|
|
|
const gameInfo = await fetchGameInfo(session.pin);
|
|
|
|
if (!gameInfo) {
|
|
setError("Game no longer exists");
|
|
setIsReconnecting(false);
|
|
clearStoredSession();
|
|
setGameState('LANDING');
|
|
return;
|
|
}
|
|
|
|
if (gameInfo.gameState === 'PODIUM') {
|
|
setError("Game has ended");
|
|
setIsReconnecting(false);
|
|
clearStoredSession();
|
|
setGameState('LANDING');
|
|
return;
|
|
}
|
|
|
|
if (peerRef.current) {
|
|
peerRef.current.destroy();
|
|
}
|
|
|
|
const peer = new Peer();
|
|
peerRef.current = peer;
|
|
|
|
peer.on('open', (id) => {
|
|
const previousId = session.playerId;
|
|
setCurrentPlayerId(id);
|
|
storeSession({ ...session, playerId: id });
|
|
connectToHost(peer, gameInfo.hostPeerId, session.playerName!, true, previousId);
|
|
});
|
|
|
|
peer.on('error', () => {
|
|
setError("Network error. Try again.");
|
|
setIsReconnecting(false);
|
|
});
|
|
};
|
|
|
|
const goHomeFromDisconnected = () => {
|
|
clearStoredSession();
|
|
if (peerRef.current) {
|
|
peerRef.current.destroy();
|
|
}
|
|
setGameState('LANDING');
|
|
setError(null);
|
|
};
|
|
|
|
const handleClientData = (data: NetworkMessage) => {
|
|
if (data.type === 'WELCOME') {
|
|
const payload = data.payload;
|
|
console.log('[CLIENT] Received WELCOME:', {
|
|
hasAnswered: payload.hasAnswered,
|
|
lastAnswerCorrect: payload.lastAnswerCorrect,
|
|
selectedShape: payload.selectedShape,
|
|
gameState: payload.gameState
|
|
});
|
|
|
|
if (payload.score !== undefined) {
|
|
setCurrentPlayerScore(payload.score);
|
|
}
|
|
if (payload.streak !== undefined) {
|
|
setCurrentStreak(payload.streak);
|
|
}
|
|
if (payload.hasAnswered !== undefined) {
|
|
setHasAnswered(payload.hasAnswered);
|
|
}
|
|
if (payload.lastPointsEarned !== undefined) {
|
|
setLastPointsEarned(payload.lastPointsEarned);
|
|
}
|
|
if (payload.lastAnswerCorrect !== undefined) {
|
|
setLastAnswerCorrect(payload.lastAnswerCorrect);
|
|
}
|
|
if (payload.currentQuestionIndex !== undefined) {
|
|
setCurrentQuestionIndex(payload.currentQuestionIndex);
|
|
}
|
|
if (payload.correctShape) {
|
|
setCurrentCorrectShape(payload.correctShape);
|
|
}
|
|
if (payload.timeLeft !== undefined) {
|
|
setTimeLeft(payload.timeLeft);
|
|
}
|
|
if (payload.players) {
|
|
setPlayers(payload.players);
|
|
}
|
|
if (payload.selectedShape && payload.options) {
|
|
const matchedOption = payload.options.find(opt => opt.shape === payload.selectedShape);
|
|
if (matchedOption) {
|
|
setSelectedOption(matchedOption);
|
|
}
|
|
}
|
|
|
|
if (payload.questionText && payload.options && payload.totalQuestions !== undefined) {
|
|
const questions: Question[] = [];
|
|
for (let i = 0; i < payload.totalQuestions; i++) {
|
|
if (i === payload.currentQuestionIndex) {
|
|
questions.push({
|
|
id: `q-${i}`,
|
|
text: payload.questionText,
|
|
options: payload.options,
|
|
timeLimit: QUESTION_TIME
|
|
});
|
|
} else {
|
|
questions.push({ id: `loading-${i}`, text: '', options: [], timeLimit: 0 });
|
|
}
|
|
}
|
|
setQuiz({ title: payload.quizTitle, questions });
|
|
} else {
|
|
setQuiz({ title: payload.quizTitle, questions: [] });
|
|
}
|
|
|
|
const serverGameState = payload.gameState;
|
|
const playerHasAnswered = payload.hasAnswered;
|
|
|
|
if (serverGameState && serverGameState !== 'LOBBY') {
|
|
if (serverGameState === 'QUESTION' || serverGameState === 'COUNTDOWN') {
|
|
setGameState(serverGameState);
|
|
if (!playerHasAnswered && serverGameState === 'QUESTION') {
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = setInterval(() => setTimeLeft(prev => Math.max(0, prev - 100)), 100);
|
|
}
|
|
} else if (serverGameState === 'REVEAL') {
|
|
setGameState('REVEAL');
|
|
} else if (serverGameState === 'SCOREBOARD') {
|
|
setGameState('SCOREBOARD');
|
|
} else if (serverGameState === 'PODIUM') {
|
|
setGameState('PODIUM');
|
|
} else {
|
|
setGameState('LOBBY');
|
|
}
|
|
} else {
|
|
setGameState('LOBBY');
|
|
setHasAnswered(false);
|
|
}
|
|
}
|
|
|
|
if (data.type === 'START_COUNTDOWN') {
|
|
setGameState('COUNTDOWN');
|
|
setTimeLeft(data.payload.duration);
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = setInterval(() => {
|
|
setTimeLeft(prev => Math.max(0, prev - 1));
|
|
}, 1000);
|
|
}
|
|
|
|
if (data.type === 'QUESTION_START') {
|
|
setGameState('QUESTION');
|
|
setHasAnswered(false);
|
|
setLastPointsEarned(null);
|
|
setLastAnswerCorrect(null);
|
|
setSelectedOption(null);
|
|
setCurrentQuestionIndex(data.payload.currentQuestionIndex);
|
|
setTimeLeft(data.payload.timeLimit * 1000);
|
|
setCurrentCorrectShape(data.payload.correctShape);
|
|
|
|
setQuiz(prev => {
|
|
const tempQuestions = prev ? [...prev.questions] : [];
|
|
while (tempQuestions.length < data.payload.totalQuestions) {
|
|
tempQuestions.push({ id: `loading-${tempQuestions.length}`, text: '', options: [], timeLimit: 0 });
|
|
}
|
|
tempQuestions[data.payload.currentQuestionIndex] = {
|
|
id: `q-${data.payload.currentQuestionIndex}`,
|
|
text: data.payload.questionText,
|
|
options: data.payload.options,
|
|
timeLimit: data.payload.timeLimit
|
|
};
|
|
return { title: prev?.title || 'Quiz', questions: tempQuestions };
|
|
});
|
|
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
timerRef.current = setInterval(() => setTimeLeft(prev => Math.max(0, prev - 100)), 100);
|
|
}
|
|
|
|
if (data.type === 'RESULT') {
|
|
setLastPointsEarned(data.payload.scoreAdded);
|
|
setLastAnswerCorrect(data.payload.isCorrect);
|
|
setCurrentPlayerScore(data.payload.newScore);
|
|
if (data.payload.isCorrect) {
|
|
setCurrentStreak(prev => prev + 1);
|
|
} else {
|
|
setCurrentStreak(0);
|
|
}
|
|
}
|
|
|
|
if (data.type === 'TIME_SYNC') {
|
|
setTimeLeft(data.payload.timeLeft);
|
|
}
|
|
|
|
if (data.type === 'TIME_UP') {
|
|
console.log('[CLIENT] TIME_UP received, current state:', {
|
|
hasAnswered,
|
|
lastAnswerCorrect,
|
|
lastPointsEarned,
|
|
selectedOption: selectedOption?.shape
|
|
});
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
if (gameStateRef.current !== 'WAITING_TO_REJOIN') {
|
|
setGameState('REVEAL');
|
|
}
|
|
}
|
|
|
|
if (data.type === 'SHOW_SCOREBOARD') {
|
|
setGameState('SCOREBOARD');
|
|
setPlayers(data.payload.players);
|
|
}
|
|
if (data.type === 'GAME_OVER') {
|
|
setGameState('PODIUM');
|
|
setPlayers(data.payload.players);
|
|
clearStoredSession();
|
|
}
|
|
};
|
|
|
|
const handleAnswer = (arg: boolean | AnswerOption) => {
|
|
if (hasAnswered || gameState !== 'QUESTION') return;
|
|
if (role === 'HOST' && !gameConfigRef.current.hostParticipates) return;
|
|
|
|
setHasAnswered(true);
|
|
|
|
if (role === 'HOST') {
|
|
const option = arg as AnswerOption;
|
|
const isCorrect = option.isCorrect;
|
|
setSelectedOption(option);
|
|
|
|
const hostPlayer = playersRef.current.find(p => p.id === 'host');
|
|
const currentStrk = hostPlayer?.streak || 0;
|
|
const newStreak = isCorrect ? currentStrk + 1 : 0;
|
|
|
|
const isFirstCorrect = isCorrect && firstCorrectPlayerId === null;
|
|
if (isFirstCorrect) {
|
|
setFirstCorrectPlayerId('host');
|
|
}
|
|
|
|
const playerRank = getPlayerRank('host', playersRef.current);
|
|
|
|
const breakdown = calculatePointsWithBreakdown({
|
|
isCorrect,
|
|
timeLeftMs: timeLeftRef.current,
|
|
questionTimeMs: QUESTION_TIME_MS,
|
|
streak: newStreak,
|
|
playerRank,
|
|
isFirstCorrect,
|
|
config: gameConfigRef.current,
|
|
});
|
|
|
|
setLastPointsEarned(breakdown.total);
|
|
setLastAnswerCorrect(isCorrect);
|
|
const newScore = Math.max(0, (hostPlayer?.score || 0) + breakdown.total);
|
|
setCurrentPlayerScore(newScore);
|
|
setCurrentStreak(newStreak);
|
|
|
|
setPlayers(prev => prev.map(p => {
|
|
if (p.id !== 'host') return p;
|
|
return { ...p, score: newScore, previousScore: p.score, streak: newStreak, lastAnswerCorrect: isCorrect, selectedShape: option.shape, pointsBreakdown: breakdown };
|
|
}));
|
|
} else {
|
|
const option = arg as AnswerOption;
|
|
setSelectedOption(option);
|
|
const isCorrect = option.shape === currentCorrectShape;
|
|
console.log('[CLIENT] Answering:', { selectedShape: option.shape, currentCorrectShape, isCorrect });
|
|
hostConnectionRef.current?.send({ type: 'ANSWER', payload: { playerId: peerRef.current?.id, isCorrect, selectedShape: option.shape } });
|
|
}
|
|
};
|
|
|
|
const endGame = () => {
|
|
if (gamePinRef.current && hostSecretRef.current) {
|
|
deleteGameSession(gamePinRef.current, hostSecretRef.current);
|
|
}
|
|
clearStoredSession();
|
|
if (timerRef.current) clearInterval(timerRef.current);
|
|
if (syncTimerRef.current) clearInterval(syncTimerRef.current);
|
|
if (peerRef.current) peerRef.current.destroy();
|
|
window.location.reload();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (role === 'HOST' && (gameState === 'SCOREBOARD' || gameState === 'PODIUM')) {
|
|
broadcast({ type: gameState === 'SCOREBOARD' ? 'SHOW_SCOREBOARD' : 'GAME_OVER', payload: { players } });
|
|
}
|
|
}, [gameState, players, role]);
|
|
|
|
return {
|
|
role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, lastAnswerCorrect, currentCorrectShape, selectedOption, currentPlayerScore, currentStreak, currentPlayerId, gameConfig,
|
|
pendingQuizToSave, dismissSavePrompt, sourceQuizId, isReconnecting, currentPlayerName,
|
|
startQuizGen, startManualCreation, finalizeManualQuiz, loadSavedQuiz, joinGame, startGame: startHostGame, handleAnswer, nextQuestion, showScoreboard,
|
|
updateQuizFromEditor, startGameFromEditor, backFromEditor, endGame, attemptReconnect, goHomeFromDisconnected, resumeGame
|
|
};
|
|
};
|