https://github.com/grislyeye/vellum-sheet
Web component for displaying 5th Edition character sheets
https://github.com/grislyeye/vellum-sheet
dnd dnd-characters dnd5e lit-element lit-html rpg rpg-tool webcomponent webcomponents
Last synced: about 1 month ago
JSON representation
Web component for displaying 5th Edition character sheets
- Host: GitHub
- URL: https://github.com/grislyeye/vellum-sheet
- Owner: grislyeye
- License: apache-2.0
- Created: 2019-07-27T13:40:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T15:14:49.000Z (over 2 years ago)
- Last Synced: 2025-04-20T06:35:01.981Z (about 2 months ago)
- Topics: dnd, dnd-characters, dnd5e, lit-element, lit-html, rpg, rpg-tool, webcomponent, webcomponents
- Language: JavaScript
- Size: 5.49 MB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# <vellum-sheet> [](https://travis-ci.org/grislyeye/vellum-sheet)
Web component for displaying RPG sheets and 5th Edition RPG character sheets. Features include:
* Cross-browser support using Polymer and the Web Components polyfill
* Simpler (just one import vs 5)
* Theme-able
To install:
```sh
npm i --save vellum-sheet
```
Add the following lines to your HTML `head` element:
```html
```
A character sheet is written as follows:
```html
Bruenor
- Class
- Fighter
- Level
- 1
- Race
- Mountain Dwarf
- Background
- Folk Hero
- Alignment
- Lawful good
- Strength
- 15
- Dexterity
- 10
- Constitution
- 14
- Intelligence
- 8
- Wisdom
- 13
- Charisma
- 12
- Animal Handling
- History
- Intimidation
- Survival
- Strength
- Constitution
- 19
- 13
- d10
- Medium
- 25
-
Darkvision. you see in dim light within a 60-foot radius of you as if it were bright light, and in darkness in that radius as if it were dim light. You can’t discern color in darkness, only shades of gray. -
Dwarven Resilience. You have advantage on saving throws against poison, and you have resistance against poison damage. -
Stonecutting. Whenever you make an Intelligence (History) check related to the eP origin of stonework, you are considered proficient in the History skill and add double your proficiency bonus to the check. -
Fighting style: defense. While you are wearing armor, you gain a +1 bonus to AC. this bonus is already included in your AC. -
Second wind. You have a limited well of stamina you can draw on to protect yourself from harm. you can use a bonus action to regain hit points equal to 1d10 + your fighter level. Once you use this feature, you must finish a short or long rest before you can use it again. -
Rustic hospitality. You can finda place to hide, rest, or recuperate among other commoners, unless you have shown yourself to be a danger to them.
- Common
- Dwarvish
- All armor
- Shields
- Simple weapons
- Martial weapons
- Throwing hammer
- Smith's tools'
- Chainmail
- Battleaxe
- Shield
- 2x handaxes
- Dungeoneer's pack'
- Smith's tools
- Iron pot
- Shovel
- Set of common clothes
- Belt pouch containing 10gp
-
Battleaxe 1d8 slashing (proficient) -
Handaxe 1d6 slashing (proficient)
Personality Traits
My gruff, snarling demeanour hides a soft heart and a genuine affection for my friends.
Ideals
Fairness. All are equal under the law and non should get preferential treatment.
Bonds
I aspire to reclaim my homeland, Mithral Hall, from the shadow dragon that drove my people out.
Flaws
I have a soft spot for orphans and other, wayward souls leading me to show mercy even when it might not be warranted.
```
Custom CSS properties for this component include:
| Property | Description
| -------------------------------------- | ---
| `--char-sheet-border-color` | Colour of the border line around sheet.
## Custom Sheets
You can define your own custom sheets using the `` and `` custom elements:
```html
- Box content 1
- Box content 2
- Box content 3
- Box content 4
```
You should also order the contents of your custom sheet into columns yourself, preferably using [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout):
```css
vellum-sheet.custom {
display: grid;
grid-template-columns: 50% 50%;
width: 750px;
height: 750px;
}
```
Custom sheets can be composed on the following helper elements:
## <vellum-sheet-box>
A sheet box is a bordered container for any content, typically a list of items:
```html
- Box content 1
- Box content 2
- Box content 3
- Box content 4
```
## Hacking
Requirements:
* [Node.js](http://nodejs.org/)
To set-up your environment execute:
$ npm install
To run linting and test:
$ npm test
To run local demo:
$ npm run start