JSFiddle - React, Tailwind, and code Playground

by Marco Iamonte

HTML

Crota's level: <br />

<select id="crotalvl">
    <option value="30" selected>30</option>
    <option value="33">33</option>
</select><br />

Player level: <br />
<select id="plvl">
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32" selected>32</option>
</select>
    
<br />

<div id="r1">
    <span class="r">Round 1:</span><br />
    <select class="round" data-round="1.0"></select><br />
    <select class="round" data-round="1.1"></select><br />
    <select class="round" data-round="1.2"></select><br />
</div>
<div id="r2">
    <span class="r">Round 2:</span><br />
    <select class="round" data-round="2.0"></select><br />
    <select class="round" data-round="2.1"></select><br />
    <select class="round" data-round="2.2"></select><br />
</div>
<div id="r3">
    <span class="r">Round 3:</span><br />
    <select class="round" data-round="3.0"></select><br />
    <select class="round" data-round="3.1"></select><br />
    <select class="round" data-round="3.2"></select><br />
</div>
<div id="r4">
    <span class="r">Round 4:</span><br />
    <select class="round" data-round="4.0"></select><br />
    <select class="round" data-round="4.1"></select><br />
    <select class="round" data-round="4.2"></select><br />
</div>
<div id="r5">
    <span class="r">Round 5:</span><br />
    <select class="round" data-round="5.0"></select><br />
    <select class="round" data-round="5.1"></select><br />
    <select class="round" data-round="5.2"></select><br />
</div>
<input type="button" value="simulate" id="sim">
    
    
<div id="result">
    
 </div>

JavaScript

var damages = {
    33: {
        32: {
            RT:        15301,
            SUP:     18001,
            RB:        7201,
            UPPERCUT:  12601
        },
        31: {
            RT:        13051,
            SUP:     17540,
            RB:        6142,
            UPPERCUT:  12279
        },
        30: {
            RT:        10800,
            SUP:     14516,
            RB:        5083,
            UPPERCUT:  10162
        }
    },
    30: {
        32: {
           RT:        22501,
           SUP:     30242,
           RB:        10589,
           UPPERCUT: 21170
        },
        31: {
           RT:        15301,
           SUP:     18001,
           RB:        7201,
           UPPERCUT:  12601
        },
        30: {
            RT:        13051,
            SUP:     17540,
            RB:        6142,
            UPPERCUT:  12279
        }
    }
};

var x, combos, playerLevel, crotaLevel;

var updatePlayerLevel = (function updatePlevel( callback ) {
    playerLevel = $('#plvl').val();
    
    if (callback || typeof(callback) == 'function') {
        callback();
    }
    return updatePlevel;
}());

var updateCrotaLevel = (function updateClevel (callback) {
    crotaLevel = $('#crotalvl').val();
    x = damages[crotaLevel][playerLevel];
    combos = {
    FAIL:     {
                formula: 0,
                description: "No attack."
             },
    RT1:     {
                formula: x.RT,
                description: "RT"
             },
    RT2:     {
                formula: x.RT * 2,
                description: "RT RT"
             },    
    RT3:     {
                formula: x.RT * 3,
                description: "RT RT RT"
             },
    RT4:     {
                formula: x.RT * 4,
                description: "RT RT RT RT"
             },
    RTS:     {
                formula: (x.RT * 3 + x.SUP),
                description: "RT RT RT SUPER"
             },
    RB6:     {
                formula: x.RB * 6,
      ...