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

Fix UI jank a bit

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-14 21:47:40 -07:00
commit 3d6081823c
No known key found for this signature in database
GPG key ID: 6BFE655FA5ABD1E1
18 changed files with 193 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

39
hooks/useGame.ts
View file

@ -3,6 +3,7 @@ import { Quiz, Player, GameState, GameRole, NetworkMessage, AnswerOption, Questi
import { generateQuiz } from '../services/geminiService';
import { QUESTION_TIME, QUESTION_TIME_MS, PLAYER_COLORS, calculatePointsWithBreakdown, getPlayerRank } from '../constants';
import { Peer, DataConnection } from 'peerjs';
import { uniqueNamesGenerator, adjectives, animals } from 'unique-names-generator';
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3001';
const SESSION_STORAGE_KEY = 'kaboot_session';
@ -86,6 +87,15 @@ export const useGame = () => {
const generateGamePin = () => Math.floor(Math.random() * 900000) + 100000 + "";
const generateRandomName = (): string => {
return uniqueNamesGenerator({
dictionaries: [adjectives, animals],
separator: ' ',
style: 'capital',
length: 2,
});
};
const syncGameState = useCallback(async () => {
if (!gamePinRef.current || !hostSecretRef.current) return;
if (gameStateRef.current === 'LANDING' || gameStateRef.current === 'EDITING' || gameStateRef.current === 'CREATING' || gameStateRef.current === 'GENERATING') return;
@ -510,13 +520,23 @@ export const useGame = () => {
allPlayers: playersRef.current.map(p => ({ id: p.id, name: p.name, lastAnswerCorrect: p.lastAnswerCorrect }))
});
let assignedName = payload.name;
if (!reconnectedPlayer && gameConfigRef.current.randomNamesEnabled) {
assignedName = generateRandomName();
}
let updatedPlayers = playersRef.current;
let newPlayer: Player | null = null;
if (reconnectedPlayer) {
setPlayers(prev => prev.map(p => p.id === reconnectedPlayer.id ? { ...p, id: conn.peer } : p));
updatedPlayers = playersRef.current.map(p => p.id === reconnectedPlayer.id ? { ...p, id: conn.peer } : p);
setPlayers(updatedPlayers);
assignedName = reconnectedPlayer.name;
} else if (!playersRef.current.find(p => p.id === conn.peer)) {
const colorIndex = playersRef.current.length % PLAYER_COLORS.length;
const newPlayer: Player = {
newPlayer = {
id: conn.peer,
name: payload.name,
name: assignedName,
score: 0,
previousScore: 0,
streak: 0,
@ -527,7 +547,8 @@ export const useGame = () => {
avatarSeed: Math.random(),
color: PLAYER_COLORS[colorIndex]
};
setPlayers(prev => [...prev, newPlayer]);
updatedPlayers = [...playersRef.current, newPlayer];
setPlayers(updatedPlayers);
}
const currentState = gameStateRef.current;
@ -538,7 +559,7 @@ export const useGame = () => {
const welcomePayload: any = {
playerId: conn.peer,
quizTitle: currentQuiz?.title || 'Kaboot',
players: playersRef.current,
players: updatedPlayers,
gameState: currentState,
currentQuestionIndex: currentIndex,
totalQuestions: currentQuiz?.questions.length || 0,
@ -548,6 +569,7 @@ export const useGame = () => {
hasAnswered: false,
lastAnswerCorrect: null,
selectedShape: null,
assignedName,
};
if (currentQuestion) {
@ -915,6 +937,13 @@ export const useGame = () => {
if (payload.players) {
setPlayers(payload.players);
}
if (payload.assignedName) {
setCurrentPlayerName(payload.assignedName);
const session = getStoredSession();
if (session) {
storeSession({ ...session, playerName: payload.assignedName });
}
}
if (payload.selectedShape && payload.options) {
const matchedOption = payload.options.find(opt => opt.shape === payload.selectedShape);
if (matchedOption) {