JSFiddle - React, Tailwind, and code Playground

by Sumate Khaonuna

HTML

<strong>คำนวณโบนัสขุนพลจุติ 2</strong>
<div id="main">
    <div>เลเวลก่อนจุติ 1 <input id="rb1" type="text"></input> (ขั้นต่ำ 30)</div>
    <div>เลเวลก่อนจุติ 2 <input id="rb2" type="text"></input> (ขั้นต่ำ 60)</div>
    <div>โบนัสสเตตัสหลังจุติ 2 <input id="bonus2" type="text" readonly ></input> แต้ม</div>
</div>

<strong>คำนวณโบนัสขุนพลจุติ 1</strong>
<div id="main">
    <div>เลเวลก่อนจุติ 1 <input id="rb" type="text"></input> (ขั้นต่ำ30)</div>
    <div>โบนัสหลังจุติ 1 <input id="bonus1" type="text" readonly ></input></div>
</div>

<strong>คำนวณโบนัสผู้เล่นจุติ 2</strong>
<div id="main">
    <div>เลเวลก่อนจุติ 1 <input id="crb1" type="text"></input> (ขั้นต่ำ 120)</div>
    <div>เลเวลก่อนจุติ 2 <input id="crb2" type="text"></input> (ขั้นต่ำ 120)</div>
    <div>โบนัสสเตตัสหลังจุติ 2 <input id="cbonus21" type="text" readonly ></input> แต้ม</div>
    <div>โบนัสสกิลหลังจุติ 2 <input id="cbonus22" type="text" readonly ></input> แต้ม</div>
</div>

<strong>คำนวณโบนัสผู้เล่นจุติ 1</strong>
<div id="main">
    <div>เลเวลก่อนจุติ 1 <input id="crb" type="text"></input> (ขั้นต่ำ 120)</div>
    <div>โบนัสสเตตัสหลังจุติ 1 <input id="cbonus11" type="text" readonly ></input> แต้ม</div>
    <div>โบนัสสกิลหลังจุติ 1 <input id="cbonus12" type="text" readonly ></input> แต้ม</div>
</div>

CSS

#main {
    margin: 10px;
}

JavaScript

function tsValidate() {
    var reborn1 = parseInt($('#rb1').val());
    var reborn2 = parseInt($('#rb2').val());
    var reborn = parseInt($('#rb').val());
    var creborn1 = parseInt($('#crb1').val());
    var creborn2 = parseInt($('#crb2').val());
    var creborn = parseInt($('#crb').val());
    
    if (reborn1 > 200) {
        reborn1 = 200;
        $('#rb1').val(200);
    } else if (reborn1 < 0 || isNaN(reborn1)) {
        reborn1 = 0;
        $('#rb1').val(0);
    }
    
    if (reborn2 > 200) {
        reborn2 = 200;
        $('#rb2').val(200);
    } else if (reborn2 < 0 || isNaN(reborn2)) {
        reborn2 = 0;
        $('#rb2').val(0);
    }
    
    if (reborn > 200) {
        reborn = 200;
        $('#rb').val(200);
    } else if (reborn < 0 || isNaN(reborn)) {
        reborn = 0;
        $('#rb').val(0);
    }
    
    if (creborn1 > 200) {
        creborn1 = 200;
        $('#crb1').val(200);
    } else if (creborn1 < 0 || isNaN(creborn1)) {
        creborn1 = 0;
        $('#crb1').val(0);
    }
    
    if (creborn2 > 200) {
        creborn2 = 200;
        $('#crb2').val(200);
    } else if (creborn2 < 0 || isNaN(creborn2)) {
        creborn2 = 0;
        $('#crb2').val(0);
    }
    
    if (creborn > 200) {
        creborn = 200;
        $('#crb').val(200);
    } else if (creborn < 0 || isNaN(creborn)) {
        creborn = 0;
        $('#crb').val(0);
    }
    
    
}

function CalRB2() {
    tsValidate();
    var reborn1 = parseInt($('#rb1').val());
    var reborn2 = parseInt($('#rb2').val());
    
    var res = Math.floor((reborn1 - 30) / 17) + Math.floor((reborn2 - 60) * 3 / 14);
    $('#bonus2').val((res>=0)?res:0);
}

function CalRB1() {
    tsValidate();
    var reborn = parseInt($('#rb').val());
    
    var res = Math.floor((reborn - 30) / 5);
	$('#bonus1').val((res>=0)?res:0);
}

function CalCRB2() {
    tsValidate();
    var creborn1 = parseInt($('#crb1').val());
    var creborn2 = parseInt($('#crb2').val());
    
    var res1 =...