npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vellum-monster

v1.3.2

Published

Web component for displaying 5th Edition monster stat blocks

Downloads

125

Readme

<vellum-monster> Build Status

Web component for displaying monster stat blocks for the fifth edition of the world's most popular table-top roleplaying game. Based on Val Markovic's Statblock5e but with the following, additional features:

  • Simpler (just one import vs 5)
  • Theme-able
  • Automatically calculate values (average hit points and challenge rating)

To install:

npm install --save vellum-monster

You can also use the CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vellum-monster.min.js"></script>

Simple Screenshot

The above stat block is written as follows:

<vellum-monster
  id="warhorse"
  class="official"
  name="Warhorse"
  size="Large"
  type="beast"
  alignment="unaligned"
  ac="11"
  armor="natural armor"
  hp="20"
  hit-die="16d10 + 48"
  speeds='["60 ft."]'
  cr="½"

  str="18"
  dex="12"
  con="13"
  int="2"
  wis="12"
  cha="7"

  senses='["passive Perception 11"]'
  traits='[
    {
      "name": "Trampling Charge",
      "description": "If the horse moves at least 20 feet straight toward a creature and then hits it with a hooves attack on the same turn, that target must succeed on a DC 14 Strength saving throw or be knocked prone. If the target is prone, the horse can make another attack with its hooves against it as a bonus action."
    }
  ]'
  actions='[
    {
      "name": "Hooves",
      "type": "melee-attack",
      "bonus": "+4",
      "reach": "5ft.",
      "target": "one target",
      "damage": "2d6 + 4",
      "damageType": "bludgeoning"
    }
  ]'
>
</vellum-monster>

This module also includes a theme to give your stat blocks a more "official" look. Simply add the following to your HTML file head element:

<link rel="stylesheet" type="text/css" href="vellum-monster/themes/official/style.css">

Calculating Challenge Rating

If you do not provide the challenge rating for your monster, <vellum-monster> will attempt to automatically calculate and fill this value in for you, based on armor class, hit points, damage and attack bonus.

Traits, actions, reactions and legendary actions can adjust the effective value of these stats when calculating challenge rating. Each of these objects of can declare a hpAdjustment, acAdjustment, damageAdjustment or attackAdjustment which can increase or decrease the effective hit points, armor class, damage or attack bonus when calculating CR.

Custom Themes

To create a custom theme for your stat blocks using something like the following CSS:

html vellum-monster.my-theme,
html vellum-stat-block.my-theme {

  // custom styles here

}

You can then add standard CSS. The <vellum-monster> and <vellum-monster> support the following custom CSS properties:

| Property | Description | -------------------------------------- | --- | --stat-block-width | Describes the width property for the stat block, as per the CSS width property. | --stat-block-background | Describes the background property for the stat block body, as per the CSS background property. | --stat-block-bar-border | Describes the border property for top and bottom stat block bars, as per the CSS border property. | --stat-block-bar-background | Describes the background property for top and bottom stat block bars, as per the CSS background property. | --stat-block-border-color | The colour for the stat block borders on the right and left. | --stat-block-header-color | The colour of the section headings and stat block header text. | --stat-block-heading-font-family | The font-family of the section headings and stat block header text. | --stat-block-divider-color | The colour of the divider between sections of the stat block. | --stat-block-two-column-width | If the two-column class is applied to the stat block, this defines the width of the wider stat block. | --stat-block-two-column-column-width | If the two-column class is applied to the stat block, this defines the width of the width of the columns within the stat block.

See the official theme for an example of how to style your stat blocks

Custom Stat Blocks

The <vellum-stat-block> element allows you to create custom stat-blocks layouts. This could be for information that doesn't conform to the stand monster stat block, such as location stat blocks. Or to represent non-standard information the <vellum-monster> element doesn't yet support.

For example:

<vellum-stat-block
  class="official"
  name="Custom Stat Block"
  description="Demonstration of custom stat blocks"
>

  <vellum-stat name="Test Stat 1">Test Stat Value 1</vellum-stat>

  <vellum-stat-block-divider></vellum-stat-block-divider>

  <vellum-stat name="Test Stat 2">Test Stat Value 2</vellum-stat>

</vellum-monster>

Note: Users are encouraged <vellum-monster> element for monster descriptions wherever possible, and raise bugs where it doesn't support what you want to do. Rather than fall-back to the <vellum-stat-block>.

NPC Stat Blocks

The <vellum-npc> element allows you to display a NPC in more roleplaying terms and is a work in progress.

Hacking

Requirements:

To set-up your environment execute:

$ npm install

To run demo page:

$ npm run start

To run tests execute:

$ npm test

To run the tests you need to have Java 8 installed.

Rights

This software is copyrighted by Ricardo Gladwell and Val Markovic 2014-2018. It is licensed under the Apache License, Version 2.0. All monster statistics are Open Game Content and licensed under the Open Gaming License.