feat: 5 categorías rotativas por partida + pool de 200 preguntas + mejoras UI

Cambios principales:
- Tablero ahora muestra 5 categorías aleatorias (de 8 disponibles)
- Pool de 200 preguntas (8 cats × 5 diffs × 5 opciones)
- Preguntas rotan aleatoriamente entre partidas
- Diseño mejorado estilo Jeopardy con efectos visuales
- Socket singleton para conexión persistente
- Nuevos sonidos: game_start, player_join, question_reveal, hover, countdown
- Control de volumen vertical
- Barra de progreso del timer en modal de preguntas
- Animaciones mejoradas con Framer Motion

Backend:
- question_service: selección aleatoria de 5 categorías
- room_manager: fix retorno de create_room
- game_events: carga board desde DB, await en enter_room

Frontend:
- Game.tsx: tablero dinámico, efectos hover, mejor scoreboard
- useSocket: singleton service, eventos con sonidos
- SoundControl: slider vertical
- soundStore: 5 nuevos efectos de sonido

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-01-26 23:44:55 +00:00
parent e5a2b016a0
commit ab201e113a
8 changed files with 631 additions and 264 deletions

View File

@@ -11,6 +11,11 @@ export type SoundEffect =
| 'victory'
| 'defeat'
| 'select'
| 'game_start'
| 'player_join'
| 'question_reveal'
| 'hover'
| 'countdown'
interface SoundState {
volume: number
@@ -56,6 +61,11 @@ export const soundPaths: Record<ThemeName, Record<SoundEffect, string>> = {
victory: '/sounds/drrr/victory.mp3',
defeat: '/sounds/drrr/defeat.mp3',
select: '/sounds/drrr/select.mp3',
game_start: '/sounds/drrr/game_start.mp3',
player_join: '/sounds/drrr/player_join.mp3',
question_reveal: '/sounds/drrr/question_reveal.mp3',
hover: '/sounds/drrr/hover.mp3',
countdown: '/sounds/drrr/countdown.mp3',
},
retro: {
correct: '/sounds/retro/correct.mp3',
@@ -66,6 +76,11 @@ export const soundPaths: Record<ThemeName, Record<SoundEffect, string>> = {
victory: '/sounds/retro/victory.mp3',
defeat: '/sounds/retro/defeat.mp3',
select: '/sounds/retro/select.mp3',
game_start: '/sounds/retro/game_start.mp3',
player_join: '/sounds/retro/player_join.mp3',
question_reveal: '/sounds/retro/question_reveal.mp3',
hover: '/sounds/retro/hover.mp3',
countdown: '/sounds/retro/countdown.mp3',
},
minimal: {
correct: '/sounds/minimal/correct.mp3',
@@ -76,6 +91,11 @@ export const soundPaths: Record<ThemeName, Record<SoundEffect, string>> = {
victory: '/sounds/minimal/victory.mp3',
defeat: '/sounds/minimal/defeat.mp3',
select: '/sounds/minimal/select.mp3',
game_start: '/sounds/minimal/game_start.mp3',
player_join: '/sounds/minimal/player_join.mp3',
question_reveal: '/sounds/minimal/question_reveal.mp3',
hover: '/sounds/minimal/hover.mp3',
countdown: '/sounds/minimal/countdown.mp3',
},
rgb: {
correct: '/sounds/rgb/correct.mp3',
@@ -86,6 +106,11 @@ export const soundPaths: Record<ThemeName, Record<SoundEffect, string>> = {
victory: '/sounds/rgb/victory.mp3',
defeat: '/sounds/rgb/defeat.mp3',
select: '/sounds/rgb/select.mp3',
game_start: '/sounds/rgb/game_start.mp3',
player_join: '/sounds/rgb/player_join.mp3',
question_reveal: '/sounds/rgb/question_reveal.mp3',
hover: '/sounds/rgb/hover.mp3',
countdown: '/sounds/rgb/countdown.mp3',
},
anime: {
correct: '/sounds/anime/correct.mp3',
@@ -96,6 +121,11 @@ export const soundPaths: Record<ThemeName, Record<SoundEffect, string>> = {
victory: '/sounds/anime/victory.mp3',
defeat: '/sounds/anime/defeat.mp3',
select: '/sounds/anime/select.mp3',
game_start: '/sounds/anime/game_start.mp3',
player_join: '/sounds/anime/player_join.mp3',
question_reveal: '/sounds/anime/question_reveal.mp3',
hover: '/sounds/anime/hover.mp3',
countdown: '/sounds/anime/countdown.mp3',
},
}
@@ -110,4 +140,9 @@ export const fallbackSoundConfigs: Record<SoundEffect, { frequency: number; dura
victory: { frequency: 523, duration: 0.5, type: 'sine' },
defeat: { frequency: 196, duration: 0.5, type: 'sine' },
select: { frequency: 600, duration: 0.08, type: 'sine' },
game_start: { frequency: 440, duration: 0.4, type: 'sine' },
player_join: { frequency: 520, duration: 0.12, type: 'sine' },
question_reveal: { frequency: 700, duration: 0.2, type: 'triangle' },
hover: { frequency: 400, duration: 0.03, type: 'sine' },
countdown: { frequency: 600, duration: 0.15, type: 'square' },
}