/*************************************************************/
/* Colors
#993333 / rgb(153, 51, 51)
*/
div,
button,
textarea,
span,
input,
select{
box-sizing: border-box;
}
div{
margin: none;
padding: none;
background-color: transparent;
}

input[type=radio].sheet-styleCharacter,
input[type=radio].sheet-styleMonster{
margin-left:2px;
margin-right: 1px;
display: inline-block;
}
input[type=radio].sheet-styleCharacter + span,
input[type=radio].sheet-styleMonster + span{
font-size:11px;
color: #888888;
text-align:left;
}
input[type=radio].sheet-styleCharacter:checked ~ .sheet-monster{
display: none;
}
input[type=radio].sheet-styleMonster:checked ~ .sheet-main{
display: none;
}
input[type=checkbox]{
margin-left: 10px;
}


div.sheet-main{
width: 890px;
min-width: 890px;
max-width: 890px;
text-align: center;
font-size: 13px;
background-color : #FDFDFD;
padding: 4px;
}
div.sheet-monster{
width: 890px;
min-width: 890px;
max-width: 890px;
text-align: center;
font-size: 13px;
background-color : #FDFDFD;
padding: 4px;
}
div.sheet-ligne{
display: block;
text-align: left;
vertical-align: top;
width: 100%;
white-space: nowrap;
}
div.sheet-mycol{
display: inline-block;
text-align: left;
vertical-align: top;
}
input, textarea{
background-color: transparent;
display: inline-block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
font-family: 'Patrick Hand';
font-size: 16px;
border: none;
box-shadow: none;
resize:none;
z-index: 2;
border-radius: 0;
border-bottom: 1px dotted black;
}
input:focus, input:hover, textarea:focus, textarea:hover{
box-shadow: inset 0px 1px 1px rgba(153,51,51,0.01),0 0 6px rgba(153,51,51,0.5);
background-color: rgba(153,51,51,0.05);
}
textarea{
padding: 1px 2px 0px 2px;
border-left: 1px dotted black;
border-right: 1px dotted black;
}
input[type="text"]{
padding: 0px 0px 0px 2px;
}
input[type="text"].sheet-inptxt1 {
font-weight: bold;
font-size: 18px;
}
input[type="number"]{
text-align: right;
padding: 0px 2px 0px 0px;
}
input[type="number"].sheet-stats{
wid

//Hit Dice, Primary Attribute, and Bonus XP auto calculator
on("change:class change:level change:st change:dx change:cn change:in change:ws change:ch sheet:opened", function() {
getAttrs(['class', 'level', 'hd', 'hpbonus', 'xpbonus', 'st', 'dx', 'cn', 'in', 'ws', 'ch'], function(values) {
const getclass = parseInt(values.class)||0;
const getlevel = parseInt(values.level)||0;
const hpmodifier = parseInt(values.hpbonus)||0;
const strength = parseInt(values.st)||0;
const dexterity = parseInt(values.dx)||0;
const constitution = parseInt(values.cn)||0;
const intelligence = parseInt(values.in)||0;
const wisdom = parseInt(values.ws)||0;
const charisma = parseInt(values.ch)||0;


//hitdice
var hitdicetype = 0;

if (getclass === 1 || getclass === 11 || getclass === 12 || getclass === 13 || getclass === 14 || getclass === 15 || getclass === 18) {
var hitdicetype = 4;
}
if (getclass === 3 || getclass === 20 || getclass === 21 || getclass === 23 || getclass === 24 || getclass === 25) {
var hitdicetype = 6;
}
if (getclass === 2 || getclass === 10 || getclass === 16 || getclass === 17 || getclass === 19 || getclass === 22) {
var hitdicetype = 8;
}
if (getclass === 0 || getclass === 6 || getclass === 7 || getclass === 8 || getclass === 9) {
var hitdicetype = 10;
}
if (getclass === 4 || getclass === 5) {
var hitdicetype = 12;
}

var hitdicecalc = `${getlevel}d${hitdicetype}+${hpmodifier}`;

if (getlevel === 10 && getclass === 1 ||getlevel === 10 && getclass === 11 || getlevel === 10 && getclass === 12 || getlevel === 10 && getclass === 13 || getlevel === 10 && getclass === 14 ||getlevel === 10 && getclass === 15 || getlevel === 10 && getclass === 18) {
var hitdicecalc = `9d${hitdicetype}+1+${hpmodifier}`;
}
if (getlevel === 10 && getclass === 3 || getlevel === 10 && getclass === 20 || getlevel === 10 && getclass === 21 || getlevel === 10 && getclass === 23 || getlevel === 10 && getclass === 24 || getlevel === 10 && getclass === 25) {
var hitdicecalc = `9d${hitdicetype}+2+${hpmodifi

<!-- === TEMPLATE   === -->
<rolltemplate class="sheet-rolltemplate-tmpl">
    <div class="sheet-tplmain">
        <div class="sheet-pc">{{pc}}</div>
        {{#attr}}
            <div class="sheet-jet">{{roll}} <= {{target}}</div>
            <div class="sheet-jet sheet-jetbordleft">
            {{#rollLess() roll target}}
                <span class="sheet-success">Success</span>
            {{/rollLess() roll target}}
            {{#rollTotal() roll target}}
                <span class="sheet-success">Success</span>
            {{/rollTotal() roll target}}
            {{#rollGreater() roll target}}
                <span class="sheet-failure">Failure</span>
            {{/rollGreater() roll target}}
            </div>
            <div class="sheet-jetnom"><span>{{type}} Check</span> {{#name}}({{name}}){{/name}}</div>
        {{/attr}}
        {{#save}}
            <div class="sheet-jet">{{roll}} >= {{target}}</div>
            <div class="sheet-jet sheet-jetbordleft">
            {{#rollGreater() roll target}}
                <span class="sheet-success">Success</span>
            {{/rollGreater() roll target}}
            {{#rollTotal() roll target}}
                <span class="sheet-success">Success</span>
            {{/rollTotal() roll target}}
            {{#rollLess() roll target}}
                <span class="sheet-failure">Failure</span>
            {{/rollLess() roll target}}
            </div>
            <div class="sheet-jetnom"><span>{{type}} Saving Throw</span> {{#name}}({{name}}){{/name}}</div>
        {{/save}}
        {{#talent}}
            {{#target}}
                {{#rollTotal() target 0}}
                    <div class="sheet-jet">{{roll}}</div>
                    <div class="sheet-jet"> </div>
                {{/rollTotal() target 0}}
                {{#rollGreater() target 0}}
                    <div class="sheet-jet">{{roll}} <= {{target}}</div>
                    <div class="sheet-jet sheet-jetbordleft">
                    {{#rollGreater(

Alrighty, it's been a heck of a month but I've finished as much as I think I can with the java I know. 
I've modified the character sheet heavily enough to where I don't feel comfortable replacing the pre-existing sheet without some kind of peer review and maybe some cleaning up so I'm just gonna post the HTML layout and the CSS styling code which (provided you have roll20 pro) you can take a look at yourself and fiddle with. Generally, my mission with this project was to make character creation easier and reducing the amount of looking up tables from the book. 
 
As far as features added in:

-I reformatted the class, race, and gender inputs as selectable options (as they are used in other calculations)

-I created buttons that allow you to randomly generate race, gender, age, secondary skills, and all of the physique traits (which are based off of gender and race). All of which can be overwritten if so desired. 
   - gender has 3 options in the event someone wants to make someone non-binary but the buttons for random physique only work with man or woman so roll those first and then switch gender. 

-Primary attributes should be automatically written based on your class selection.

-I made a button that auto rolls attributes (which also automatically print derived statistics).

-I tried to edit the buttons so they resembled the rolls being made (when possible).

-The HD calculator is also automatically derived from class, level, and hp modifiers.

-XP needed is automatically derived from class and level and, if your primary attribute(s) is high enough, is automatically lowered by 10% to reflect bonus xp.

-I fleshed out the saving throws section to include more specifics about where your numbers are coming from (all automated).

-Fighting ability, unskilled attack penalty, Turning ability, and Casting ability are all automated and I added a table for turning ability and progressive thief abilities that automatically adjust based on turning ability and level

I've been tinkering with the character sheet for the last week and while I've only made a few personal changes to the layout, I also developed a script that auto calculates the derived statistics from attributes. If you have Roll20 pro you can copy this at the bottom of the sheet HTML layout. I've changed the html attribute names for ST,DX,CN,IN,WS,and CH to lower case so make those changes in the top side of the HTML layout of change them back here to uppercase. 

<script type="text/worker">
on("change:st sheet:opened", function() {
    getAttrs(['st', 'meleehitbonus', 'meleedmgbonus', 'testst', 'featst'], function(values) { 
        var strength = parseInt(values.st)||0;
        var mhb = 0;
        var mdb = 0;
        var ts = 0;
        var fs = 0;
        if (strength === 3){
           mhb = -2;
            mdb = -2;
            ts = 1;
            fs = 0;
        }
        else if (strength === 4 || strength === 5 || strength === 6){
             mhb = -1;
             mdb = -1;
             ts = 1;
             fs = 1;
        }   
            else if (strength === 7 || strength === 8){
                 mhb = 0;
                 mdb = -1;
                 ts = 2;
                 fs = 2;
            }
                else if (strength === 9 || strength === 10 || strength === 11 || strength === 12){
                    mhb = 0;
                    mdb = 0;
                    ts = 2;
                    fs = 4;
                }
                    else if (strength === 13 || strength === 14){
                        mhb = 0;
                        mdb = 1;
                        ts = 3;
                        fs = 8;
                    }
                        else if (strength =

I use Roll20 and was wondering how to go about updating the character sheet to 3e. The 2e sheet is good but I always like tinkering with sheets and would like to make it automated, like auto-calculating the derived statistics from attributes, item/weapon weights and damage, etc. 
If anyone has anything they've used I'd love to hear about it but otherwise I'll just get started cobbling something together.