Vue Zombie Character Component

A Vue component for CryptoZombies.io.

You can generate a preview of the zombie in the browser. Refer to lesson 6 for more detailed information on how it can work in conjunction with a solidity dApp.

Vue2 or Vue3

• Please for VUE2 checkout zombie-char-component-vue2 package
• Please for VUE3 checkout zombie-char-component package

Installation

npm

npm i zombie-char-component --save

Usage

main.js

//...
import ZombieChar from "zombie-char-component";
Vue.component("zombie-char", ZombieChar);
//...

Or in component

<template>
  <div>
    <zombie-char></zombie-char>
  </div>
</template>

<script>
  import ZombieChar from "zombie-char-component";
  export default {
    data() {
      return {
        date: "",
      };
    },
    components: {
      zombieChar: ZombieChar,
    },
  };
</script>

Nuxt nuxtjs

npm

npm i zombie-char-component --save

Config as plugin

/plugins/zombie-char-component.js

import Vue from "vue";
import ZombieChar from "zombie-char-component";

Vue.component("ZombieChar", ZombieChar);

/nuxt.config.js

plugins: ['~/plugins/zombie-char-component.js'],

Usage

<template>
  <div>
    <zombie-char />
  </div>
</template>

Description

Props

| Name | Type | Default | Description | | ------------------ | ---------------- | ------- | ------------------------------------------------------ | | isZombieLoaded | Boolean | false | | | optionalDna | String | | | | zombieName | String | | generate a dna from name, if the optionalDna not exist | | skinColorChoice | [Number, String] | 1 | skin color 1 - 100 * | | eyeColorChoice | [Number, String] | 1 | eye color 1 - 100 * | | clothesColorChoice | [Number, String] | 1 | clothes color 1 - 100 * | | headChoice | [Number, String] | 1 | head 1 - 7 * | | eyeChoice | [Number, String] | 1 | eye 1 - 11 * | | shirtChoice | [Number, String] | 1 | shirt 1 - 6 * | | autoGenerate | Boolean | false | | | catMode | Boolean | false | |

* if the autoGenerate equal to false

optionalDna

012345678901 aabbccddeeff

• aa = head
• bb = eye
• cc = shirt
• dd = skinColor
• ee = eyeColor
• ff = clothesColor

Examples

Example1

<template>
  <div>
    <zombie-char :isZombieLoaded="false" />
  </div>
</template>

Example2

<template>
  <div>
    <zombie-char
      :isZombieLoaded="true"
      zombieName="Zombie1"
      :autoGenerate="false"
      :eyeChoice="5"
      :clothesColorChoice="50"
    />
  </div>
</template>

Example3

<template>
  <div>
    <zombie-char
      :isZombieLoaded="true"
      optionalDna="020603010101"
      :autoGenerate="true"
    />
  </div>
</template>

Example4

<template>
  <div>
    <zombie-char
      :isZombieLoaded="true"
      optionalDna="020603010101"
      :autoGenerate="true"
      :catMode="true"
    />
  </div>
</template>

Change log

1.0.7 (2021-10-25)

• added nuxt example

1.0.6 (2021-10-25)

• added vue2 repo

1.0.5 (2021-10-07)

• fixed readme

1.0.4 (2021-10-07)

• fixed some bugs and added examples