JSFiddle - React, Tailwind, and code Playground

by R Rush

HTML

<div><span class='label'>HD:</span>
    <input id='hd' type='text' />
</div>
<div><span class='label'>AC:</span>
    <input id='ac' type='text' />
    <select id='acType'>
        <option value='lotfp'>LotFP</option>
        <option value='s&wAsc'>S&amp;W (Asc)</option>
        <option value='s&wDesc'>S&amp;W (Desc)</option>
    </select>
</div>
<div><span class='label'>Move:</span>
    <input id='move' type='text' />
</div>
<div>
    <label>
        Spellcaster?
        <input id='spellcaster' type='checkbox' />
    </label>
</div>
<div><span class='label'>Attack:</span>
    <input id='dieCount' type='text' />
    <select id='dieType'>
        <option value='4'>d4</option>
        <option value='6'>d6</option>
        <option value='8'>d8</option>
        <option value='10'>d10</option>
        <option value='12'>d12</option>
        <option value='20'>d20</option>
    </select>
    <select id='attackType'>
        <option value='melee'>Melee</option>
        <option value='thrown'>Thrown</option>
        <option value='ranged'>Ranged</option>
    </select>
</div>
<hr/>
<div>
    <button id='convertButton' type='button'>- Convert -</button>
</div>
<hr/>
<div id='output'></div>

CSS

input {
    width: 20px;
}

span.label {
    font-weight:bold;
}

JavaScript

$(document).ready(function () {

    $('#convertButton').click(function () { convertStats(); });

});

function convertStats() {
    var output = $('#output');
    var hd = $('#hd').val();
    var ac = $('#ac').val();
    var acType = $('#acType').val()
    var isCaster = $('#spellcaster').prop('checked');
    var move = $('#move').val();
    var dieCount = $('#dieCount').val();
    var dieType = $('#dieType').val();
    var attackType = $('#attackType').val();
    
    var text = '';
    text += '<b>Stats: </b> ' + getAttributeText(hd) + '<br/>';
    text += '<b>Attacks: </b> ' + getAttacks(hd) + '<br/>';
    text += '<b>Wounds: </b> ' + getWounds(hd) + '<br/>';
    text += '<b>Move: </b> ' + getMove(move) + '<br/>';
    text += '<b>Magic: </b> ' + getMagic(isCaster, hd) + '<br/>';
    text += '<b>Armor: </b> ' + getArmor(ac, 'lotfp') + '<br/>';
    text += '<b>Attack Damage: </b> ' + 
        getDamage(dieCount, dieType, attackType) + '<br/>';
    output.html(text);
}

function getAttributeText(hd) {
    if (hd == '' || isNaN(hd)) { return 'Valid HD needed.' }
    return (hd < 5) ? '20/25/30 (one at 40)' : '20/30/40 (one at 50)';
}


function getAttacks(hd) {
    if (hd == '' || isNaN(hd)) { return 'Valid HD needed.' }
    return Math.floor((((hd - 1) * 5) + 12) / 10);
}


function getWounds(hd) {
    if (hd == '' || isNaN(hd)) { return 'Valid HD needed.' }
    return ((hd - 1) * 5) + 12;
}


function getMove(move) {
    if (move == '' || isNaN(move)) { return 'Valid Move needed.' }
    return Math.ceil(move / 3);
}


function getMagic(isCaster, hd) {
    if (isCaster && (hd == '' || isNaN(hd))) { return 'Valid HD needed.' }
    var mag = Math.ceil(hd / 3);
    return (isCaster) ? (mag < 4) ? mag : 4 : 0;
}


function getArmor(ac, acType) {
    if (ac == '' || isNaN(ac)) { return 'Valid AC needed.' }
    switch (acType) {
        case 'lotfp':
            return Math.ceil((ac - 12) / 2);
            break;
        case 's&wDesc':
            return...