VModifierCalculator Component

Interactive playground - adjust the controls to see live updates

<v-modifier-calculator
:modifiers="modifiers"
base-value="{{ playground.baseValue }}"
stacking-mode="{{ playground.stackingMode }}"
show-breakdown
show-formula
group-by-type
/>

Stacking Modes

All Stack (D&D 5e)
All modifiers add together. Most common in D&D 5e.
<v-modifier-calculator :modifiers="modifiers" stacking-mode="all" />
Typed Bonuses (Pathfinder)
Same category bonuses don't stack. Only highest applies.
<v-modifier-calculator :modifiers="modifiers" stacking-mode="typed" />
Highest Only
Only the single highest modifier applies.
<v-modifier-calculator :modifiers="modifiers" stacking-mode="highest" />

Game System Examples

D&D 5e Attack Roll
Ability modifier + proficiency + magic weapon + temporary buff
<v-modifier-calculator base-value="d20" :modifiers="modifiers" show-formula />
Call of Cthulhu
Base skill with situational penalties
<v-modifier-calculator :modifiers="modifiers" />
World of Darkness
Dice pool: attribute + skill + modifiers
<v-modifier-calculator :modifiers="modifiers" show-formula />

Available Props

modifiers - Array of ModifierSource objects
baseValue - Starting value (number or dice notation)
stackingMode - 'all' | 'typed' | 'highest'
showBreakdown - Display detailed breakdown
showFormula - Show dice notation formula
interactive - Allow adding/removing modifiers
compact - Compact display mode
groupByType - Group modifiers by type
highlightTemporary - Visually distinguish temporary modifiers

Available Events

@update:total - Emitted when total changes
@update:formula - Emitted when formula changes
@update:breakdown - Emitted with detailed breakdown
@modifier-added - Emitted when modifier added (interactive mode)
@modifier-removed - Emitted when modifier removed (interactive mode)