---
name: Spell
route: /spell
---
import { Playground } from 'docz'
import { types } from 'mobx-state-tree'
import Character from '@/models/Character'
import Spell from '@/components/Spell'

## Spell Component

<Playground>
  {() => {
    const character = Character.create({
      attributes: [
        { name: 'Armor Rating' },
        { name: 'Charisma' },
      ],
      resources: [
        { current: 16, maximum: 25, name: 'Mana' },
        { current: 5, maximum: 5, name: 'Rage' },
        { current: 10, maximum: 10, name: 'Willpower' },
      ],
      spells: [{
        costs: [
          { amount: 8, resource: 'Mana' }
        ],
        description: 'A powerful shielding spell, which cloaks the enchanted in radiance.',
        effects: [
          { modifier: 4, modifies: 'Armor Rating' },
          { modifier: 2, modifies: 'Charisma' },
        ],
        isActive: true,
        level: 7,
        name: 'Spell-Shield of the Magi',
      }],
    })

    return <Spell model={character.spells.at(0)} />
  }}
</Playground>