zombie-char-component-vue2

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-vue2 --save

Usage

main.js

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

Or in component

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

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

Nuxt nuxtjs

npm

npm i zombie-char-component-vue2 --save

Config as plugin

/plugins/zombie-char-component-vue2.js

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

Vue.component("ZombieChar", ZombieChar);

/nuxt.config.js

plugins: ['~/plugins/zombie-char-component-vue2.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

---