Uno de los valores que nos devuelve la API del juego cuando le pedimos los datos de un jugador es el progreso. Esto nos indica el estado de los actos (hay cinco), es decir, si los ha completado o no.
Vamos a crear un componente, muy sencillo, que nos indique si el usuario ha completado un acto o no. Para indicar si el acto está completado o no usaremos una imagen (Sprites CSS), que estará oscurecida y con un candado cuando esté sin completar y sin el candado y bien clara cuando esté completado.
La imagen que usaremos como Sprite CSS es esta:
Lo primero que vamos a hacer es crear los estilos CSS, en nuestro fichero global de CSS, /assets/main.styl. Vamos a añadir el siguiente contenido:
Hemos creado unas clases CSS que nos van a permitir mostrar la imagen correspondiente a cada acto y sus dos estados: pending (sin completar) y done (completado). Si queremos mostrar el acto dos completado lo que tenemos que hacer es tan sencillo como darle las clases "act act2 done".
Esto nos mostraría la porción de imagen correspondiente al acto 2 completado, que lo estamos controlando con la propiedad CSS de background-positon.
Ahora tenemos que crear los archivos y directorios que vamos a utilizar con este componente de progreso de la historia del juego. Cuando juegas a Diablo III puedes subir niveles y hacer misiones especiales sin necesidad de completar la historia del juego.
Es por eso que implementamos este componente. Para ello, al mismo nivel del directorio /TopHeroes, creamos un directorio llamado /ProgressList. Dentro de este, creamos 2 ficheros: Index.vue y ProgressItem.vue.
Fíjate que no viene ordenado por actos, por lo que vamos a tener que realizar esta tarea de ordenamiento antes de poder iterar sobre el objeto de progression.
Lo primero que vamos a hacer es usar el componente (aunque esté vacío) en el componente padre, es decir, en /MainBlock/Index.vue. Los 3 pasos de siempre. Importar, habilitar, utilizar.
Todo lo que tiene este componente no requiere explicación, puesto que es un componente muy sencillo.
A modo de resumen este componente tiene definidas una prop, que son los actos, que los ordenamos a través de la función sortedActs (aunque en realidad es una computed property).
En el HTML iteramos sobre este objeto que contiene los actos ordenados del uno al cinco y cada elemento corresponde a otro componente (ProgressItem, que vamos a ver ahora) que recibe como parámetro un objeto con el acto (ej. act2) y el valor (ej. true).
El componente ProgressItem.vue tiene el siguiente contenido:
Aunque este componente es bastante sencillo, vamos a comentar un par de cosas:
La prop act tiene una función de validación distinta a las que hemos visto anteriormente. No es gran cosa, pero está comprobando que el numero de claves del objeto que recibe sea igual a 2. Muy simple.
La computed propertyactTitle nos devuelve un String dependiendo del valor del acto, es decir, si está completado o no. Para poder ver este texto, deberías dejar el ratón encima de dicho elemento unos segundos.
Lo diferencial de esto es que estamos incluyendo emojis (íconos) en el texto. ¡Sí! Los emojis los podemos usar como texto normal, usando las comillas, como si de un texto se tratara. 🤘😏🤘
Exceptuando un par de cosas, estos componentes que acabamos de crear no tenían complejidad alguna. Si has seguido todos los pasos correctamente, la app debería verse así:
Modificando los valores desde las Vue DevTools en el navegador, para ver ambos estados en acción:
Y esto sería todo. Ahora vamos a empezar con el bloque de la derecha de nuestro grid, donde trabajaremos con los stats del usuario y el tiempo jugado por héroe.
Quédate con lo de los emojis en mente, pues los volveremos a utilizar más adelante.
