Guía de uso
Ruleta Adrià es una ruleta de sorteos con un contador incorporado, hecha con HTML, CSS y JavaScript puro: sin frameworks, sin dependencias y sin servidor. Todo ocurre en tu navegador. Esta guía repasa cada función, de arriba abajo.
Empezar en treinta segundos
- Abre la ruleta y despliega 📝 Entradas en el panel de la derecha.
- Escribe los nombres, uno por línea. La ruleta se redibuja sola.
- Pulsa el botón GIRAR del centro (o la tecla Espacio).
No hay que registrarse ni guardar nada a mano: el estado se conserva solo en tu navegador y sigue ahí la próxima vez que entres.
En pantallas estrechas el panel se esconde. El botón ☰ Panel de la esquina superior derecha lo abre y lo cierra.
Entradas
El cuadro de texto es la única fuente de verdad: una línea, una porción de la ruleta. Las líneas vacías se ignoran y el contador de la pestaña te dice cuántas entradas hay. No hace falta pulsar «guardar»: se aplica al escribir.
Los duplicados no se quitan solos a propósito: repetir un nombre es la forma de darle más peso en el sorteo. Dos líneas «Ana» = el doble de probabilidad.
Girar y ganar
El botón central gira la ruleta; la aguja de arriba marca el resultado. Mientras gira suena un tic por cada porción que pasa, cada vez más lento, y al parar se anuncia el ganador con un diálogo y un chorro de burbujas.
Qué hacer con el ganador
- Quitarlo — el diálogo del ganador ofrece eliminarlo de la lista.
- Que se quite solo — activa «Eliminar el ganador automáticamente» en ⚙️ Opciones. Aparece un aviso con Deshacer por si te arrepientes.
- Dejarlo — no toques nada y seguirá compitiendo en el siguiente giro.
La duración del giro se ajusta entre 2 y 14 segundos en ⚙️ Opciones. Debajo de la ruleta se queda visible el último ganador.
El azar, en serio
Casi todas las ruletas de la web hacen lo mismo: lanzan una animación con un ángulo aleatorio y miran dónde ha caído. Eso reparte el azar según cómo se acumulan los redondeos del ángulo, no según las entradas. Aquí el orden es el contrario:
- Primero se sortea el ganador entre las entradas.
- Después se calcula la animación para que la aguja caiga exactamente ahí.
El sorteo usa crypto.getRandomValues() —el generador criptográfico del
navegador, no Math.random()— con rechazo de módulo: si el número
obtenido cae en el resto que no reparte por igual entre todas las entradas, se
descarta y se pide otro. Así ninguna porción sale favorecida, ni siquiera un poco.
Consecuencia práctica: con 3 entradas cada una tiene exactamente un 33,333… %, y el punto exacto donde para la aguja dentro de la porción también es aleatorio, para que no se note el truco.
Presets
Un preset guarda una lista de entradas con nombre, para no reescribirla cada vez: «Clase de 2º», «Qué cenamos», «Sorteo del viernes»…
| Botón | Qué hace |
|---|---|
| 📂 Cargar | Sustituye las entradas actuales por las del preset elegido. |
| ➕ Guardar como… | Crea un preset nuevo con las entradas de ahora mismo. |
| ♻️ Actualizar | Sobrescribe el preset seleccionado con la lista actual. |
| ✏️ Renombrar | Le cambia el nombre. |
| ❌ Borrar | Lo elimina, con confirmación. |
Cargar un preset no lo bloquea: puedes editar las entradas después. Si quieres conservar los cambios, pulsa ♻️ Actualizar; si no, vuelve a cargarlo.
Historial
Los 50 últimos ganadores con su hora, del más reciente al más antiguo. Sirve para resolver el clásico «¿pero no le tocó ya a este?». El botón 🧽 Limpiar historial lo vacía sin tocar las entradas.
Contador
La segunda pestaña es una cuenta atrás con el mismo aire: un aro que se vacía, dígitos grandes y aviso sonoro al terminar. Pensada para turnos, juegos de mesa, exámenes o cualquier cosa con tiempo.
Poner el tiempo
- Tiempos rápidos — las fichas de debajo del aro. De fábrica vienen 0:30, 1:00, 4:00 y 5:00; un toque y ya está.
- A medida — los campos de minutos y segundos del panel, y luego ✔️ Aplicar tiempo.
Personalizar los tiempos rápidos
Cada ficha se puede editar con el lápiz (✏️) o borrar, y con ➕ Añadir tiempo creas los tuyos. ↩️ Valores de fábrica devuelve los cuatro originales. En los diálogos el tiempo se escribe en texto libre:
| Escribes | Se entiende como |
|---|---|
1:30 | 1 minuto y 30 segundos |
90 | 90 segundos → 1:30 |
2m | 2 minutos |
45s | 45 segundos |
Opciones del contador
- Reiniciar solo al terminar — vuelve a empezar sin tocar nada.
- Pitido en los últimos 5 segundos — cuenta atrás sonora.
- Tic-tac cada segundo — el latido de fondo, por si molesta.
No se desfasa. El tiempo restante se calcula contra la marca de tiempo de finalización, no sumando intervalos. Aunque el navegador ralentice la pestaña en segundo plano, al volver el número es el correcto.
Al llegar a cero: cuatro campanadas, el aro se pone naranja, suben burbujas y salta un diálogo. Espacio inicia y pausa mientras estés en esta pestaña.
Sonido y efectos
La interfaz responde a casi todo: un tic al pasar por encima de los botones, un clic al abrir un cajón, el traqueteo del giro, la fanfarria del ganador…
- 🔊 Sonido — silencia o reactiva todo de golpe.
- Volumen — el deslizador de ⚙️ Opciones.
- 🫧 Efectos — apaga burbujas, peces y cáusticas. Útil en equipos justos o si prefieres un fondo tranquilo.
Los navegadores no dejan sonar nada hasta que interactúas con la página: el primer clic desbloquea el audio. Si el sistema tiene activado «reducir movimiento», las animaciones se moderan solas.
Atajos de teclado
| Tecla | Qué hace |
|---|---|
| Espacio · Enter | Gira la ruleta, o inicia y pausa el contador, según la pestaña abierta. |
| 1 | Ir a la pestaña Ruleta. |
| 2 | Ir a la pestaña Contador. |
| Esc | Cierra el diálogo abierto. |
Los atajos se desactivan mientras escribes en un campo de texto o hay un diálogo delante, para que Espacio siga siendo un espacio.
Tus datos no salen de aquí
No hay servidor, ni cuentas, ni analítica, ni peticiones a terceros: las fuentes,
los sonidos y los dibujos están en la propia página. Todo lo que escribes vive en
el localStorage de tu navegador, en tres claves:
| Clave | Contenido |
|---|---|
ruletaAdria.state.v1 |
Entradas, historial, opciones, preset activo y pestaña abierta. |
ruletaAdria.presets.v1 |
La lista de presets guardados. |
ruletaAdria.timer.v1 |
Tiempos rápidos, duración, tiempo restante y opciones del contador. |
⚠️ Restablecer todo (en ⚙️ Opciones) borra esas tres claves y deja la ruleta como recién instalada: entradas, presets, historial y tiempos rápidos. No se puede deshacer. Borrar los datos del sitio en el navegador hace lo mismo.
Easter eggs
El fondo no es sólo decorado. Prueba a tocar cosas:
Con los efectos apagados (🫧) no hay peces que espantar.
Usarla en tu ordenador
No hay nada que compilar ni instalar. Clona el repositorio y abre
index.html:
git clone https://github.com/AdriaBC06/ruleta-adria.git
cd ruleta-adria
Si el navegador bloquea las fuentes o los sonidos al abrir el archivo con
file://, levanta un servidor local —cualquiera sirve:
python3 -m http.server 8000
# y entra en http://localhost:8000Funciona sin conexión: es HTML, CSS y JavaScript con todos los recursos dentro de la carpeta. También puedes publicarla en tu propio GitHub Pages, Netlify o donde quieras, subiendo la carpeta tal cual.
Licencias y créditos
- Código — GPL-3.0-or-later. Puedes usarlo, estudiarlo, modificarlo y redistribuirlo, siempre que lo que publiques a partir de él siga siendo libre bajo la misma licencia.
- Arte y sonidos — Kenney, dominio público (CC0 1.0): los peces y algas del Fish Pack y los efectos de Interface Sounds.
- Tipografías — Istok Web (la alternativa libre más cercana a Frutiger, la tipografía que da nombre a la estética) y Quicksand, ambas con licencia SIL OFL 1.1 y autoalojadas.
El detalle archivo por archivo, con las modificaciones aplicadas a cada recurso, está en CREDITS.md.