zombie-char-component

Vue Component for Zombie Character

Usage no npm install needed!

<script type="module">
  import zombieCharComponent from 'https://cdn.skypack.dev/zombie-char-component';
</script>

README

Vue Zombie Character Component

image

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

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

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



footer