Pokemon Page - Tylung/vue-apuntes Wiki

Template

En el template tenemos la estructura de la aplicación, donde usamos los componentes PokemonPicture y Pokemon Options

Renderizado de la App :zap:

<h1 v-if="!pokemon" class="wait">
Espere porfavor .... 
</h1>

<div v-else class="game"> 
   code...      
</div>

Primeramente tenemos unas directivas de v-if y v-else para mostrar o no la applicación, esto porque al hacer la petición http a la pokeapi tarda, por ello mostramos un mensaje de loading.., si no existe la property pokemon aún no lo mostrará

Los componentes :file_folder:

 <PokemonPicture
        :pokemon-id="pokemon.id"
        :show-pokemon="showPokemon" />    
<PokemonOptions
        :pokemons="pokemonArr"
        @selection-pokemon="checkAnswer" />    

Los componentes reciben los atributos necesarios para trabajar, el PokemonPicture recibe el id del pokemon y la opcion si se muestra o no la imagen del pokemon. El PokemonOptions recibe el arreglo de pokemones y un evento custom que verifica la respuesta del usuario

Div de la respuesta

<div v-if="showAnswer">
    <h2 class="fade-in">{{ message }}</h2>
        <button class="fade-in" @click="newGame"> 
            Nuevo juego 
        </button>
</div>

Este div solo se mostrara si la prop showAnswer es igual a true, tiene la clase fase-in, que le da una animación de entrada y el boton esta esperando un click para ejecutar el metodo newGame()

Script

Primero importamos los componentes que necesitamos

import PokemonPicture  from '@/components/PokemonPicture'
import PokemonOptions from '@/components/PokemonOptions'
import getPokemonOptions from '@/helpers/getPokemonOptions'

Despues en el export default traemos los componentes y declaramos varias propiedades reactivas en la data

export default {
    components: { PokemonPicture, PokemonOptions },
    data() {
        return {
            pokemonArr: [],
            pokemon: null,
            showPokemon: false,
            showAnswer: false,
            message: '',
        }
    },
   ...
}

Las propiedades son:

  1. pokemonArr - Es el arreglo de los 4 pokemones que usara la App
  2. pokemon - Es el pokemon que sera el que tendra que adivinar el usuario
  3. showPokemon - Es la opcion si se muestra la imagen del pokemon, por defecto es false
  4. showAnswer - Es la respuesta que le daremos al usuario si adivina o no el pokemon, por defecto es false
  5. message - Es el mensaje para el usuario para decirle si gano o perdió

En el mismo export default definimos varios metodos para que nuestra App funcioné

 methods: {
        async mixPokemonArray() {
            this.pokemonArr = await getPokemonOptions()

            const rndInt = Math.floor( Math.random() * 4 )
            this.pokemon = this.pokemonArr[rndInt]

            
        },
        checkAnswer( pokemonId ) {
            if ( this.showPokemon ) {
                return 0;
            }

            this.showPokemon = true
            this.showAnswer = true

            if( this.pokemon.id === pokemonId ){
                this.message = `Has Acertado es ${ this.pokemon.name }`
            } else {
                this.message = `Fallaste el pokemon era ${ this.pokemon.name }`
            }       

        },
        newGame() {
            this.pokemonArr =  [],
            this.pokemon = null,
            this.showPokemon = false,
            this.showAnswer = false,
            this.message = ''
            this.mixPokemonArray()
        }
    },

mixPokemonArray():

Este metodo lo que hace es esperar el arreglo de los 4 pokemones de la funcion getPokemonOptions() y luego elegir al azar uno de esos pokemones para que sea el pokemon que tenga que adivinar el usuario, cambiando el valor de la prop pokemon, es asincrono porque tiene que esperar a que se resuelva una peticion http dentro de la funcion getPokemonOptions()

checkAnswer()

Este metodo verifica que el pokemon que eligió el usuario seo el que tenía que adivinar o si se equivoco, cambiando lo svalores de varias props:

  • showPokemon se vuelve true, porque tiene que mostrar la imagen del pokemon una vez eligió una opción
  • showAnswer toma el valor de true, porque tiene que mostrar la respuesta al usuario
  • message toma el valor de un mensaje mostrando si acerto o no y el nombre del pokemon

newGame()

Este metodo reinicia todos los valores de las props para que se cree un nuevo juego, con un nuevo pokemon que adivinar, llamando al metodo mixPokemonArray() cuando termina de reiniciar los valores de las props

Metodo mounted

Al final del export default llama al metodo mounted, lo que hace es ejecutar un bloque de código una vez la app este cargada o montada

Style

Por parte del css, solo son estilos simples para el boton y para que los elementos de la App esten centrados, se coloca el atributo scope, para indicar que solo se aplicaran los estilos a este componente

<style scope>
h2 {
    margin-right: -5%;
    margin-top: opx;
}

.wait {
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
}


.game {
    display: flex;
    align-content: center;
    flex-direction: column;
    align-items: center;
}

.game img {
    margin: auto 10px;
}

button {
    font-size: 1em;
    padding: 1em 2em;
    /* margin-left: 100vw; */
    margin-top: 0px;
    margin-right: -5%;
    -webkit-appearance: none;
    appearance: none;
    background-color: #34495e;
    color: #fff;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: all;
} 

button:hover {
    /* color: #000; */
    background-color: #6a5acd;
    transition: backgroud-color ease-in 0.25s, color ease-in 0.25s;
}

</style>
⚠️ **GitHub.com Fallback** ⚠️