Es una página web que permite al usuari@ (entre nuevos y experimentados), poder filtrar y ordenar una lista de campeones de League of Legends para seleccionar uno en específico y ver sus estadísticas generales (more stats) y principales (ataque, defensa, magia y dicultad), todo esto con el objetivo de tener un campeón con mayor ventaja que otro.Planning 👉Trello
¿Quienes son los principales usuarios del producto?
Jugador@s de esports (deporte electrónico) que no conocen el juego, entre 10 y 30 años de edad (no excluyente)
interesados en el modo de juego MOBA (Multiplayer Online Battle Arena).
¿Cuáles son los objetivos de estos usuarios en relación con el producto?
El objetivo de estos invocadores (usuarios dentro del juego) es poder conocer las diferentes estadísticas de los más de 140 campeones del juego,
para crear estratégias que les permita llevarse la victoria en la grieta (campo de batalla).
¿Cuáles son los datos mas importantes que quieren ver en la interfaz y por qué?
*Poder ver a los campeones por imagen y ver sus atributos principales
- Una barra de navegación para filtrar y ordenar la vista de la lista de campeones.
*Información estadística de los campeones, tales como su ataque, defensa, armadura, maná, poder de habilidad (mágia), entre otros. - Un promedio de las estadísticas por rol para que el usuario pueda identificar las fortalezas y debilidades de cada clase.
¿Cuáles son los objetivos de estos usuarios en relación con el producto?
Su objetivo es tener la información mas completa del juego y sus personajes para seleccionar un campeón que se adecue mas a sus gustos para iniciar el juego.
¿Cuándo utilizan o utilizarían el producto?
A la hora de planear una estrategia de juego, para conocer mejor a su campeón y poder acceder a los datos de sus counters, (campeones enemigos) y como hacen sinergia distintos campeones para conformar el mejor equipo. Los usuarios suelen buscar las estadisticas del equipo enemigo cuando estamos en pantalla de carga, antes de iniciar la partida.
HISTORIA DE USUARIO 1 (H.U.1): HU1: Pantalla de inicio : COMO jugador@ de lol QUIERO leer una breve descripción del juego e ingresar mi nombre, PARA sentir la experiencia más personalizada y tener una idea general de que trata el juego.
Criterios de aceptación: 🤔
-Que el usuario visualice una pantalla de inicio.
-Que el usuario pueda ingresar su nombre en un campo (input).
-Que el usuario pueda darle click a un botón que lo dirija a una siguiente pagina donde vera un listado de campeones.
Definición de terminado: ✔
-Hacer test
-Pagina responsive .
-Usar lint para evaluación de código (correcciones de sintaxis).
-Subir a github
-Desplegar en Github pages.
Testing con usuarios :
- Al inicio no entendían (como figura en la primera HU) que era LOL.
- Resaltaron no entender que era un invocador (por lo que cambiamos el término como 'ingrese su nombre')
- Resaltaron no ver un botón de start, y no entendían el botón de listado de campeones por lo que optamos en colocar un solo botón de start que los dirija a otra página donde en una etiqueta se dijera que elijan a un campeón.
- El testing de la primera HU pasó testing de la mayoría de usuarios.
HISTORIA DE USUARIO 2 (H.U.2):HU2: Visualizar lista de campeones : Como jugador@ de lol quiero visualizar una lista de campeones para ver todos los campeones disponibles por nombre en orden alfabético y al reverso (de la Z a la A)
Criterios de aceptación: 🤔
-Visualizar una lista de campeones con su nombre e imagen
-Se organizan todos los campeones en orden alfabético de la A a la Z
-Se organizan todos los campeones de la Z a la A
-Tiene la vista de la barra de búsqueda: icono de buscar por nombre, por clases
por nivel de dificultad y el ícono de sort (ordenar A-Z Z-A) (sin funcionalidad)
Definición de terminado: ✔
-Hacerle testing al resultado (Pruebas unitarias)
-Pagina responsive
-Usar slint para evaluación de código.
-Refactorizar
-Subir a github
-Desplegar en Github pages.
Testing con usuarios :
- Les gusto el despliegue, nos recomendaron disminuir tamaño de letra
HISTORIA DE USUARIO 3 (H.U.3):HU3: Como jugador@ de lol Quiero poder hacer un hover un champ de la lista de campeones Para poder ver un card con la información básica del campeón
Criterios de aceptación: 🤔
-El usuario puede ver un card de campeón al hacer hover
-Realizar el boton de "ver más"(solo css)
Definición de terminado: ✔
-Hacerle testing al resultado (Pruebas unitarias)
-Usar slint para evaluación de código..
-Refactorizar
-Subir a github
-Desplegar en Github pages.
HISTORIA DE USUARIO 4 (H.U.4):HU4: Como jugador@ de lol Quiero poder buscar a un champ por su nombre Para acceder mas rapido a la informacion que quiero ver
Criterios de aceptación: 🤔
-El usuario puede buscar por nombre de campeón
-Hacer que se actualice la lista con cada carácter colocado en la barra de búsqueda
-Que le dé un mensaje de error al usuario si el input no coincide con ninguna búsqueda
-Función filtrar por nombre
Definición de terminado: ✔
-Hacerle testing al resultado.
-Usar slint para evaluación de código.
-Refactorizar.
-Subir a github.
-Desplegar en Github pages.
Testing con usuarios :
- No sugirieron colocar un champion not found.
HISTORIA DE USUARIO 5 (H.U.5):HU5:YO como jugador@ de lol quiero poder filtrar por dificultad para saber cuántos campeones hay disponibles por cada dificultad
Criterios de aceptación: 🤔
-Función filtrar por dificultad
-Al presionar la barra donde dice "seleccionar la dificultad" se despliegan las opciones
-Se organiza la lista de campeones por dificultad
Definición de terminado: ✔
-Hacerle testing al resultado.
-Usar slint para evaluación de código.
-Refactorizar.
-Subir a github.
-Desplegar en Github pages.
Testing con usuarios :
- Consideraron que sería mejor si fuera una sola barra.
- Nos sugieron el color de shadow.
HISTORIA DE USUARIO 6 (H.U.6):HU6: Como jugador@ de lol quiero poder filtrar por clase de campeón para elegir con que tipo de juego me siento afín.
Criterios de aceptación: 🤔
-Visualizar una lista de campeones con su nombre e imagen por rol
-Se organizan todos los campeones en orden a su clase al darle click a un boton del navbar
Definición de terminado: ✔
-Hacerle testing al resultado.
-Usar slint para evaluación de código.
-Refactorizar
-Subir a github
-Desplegar en Github pages.
HISTORIA DE USUARIO 7 (H.U.7):HU7: Como usuari@ quiero poder ordenar a los campeones de la A-Z y de la Z a la A para tener más opciones de búsqueda en la página.
Criterios de aceptación: 🤔
-Función sort para devolver el arreglo "ordenado"
-Función reverse para devolver la función ordenada al revés
-Se visualiza un dropdown con las opciones
Definición de terminado: ✔
-Hacerle testing al resultado (Pruebas unitarias)
-Usar lint para evaluación de código (correcciones de sintaxis).
-Refactorizar
-Subir a github
-Desplegar en Git hub pagues.
HISTORIA DE USUARIO 8 (H.U.8):HU8: Como jugador quiero 2 botones uno de jugar y otro par saber mas del campeón elegido
Criterios de aceptación: 🤔
-El usuari@ tiene dos botones uno de play y otro de more stats para saber más estadísticas de su campeon
-Utilizar Html semántico.
-Utilizar manipulación de DOM para creacion del card.
-Usar funciones para el dinamismo y mostrar las estadísticas a traves de la data.
-El usuario visualiza un modal con todas las estadísticas de su campeón.
-El usuario ve un botón X para retornar a la página anterior
Definición de terminado: ✔
-Hacer test
-Usar slint para evaluación de código.
-Refactorizar
-Subir a github
-Desplegar en Git hub pagues.
Prototipo incial no aplicado!
Testing con usuarios :
- Nos indicaron cambiar el color de letra
- Nos indicaron colocar los botones menos grandes
- Entendieron el dinamismo hacia el modal
- Nos pidieron aumentar el tamaño del boton x de retorno
HISTORIA DE USUARIO 9 (H.U.9):HU9: Como jugador de lol quiero ver paginas de builds para saber como jugar al campeón
Criterios de aceptación: 🤔
-Hay una barra con opciones para páginas de builds de campeones
-El usuario al darle click se redigirá a dichas páginas
Definición de terminado: ✔
-Página responsive.
-Usar slint para evaluación de código.
-Subir a github.
-Desplegar en Github pages.
Testing con usuarios :
- Nos sugirieron ponerle una linea que diferencia el titulo de los li con los links
HISTORIA DE USUARIO 10 (H.U.10):HU10: Como jugador@ de lol quiero tener la opción de ver más estadísticas para tener información más detallada del campeón
Criterios de aceptación: 🤔
-El usuario visualiza un modal al darle click al botón "more stats" con estadísticas adicionales
-Se despliega y encuentra 2 botones uno de play y una x para retornar
Definición de terminado: ✔
-Pagina responsive.
-Usar lint para evaluación de código.
-Refactorizar
-Subir a github
-Desplegar en Github pages.
HISTORIA DE USUARIO 11 (H.U.11):HU11: YO como usuari@ nuev@ quiero que mi nombre aparezca al inicio de la página para sentir que estoy en sesión.
Criterios de aceptación: 🤔
-Que el usuario visualice su nombre al cargar la segunda interfaz permanentemente
Definición de terminado: ✔
-Usar lint para evaluación de código.
-Subir a github
-Desplegar en Git hub pagues.
Testing con usuarios :
- Hicimos esta parte por sugerencia de una compañera
HISTORIA DE USUARIO 12 (H.U.12):HU12: YO como usuari@ quiero tener un boton que me dirija a la parte superior cuando haya bajada hasta abajo para sentirme mas cómod@ al darle click y que suba automáticamente.
Criterios de aceptación: 🤔
-Que el usuario visualice el boton up al bajar desde la segunda interfaz permanentemente
Definición de terminado: ✔
-Pagina responsive.
-Usar lint para evaluación de código
-Subir a github
-Desplegar en Github pages.
Testing con usuarios :
- Hicimos este boton up por sugerencia en un feedback con una compañera
HISTORIA DE USUARIO 2 (H.U.13):HU13: Como usuari@ de lol quiero poder ver una pantalla con los promedios estadísticos de campeones por clase para saber como es el promedio por rol.
Criterios de aceptación: 🤔
-Se visualiza un ícono por cada clase
-Al clickear un ícono, se despliega información sobre el rol elegido
-Se muestra una definición de la clase, un slider de imágenes y los promedios de las estadísticas principales para determinar las fortalezas y debilidades de cada rol
-Hacer función reduce por cada rol
Definición de terminado:* ✔
-Realizar test unitarios. -Pasar Eslint -Hacer commit al master -Hesplegar en gb pages.
FEEDBACK de las coaches :
- Testear el diseño de prototipos con usuarios.
- Usar checklist en trello.
- Definir mejor la definición de terminado.
- Separar en dos HU los estilos de CSS de las funciones JS.
- Replantearnos los test. (no calcular por lenght)
- Hacer testing de función map.
- Refactorizar archivos para evitar código repetitivo.
- Mejorar el uso del HTML semántico.
- Colocar el alt a las etiquetas img.
- Nos ayudaron con las lineas sin cubrir de los test.
- Usar método reduce para el cálculo agregado.
RESPONSIVE DESKTOP (ALL DEVICES SCREENS): 
RESPONSIVE IPHONEX IPAD-PRO ( & ALL DEVICES SCREENS):
