Zombie-char-component NPM

Vue Zombie Character Component

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>

Example1

Example2

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

Example2

Example3

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

Example3

Example4

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

Example4