|
||||||
|
|
|
||||||||||||||||||||||||
Tibia Wiki:Skills Calculator/Codigo: mudanças entre as edições
Ir para navegação
Ir para pesquisar
 Njorn (discussão | contribs) (Criou página com '<pre id="skills_calculator_html"> <table class="main_table"> <tr> <td style="height: 30px;" colspan="2"> <div id="title" class="titulo">Calculadora de Skills com Loyalty</div> </td> </tr> <tr> <td> <table style="width:100%; height:40px;"> <tr> <td style="width: 15%; vertical-align: top;"> <table style="width:100%;">...') |
|||
| Linha 3: | Linha 3: | ||
<tr> | <tr> | ||
<td style="height: 30px;" colspan="2"> | <td style="height: 30px;" colspan="2"> | ||
<div id="title" class="titulo">Calculadora de Skills com Loyalty</div> | <div id="skills-calc-title" class="titulo">Calculadora de Skills com Loyalty</div> | ||
</td> | </td> | ||
</tr> | </tr> | ||
| Linha 14: | Linha 14: | ||
<tr> | <tr> | ||
<td> | <td> | ||
<div | <div class="titulo">Vocações:</div> | ||
<div id="vocation-select"> | <div id="vocation-select"> | ||
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;"> | <div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;"> | ||
| Linha 453: | Linha 453: | ||
</pre> | </pre> | ||
<pre id="skills_calculator_js"> | <pre id="skills_calculator_js"> | ||
const | const skills_calc_version = "1.0.1"; | ||
const skill_constants = { | const skill_constants = { | ||
| Linha 822: | Linha 822: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
$("#title").text("Calculadora de Skills - " + | $("#skills-calc-title").text("Calculadora de Skills - " + skills_calc_version); | ||
loadSelect(); | loadSelect(); | ||
}); | }); | ||
</pre> | </pre> | ||
Edição das 17h20min de 8 de agosto de 2023
<table class="main_table">
<tr>
<td style="height: 30px;" colspan="2">
<div id="skills-calc-title" class="titulo">Calculadora de Skills com Loyalty</div>
</td>
</tr>
<tr>
<td>
<table style="width:100%; height:40px;">
<tr>
<td style="width: 15%; vertical-align: top;">
<table style="width:100%;">
<tr>
<td>
<div class="titulo">Vocações:</div>
<div id="vocation-select">
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;">
<input type="checkbox" id="none-select" name="none-select" value="none" onchange="onSelectVocation(this)">
<label for="none-select">None</label>
</div>
<br>
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;">
<input type="checkbox" id="druid-select" name="druid-select" value="druid" onchange="onSelectVocation(this)">
<span class="tip2" id="fonte3">
<a href="https://www.tibiawiki.com.br/wiki/Druid" target="blank">Druid | Elder Druid</a>
</span>
<label for="druid-select">Druid</label>
</div>
<br>
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;">
<input type="checkbox" id="knight-select" name="knight-select" value="knight" onchange="onSelectVocation(this)">
<span class="tip2" id="fonte3">
<a href="https://www.tibiawiki.com.br/wiki/Knight" target="blank">Knight | Elite Knight</a>
</span>
<label for="knight-select">Knight</label>
</div>
<br>
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;">
<input type="checkbox" id="paladin-select" name="paladin-select" value="paladin" onchange="onSelectVocation(this)">
<span class="tip2" id="fonte3">
<a href="https://www.tibiawiki.com.br/wiki/Paladin" target="blank">Paladin | Royal Paladin</a>
</span>
<label for="paladin-select">Paladin</label>
</div>
<br>
<div style="margin-top: 5px; height: 5px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; width: fit-content;">
<input type="checkbox" id="sorcerer-select" name="sorcerer-select" value="sorcerer" onchange="onSelectVocation(this)">
<span class="tip2" id="fonte3">
<a href="https://www.tibiawiki.com.br/wiki/Paladin" target="blank">Sorcerer | Master Sorcerer</a>
</span>
<label for="sorcerer-select">Sorcerer</label>
</div>
<br>
</div>
</td>
</tr>
</table>
</td>
<td style="width: 75%; vertical-align: top;">
<table style="height: 100%; width: 100%; ">
<th colspan="5" style="height: 26px; vertical-align: top;">
<div class="titulo">Loyalty:</div>
</th>
<tr>
<td colspan="5" style="text-align: center;">
<label class="label-loyalty">Points:</label>
<input type="number" class="input-nums" id="loyalty-points" name="loyalty-points" value="0" min="0" oninput="updateLoyalties(this)">
<label class="label-loyalty">Bonus:</label>
<input type="number" class="input-nums" id="loyalty-bonus" name="loyalty-bonus" value="0" min="0" max="50" step="5" oninput="updateLoyalties(this)">
<label>%</label>
</td>
</tr>
<tr>
<th colspan="5" style="height: 26px; vertical-align: middle;">
<div class="titulo">Skills:</div>
</th>
</tr>
<tr style="height: 21px;">
<td style="vertical-align: middle; width: 10%;">
</td>
<td colspan="4" style="height: 21px; vertical-align: middle;">
<label class="header-skills">Bar Skills</label>
<label class="header-skills">%</label>
<label class="header-skills">Base Skills</label>
<label class="header-skills">%</label>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/7/7e/Spellbook.gif"> Magic</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="magic-skill" name="magic" value="0" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="magic-skill-percent" name="magic" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="magic-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="magic-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="magic-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="magic-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/8/8a/Pair_of_Iron_Fists.gif"> Fist</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="fist-skill" name="fist" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="fist-skill-percent" name="fist" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="fist-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="fist-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="fist-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="fist-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/3/37/Club.gif"> Club</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="club-skill" name="club" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="club-skill-percent" name="club" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="club-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="club-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="club-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="club-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/1/1f/Sword.gif"> Sword</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="sword-skill" name="sword" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="sword-skill-percent" name="sword" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="sword-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="sword-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="sword-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="sword-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/3/31/Axe.gif"> Axe</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="axe-skill" name="axe" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="axe-skill-percent" name="axe" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="axe-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="axe-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="axe-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="axe-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/1/12/Guardcatcher.gif"> Distance</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="distance-skill" name="distance" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="distance-skill-percent" name="distance" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="distance-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="distance-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="distance-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="distance-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/2/2d/Wooden_Shield.gif"> Shielding</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="shielding-skill" name="shielding" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="shielding-skill-percent" name="shielding" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="shielding-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="shielding-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="shielding-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="shielding-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
<tr style="height: 32px;">
<td style="width: 10%;">
<label class="label-img"> <img style="width: 15px; height: 15px;" src="https://www.tibiawiki.com.br/images/b/bb/Fish.gif"> Fishing</label>
</td>
<td class="skills-td" style="vertical-align: middle;">
<input type="number" style="margin-bottom: 10px;" class="input-nums input-skills" id="fishing-skill" name="fishing" value="10" min="0" max="500" oninput="updateSkills(this)">
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle;">
<input type="number" class="input-nums input-skills" id="fishing-skill-percent" name="fishing" value="100" min="1" max="100" oninput="updateSkills(this)"> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="fishing-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
<td class="skills-td" style="vertical-align: middle;">
<label id="fishing-raw-skill">0</label>
</td>
<td class="skills-td" colspan="1" style="vertical-align: middle; padding-top: 10px;">
<label id="fishing-raw-percent">100%</label> <br>
<div class="progress-bar" style="margin-top: 5px;">
<div id="fishing-raw-progress-bar" style="width: 1%;" class="skills-progress-bar"></div>
</div>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
.main_table {
width: 600px;
border: #7B6E4C 1px solid;
background: #181E23;
margin: 2px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 1);
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
}
.titulo {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
padding: 0 auto;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
}
.quantity-box {
position: relative;
width: 34px;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
height: 15px;
line-height: 15px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
}
.title-box {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
line-height: 50px;
text-align: center;
font-weight: bold;
font-size: 12px;
cursor: default;
height: 56px;
width: 100%;
}
.input-nums {
border: #7B6E4C 1px solid;
background: #3d5361;
line-height: 18px;
text-align: center;
display: inline-block;
white-space: nowrap;
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
width: 55px;
margin-top: 5px;
border-collapse: separate;
}
.input-skills {
width: 50px;
}
#time-label {
background: transparent;
font-family: Verdana, Arial, Times New Roman, sans-serif;
font-size: 13px;
color: #B2A898;
display: block;
text-align: center;
}
.link-system {
color: #CBB47A !important;
}
#vocation-select, #durable-weapons-select, #lasting-weapons-select, .ingredients-list {
background: #11161A;
margin: 5px 2px 2px 2px;
padding: 10px;
border: #CBB47A 1px solid;
border-collapse: separate;
}
input[type=checkbox] {
width: 20px;
height: 20px;
}
.image-box {
position: relative;
margin: 1px 2px 0 2px;
border: #7B6E4C 1px solid;
background: #11161A;
padding: 0 auto;
height: 34px;
width: 34px;
text-align: center;
cursor: default;
}
/* Tooltip */
.tip2 {
background-color: #F2F2F2;
border-radius: 2px;
box-shadow: 0 0 6px #B2B2B2;
display: none;
position: absolute;
padding: 10px;
z-index: 1;
}
.tooltip {
position: relative;
}
.tooltip,
.tooltip:hover + .tip2,
.tip2:hover {
display: block;
}
.progress-bar {
width: 100%;
background-color: grey;
}
.skills-progress-bar {
width: 1%;
height: 3px;
background-color: green;
}
.label-loyalty {
margin-left: 5px;
/* width: 95%; */
text-align: right;
display: inline-flex;
margin-right: 5px;
height: 100%;
align-items: center;
}
.header-skills {
width: 110.03px;
display: table-cell;
text-align: center;
}
.skills-td {
width: 110.03px;
text-align: center;
}
.label-img {
text-align: center;
display: flex;
align-items: center;
}
const skills_calc_version = "1.0.1";
const skill_constants = {
"magic": {
"constant": 1600,
"offset": 1,
},
"melee": {
"constant": 50,
"offset": 10,
},
"distance": {
"constant": 25,
"offset": 10,
},
"shielding": {
"constant": 100,
"offset": 10,
},
"fishing": {
"constant": 20,
"offset": 10,
},
getAttribByType: (type) => {
if (type == "club" || type == "axe" || type == "sword" || type == "fist") {
return skill_constants["melee"]
}
return skill_constants[type]
}
};
const vocation_constants = {
none: {
"magic": 3.0,
"melee": 2.0,
"fist": 1.5,
"distance": 2.0,
"shielding": 1.5,
"fishing": 1.1
},
knight: {
"magic": 3.0,
"melee": 1.1,
"fist": 1.1,
"distance": 1.4,
"shielding": 1.1,
"fishing": 1.1
},
paladin: {
"magic": 1.4,
"melee": 1.2,
"fist": 1.2,
"distance": 1.1,
"shielding": 1.1,
"fishing": 1.1
},
sorcerer: {
"magic": 1.1,
"melee": 2.0,
"fist": 1.5,
"distance": 2.0,
"shielding": 1.5,
"fishing": 1.1
},
druid: {
"magic": 1.1,
"melee": 2.0,
"fist": 1.5,
"distance": 2.0,
"shielding": 1.5,
"fishing": 1.1
},
getAttribByType: (vocation, type) => {
if (type == "club" || type == "axe" || type == "sword") {
return vocation_constants[vocation]["melee"]
}
return vocation_constants[vocation][type]
}
}
const loyalties = {
0: 0,
360: 0.05,
720: 0.1,
1080: 0.15,
1440: 0.2,
1800: 0.25,
2160: 0.3,
2520: 0.35,
2880: 0.4,
3240: 0.45,
3600: 0.5
}
function f(x, skill_constant, vocation_constant) {
return skill_constant.constant * (Math.pow(vocation_constant, (x - skill_constant.offset)))
}
function calcSkillsFromPoints(skillspoints, skill_constant, vocation_constant) {
// Define the initial values for the range [aMin, aMax]
let aMin = 0;
let aMax = 500;
let a = (aMin + aMax) / 2;
let maxIndex = skillspoints;
for (var i = 0; i < 500; i++) {
if (f(a, skill_constant, vocation_constant) > skillspoints) {
aMax = a;
} else {
aMin = a;
}
a = (aMin + aMax) / 2;
}
return parseFloat(a.toFixed(2));
}
var loadSelect = () => {
onSelectVocation(document.getElementById("druid-select"));
}
// Calc points at a skills
var calcSkillsPoints = (valueSkill, type) => {
let skill_constant = skill_constants.getAttribByType(type)
let vocation_constant = vocation_constants.getAttribByType(getSelectedVocation().value, type);
let loyalty = getLoyaylty()
let beforeSkillsSun = 0;
let barSkills = skill_constant.constant * (Math.pow(vocation_constant, (valueSkill - skill_constant.offset)))
let barSkillsPoints = Math.round(barSkills)
let rawSkillsPoints = ((-barSkillsPoints) / (-1 + -loyalty))
// (-2400) / -1.5 = 1600
return {
rawSkills: calcSkillsFromPoints(rawSkillsPoints, skill_constant, vocation_constant),
rawSkillsPoints: rawSkillsPoints,
barSkills: valueSkill,
barSkillsPoints: barSkillsPoints
}
}
var onSelectVocation = (checkbox) => {
document.getElementById("none-select").checked = false;
document.getElementById("druid-select").checked = false;
document.getElementById("knight-select").checked = false;
document.getElementById("paladin-select").checked = false;
document.getElementById("sorcerer-select").checked = false;
checkbox.checked = true;
updateAllSkills();
}
var getSelectedVocation = () => {
if (document.getElementById("none-select").checked) {
return document.getElementById("none-select")
}
if (document.getElementById("druid-select").checked) {
return document.getElementById("druid-select")
}
if (document.getElementById("knight-select").checked) {
return document.getElementById("knight-select")
}
if (document.getElementById("paladin-select").checked) {
return document.getElementById("paladin-select")
}
if (document.getElementById("sorcerer-select").checked) {
return document.getElementById("sorcerer-select")
}
}
var getLoyaylty = () => {
let inputBonus = document.getElementById("loyalty-bonus")
return inputBonus.value / 100
}
var updateLoyalties = (input) => {
if (input.name == "loyalty-points") {
updateLoyaltiesByPoints(input)
} else {
updateLoyaltiesByBonus(input)
}
}
var updateLoyaltiesByBonus = (input) => {
for (const key in loyalties) {
if (loyalties.hasOwnProperty(key) && loyalties[key] === (input.value / 100)) {
document.getElementById("loyalty-points").value = key;
break;
}
}
updateAllSkills()
}
var updateLoyaltiesByPoints = (input) => {
let value = input.value
if (value < 360) {
document.getElementById("loyalty-bonus").value = loyalties[0] * 100
} else if (value >= 360 && value < 720) {
document.getElementById("loyalty-bonus").value = loyalties[360] * 100
} else if (value >= 720 && value < 1080) {
document.getElementById("loyalty-bonus").value = loyalties[720] * 100
} else if (value >= 1080 && value < 1440) {
document.getElementById("loyalty-bonus").value = loyalties[1080] * 100
} else if (value >= 1440 && value < 1800) {
document.getElementById("loyalty-bonus").value = loyalties[1440] * 100
} else if (value >= 1800 && value < 2160) {
document.getElementById("loyalty-bonus").value = loyalties[1800] * 100
} else if (value >= 2160 && value < 2520) {
document.getElementById("loyalty-bonus").value = loyalties[2160] * 100
} else if (value >= 2520 && value < 2880) {
document.getElementById("loyalty-bonus").value = loyalties[2520] * 100
} else if (value >= 2880 && value < 3240) {
document.getElementById("loyalty-bonus").value = loyalties[2880] * 100
} else if (value >= 3240 && value < 2600) {
document.getElementById("loyalty-bonus").value = loyalties[3240] * 100
} else {
document.getElementById("loyalty-bonus").value = loyalties[3600] * 100
}
}
var updateAllSkills = () => {
updateMagic()
updateFist()
updateClub()
updateSword()
updateAxe()
updateDistance()
updateShielding()
updateFishing()
}
var updateSkills = (option) => {
if (option.name == "magic") {
updateMagic();
}
if (option.name == "fist") {
updateFist();
}
if (option.name == "club") {
updateClub();
}
if (option.name == "sword") {
updateSword();
}
if (option.name == "axe") {
updateAxe();
}
if (option.name == "distance") {
updateDistance();
}
if (option.name == "shielding") {
updateShielding();
}
if (option.name == "fishing") {
updateFishing();
}
}
var updateMagic = () => {
let inputSkills = document.getElementById("magic-skill")
let inputPercent = document.getElementById("magic-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("magic", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "magic")
updateLoadBars("magic-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateFist = () => {
let inputSkills = document.getElementById("fist-skill")
let inputPercent = document.getElementById("fist-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("fist", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "fist")
updateLoadBars("fist-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateClub = () => {
let inputSkills = document.getElementById("club-skill")
let inputPercent = document.getElementById("club-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("club", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "club")
updateLoadBars("club-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateSword = () => {
let inputSkills = document.getElementById("sword-skill")
let inputPercent = document.getElementById("sword-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("sword", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "sword")
updateLoadBars("sword-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateAxe = () => {
let inputSkills = document.getElementById("axe-skill")
let inputPercent = document.getElementById("axe-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("axe", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "axe")
updateLoadBars("axe-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateDistance = () => {
let inputSkills = document.getElementById("distance-skill")
let inputPercent = document.getElementById("distance-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("distance", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "distance")
updateLoadBars("distance-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateShielding = () => {
let inputSkills = document.getElementById("shielding-skill")
let inputPercent = document.getElementById("shielding-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("shielding", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "shielding")
updateLoadBars("shielding-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateFishing = () => {
let inputSkills = document.getElementById("fishing-skill")
let inputPercent = document.getElementById("fishing-skill-percent")
let skills = parseFloat(inputSkills.value) + (((inputPercent.value == 100) ? 0.00 : ((100 - inputPercent.value) / 100)))
updateLoadBars("fishing", parseFloat(100 - (inputPercent.value / 100)))
let resultSkills = calcSkillsPoints(skills, "fishing")
updateLoadBars("fishing-raw", (parseFloat(resultSkills.rawSkills)))
}
var updateLoadBars = (barType, value) => {
let bar = document.getElementById(barType + "-progress-bar")
let percent = parseInt(100 - ((value % 1) * 100))
if (barType.includes("-raw")) {
let rawLabelPercent = document.getElementById(barType + "-percent")
let rawLabelSkill = document.getElementById(barType + "-skill")
let pValue = 0;
if (percent == 0) {
pValue = 1;
} else if ((100 - percent) == 0) {
pValue = 100
} else {
pValue = percent
}
rawLabelPercent.innerHTML = pValue + "%"
rawLabelSkill.innerHTML = Math.trunc(value)
}
let bpValue = 0
if (percent == 0) {
bpValue = 100;
} else if ((100 - percent) == 0) {
bpValue = 1
} else {
bpValue = (100 - percent)
}
bar.style.width = bpValue + "%"
}
$(document).ready(function() {
$("#skills-calc-title").text("Calculadora de Skills - " + skills_calc_version);
loadSelect();
});