Hay proyectos que nacen de una necesidad técnica y proyectos que nacen de una tarde de domingo con una niña pequeña mirando la pantalla. Este es del segundo tipo. 🙂
EL PUNTO DE PARTIDA
Mi hija quería jugar a un juego de mesa y tocaba tirar dados. Dados físicos que, como siempre, acaban debajo del sofá a los cinco minutos. Así que improvisé: abrí el navegador, busqué «tirar dado online» y aparecieron veinte páginas llenas de anuncios, banners parpadeantes y un dado pixelado de 2003.
Ella me miró con cara de «y esto es lo que tienes…».
Ahí empezó el proyecto.
LA IDEA
Hacer un lanzador de dos dados que fuera bonito de verdad. No una utilidad fea envuelta en publicidad, sino algo que apeteciera usar. Y que funcionara sin internet, sin instalaciones raras, sin abrir el navegador. Como una app normal.
El reto era ese: que ella lo abriera, lo entendiera sin explicación, y que le gustara mirarlo… y a la vez, que no distrajera de su función principal: dar servicio al juego de mesa que tienes entre manos.
Así de sencillo…
LA PARTE TÉCNICA (sin aburrir)
La app está hecha con Electron que, según Claude, es la tecnología que te permite coger una página web y convertirla en una aplicación de escritorio real. Digo «según Claude» porque «yo no había oído hablar de Electron en la vida, hulio«.
El proyecto empezó usando Pygame, ante las limitaciones estéticas encontradas (seguramente no irresolubles) pasamos por una web, y finalmente volvimos a una app de escritorio desde esa web…
A la izquierda una de las primeras versiones en Pygame, a la derecha la app final (hoy 🙂 ).
Por dentro por tanto es HTML, CSS y JavaScript de toda la vida. Sin frameworks, sin dependencias raras. Lo más «avanzado» son los dados en 3D, que están hechos únicamente con CSS: seis caras, rotaciones reales en el espacio, y una animación de giro que dura exactamente 0,6 segundos antes de enseñar el resultado. Todo guardado en local para que funcione sin conexión.
El diseño va de oscuro tirando a azul marino, con efecto cristal en el panel central (ese truco de fondo semitransparente con desenfoque que está muy de moda y que, hay que admitirlo, queda bien). Las fuentes son Poppins para los textos y Orbitron —esa tipografía con aire de marcador digital— para el número total.
El diseño corre a cargo de Gemini, en una terna que llevo usando ya para algunos proyectos:
- le paso el borrador del diseño (la primera versión hecha con Claude) a ChatGPT, al que le pido de modo sencillo que «me haga un prompt para Gemini que luego pasaremos de nuevo a Claude«.
- Gemini recibe ese prompt más amplio y el mismo pantallazo que ChatGPT.
- Y el diseño que me da es el que finalmente llega a Claude.
Este fue el diseño de Gemini.
ITERAR CON UNA NIÑA DE SEIS AÑOS
Lo interesante del proyecto no es el código. Es el proceso de enseñárselo a ella y observar qué pasaba.
Primera versión: los dados giraban pero el resultado tardaba en aparecer. Su reacción: golpeaba el botón otra vez porque creía que no había funcionado. Lección: el botón tiene que bloquearse visualmente durante la animación para que quede claro que la máquina está «pensando».
El sonido lo añadí porque lo pidió ella literalmente. «¿Por qué no hace ruido?». No tenía respuesta. Añadí un efecto de dados rodando y el nivel de satisfacción subió notablemente.
Las partículas doradas cuando salen dos seises fue el momento favorito de las pruebas. La primera vez que salió doble 6 y explotaron esas bolitas brillantes por la pantalla, se giró a mirarme con los ojos como platos. Mis dieses. Eso no se diseña, se descubre iterando.
El historial de las últimas cinco tiradas vino porque ella quería recordar «cuánto había sacado antes». Cinco burbujas con los resultados anteriores, y asunto resuelto.
LO QUE ME LLEVO
Los mejores beta testers no son los que saben de tecnología. Son los que usan las cosas sin preconcepciones y te dicen exactamente lo que sienten sin filtro.
Ella nunca me dijo «la UX del botón no comunica el estado de carga». Me dijo «vuelve a poner el botón que desaparece». Es lo mismo, pero mejor.
El proyecto está acabado en el sentido de que cumple su función. Y seguramente lo reabra en algún momento para añadir más dados, o colores, o quién sabe qué se le ocurre la próxima vez que nos sentemos juntos delante del ordenador.
Mientras tanto, los dados físicos siguen debajo del sofá. 🙂
UPDATE: la segunda versión de la app en este post!
