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

## Character Sheet

<Sheet
  layout={Layout.create({
    children: [
      { title: 'Descriptors', children: [{ columns: 3, type: 'Descriptor' }] },
      { title: 'Attributes', children: [{ columns: 4, type: 'Attribute' }] },
      { columns: 3, children: [
        { colSpan: 1, children: [
          { title: 'Traits', children: [{ type: 'Trait' }] },
          { title: 'Resources', children: [{ type: 'Resource' }] },
        ] },
        { colSpan: 2, children: [
          { title: 'Skills', children: [{ columns: 2, type: 'Skill' }] },
          { title: 'Items', children: [{ columns: 1, type: 'Item' }] },
          { title: 'Spells', children: [{ columns: 1, type: 'Spell' }] },
        ] },
      ] },
    ]
  })}
  character={Character.create({})}
  onChange={(character, layout) => {
    localStorage.setItem('sf-example', JSON.stringify({ character, layout }))
  }}
  onMount={(self) => {
    const saved = localStorage.getItem('sf-example')
    if (saved) {
      const example = JSON.parse(saved)
      self.props.character.set(example.character)
      self.props.layout.set(example.layout)
    }
  }}
/>