Pokemon Picture - Tylung/vue-apuntes GitHub Wiki

Se encuentran dos imagenes, una es la del pokemon con la clase hidden-pokemon que oculta el pokemon y solo muestra la silueta y la segunda imagen es el es pokemon normal sin la clase que lo oculta, solo se mostrara esta segunda si el usuario elige una opción

<div class="pokemon-container">
    <img
        v-if="!showPokemon"
        :src="imgSrc"
        class="hidden-pokemon"
        alt="pokemon">
    <img
        v-else
        :src="imgSrc"
        alt="pokemon"
        class="fade-in">
</div>

En el export default se declaran 2 propiedades reactivas, el pokemonId que es de tipo Number y es required y el showPokemon que es de tipo Boolean, es required y por defecto es false

export default {
    props: {
        pokemonId: {
            type: Number, 
            required: true,
        },
        showPokemon: {
            type: Boolean,
            required: true,
            default: false
        }
    },
      computed: {
        imgSrc() {
            return `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/${ this.pokemonId }.svg` 
        }
    }
}

y también esta la propiedad computada que es el src de la imagen del pokemon, esta imagen recibe el pokemonId, para renderizar el pokemon que tiene que adivinar el usuario

En los estilos solo centra la imagen, se le quita la posibilidad al usuario de arrastar o seleccionar la imagen para que no haga trampa y define la clase hidden-pokemon para ocultar la imagen y solo se muestre la silueta

<style scoped>
/* Pokemon Picture */
.pokemon-container {
    height: 200px;
    display: flex;
    justify-content: center;
}

img {
    height: 200px;
    position: absolute;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

.hidden-pokemon {
    filter: brightness(0);
}

</style>