Just thought I'd share a bit of my setup for sheet programming with everyone.
Install Pull to GitHub
EVERYONE should install Pull on theirs forks!! https://wei.github.io/pull/#basic-setup Gigs, I think, found this a bit ago and it is incredibly useful for keeping forks updated. So many pull request get rejected or delayed due to a failure to keep GitHub forks in sync with the master repo. This will automate that for you.
Use Branches in GitHub
Do not make changes to your GitHub master. Instead make a branch from master to do all upgrades there. Ssubmit pull request to the Roll20 repo directly from a branch. This is a safe way to do version control and will improve the integrity of your work.
PUG, SCSS, & Javascript!
Use PUG & SCSS & JavaScript to make sheets. PUG & SCSS are the two most useful things I've ever learned for sheet development. Character sheets which use to take hundred+ hours takes now 20-40 thanks to PUG which is a Javascript based language to write HTML. You'll save yourself a lot of redundant work by just using the power of loops & variables if nothing else.
Troubleshooting becomes much easier when you need to fix just one line in a loop rather than a dozen copy/paste html snippits.
These are compiled languages so you'll need to do that. Easily done via terminal if your tech savy or https://prepros.io/ if you're not.
Learn Grid
CSS Grid is incredible. Learn it and use it, https://css-tricks.com/snippets/css/complete-guide-grid/
I didn't actually test this but it should work. ;)
<div class='grid 2autocolumn'> <span>Character Name</span> <label title='character name'> <input name='attr_character_name' type='text' placeholder='character name' value='' /> </label> </div>
With the html above you can get a nice header / input row with the following simple code.
.sheet-grid {
display: inline-grid;
grid-column-gap: 1%;
grid-row-gap: 0.5%;
}
label,
input[type='text'] {
width: 100%
}div.sheet-2autocolumn {
grid-template-columns: auto 1fr;
}Pattern Libraries & Components
A pattern library can be your best friend if you want to make multiple sheets. Component style programming will let you save styles to be reused between sheets. With my last project I put work into my Sheet Template. This saves me a good deal of time by not needing to start from scratch every time. Its a slow work in progress were I'm reinventing much of Bootstrap.
Helpful Functions
//Convert Integers to be Negative
const convertIntegerNegative = number => number > 0 ? -Math.abs(number) : number
//Convert an object with negative numbers
const convertIntegersNegatives = numbers => {
numbers => {
for (let [key, value] of Object.entries(numbers)) {
numbers[key] = convertIntegerNegative(value);
}
return numbers
}
}
//Pass in eventinfo.triggerName
const findRepeatingField = trigger => trigger.split('_')[1]
//Pass in eventinfo.triggerName
const getReprowid = trigger => {
const split = trigger.split('_');
return `${split[0]}_${split[1]}_${split[2]}`
}
//Pass in an object keep that has the repeating section
//Example repeating_weapon_-m1czg68yzicwhfdpyys_name
const getReprowAttribute = key => {
const getReprowid = processingFunctions.getReprowid(key)
return key.split(`${getReprowid}_`)[1]
}
//Provide the function with an array of keys to find transations for
//Example ['strenght', 'agility', 'willpower']
const getTranslations = translationKeys => {
let translations = {}
translationKeys.forEach(key => translations[`${key}`] = getTranslationByKey(key))
return translations
}
const parseInteger = string => parseInt(string) || 0
//Use for convernting the result of getAttrs from strings into integers
const parseIntegers = numbers => {
for (let [key, value] of Object.entries(numbers)) {
numbers[key] = parseInt(value) || 0
}
return numbers
}
const setAttributes = (update, silent) => silent && typeof update === 'object' ? setAttrs(update, {silent:true}) : typeof update === 'object' ? setAttrs(update) : console.error(`${update} is not an object`)//returns strength from @{strenght}
const sliceAttr = attribute => attribute.slice(2, -1)const sumIntegers = numbers => numbers.reduce((a,b) => a + b, 0)
Edit 1: Added GitHub branches
