---
name: Attribute
route: /attribute
---
import { Playground } from 'docz'
import Attribute from '@/components/Attribute'
import AttributeModel from '@/models/Attribute'
import CharacterModel from '@/models/Character'

## Attribute
The `Attribute` component displays the `name` and `value` of an `Attribute` model. If this `Attribute` model is part of a `Character`, it will also display any applicable `Effect` modifiers.

__Note__: You can hover your mouse over any of the modifier displays to see _which effects_ caused that modifier to be applied.

<Playground>
  {() => {
    const character = CharacterModel.create({
      attributes: [
        { name: 'Strength', value: 4 },
        { name: 'Dexterity', value: 3 },
        { name: 'Stamina', value: 4 },
        { name: 'Charisma', value: 3 },
      ],
      items: [
        { equipped: true, name: 'Belt of Dwarven Strength', effects: [{ targetId: 'Strength', modifier: 2 }] },
        { equipped: true, name: 'Potion: Eagle\'s Splendor', effects: [{ targetId: 'Charisma', modifier: 2 }] },
      ],
      traits: [
        { name: 'Half Giant', effects: [{ targetId: 'Strength', modifier: 4 }] },
      ],
      spells: [
        { isActive: true, name: 'Curse: Rotting Flesh', effects: [
          { targetId: 'Stamina', modifier: -2 },
          { targetId: 'Charisma', modifier: -2 },
        ] },
      ],
    })
    return (<>
      <h2>Dexterity</h2>
      <p>No modifiers.</p>
      <Attribute model={character.attributes.findBy('name', 'Dexterity')} />
      <Attribute model={character.attributes.findBy('name', 'Dexterity')} rating />

      <h2>Strength</h2>
      <p>+2 from an equipped Item, +4 from a Trait</p>
      <Attribute model={character.attributes.findBy('name', 'Strength')} />
      <Attribute model={character.attributes.findBy('name', 'Strength')} rating />

      <h2>Stamina</h2>
      <p>-2 from a Curse</p>
      <Attribute model={character.attributes.findBy('name', 'Stamina')} />
      <Attribute model={character.attributes.findBy('name', 'Stamina')} rating />

      <h2>Charisma</h2>
      <p>+2 from an equipped Item, -2 from a Curse</p>
      <Attribute model={character.attributes.findBy('name', 'Charisma')} />
      <Attribute model={character.attributes.findBy('name', 'Charisma')} rating />
    </>)
  }}
</Playground>