El propósito: probar Claude Sonnet con un proyecto sencillo
Quería probar Claude Sonnet en un proyecto real, sin demasiada complejidad. Había oído hablar de Cursor y está todo el mundo hablando del combo Cursor + Claude en Twitter.
Magic: The Gathering me gusta, así que elegí algo relacionado. El objetivo era ver cómo funciona en desarrollo web simple y aprender en el proceso. Un proyecto pequeño, pero completo, para evaluar sus capacidades.
Jugué a Magic en el 97 y estoy jugando ahora online desde hace unos años.
El juego ha evolucionado muchísimo desde entonces: cuando yo empecé apenas habría 5 ó 6 colecciones, calculo a ojo unas 1.500 cartas… en 30 años, a 3-4 colecciones anuales, imaginaros.
Y no solo el número de cartas; antes la idea era sacar algunos bichos gordos y darle golpes al contrario hasta dejarlo a cero de vida.
Ahora hay maneras elegantísimas de cargártelo, infinitas sinergias, combos curradísimos… el juego ha multiplicado de tal manera sus posibilidades que en ocasiones resulta incluso frustante (sí…).
El cliente de juego está curradísimo, y me parece increíble que sea posible jugar, dado el número y complejidad de las reglas.
La idea: visualizar cartas aleatorias de Magic: The Gathering
La idea era simple: un botón, una carta aleatoria. Quería descubrir cartas nuevas de forma casual. La API pública de Scryfall lo hacía posible sin complicaciones. Un concepto directo: clic y carta.
Claude me propuso usar la API sin yo indicarle nada. Ya no es solo que haga más rápido lo que tú sepas hacer, sino que ve la manera de hacerlo de modo casi directo.
Yo conocía la existencia de este API, pero ni idea de cómo meterle mano.. XD
Desarrollo inicial: de HTML estático a aplicación funcional
Empezamos con HTML/CSS/JS básico.
Integramos la API de Scryfall para obtener cartas aleatorias. Mostramos la información esencial: nombre, tipo, coste de maná, texto. Una base funcional desde la que crecer.
La iteraciones de estilo son por supuesto inmediatas, y Claude las entendía perfectamente a la primera.
Iteraciones principales: evolución del proyecto
Añadimos símbolos visuales para el coste de maná (sin usar los oficiales por copyright).
UPDATE: he metido finalmente los oficiales tras repasar el tema legal y ver que es posible atribuyendo y respetando alguna cosa más.
En cuanto a distribución general de elementos, me quedé con la primera propuesta que Claude hizo: lo clavó.
Claude propuso una vibrante combinación de colores y unos iconos sencillos pero muy claros.
También incluimos algo más de información extra: set (colección) con icono, año de publicación, flavor text (un pequeño texto que parece sacado de un libro de leyendas que acompaña a cada carta: puro lore) y nombre del ilustrador.
Y ajustes de diseño: dos columnas, colores dinámicos según el color de la carta para los bordes de las cajas de información.
Finalmente llegaron los filtros: primero por Set, después por Ilustrador.
El filtro de ilustradores me salió «solo», por una razón muy concreta: ver cartas del mismo artista muestra estilos visuales coherentes.
Y es porque yo tenía amigos que eran directamente fans de un determinado autor y coleccionaban sus cartas. ¿Qué mejor que seleccionar a un autor que te guste e ir viendo sus diferentes creaciones para el juego?
Una dificultad viene dada en los filtros por el elevado número de sets e ilustradores, y la posibilidad de que un usuario seleccione una combinación que no exista.
Intenté hacer un pre-check pero enlentencía mucho la carga de los desplegables.
Finalmente aposté por reducir el número de sets y gestionar el posible error cambiando el mensaje de advertencia en el popup. No me tiene contento 100% pero ahora mismo es lo que hay.
Pruebas y refinamiento: puliendo detalles
Pequeños detalles.
- Corregimos estilos, bordes y espaciados.
- Tradujimos todo al inglés.
- El botón cambia de color aleatoriamente entre los 5 colores de MTG.
- Añadimos un favicon con calavera.
Pequeños toques que mejoran la experiencia. 🙂
Cambios y ajustes: iteración continua. GitHub Desktop.
Como he dicho por arriba, limitamos los sets a los principales para no saturar el selector. Sí mejoramos la carga de ilustradores para incluir más, incluso los antiguos.
Optimizamos el tamaño de las imágenes para apreciar mejor las ilustraciones. También incluí una imagen de fondo aleatoria, que le da un toque muy chulo a la página. En definitiva, ajustes constantes para mejorar la usabilidad.
Para controlar las versiones que iba haciendo, me sugirieron usar GitHub, concretamente GitHub Desktop.
El último empujón: Related Cards (y por qué lo descarté)
Implementé una sección de «Related Cards» que mostraba cartas relacionadas por color y keywords. Funcionaba, pero añadía complejidad sin aportar mucho valor. Además de que mi criterio de relación (incluir una serie de keywords en común) era bastante burdo, así que no eran cartas «tan relacionadas».
Al final, preferí mantener el enfoque simple: una carta, su información, y ya. A veces menos es más, y en este caso la simplicidad funciona mejor.
Se puede ver el proyecto en https://javierferraz.com/magic/.
Cualquier comentario o sugerencia es bienvenido. Gracias si has leído hasta aquí … 😉
Algunos pantallazos más:
