Se trata de una pequeña aplicación en formato mobile presentando un minijuego donde en función del tipo de pokémon que se haya escogido deja acceder a secciones de la aplicación para conseguir distintos secretos. Una vez se recojan los 3 secretos el minijuego se acaba y se resetea.
El objetivo es probar herramientas y nuevos enfoques pensando en la escalabilidad y mantenibilidad de un proyecto (así que hay cosas innecesarias para una escala tan pequeña pero que están pensadas para un proyecto de escala grande).
La idea de la aplicación vino a raíz de estudiar los artículos citados a continuación en busca de mejorar la calidad de código de lo que me encuentro en el día a día.
Tengo esta misma aplicación en React, usando Material y Redux.
Añado tests end to end (en este caso integración) con Cypress siguiendo este tutorial.
Para lanzar ejecutar npx cypress open o npm run cy:open
Documentación para tests de forma condicional.
Estoy probando el flujo completo del minijuego de forma que pueda experimentar sin romper la funcionalidad.
Uso signals para la gestión de pokemon, secretos y usuario según la explicada en este artículo con observables y adaptada a signals en vez de observables de acuerdo a lo establecido en el siguiente artículo.
Al principio estaba usando una api externa para autenticar pero luego lo dejé como gestión desde localStorage. Dejé la misma contraseña y el correo fijados en código para todos los usuarios porque no me interesa que tengan que recordar credenciales. Lo único que van a necesitar para acceder es recordar su nombre de usuario.
En la rama firstVersion se tiene la versión original del estado basado en redux con signals: ´´´ Se crea un servicio (auth) para manejar el estado del usuario en la aplicación. Se ha optado por sustituir la estrategia de observables por las signals, de acuerdo a este artículo y a este otro artículo. ´´´
En esta versión de la web se introduce la gestión del estado con la biblioteca SignalStore de NgRx según este tutorial y usando este repositorio como guía.
Los estilos están organizados según una arquitectura ITCSS copiando este repo de github. Esto permite reutilizar código css usando elementos como si se tratase de una librería completamente personalizada. Adicionalmente para ayudar a la claridad y mantenibilidad, uso notación BEM en los nombres de las clases CSS. No me acaba de convencer el estilo de tailwind o de hacer una librería propia parecida porque implica tener un template html muy cargado de texto y entiendo que se pierde legibilidad a la hora de del mantenimiento. Me quedo con los estilos en css pero la idea es componentizar al máximo las páginas para favorecer la reutilización. En este sentido estoy pensando más en imitar la composición de React aprovechando la flexibilidad de los nuevos componentes standalone de Angular.
Uso el Component Dev Kit (cdk) de Angular Material para modales y otros componentes de forma que me ayude con la funcionalidad y accesibilidad. De esta manera puedo tener rápido acceso a funcionalidades completas en cuanto a accesibilidad y usabilidad pero manteniendo los componentes completamente personalizables.
Siguiendo la filosofía del cambio de estilos para el modo oscuro se implementa un cambio de estilos global en función del tipo de pokémon que se haya seleccionado. Así, se tiene rojo, verde y azul. Tomé el formato de este artículo aunque aquí no hay un estilo "modo oscuro" como tal.
Uso la configuración de colores mediante tono, saturación y luz (Hue, Saturation, Lightness) para interaccionar de forma más intuitiva con la paleta de colores. El porqué en este artículo;
Estoy cogiendo algunos estilos de codepen como el input o el button. Estilar o componentizar este tipo de elementos no es algo que forme parte de este proyecto, así que no están bien pulidos.
Las imágenes usadas en esta aplicación fueron obtenidas de las siguientes fuentes:
- iconos de flaticon
- las imágenes de los secretos están sacadas del usuario CitronLegacy en civitai.com
- el mapa fue cogido de esta página
- la imagen de Oak para el modal de aquí
- las imágenes de los pokémon en pequeño son sprites oficiales