wildcard-shuffler

Generador de reglas caseras para la carta comodín de UNO®: en cada visita saca una de 35 acciones al azar y la dibuja sobre una carta estilizada con los cuatro colores del juego.

Stack tecnológico

Frontend: Astro 7 + TypeScript, Tailwind v4, canvas-confetti

Conceptos y patrones

• Sitio estático con la aleatoriedad resuelta en cliente para no servir siempre la misma acción
• Ajuste tipográfico por búsqueda binaria (fitTextToDisc()) dentro de un disco elíptico rotado 35°
• Recálculo con ResizeObserver y espera de carga de fuentes antes de medir
• Tilt 3D que sigue al puntero en escritorio y al giroscopio en móvil, interpolado con lerp
• Colores del juego como tokens de tema de Tailwind v4
• prefers-reduced-motion respetado; confeti solo en las acciones marcadas como piadosas

Notas arquitectónicas

El sitio es estático, así que si generaba la acción en build todos veían la misma carta hasta el siguiente deploy; por eso moví el sorteo a un script de cliente y dejé el HTML como cascarón. Lo que más me costó fue el texto, porque son 35 acciones de largo muy distinto y tienen que caber dentro de un disco elíptico rotado, así que en vez de tallas fijas por rango de caracteres hice una búsqueda binaria del tamaño de fuente que todavía entra, recalculada con ResizeObserver y después de que las fuentes cargan (medir antes daba resultados mal calibrados).

Agregar acciones es editar el arreglo ACTIONS en src/utils/wildcard.ts; el tamaño de fuente se acomoda solo.

Aviso legal

Proyecto no oficial, hecho por fan y sin afiliación con Mattel, Inc. UNO® es marca registrada de Mattel. Genera reglas caseras originales para mazos que ya tienes.