🎵 Whitney's MassBeat Challenge

Juego web multijugador, accesible a personas ciegas.

Escrito con React y Node.js + WebSockets.

Presentado en la a11yConf 2025, la conferencia de accesibilidad digital, con 55 jugadores concurrentes entre ellos y ellas várias personas ciegas.

📁 Estructura del Proyecto

/server    - Backend Node.js + TypeScript + socket.io
/client    - Frontend React + TypeScript + Vite

🚀 Cómo Arrancar el Proyecto

Backend (Servidor)

1. Navega a la carpeta del servidor:

cd server

2. Instala las dependencias (si no lo has hecho ya):

npm install

3. Arranca el servidor en modo desarrollo:

npm run dev

El servidor estará escuchando en http://localhost:3001

Frontend (Cliente)

1. Abre otra terminal y navega a la carpeta del cliente:

cd client

2. Instala las dependencias (si no lo has hecho ya):

npm install

3. Arranca el frontend en modo desarrollo:

npm run dev

El frontend estará disponible en http://localhost:5173

🎮 Flujo del Juego

Para Jugadores (http://localhost:5173/)

1. Usuario abre la app en el navegador
2. Introduce su nombre y pulsa "Unirse"
3. Se conecta al servidor vía WebSocket
4. Espera a que el administrador inicie el juego
5. Cuando el juego empieza, el botón se habilita
6. Pulsa el botón en el momento exacto (objetivo: 7.646 segundos)
7. Ve su confirmación de pulsación
8. Espera a que termine la canción para ver la clasificación

Para Administrador

1. Introduce como nombre de usuario el valor configurado en VITE_ADMIN_NAME (por defecto: admin)
2. Accederás directamente al panel de administración
3. Ve la lista de jugadores conectados
4. Pulsa START para iniciar el juego (suena la canción)
5. Ve las pulsaciones de los jugadores en tiempo real
6. Cuando termina la canción, se muestra la clasificación automáticamente
7. Puede pulsar RESTART para volver a jugar

🎵 Configuración del Juego

• Canción: Whitney Houston - I Will Always Love You
• Ubicación: client/public/songs/Whitney Houston - I Will Always Love You.mp3
• Instante óptimo: 7.646 segundos
• Mecánica: Cada jugador puede pulsar solo una vez por ronda

⚙️ Variables de Entorno

El cliente utiliza variables de entorno que se incrustan en tiempo de build. Crea un archivo client/.env:

# Nombre de usuario para acceder al panel de administración (por defecto: admin)
VITE_ADMIN_NAME=tu_nombre_secreto

🔜 Próximos Pasos

• Sincronización de reloj mejorada para mayor precisión
• Mostrar clasificación en la vista de jugadores
• Panel de configuración para cambiar canción e instante objetivo
• Historial de partidas
• Sonidos de feedback
• Salas: poder unirse a una sala.
• Preteger el servidor: actualmente está totalmente expuesto

Licencia

Creative Commons Attribution 4.0 International Public License

Copyright © 2025 ctrl-alt-d.

Esta obra está licenciada bajo la Creative Commons Attribution 4.0 International (CC BY 4.0).

PERMISOS:

• Se permite copiar, distribuir y modificar este proyecto.
• Se permite usarlo con fines comerciales o no comerciales.
• Se permite crear obras derivadas.

CONDICIÓN:

• Debe darse crédito adecuado al autor original, incluir un enlace a esta licencia e indicar si se han realizado cambios. El reconocimiento recomendado es: "Juego creado por ctrl-alt-d".

DESCARGO DE RESPONSABILIDAD: LA OBRA SE PROPORCIONA "TAL CUAL", SIN GARANTÍAS DE NINGÚN TIPO.

Texto legal completo: https://creativecommons.org/licenses/by/4.0/legalcode