MESA DE CONTROL DE RULETA / MAPA DE ESTADO
Define entradas y consulta el estado visible de la ruleta
Este panel de decisión relaciona el editor actual de ruleta: límites de entradas, orden de paleta, ajustes de giro, cálculo de rotación, historial, estado de eliminación y controles del navegador.
- 4 entradas iniciales localizadas
- 2–30 entradas · 80 caracteres
- 8 paletas · velocidad 1–10 · duración 2–15 s
Carril de entradas y orden de paleta
Al inicio, el editor crea cuatro entradas predeterminadas localizadas. Un valor guardado pickerWheelOptions solo se procesa como JSON cuando es un array con al menos dos entradas; las entradas necesitan campos string id y text, se limitan a 30 y las etiquetas se cortan a 80 caracteres. Un conjunto anterior de exactamente cuatro etiquetas inglesas predeterminadas se sustituye por etiquetas localizadas. Este registro no asigna un resultado de recuperación a valores guardados demasiado largos o inválidos.
01 · ENTRADA — Añadir, quitar, ordenar
Al añadir se recorta el texto y se corta a 80 caracteres, hasta 30 entradas. Quitar se detiene en dos entradas. Ordenar usa text.localeCompare; Shuffle es Fisher–Yates con Math.random() y targetIndex = Math.floor(Math.random() * (index + 1)).
02 · PALETA — Ocho conjuntos de color
Los temas visibles son vibrant, pastel, sunset, forest, ocean, candy, earth y neon. Los colores se repiten cíclicamente según el orden actual de entradas.
03 · CAMBIO — El tema reasigna el orden visible
Cambiar el tema vuelve a asignar colores de ese tema según el orden actual de entradas. Ordenar y mezclar también asignan colores desde ese orden.
Registro de paletas
Un tema cambia los colores de segmento asociados a la secuencia actual; no añade otro estado de entrada.
- vibrant
- pastel
- sunset
- forest
- ocean
- candy
- earth
- neon
Panel de cálculo de giro
La ruleta necesita al menos dos entradas. Un giro parte de la rotación actual y usa los valores visibles. Durante la duración calculada, el editor emplea una curva ease-out cubic.
01 · AJUSTES — Velocidad y duración
spinSpeed empieza en 5 y acepta 1–10. spinDuration empieza en 5 segundos y acepta 2–15 segundos.
02 · TIEMPO — Expresión de duración
actualDuration = spinDuration * 1000 / (spinSpeed / 5).
03 · ROTACIÓN — Rango de vueltas
Las vueltas van de 5 + spinSpeed a 8 + spinSpeed y usan Math.random() entre esos límites; la rotación total es rotations * 2 * Math.PI.
04 · SEGMENTO — Derivación del puntero
Al final, normalizedRotation = newRotation % (2 * Math.PI), pointerAngle = (2 * Math.PI - normalizedRotation) % (2 * Math.PI), y el índice de segmento es Math.floor(pointerAngle / anglePerOption).
Registro de salida, historial y eliminación
Cuando termina la animación, se muestra la etiqueta de entrada seleccionada, aumenta el total de giros y el resultado se inserta al inicio del historial. La pantalla conserva como máximo 10 registros de historial.
01 · HISTORIAL — Inserción al inicio, límite 10
La ruta final usa [newResult, ...previous].slice(0, 10). Cada resultado contiene el texto de entrada mostrado y una marca temporal.
02 · ELIMINACIÓN — Copia y retirada condicional
Al activar Elimination Mode se copian las entradas actuales. Tras un resultado, su entrada se retira solo cuando quedan al menos dos; de otro modo se mantiene la lista.
03 · REINICIAR — Reinicia rotación y etiqueta
Reset devuelve la rotación a 0 y borra la etiqueta mostrada. Con Elimination Mode activo y entradas originales, Reset restaura esa lista copiada.
Registro de claves y alcance de controles
El editor escribe su estado mostrado bajo claves localStorage nombradas. El historial solo se escribe cuando no está vacío; Clear history vacía el estado y elimina su clave.
OPCIONES — pickerWheelOptions
El estado de entradas se escribe como JSON tras cambios de opción. Las otras preferencias escritas son pickerWheelSound, pickerWheelEliminationMode, pickerWheelColorTheme, pickerWheelSpinSpeed, pickerWheelSpinDuration y pickerWheelTotalSpins.
HISTORIAL — pickerWheelHistory
Un historial no vacío se escribe bajo pickerWheelHistory. Clear history elimina pickerWheelHistory tras fijar el historial mostrado como lista vacía.
ENTRADA / VISTA — Teclado, sonido, pantalla completa
El botón y el canvas pueden iniciar un giro. Enter o Espacio pueden hacerlo si el elemento activo no es un INPUT. Se intenta inicializar AudioContext tras el primer document click y el sonido tiene un interruptor. Pantalla completa usa una API nativa cuando está disponible y, si no, una vista CSS de respaldo, incluida una rama de detección de iOS.
Notas de alcance
- Este panel describe rutas y fórmulas actuales del editor, no una evaluación de selección.
- El índice de selección se deriva de la rotación final normalizada y el ancho de segmento bajo el puntero.
- El editor usa Math.random() en las rutas de mezcla y giro; esta página no caracteriza esas salidas.
- Los valores guardados, la inicialización de sonido y pantalla completa se describen como rutas de código, no como expectativas de plataforma.
Continuar con controles cercanos
Cada herramienta enlazada tiene su propia interfaz y ruta de estado.
- Lanzar moneda
Abre la interfaz separada de moneda de dos caras.
- Sudoku
Abre un rompecabezas de cuadrícula con controles propios.
- Puzzle de palabras
Abre la interfaz de rompecabezas basada en palabras.
Preguntas sobre la mesa de control
¿Qué entradas hay al inicio?
El editor inicia con cuatro entradas predeterminadas localizadas. pickerWheelOptions se usa solo tras procesar JSON como array con al menos dos entradas; las válidas requieren id y text de tipo string, se conservan como máximo 30 y las etiquetas se cortan a 80 caracteres.
¿Qué temas de color son visibles?
Los nombres visibles son vibrant, pastel, sunset, forest, ocean, candy, earth y neon. Los colores se asignan cíclicamente por el orden actual de entradas, incluso después de cambiar tema.
¿Cómo se calculan duración y rotación?
spinSpeed es 1–10 y spinDuration es 2–15 segundos. actualDuration = spinDuration * 1000 / (spinSpeed / 5). La rotación usa un valor entre 5 + spinSpeed y 8 + spinSpeed y después una curva ease-out cubic.
¿Cómo se deriva la entrada mostrada?
Al final, el código normaliza con newRotation % (2 * Math.PI), deriva pointerAngle como (2 * Math.PI - normalizedRotation) % (2 * Math.PI), y toma Math.floor(pointerAngle / anglePerOption).
¿Qué hacen historial y Elimination Mode?
Un resultado se antepone y el historial se limita a 10. Al habilitar Elimination Mode se copian entradas actuales; tras un resultado se retira esa entrada solo si quedan al menos dos. Reset restaura las copiadas si el modo está activo.
¿Qué claves se almacenan?
El editor escribe pickerWheelOptions, pickerWheelHistory si no está vacío, pickerWheelSound, pickerWheelEliminationMode, pickerWheelColorTheme, pickerWheelSpinSpeed, pickerWheelSpinDuration y pickerWheelTotalSpins. Clear history elimina pickerWheelHistory.
Abrir los controles de ruleta
Define entradas, revisa paleta y ajustes, y usa los controles visibles de la ruleta.