JJ-Spielfigur

Comic-Figures and Archetypes for Games / E-Learning drawn by Jens Janetzki

Installation:

npm i jj-spielfigur --save

Use in nuxt

Create spielfigur.js in plugins

import Vue from 'vue'
import spielfigur from 'jj-spielfigur'

Vue.use(spielfigur)

Onload Plugin in vue.config.js

plugins: [
  ...
  { src: '~/plugins/spielfigur.js', ssr: false, client: true }
]

Use in vue

import spielfigur from 'jj-spielfigur'

Vue.use(spielfigur)

Type-Options

• figure
• archetype

Integrate Figure in Vue / Nuxt

<template>
  <jj-spielfigur settings="settings" />
</template>

<script>
export default {
  data () {
    return {
      settings: JSON.stringify({
        type: 'figure', /* [figure, archetype] */
        shadow: false, /* [false, true] */
        talking: false, /* [false, true] */
        mouth: 'Baertchen', /* see options below */
        hair: 'Flatcap', /* see options below */
        eye: 'Erwartungsvoll', /* see options below */
        arms: 'Erklaerend', /* see options below */
        cloth: '', /* see options below */
        color: 'lightgrey',
        haircolor: 'rgb(141, 110, 99)'
      }
    })
  }
}
</script>

Arms-Options

• Bodenstaendiger
• Coins
• Diamanten
• Entdecker
• Erklaerend
• Fuersorgender
• Herrscher
• Kaempfer
• Lebenslustiger
• Magier
• Namensschild
• Rebell
• Schoepfer
• Tablett_Vorbild
• Wissbegieriger
• Zusammen

['Bodenstaendiger', 'Coins', 'Diamanten', 'Entdecker', 'Erklaerend', 'Fuersorgender', 'Herrscher', 'Kaempfer', 'Lebenslustiger', 'Magier', 'Namensschild', 'Rebell', 'Schoepfer', 'Tablett_Vorbild', 'Wissbegieriger', 'Zusammen']

Cloth-Options

• Black
• Kleid
• Mayer
• Shirt_Star
• Shirt
• Stilvoll

['Black', 'Kleid', 'Mayer', 'Shirt_Star', 'Shirt', 'Stilvoll']

Eyes-Options

• Abwartend
• Blau
• Braun
• Brille_1
• Brille_2
• Brille_3
• Erwartungsvoll
• Frau
• Gruen
• Unschuldig

['Abwartend', 'Blau', 'Braun', 'Brille_1', 'Brille_2', 'Brille_3', 'Erwartungsvoll', 'Frau', 'Gruen', 'Unschuldig']

Hair-Options

• Basecap
• Beatle_2
• Beatle
• Flatcap
• Frau_1
• Heldenkranz
• Kurz
• Lang_2
• Lang
• Mittellang
• Muetze
• Peppig
• Scheitel
• Schulterlang
• Strubbellig
• Tolle
• Zackig
• Zoepfe

['Basecap', 'Beatle_2', 'Beatle', 'Flatcap', 'Frau_1', 'Heldenkranz', 'Kurz', 'Lang_2', 'Lang', 'Mittellang', 'Muetze', 'Peppig', 'Scheitel', 'Schulterlang', 'Strubbellig', 'Tolle', 'Zackig', 'Zoepfe']

Mouth-Options

• Baertchen
• Dreitagebart
• Duckface
• Grinsen_2
• Grinsen
• Happy
• Oberlippenbart
• Skeptisch
• Smile
• Vollbart_2
• Vollbart
• Zunge

['Baertchen', 'Dreitagebart', 'Duckface', 'Grinsen_2', 'Grinsen', 'Happy', 'Oberlippenbart', 'Skeptisch', 'Smile', 'Vollbart_2', 'Vollbart', 'Zunge']

Talking-Options

• Letter_A
• Letter_E
• Letter_M
• Letter_O
• Letter_W

Color-Options

• color (hex, rgba, ...)
• haircolor (hex, rgba, ...)

Integrate Archetype in Vue / Nuxt

<template>
  <jj-spielfigur settings="settings" />
</template>

<script>
export default {
  data () {
    return {
      settings: JSON.stringify({
        type: 'archetype', /* [figure, archetype] */
        typus: 'Herrscher' /* see options below */
      }
    })
  }
}
</script>

Typus-Options

• Bodenstaendiger
• Bodenstaendige
• Entdeckerin
• Entdecker
• Fuersorgender
• Fuersorgende
• Gutgelaunter
• Gutgelaunte
• Herrscherin
• Herrscher
• Inneres_Kindin
• Inneres_Kind
• Kriegerin
• Krieger
• Liebender
• Liebende
• Magierin
• Magier
• Rebellin
• Rebell
• Schoepferin
• Schoepfer
• Weise
• Weitsichtiger
• Weitsichtige