Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
22H
28M
50S

Hero View

22/27

Lectura

Ahora que tenemos la p谩gina de Profile completa, y podemos navegar a la Hero, vamos a crear las funciones y componentes necesarios para esta vista.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 10

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

En respuesta a la pregunta de la clase: Si se le coloca esa propiedad a alg煤n elemento de recurso sucede que la imagen se descoloca y se visualizan 4 recursos pero todos recordados de mala forma. Al estar trabajando con 1 sola imagen para todos los recursos el posicionamiento deber铆a ser el adecuado y la linea que se le a帽ade lo distorsiona.

Vaya fumada de clase, casi que no la saco adelante :c

Bufff, este bloque estuvo largo pero logr茅 entenderlo, hubo un punto en el que me frustr茅 porque hab铆an componentes sin contenido y no pod铆a ver los resultados:( Pero todo genial hasta ahora, aunque en la p谩gina en producci贸n no se ven las habilidades pasivas ni las im谩genes鈥

Pens茅 que el tema se refer铆a a algo parecido a Hero Widget como en Flutter, me alegr茅 much铆simo pensando eso, pero nada que ver

Vi que en utilizas el forEach y map, 驴En qu茅 casos debo utilizar uno el otro? , Siempre me causa conflicto en cual situaci贸n debo utilizarlo

En la secci贸n d贸nde agrega el componente HeroDetailHeader, se muestran mal las etiquetas HTML.

Vaya clase! bastante contenido, pero al final de tanto analizar se entiende bien鈥
Solo una observaci贸n鈥

Cuando nos piden que importemos los componentes de atributos y habilidades y los registremos los mismos en el /Hero/Index.vue.

Nos indican importar el 鈥楬eroItems鈥

import HeroAttributes from './HeroAttributes/Index'
import HeroItems from './HeroItems/Index'

Pero registramos el 鈥楬eroSkills鈥

components: {
  BaseLoading,
  HeroDetailHeader,
  HeroAttributes,
  HeroSkills
}

En mi caso imagin茅 que la importaci贸n pertenecia al HeroSkills ya que comenzamos a trabajar con el posteriormente, de igual forma est谩 un poco confuso, si lo pudieran aclarar les agredezco!

Si las imagenes no les cargan es porque en el la url falto un / justo en esta parte

const host = `http://media.blizzard.com/d3/icons/skills/${sizes[1]}`

al final de la url debe ir el / ya que la url debe ser asi

http://media.blizzard.com/d3/icons/<type>/<size>/<icon>.png

no asi

http://media.blizzard.com/d3/icons/<type>/<size><icon>.png

Cada vez se ha vuelto mas complejo, pero todo bien!

Crei que nunca acabaria esta leccion no entiendo nada del juego pero si el codigo casi todo 馃槃

Vayamos por partes. Lo primero, importar el mixin de error y el componente Loading. En caso de error, usaremos el mixin. Mientras hagamos las llamadas a las APIs, usaremos el componente Loading hasta que se carguen los datos. Como tenemos dos llamadas de APIs (hero & items) distintas vamos a tener dos componentes Loading, uno para cada llamada.En la secci贸n de variables, hemos definido la variable hero y la variable items. Las dos llamadas que vamos a hacer son independientes la una de la otra, por lo tanto se van a hacer en paralelo. Por eso hemos incluido otras dos variables de control para saber si est谩n loading o no:data () { return { isLoadingHero: false, isLoadingItems: false, hero: null, items: null }}Lo siguiente es hacer las llamadas a las dos APIs. Ponemos el loading a true, llamamos a las APIs.En caso de error hacemos uso del mixin y si todo va bien, guardamos el resultado en la variable correspondiente.Por 煤ltimo, ponemos los loading a false. Con esto vamos a poder controlar la visibilidad del componente de Loading.Vemos que, efectivamente, se est谩n haciendo las dos llamadas a las APIs:Ahora que ya tenemos los datos necesarios, vamos a empezar con los componentes de la vista. La estructura de componentes que vamos a seguir es esta:> 馃摋 Si nunca has jugado a Diablo III, te recomiendo que leas esta gu铆a de controles de combate: https://eu.diablo3.com/es/game/guide/gameplay/combat-skillsPersonalmente, creo que esta es la p谩gina m谩s divertida de toda la app 馃馃ぉ馃帀.Vamos a pintar en pantalla:Los atributos (fuerza, vida, inteligencia, etc.) del personaje, incluyendo sus recursos:Recursos:Sus habilidades, tanto las activas como las pasivas (si las tiene, depende del nivel del personaje) y las runas (en caso de que tenga alguna, tambi茅n dependen del nivel).En esta parte veremos como crear componentes as铆ncronos (parecido a lo que hac铆amos con las rutas y el lazy load, solo ser谩n cargados cuando se requieran)Los objetos, junto con las joyas o gemas que puedan tener engarzadas.Para los objetos, pintaremos una barra de color seg煤n la calidad de los objetos: https://eu.diablo3.com/es/game/guide/items/equipment#item-qualityColor blanco: NormalColor azul: M谩gicoColor amarillo: RaroColor verde: Conjunto (otorgan bonificaci贸n extra cuando llevas el set completo)Color naranja: LegendariosVamos a construir algo parecido a esto, que es como se ven los objetos del personaje (en PC, para consola cambia):Aqu铆 hay objetos azules (m谩gicos) y amarillos (raros). Adem谩s vemos algunas gemas, por ejemplo, en el arma. Algo parecido a esto es lo que vamos a construir con los datos que nos devuelva la API de items.Lo primero es crear la estructura de carpetas. 隆Empecemos!Vamos a /views/Hero y creamos tres carpetas: HeroAttributes, HeroItems y HeroSkills. Creamos tambi茅n el componente HeroDetailHeader.vue, que no va a estar agrupado en carpetas. Deber铆as tener una estructura como esta:馃搨 /Hero鈹溾攢鈹馃搨 /HeroAttributes鈹溾攢鈹馃搨 /HeroItems鈹溾攢鈹馃搨 /HeroSkills鈹溾攢鈹 HeroDetailHeader.vue鈹斺攢鈹 Index.vueAhora, en nuestro componente /Hero/Index.vue, traemos el componente HeroDetailHeader:import HeroDetailHeader from './HeroDetailHeader'Y lo damos de alta para poder usarlo:components: { BaseLoading, HeroDetailHeader}Usamos los componentes:> Por ahora, ignora los erroresLos datos que necesita el componente HeroDetailHeader son los siguientes: name, class, gender, level, hardcore, seasonal, paragonLevel, alive y seasonCreated. Todos estos datos los sacamos de la variable this.hero, que es donde guardamos los datos que hemos recuperado de la API.Creamos una computed llamada detailHeader que nos retorne estos valores:computed: { detailHeader () { // Asignamos valores a trav茅s de const { name, // valor: alias class: classSlug, gender, level, hardcore, seasonal, paragonLevel, alive, seasonCreated } = this.hero return { name, classSlug, gender, level, hardcore, seasonal, paragonLevel, alive, seasonCreated } }}> 馃摋 Asignaci贸n por desestructuraci贸n: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignmentEsto es lo que recibe el componente HeroDetailHeader en la prop detail.Ahora, abrimos el reci茅n creado componente de HeroDetailHeader y le damos este contenido:JavaScriptCon la computed heroClass vamos a crear la clase de CSS necesaria para mostrar la cara correspondiente a nuestro personaje. Ya lo hemos usado con anterioridad; estamos usando las mismas clases para generar el avatar de nuestro h茅roe.CSS:HTMLEn el HTML lo 煤nico que estamos haciendo es pintar, en el centro, los datos que recibimos del componente padre.Si todo va bien, deber铆as ver algo como esto:Con esto hemos terminado el componente de detailHeader. A continuaci贸n vamos a trabajar con el componente de Atributos.Volvemos al componente /Hero/Index.vue y ponemos lo siguiente en el HTML:El componente de DetailHeader est谩 a 12 columnas (es decir el 100%). Para los dem谩s componentes vamos a crear 2 columnas, como vimos en una imagen anteriormente. A la izquierda (atributos y habilidades) una columna de 4 unidades (sobre 12) y a la derecha (objetos) otra columna de 8 (sobre 12).En tama帽o de pantalla peque帽o, lo primero que veremos es el bloque de 8 columnas, es decir, los objetos del personaje. Pero para pantallas grandes estamos alterando el orden de aparici贸n a con la propiedad order de flexbox: https://bootstrap-vue.js.org/docs/components/layout/#reordering.Seguimos en /Hero/Index.vue. Importamos los componentes de atributos y habilidades y los registramos:import HeroAttributes from './HeroAttributes/Index'import HeroItems from './HeroItems/Index'components: { BaseLoading, HeroDetailHeader, HeroAttributes, HeroSkills}El componente de Skills recibe el dato intacto de hero.skills. Para el componente de Attributes necesitamos crear una computed que haga alguna transformaci贸n. En este caso la transformaci贸n es muy simple. Cogemos los datos de hero.stats y le agregamos la clase (tipo) de personaje, que la necesitaremos en un componente hijo m谩s adelante:computed: { detailStats () { // Devuelve el contenido de stats y agrega classSlug return { ...this.hero.stats, classSlug: this.hero.class } }}Para evitar errores en consola, vamos a crear tambi茅n el fichero de HeroSkills. Dentro de la carpeta creamos su Index.vue correspondiente y le damos este contenido:/Hero/HeroSkills/Index.vueCon esto ya podemos ir a pintar los componentes de atributos (y tambi茅n de habilidades).Dentro de HeroAttributes tendremos tres componentes: atributos primarios, atributos secundarios y recursos.Vamos a crear el componente Index.vue en la carpeta /HeroAttributes, que est谩 vac铆a. Adem谩s, dentro la misma, creamos otros dos componentes: HeroAttributeList.vue y HeroResources.vueAbrimos /HeroAttributes/Index.vue y agregamos lo siguiente:Los arrays que acabamos de definir nos sirven para agrupar las claves que necesitamos en cada bloque.Hemos agrupado en atributos principales (core), secundarios y recursos.Todos los h茅roes tienen vida y recurso primario, pero solamente algunos tienen recurso secundario.El HTML, que tambi茅n es bastante sencillo, es el siguiente:Para que te hagas la idea, un ejemplo de atributos primarios ser铆an estos:[ { 'name':'strength', 'val':77 }, { 'name':'dexterity', 'val':77 }, { 'name':'vitality', 'val':4813 }, { 'name':'intelligence', 'val':9660 }]Hemos definido fuerza, destreza, vitalidad e inteligencia como atributos primarios. Solo nos quedar铆a mostrarlos por pantalla.Un ejemplo de atributos secundarios ser铆an estos:[ { 'name':'damage', 'val':986514 }, { 'name':'toughness', 'val':15263800 }, { 'name':'healing', 'val':1305200 }]Da帽o, dureza y curaci贸n ser铆an nuestros atributos secundarios. Como ves, son id茅nticos a los primarios (a nivel de estructura de datos) y por lo tanto podemos utilizar el mismo componente para pintar los dos tipos de atributos. Simplemente les pasamos distinta informaci贸n, pero mismo formato.El componente /Hero/HeroAttributes/HeroAttributeList.vue es muy sencillo. Lo 煤nico que hace es mostrar el nombre del atributo (en color naranja) y su valor (en color blanco), pasado por el filtro de numeral (que ya hemos usado anteriormente):La app, actualmente, se ve as铆 aunque tengamos errores:RecursosTodas las clases tienen, adem谩s de los puntos de vida (HP), un recurso propio. Los recursos son: furia (b谩rbaro), c贸lera (cruzado), odio y disciplina (cazador de demonios), esencia (nigromante), esp铆ritu (monje), man谩 (m茅dico brujo) y poder arcano (mago).En este bloque, vamos a pintar los puntos de vida que tiene el personaje y su recurso correspondiente. Tenemos cargados todos los recursos (incluyendo la vida) en una imagen, a modo de sprite. Esta es la imagen que usaremos:Vamos a crear las clases CSS correspondientes para cada tipo de h茅roe.驴Recuerdas en d贸nde tenemos los estilos globales de CSS? Si pensaste que era /src/assets/css/main.styl, has acertado. Abrimos el archivo y le agregamos lo siguiente:// ---------------------// Resources// ---------------------.resource .resource-icon background-image url('../img/resources.png') width 50px height 50px &.resource-mana background-position 0 -50px &.resource-fury background-position: -50px 0 &.resource-hatred-discipline background-position: -100px 0px &.resource-spirit background-position: -50px -50px &.resource-arcane-power background-position: -100px -50px &.resource-wrath background-position: 0px -100px &.resource-essence background-position: -50px -100pxComo has podido ver, es muy sencillo este bloque de CSS. Cargamos la imagen y nos vamos moviendo de 50 en 50 por la imagen 馃槂 seg煤n el recurso que seleccionemos.Al igual que hemos hecho antes con los nombres de los h茅roes, vamos a crear un mixin para mostrar el nombre normalizado de los recursos. Para ello vamos a la carpeta donde est谩n los mixins y creamos un nuevo fichero. De nombre le ponemos resources.js y el contenido va a ser el siguiente:const names = { BARBARIAN: 'barbarian', CRUSADER: 'crusader', MONK: 'monk', WIZARD: 'wizard', WITCHDOCTOR: 'witch-doctor', NECROMANCER: 'necromancer', DEMONHUNTER: 'demon-hunter'}const resourceClassName = { [names.BARBARIAN]: 'fury', [names.CRUSADER]: 'wrath', [names.MONK]: 'spirit', [names.WIZARD]: 'arcane-power', [names.WITCHDOCTOR]: 'mana', [names.NECROMANCER]: 'essence', [names.DEMONHUNTER]: 'hatred-discipline'}const resourceDisplayName = { [names.BARBARIAN]: 'Fury', [names.CRUSADER]: 'Wrath', [names.MONK]: 'Spirit', [names.WIZARD]: 'Arcane Power', [names.WITCHDOCTOR]: 'Mana', [names.NECROMANCER]: 'Essence', [names.DEMONHUNTER]: 'Hatred / Discipline'}export default { methods: { /** * Get the name of the primary resource by class * @param classSlug {String} * @returns {String} */ resourceClassName (classSlug) { return resourceClassName[classSlug] }, /** * Resource Normalized name * @param classSlug {String} * @returns {String} */ resourceDisplayName (classSlug) { return resourceDisplayName[classSlug] } }}Regresamos al componente de recursos, abrimos el archivo /HeroAttributes/HeroResources.vue y ponemos lo siguiente:Recibimos datos a trav茅s de una prop y los mostramos, eso es todo lo que hacemos aqu铆. Con esto funcionando, la app deber铆a verse as铆:Ah铆 vemos la esencia , que es el recurso del nigromante. Si probamos a cambiar de clase, vemos que se carga el recurso correspondiente. En los ejemplos de abajo vemos la ira del cruzado y el odio / disciplina del cazador de demonios.> 鉁忥笍 Ves al navegador y prueba a cambiar los estilos CSS de la imagen de los recursos.> 驴Qu茅 pasa si pones background-position: -25px 75px; al elemento un recurso cualquiera? Deja tus respuestas en el sistema de comentariosCon esto ya hemos terminado el bloque de atributos y recursos del personaje. Vamos a seguir con la siguiente parte, que es la de habilidades.SkillsCada personaje puede tener hasta 6 habilidades activas, 2 de rat贸n (bot贸n primario y secundario) y 4 de teclado. Las habilidades se van desbloqueando seg煤n el nivel, no tienes todas las habilidades disponibles desde el inicio.A su vez, las habilidades activas pueden tener modificadores o runas de habilidad que mejoren dicha habilidad. Al igual que con las habilidades, las runas se van desbloqueando cuando vas subiendo de nivel.Todo esto corresponde a las habilidades activas. Existen otro grupo de habilidades, las habilidades pasivas. Como las dem谩s, se van ganando al subir de nivel.Aqu铆 puedes ver, a modo ejemplo, el progreso de niveles y habilidades del nigromante: https://eu.diablo3.com/es/class/necromancer/progressionUna vez entendido esto, podemos ir a crear los componentes necesarios. Vamos a tener componentes agrupados en habilidades activas y habilidades pasivas.隆Hag谩moslo! Dentro de nuestra carpeta de /Hero/HeroSkills creamos los siguientes archivos: ActiveSkills.vue, ActiveSkill.vue, PassiveSkills.vue y PassiveSkill.vue.El contenido de /Hero/HeroSkills/Index.vue va a ser el siguiente (de momento):Estamos cargando los skills activos y los pasivos, sin m谩s.Vamos a editar los componentes de las habilidades, empezando por el habiliades activas.Como tenemos un array de skills lo que vamos a hacer es iterar, con v-for, para utilizar el componente de habilidad individual, ActiveSkill.ActiveSkills.vue:Antes de cargar el listado de habilidades activas, necesitamos editar el fichero global de CSS, que es d贸nde estamos guardando los estilos para los Sprites de im谩genes.Para identificar qu茅 habilidad estamos mostrando, vamos a agregar estas l铆neas de c贸digo en /assets/css/main.styl:// ---------------------// Active Skills// ---------------------.active-skills .skills .slot display block width 22px height 22px background url('../img/skill-overlays.png') 0 0 position absolute top -5px left 5px &.slot-1 background-position: 0 -1px &.slot-2 background-position: -21px -1px &.slot-3 background-position: 0 -23px &.slot-4 background-position: -23px -23px &.slot-5 background-position: 0 -46px &.slot-6 background-position: -23px -46pxCon slot nos estamos refiriendo a qu茅 habilidad es, siendo slot-1 el bot贸n principal del rat贸n y slot-2 el bot贸n secundario. Aguanta un poco, que con un ejemplo lo ver谩s mejor.lActiveSkill.vue:Skill ImagesEn las propiedades estamos recibiendo la habilidad, la runa en caso de que la tenga (si no llega, no la mostramos) y el n煤mero de slot, que corresponde con las clases de CSS que hemos creado recientemente.> 馃摋 Documentaci贸n para obtener las URLs de las habilidades y de los objetos de Diablo III: https://develop.battle.net/documentation/diablo-3/community-apisHacemos la composici贸n de la URL, tenemos la base de la URL, el tipo (skills), el tama帽o (42) y el nombre del icon (que nos lo da la API).Un ejemplo ser铆a este: http://media.blizzard.com/d3/icons/skills/42/p6_necro_bonespikes.pngQue renderiza esta imagen:Gracias al atributo title, si pasamos el rat贸n por encima del elemento, podemos ver una breve descripci贸n.Perfecto, ya tenemos las habilidaes activas de nuestro personaje cargadas, que se ven as铆 en nuestra app:Hora de cargar las habilidades pasivas, que son casi lo mismo que las activas, pero m谩s sencillas. Solo imagen y nombre de la habilidad.PassiveSkills.vue:PassiveSkill.vue:Bien, ya tenemos las habilidades activas y las pasivas funcionando. Se deber铆an ver as铆:Puede darse el caso en el que si est谩s usando el perfil de un personaje que no est谩 al nivel m谩ximo, no tengas todas las habilidades (activas, pasivas y runas) desbloqueadas y por lo tanto veas menos habilidades.Con esto hemos terminado la parte de skills鈥 en modo normal. En el siguiente bloque vamos a ver c贸mo refactorizar el bloque de habilidades y crear componentes as铆ncronos din谩micos 馃.", "url" : "https://platzi.com/clases/1856-avanzado-vue/27768-hero-view/", "wordCount" : "52", "publisher" : { "type" : "Organization", "name" : "Platzi INC" } }