<div class="main_panel">
<div class="loading">
<img src="https://www.tibiawiki.com.br/images/c/ce/The_Epic_Wisdom.gif" /><br />
<label>Loading...</label>
<span>@TibiaWiki</span>
</div>
<div class="menu">
<div class="main_panel_title">Imbuing System</div>
<div class="sub-menu">
<div class="select-label">Categoria:
<select id="category">
</select>
</div>
<div class="select-label">Item:
<input type="text" id="search-item" placeholder="buscar por item..."/>
<select id="itemSelect" size="10">
</select>
</div>
</div>
<div class="divisor-line"></div>
<div class="selected-item-info">
<label class="select-label">Dados do Item:</label>
<div class="info-panel">
<div class="item-info">
<span class="select-label">Name: <span id="item-name">Magic Plate Armor</span> </span></br>
<span class="select-label" style="display: none;">Armor: <span id="item-def">17</span> </span>
<span class="select-label" style="display: none;">Weight: <span id="item-weight">85.00 oz</span> </span>
<span class="select-label">Slots: <span id="item-slots">2</span> </span></br>
</div>
<span class="item-img">
<a href="" target="_blank">
<img src="https://www.tibiawiki.com.br/images/3/35/Trans.gif" id="slot-imagem" align="right" />
</a>
</span>
</div>
</div>
</br>
<span class="divisor-line"></span>
<span class="version-label">v2.0.0</span>
</div>
<div class="imbuement-panel">
<label class="main_panel_title">Opções para Imbuir</label>
<div class="slots">
<div class="select-slot">
<label id="item-slot-1-label" class="disabled-slot">Slot 1</label>
<div id="item-slot-1" onclick="selectSlot(this.id)"><img src=""></div>
</div>
<div class="select-slot" >
<label id="item-slot-2-label" class="disabled-slot">Slot 2</label>
<div id="item-slot-2" onclick="selectSlot(this.id)"><img src=""></div>
</div>
<div class="select-slot">
<label id="item-slot-3-label" class="disabled-slot">Slot 3</label>
<div id="item-slot-3" onclick="selectSlot(this.id)"><img src=""></div>
</div>
</div>
<span class="divisor-line"></span>
<div class="imbuement-options">
<div class="selections">
<div class="select-label">Imbuement:
<select id="imbuementSelect" class="border-left">
</select>
</div>
<div class="select-label">Nível:
<select id="imbuementLevelSelect" class="border-left">
</select>
</div>
</div>
<div class="imbuement-descriptions">
<b>Efeito: </b><label id="imbument-description">Converte 5% do dano para hit points com chance de 100%.</label>
</br>
</br>
<label>Dura por <b>20h00min</b> enquanto equipado.</label>
</div>
<label class="main_panel_title">Requer as seguintes fontes astrais: </label>
<div class="imbuements-items">
<div class="item-slot" onclick="">
<div id="item-img-slot-1" class="item-img-slot">
<a href="" target="_blank">
<img src="">
</a>
</div>
<input id="item-quantity-1" class="item-quantity" value="0" disabled/>
</div>
<div class="item-slot" onclick="">
<div id="item-img-slot-2" class="item-img-slot">
<a href="" target="_blank">
<img src=""/>
</a>
</div>
<input id="item-quantity-2" class="item-quantity" value="0" disabled/>
</div>
<div class="item-slot" onclick="">
<div id="item-img-slot-3" class="item-img-slot">
<a href="" target="_blank">
<img src="">
</a>
</div>
<input id="item-quantity-3" class="item-quantity" value="0" disabled/>
</div>
</div>
</div>
<span class="divisor-line"></span>
<div class="result-panels">
<div class="price-panel">
<div id="item-price-0" class="item-price-section price-gold-token">
<a href="https://www.tibiawiki.com.br/wiki/Gold_Token" target="_blank"><img src="https://www.tibiawiki.com.br/images/0/0b/Gold_Token.gif"/></a>
<div class="item-price-data">
<div>
<label style="font-weight: bold;">Nome:</label>
<label class="item-price-name">Gold Token</label>
</div>
<div>
<label style="font-weight: bold;">Quantidade: </label>
<input class="item-price-quantity" type="number" min="0" max="6" step="2" placeholder="0" oninput="updateValues(this.value, 'quantity', 'item-0')"/>
</div>
<div>
<label style="font-weight: bold;">Valor Unitário: </label>
<input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'price', 'item-0')"/>
<label style="font-weight: bold;"> GPs</label>
</div>
</div>
</div>
<span class="divisor-line price-gold-token"></span>
<div id="item-price-1" class="item-price-section">
<a href="" target="_blank"><img src=""/></a>
<div class="item-price-data">
<div>
<label style="font-weight: bold;">Nome:</label>
<label class="item-price-name">Vampire Tooth</label>
</div>
<div>
<label style="font-weight: bold;">Quantidade: </label>
<input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'quantity', 'item-1')"/>
</div>
<div>
<label style="font-weight: bold;">Valor Unitário: </label>
<input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'price', 'item-1')"/>
<label style="font-weight: bold;"> GPs</label>
</div>
</div>
</div>
<span class="divisor-line"></span>
<div id="item-price-2" class="item-price-section">
<a href="" target="_blank"><img src=""/></a>
<div class="item-price-data">
<div>
<label style="font-weight: bold;">Nome:</label>
<label class="item-price-name">Bloody Pincer</label>
</div>
<div>
<label style="font-weight: bold;">Quantidade: </label>
<input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'quantity', 'item-2')"/>
</div>
<div>
<label style="font-weight: bold;">Valor Unitário: </label>
<input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'price', 'item-2')"/>
<label style="font-weight: bold;"> GPs</label>
</div>
</div>
</div>
<span class="divisor-line item-price-2-divisor"></span>
<div id="item-price-3" class="item-price-section">
<a href="" target="_blank"><img src=""/></a>
<div class="item-price-data">
<div>
<label style="font-weight: bold;">Nome:</label>
<label class="item-price-name">Teste</label>
</div>
<div>
<label style="font-weight: bold;">Quantidade: </label>
<input class="item-price-quantity" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'quantity', 'item-3')"/>
</div>
<div>
<label style="font-weight: bold;">Valor Unitário: </label>
<input class="item-price-value" type="number" min="0" placeholder="0" oninput="updateValues(this.value, 'price', 'item-3')"/>
<label style="font-weight: bold;"> GPs</label>
</div>
</div>
</div>
</div>
<div class="result-panel">
<div class="enhance-select">
<div>
<input type="checkbox" id="enhance-imbuement-chance" name="enhance-imbuement-chance" value="enhance-imbuement-chance" onchange="updatePrice(this)"/>
<label for="enhance-imbuement-chance"> Aumentar Chance de sucesso para 100%?</label>
</div>
</div>
<div class="enhance-imbuement-data">
<div class="total-price-taxa">
<label style="font-weight: bold;">Taxa de Sucesso:</label>
<label id="percent-chance-rate">90%</label>
</div>
<div class="total-price-taxa">
<label style="font-weight: bold; font-size: 12px;">Valor da Taxa:</label>
<label id="price-tax" style="font-size: 12px;">????? <b>GPs</b></label>
</div>
</div>
<span class="divisor-line"></span>
<label class="main_panel_title">Preços | Taxas </label>
<div class="total-price-taxa">
<label style="font-weight: bold;">Taxa de Imbuement:</label>
<label id="total-imbuement-tax-value">????? <b>GPs</b></label>
</div>
<!-- <span class="divisor-line"></span> -->
<label class="main_panel_title">Preços dos Itens</label>
<div class="total-price-taxa price-gold-token">
<label style="font-weight: bold;">Total em Gold Token:</label>
<label id="total-item-0-value">????? <b>GPs</b></label>
</div>
<div id="total-price-item-1" class="total-price-taxa">
<label style="font-weight: bold;">Item 1:</label>
<label id="total-item-1-value">????? <b>GPs</b></label>
</div>
<div id="total-price-item-2" class="total-price-taxa">
<label style="font-weight: bold;">Item 2:</label>
<label id="total-item-2-value">????? <b>GPs</b></label>
</div>
<div id="total-price-item-3" class="total-price-taxa">
<label style="font-weight: bold;">Item 3:</label>
<label id="total-item-3-value">????? <b>GPs</b></label>
</div>
<div id="total-price-itens" class="total-price-taxa">
<label style="font-weight: bold;">Total dos Itens:</label>
<label id="total-item-imbuement-value">????? <b>GPs</b></label>
</div>
<div id="total-price-itens" class="total-price-taxa price-gold-token">
<label style="font-weight: bold;">Economia em Gold Tokens:</label>
<label id="total-item-economy-value">????? <b>GPs</b></label>
</div>
<div id="total-price-itens" class="total-price-taxa">
<label style="font-weight: bold;">Total Itens + Taxa:</label>
<label id="total-item-imbuement-tax-value">????? <b>GPs</b></label>
</div>
<div id="total-price-itens" class="total-price-taxa price-gold-token">
<label style="font-weight: bold;">Total Gold Token + Taxa:</label>
<label id="total-item-0-tax-value">????? <b>GPs</b></label>
</div>
</div>
</div>
</div>
</div>
.main_panel {
position: relative;
display: flex;
width: 815px;
border: 2px solid #a2a9b1;
background: #ffffff;
border-radius: 5px;
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: black;
}
.loading {
z-index: 9999;
background-color: rgba(255, 255, 255, 0.98);
display: inline-block;
border-radius: 3px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
align-content: center;
text-align: center;
}
.loading>label {
position: relative;
bottom: 0px;
text-align: center;
font-size: math;
background: transparent;
}
.loading > span {
text-align: center;
align-content: center;
background-color: #c7451d;
height: 32px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
font-size: math;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.border-left {
border-left: #c7451d 5px solid;
}
.divisor-line {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
border-bottom: 1px solid #a2a9b1;
padding: 0.75rem;
}
.version-label {
font-size: 14px;
margin-top: 30px;
font-weight: bold;
bottom: 5px;
width: 100%;
text-align: center;
display: block;
position: absolute;
}
.result-panels {
display: flex;
}
.menu {
position: absolute;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
position: relative;
left: 0px;
border-right: 2px solid #a2a9b1;
max-width: 250px;
background: #c7451d;
padding: 5px;
}
.menu > .divisor-line {
border-bottom: 1px solid black;
}
.main_panel_title {
height: 32px;
width: 100%;
line-height: 32px;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.sub-menu {
width: 100%;
}
.source,
.item-img img {
/* position: relative; */
display: inline;
padding: 5px;
margin: 1px 2px 0 2px;
border-radius: 5px;
border: #a2a9b1 1px solid;
background: #f8f8f8;
padding: 0 auto;
height: 32px;
width: 32px;
text-align: center;
cursor: default;
}
.source {
margin: 0 auto;
width: 34px;
}
select#category, select#itemSelect {
width: 250px;
}
select#itemSelect {
height: 250px;
}
input#search-item {
width: 205px;
border: 1px solid #a2a9b1;
border-radius: 5px;
}
select {
font-family: Verdana, Arial, Times New Roman, sans-serif;
border-radius: 5px;
border: #a2a9b1 1px solid;
background: #f8f8f8;
border-collapse: separate;
margin-top: 5px;
height: 24px;
text-align: center;
display: inline-block;
vertical-align: top;
white-space: nowrap;
font-size: 13px;
color: black;
}
.select-label {
font-size: 14px;
text-align: left;
margin-top: 10px;
font-weight: bold;
}
.select-label > span {
font-size: 12px;
font-weight: bold;
}
.selected-item-info {
margin-top: 10px;
}
.info-panel {
margin-top: 15px;
height: 25px;
}
.item-info {
left: 0px;
max-width: 200px;
display: inline-table;
position: absolute;
padding: 5px;
}
.imbuement-panel {
position: relative;
right: 0px;
width: 100%;
}
.imbuement-panel > .main_panel_title {
display: inline-block;
width: 100%;
}
.imbuement-panel > .slots {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center;
height: 50px;
width: 100%;
}
.slots > .select-slot {
position: relative;
display: block;
width: 35px;
height: 64px;
align-content: center;
margin: 15px;
}
.slots > .select-slot > div {
width: 32px;
height: 32px;
}
.slots > .select-slot > div > img {
width: 31px;
height: 31px;
border-radius: 5px;
border: 1px solid #a2a9b1;
}
.slots > .select-slot > label {
display: block;
width: 35px;
font-weight: bold;
font-size: 10px;
text-align: center;
}
.imbuement-options {
position: relative;
width: 100%;
}
.imbuement-options > .main_panel_title {
display: block;
}
.imbuement-options > .imbuement-descriptions {
margin: 15px;
}
.imbuement-options > .selections {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center;
width: 100%;
}
.selections > .select-label {
position: relative;
display: block;
align-content: center;
margin: 15px;
}
.selections > .select-label > select {
width: 230px;
}
.imbuements-items {
display: flex;
justify-content: center; /* Centers horizontally */
align-items: center;
height: 50px;
width: 100%;
}
.imbuements-items > .item-slot {
position: relative;
display: inline-block;
width: 64px;
height: 32px;
align-content: center;
margin: 15px;
}
.imbuements-items > .item-slot > .item-img-slot {
width: 64px;
height: 32px;
align-content: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top: #a2a9b1 1px solid;
border-left: #a2a9b1 1px solid;
border-right: #a2a9b1 1px solid;
display: flex;
justify-content: center;
}
.imbuements-items > .item-slot > .percent-imbuement {
height: 50px;
width: 64px;
font-weight: bold;
position: relative;
display: inline-block;
align-content: center;
background-color: #c7451d;
border-radius: 5px;
border: #a2a9b1 1px solid;
}
.imbuements-items > .item-slot > .item-quantity {
width: 60px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: #a2a9b1 1px solid;
text-align: center;
}
.price-panel {
width: 50%;
border-right: 1px solid #a2a9b1;
}
.result-panel {
width: 50%;
}
.result-panel > .main_panel_title {
display: block;
}
.price-panel > .item-price-section {
width: 100%;
height: 64px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.price-panel > .item-price-section > img {
display: inline;
padding: 1px;
margin: 1px 2px 0 2px;
border-radius: 5px;
border: #a2a9b1 1px solid;
background: #f8f8f8;
padding: 0 auto;
height: 32px;
width: 32px;
text-align: center;
cursor: default;
}
.price-panel > .item-price-section > .item-price-data {
right: 0px;
max-width: calc(100% - 66px);
display: inline-table;
}
.price-panel > .item-price-section > div {
/* width: 100%; */
margin-left: 15px;
text-align: left;
}
.price-panel > .item-price-section > div > div {
margin-top: 3px;
}
.price-panel > .item-price-section > div > div > input {
width: 60px;
text-align: center;
border-radius: 5px;
border: #a2a9b1 1px solid;
}
.enhance-select {
height: 40px;
}
.enhance-select > div {
margin-top: 25px;
height: 5px;
display: flex;
align-items: center;
width: fit-content;
float: left;
margin-left: 5px;
}
.enhance-select > div > label {
font-weight: bold;
font-size: 12px;
}
input[type=checkbox] {
width: 20px;
height: 20px;
}
.enhance-imbuement-data {
width: 100%;
height: 10px;
margin: 10px;
}
.enhance-imbuement-data > .total-price-taxa {
margin: 0px;
}
.total-price-taxa {
margin: 10px;
}
.unselected-slot {
color: black;
}
.selected-slot {
color: lime;
}
.disabled-slot {
color: #a2a9b1;
}
#total-price-itens > label {
display: inline-table;
}
var version = "2.0.7";
// Imbuements
var imbuements = new Object();
// Objetos - Armors, Backpacks, Boots, Helmets, Clubs, Distance, Shields, Swords, Axes, Spellbooks, Wands and Rods.
var armors = new Object();
var shields = new Object();
var boots = new Object();
var swords = new Object();
var axes = new Object();
var clubs = new Object();
var helmets = new Object();
var wandsRods = new Object();
var distance = new Object();
var spellbooks = new Object();
var backpacks = new Object();
var fists = new Object();
// Lista Categorias
var categories = new Object();
// Popula o Select de Categorias
var loadCategories = () => {
Object.keys(categories).forEach((category) => {
$("#category").append(new Option(category, category));
});
// Inicializa o campote Item, selecionando o primeiro item.
setSelectedOption('category', "Armaduras");
}
// Carrega a lista de items de acordo com a Categoria selecionada
var loadItems = () => {
let items = getItemList();
loadItemSelect(items);
}
// Popula a lista de Items a serem selecionados para fazer os imbuements.
var loadItemSelect = (items) => {
$("#itemSelect").empty();
$("#itemSelect").append('<input type="text" placeholder="Search...">');
Object.keys(items).forEach(itemName => {
$("#itemSelect").append(new Option(itemName, itemName));
});
setSelectedOption('itemSelect', Object.keys(items)[0]);
}
var selectItem = (itemName) => {
cleanSlotsImages();
$('#item-name').text(itemName);
$('.item-img a').attr('href', 'https://www.tibiawiki.com.br/wiki/' + itemName);
$('#slot-imagem').attr("src", "https://www.tibiawiki.com.br/wiki/Especial:Redirecionar/file/" + itemName + ".gif")
$('#item-slots').text(getItemList()[itemName].slots);
selectedItem["name"] = itemName;
selectedItem["slots_quantity"] = getItemList()[itemName].slots;
selectedItem["imbuements"] = getItemList()[itemName].imbuements;
selectedItem["slots"] = new Object();
for (let i = 1; i <= selectedItem["slots_quantity"]; i++) {
selectedItem["slots"][i] = {
"selected": (i === 1),
"imbuement": {
"name": "",
"level": "",
"itens": {
0: {
value: 0,
quantity: 0,
},
1: {
value: 0,
quantity: 0,
},
2: {
value: 0,
quantity: 0,
},
3: {
value: 0,
quantity: 0,
}
}
}
};
}
selectSlot('item-slot-1');
}
// Busca Item na lista de Items.
var searchItems = (input) => {
let items = getItemList();
let filteredKeys = Object.keys(items).filter(name => name.toLowerCase().includes(input.value.toLowerCase()));
if (filteredKeys.length === 0) {
return
}
let filteredItems = new Object();
filteredKeys.forEach(itemName => {
filteredItems[itemName] = items[itemName];
});
loadItemSelect(filteredItems);
}
var getItemList = () => {
let selectedCategory = getSelectedValueFromSelect('category');
return categories[selectedCategory];
}
var loadSelectImbuements = () => {
$("#imbuementSelect").empty();
let selectedImbuementsOnAnotherSlots = getSelectedImbuementsInAnotherSlots();
Object.keys(selectedItem.imbuements).forEach(imbuementName => {
if (!selectedImbuementsOnAnotherSlots.includes(imbuementName) || selectedItem.slots[getSelectedSlotName()].imbuement.name === imbuementName) {
$("#imbuementSelect").append(new Option(imbuementName + ' (' + imbuements[imbuementName].name + ')', imbuementName));
}
});
if (selectedItem.slots[getSelectedSlotName()].imbuement.name.length !== 0) {
setSelectedOption('imbuementSelect', selectedItem.slots[getSelectedSlotName()].imbuement.name);
} else {
setSelectedOption('imbuementSelect', $("select#imbuementSelect option")[0].value);
}
}
var selectImbuement = (imbuementName) => {
let slotName = getSelectedSlotName();
selectedItem.slots[slotName].imbuement.name = imbuementName;
showHideGoldToken()
}
var loadSelectImbuementLevel = (imbuementName) => {
let imbuementLevels = selectedItem.imbuements[imbuementName];
$("#imbuementLevelSelect").empty();
imbuementLevels.forEach(imbuementLevel => {
$("#imbuementLevelSelect").append(new Option(imbuements[imbuementName].level[imbuementLevel].name + ((imbuements[imbuementName].level[imbuementLevel].premium) ? ' (premium)' : '' ), imbuementLevel));
});
if (selectedItem.slots[getSelectedSlotName()].imbuement.level.length !== 0) {
setSelectedOption('imbuementLevelSelect', selectedItem.slots[getSelectedSlotName()].imbuement.level);
} else {
setSelectedOption('imbuementLevelSelect', $("#imbuementLevelSelect option")[0].value);
}
}
var selectImbuementLevel = (imbuementLevel) => {
let slotName = getSelectedSlotName();
selectedItem.slots[slotName].imbuement.level = imbuementLevel;
$('#item-slot-' + slotName + ' > img').attr('src', imbuements[selectedItem.slots[slotName].imbuement.name].level[imbuementLevel].image);
$('#imbument-description').text(imbuements[selectedItem.slots[slotName].imbuement.name].level[selectedItem.slots[slotName].imbuement.level].description);
// Mostra os itens necessários.
cleanAllImbuementItensSlots();
updatePrice();
checkItensValue();
let imbuementItens = imbuements[selectedItem.slots[slotName].imbuement.name].level[selectedItem.slots[slotName].imbuement.level].itens;
let index = 1;
imbuementItens.forEach(item => {
updateItensPrice(index);
$('#item-img-slot-' + index + ' img').attr('src', item.image);
$('#item-img-slot-' + index + ' a').attr('href', item.link);
$('#item-img-slot-' + index + ' a').attr('target', '_blank');
$('#item-price-' + index + ' img').attr('src', item.image);
$('#item-price-' + index + ' a').attr('href', item.link);
$('#item-quantity-' + index).val(item.quantity);
$('#item-price-' + index + ' div input.item-price-quantity ').attr('min', 0);
$('#item-price-' + index + ' div input.item-price-quantity ').attr('max', item.quantity);
$('#item-price-' + index + ' div input.item-price-quantity ').val(item.quantity);
$('#item-price-' + index + ' div input.item-price-value ').val(selectedItem.slots[getSelectedSlotName()].imbuement.itens[index].value);
$('#item-price-' + index + ' div label.item-price-name ').text(item.name);
document.getElementById('item-price-' + index).style.display = '';
if (document.getElementsByClassName('item-price-' + index + '-divisor')[0] != null) {
document.getElementsByClassName('item-price-' + index + '-divisor')[0].style.display = '';
}
document.getElementById('total-price-item-' + index).style.display = '';
document.querySelectorAll('div[id="total-price-item-' + index + '"] > label')[0].innerHTML = item.name + ": ";
index++;
});
let currentSelectedImbuement = imbuements[selectedItem.slots[getSelectedSlotName()].imbuement.name];
if (currentSelectedImbuement.gold_token) {
let gpQuantity = selectedItem.slots[getSelectedSlotName()].imbuement.itens[0].quantity;
if (selectedItem.slots[slotName].imbuement.level === 'Powerful') {
gpQuantity = 6;
} else if (selectedItem.slots[slotName].imbuement.level === 'Intricate') {
gpQuantity = 4;
} else {
gpQuantity = 2;
}
$('#item-price-0 div input.item-price-quantity ').val(gpQuantity);
$('#item-price-0 div input.item-price-value ').val(selectedItem.slots[getSelectedSlotName()].imbuement.itens[0].value);
updateItensPrice(0);
} else {
$('#item-price-0 div input.item-price-quantity ').val(0);
}
updateTotalPrices();
}
var getSelectedSlotName = () => {
return Object.keys(selectedItem.slots).find(slot => selectedItem.slots[slot].selected);
}
var getSelectedImbuementsInAnotherSlots = () => {
let arrImbuements = new Array();
Object.keys(selectedItem.slots).forEach(slot => {
arrImbuements.push(selectedItem.slots[slot].imbuement.name);
});
return arrImbuements;
}
var selectSlot = (slotId) => {
$('#' + slotId + ' > label')
slotId = slotId.replace(/item-slot-/gi, '')
let selectedSlotName = getSelectedSlotName();
if (selectedItem.slots[slotId] == null) {
return
}
disableSlot();
unselectAllSlotsLabels();
selectSlotLabel('item-slot-' + slotId);
selectedItem.slots[selectedSlotName].selected = false;
selectedItem.slots[slotId].selected = true;
loadSelectImbuements();
}
var cleanSlotsImages = () => {
$('#item-slot-1 > img').attr('src', 'https://www.tibiawiki.com.br/images/3/35/Trans.gif');
$('#item-slot-2 > img').attr('src', 'https://www.tibiawiki.com.br/images/3/35/Trans.gif');
$('#item-slot-3 > img').attr('src', 'https://www.tibiawiki.com.br/images/3/35/Trans.gif');
}
var selectSlotLabel = (slotId) => {
$('#' + slotId + '-label').addClass('selected-slot');
$('#' + slotId + '-label').removeClass('unselected-slot');
$('#' + slotId + '-label').removeClass('disabled-slot');
}
var disableSlot = () => {
// disabled-slot
for (let i = 3; i > 0; i--) {
$('#item-slot-' + i + '-label').addClass('disabled-slot');
$('#item-slot-' + i + '-label').removeClass('selected-slot');
$('#item-slot-' + i + '-label').removeClass('unselected-slot');
}
}
var unselectAllSlotsLabels = () => {
for (let i = selectedItem.slots_quantity; i > 0; i--) {
$('#item-slot-' + i + '-label').addClass('unselected-slot');
$('#item-slot-' + i + '-label').removeClass('selected-slot');
$('#item-slot-' + i + '-label').removeClass('disabled-slot');
}
}
var cleanAllImbuementItensSlots = () => {
for (let i = 3; i > 0; i--) {
$('#item-img-slot-' + i + ' img').attr('src', 'https://www.tibiawiki.com.br/images/3/35/Trans.gif');
$('#item-img-slot-' + i + ' a').attr('href', 'javascript:;');
$('#item-img-slot-' + i + ' a').attr('target', '');
$('#item-quantity-' + i).val(0);
$('#item-price-' + i + ' img').attr('src', 'https://www.tibiawiki.com.br/images/3/35/Trans.gif');
$('#item-price-' + i + ' div input.item-price-quantity ').val(0);
$('#item-price-' + i + ' div input.item-price-quantity ').attr('min', 0);
$('#item-price-' + i + ' div input.item-price-quantity ').attr('max', 0);
// $('#item-price-' + i + ' div input.item-price-value ').val(0);
$('#item-price-' + i + ' div label.item-price-name ').text('');
document.getElementById('item-price-' + i).style.display = 'none';
if (document.getElementsByClassName('item-price-' + i + '-divisor')[0] != null) {
document.getElementsByClassName('item-price-' + i + '-divisor')[0].style.display = 'none';
}
document.getElementById('total-price-item-' + i).style.display = 'none';
}
// $('#item-price-0 div input.item-price-value ').val(0);
}
var showHideGoldToken = () => {
let currentSelectedImbuement = imbuements[selectedItem.slots[getSelectedSlotName()].imbuement.name];
let components = $('.price-gold-token');
if (currentSelectedImbuement.gold_token != null && currentSelectedImbuement.gold_token) {
Object.keys(components).forEach(component => {
if (!isNaN(Number(component))) {
components[component].style.display = "";
}
})
} else {
Object.keys(components).forEach(component => {
if (!isNaN(Number(component))) {
components[component].style.display = "none";
}
})
}
}
var updatePrice = () => {
let imbuementLevel = selectedItem.slots[getSelectedSlotName()].imbuement.level;
let tax = '0';
let percent = '0';
if (imbuementLevel === 'Powerful') {
percent = 50;
tax = (document.getElementById('enhance-imbuement-chance').checked) ? '250,000' : '200,000';
document.getElementById('price-tax').innerHTML = '50,000' + ' <b>GPs</b>';
} else if (imbuementLevel === 'Intricate') {
percent = 70;
tax = (document.getElementById('enhance-imbuement-chance').checked) ? '60,000' : '30,000';
document.getElementById('price-tax').innerHTML = '30,000' + ' <b>GPs</b>';
} else {
percent = 90;
tax = (document.getElementById('enhance-imbuement-chance').checked) ? '15,000' : '5,000';
document.getElementById('price-tax').innerHTML = '10,000' + ' <b>GPs</b>';
}
document.getElementById('percent-chance-rate').innerHTML = ((document.getElementById('enhance-imbuement-chance').checked) ? 100 : percent) + '%';
document.getElementById('percent-chance-rate').style.color = (document.getElementById('enhance-imbuement-chance').checked) ? 'lime' : 'red';
document.getElementById('total-imbuement-tax-value').innerHTML = tax + ' <b>GPs</b>';
updateTotalPrices();
}
var updateValues = (value, type, id) => {
let itemIndex = id.replace(/item-/gi, '');
if (type === 'price') {
selectedItem.slots[getSelectedSlotName()].imbuement.itens[itemIndex].value = value
selectedItem.slots[getSelectedSlotName()].imbuement.itens[itemIndex].quantity = $('#item-price-' + itemIndex + ' input.item-price-quantity').val()
} else {
selectedItem.slots[getSelectedSlotName()].imbuement.itens[itemIndex].quantity = value
selectedItem.slots[getSelectedSlotName()].imbuement.itens[itemIndex].price = $('#item-price-' + itemIndex + ' input.item-price-value').val()
}
updateItensPrice(itemIndex);
updateTotalPrices();
}
var updateItensPrice = (idIndex) => {
let value = calcValues(idIndex);
setTotalValuesToFields(idIndex, value);
}
var updateTotalPrices = () => {
let total = 0;
let tax = Number(document.getElementById('total-imbuement-tax-value').innerHTML.replace(/\s<b>GPs<\/b>/gi, '').replace(/,/gi, ''));
if (selectedItem.slots[getSelectedSlotName()].imbuement.level === 'Basic') {
let value = calcValues(1);
total += value;
}
if (selectedItem.slots[getSelectedSlotName()].imbuement.level === 'Intricate') {
let value = calcValues(1);
value += calcValues(2);
total += value;
}
if (selectedItem.slots[getSelectedSlotName()].imbuement.level === 'Powerful') {
let value = calcValues(1);
value += calcValues(2);
value += calcValues(3);
total += value;
}
if (imbuements[selectedItem.slots[getSelectedSlotName()].imbuement.name].gold_token) {
let goldToken = calcValues(0);
setTotalValuesToFields('economy', total - goldToken);
setTotalValuesToFields('0-tax', goldToken + tax);
}
setTotalValuesToFields('imbuement', total);
setTotalValuesToFields('imbuement-tax', total + tax);
}
var setTotalValuesToFields = (idIndex, value) => {
document.getElementById('total-item-' + idIndex + '-value').innerHTML = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' <b>GPs</b>';
}
var checkItensValue = () => {
for (let i = 3; i >= 0; i--) {
let value = selectedItem.slots[getSelectedSlotName()].imbuement.itens[i];
$('#item-price-' + i + ' div input.item-price-value ').val(value);
}
}
var calcValues = (idIndex) => {
let quantity = selectedItem.slots[getSelectedSlotName()].imbuement.itens[idIndex].quantity;
let value = selectedItem.slots[getSelectedSlotName()].imbuement.itens[idIndex].value;
return Number(quantity * value);
}
// Limpa Campos.
var cleanSearchField = () => {
let searchInput = document.getElementById('search-item');
searchInput.value = '';
}
/**
* Adiciona Evento para quando houver interação nos selects, disparar uma ação/função.
*/
var addEventListeners = () => {
// Category Select
document.getElementById('category').addEventListener('change', function() {
cleanSearchField();
loadItems();
}, false);
// Item Select
document.getElementById('itemSelect').addEventListener('change', function() {
let option = getSelectedValueFromSelect('itemSelect');
selectItem(option);
}, false);
let searchInput = document.getElementById('search-item');
searchInput.addEventListener('input', () => {
searchItems(searchInput);
});
// ImbuementSelect
document.getElementById('imbuementSelect').addEventListener('change', function() {
let option = getSelectedValueFromSelect('imbuementSelect');
selectImbuement(option);
loadSelectImbuementLevel(option);
}, false);
// Imbuement Level Select
document.getElementById('imbuementLevelSelect').addEventListener('change', function() {
let option = getSelectedValueFromSelect('imbuementLevelSelect');
selectImbuementLevel(option);
}, false);
}
/**
* Pega a Opção selecionada de um Select.
*/
var getSelectedValueFromSelect = (selectId) => {
let selectElement = document.getElementById(selectId);
return selectElement.options[selectElement.selectedIndex].value;
}
/**
* Seta uma opção forçando a seleção e disparando o evento de ação/função.
*/
var setSelectedOption = (selectId, value) => {
let selectElement = document.getElementById(selectId);
selectElement.value = value;
// Trigger the change event
var event = new Event('change');
selectElement.dispatchEvent(event);
}
var loadAllItens = async () => {
let baseURL = 'https://mypper.com/tibia/v1/tibiawiki/';
$('.loading label').text('Loading Imbuements and Itens for You, Adventurer!...');
await Promise.all([
loadData(baseURL, 'imbuements', 'Imbuements'),
loadData(baseURL, 'armors', 'Armors'),
loadData(baseURL, 'backpacks', 'Backpacks'),
loadData(baseURL, 'boots', 'Boots'),
loadData(baseURL, 'fists', 'Fists'),
loadData(baseURL, 'helmets', 'Helmets'),
loadData(baseURL, 'clubs', 'Clubs'),
loadData(baseURL, 'distance', 'Distance'),
loadData(baseURL, 'shields', 'Shields'),
loadData(baseURL, 'swords', 'Swords'),
loadData(baseURL, 'axes', 'Axes'),
loadData(baseURL, 'spellbooks', 'Spellbooks'),
loadData(baseURL, 'wandsRods', 'WandsRods')
]).then((results) => {
categories = {
"Armaduras": armors,
"Backpacks": backpacks,
"Botas": boots,
"Capacetes": helmets,
"Clavas": clubs,
"Distância": distance,
"Escudos": shields,
"Espadas": swords,
"Machados": axes,
"Punhos": fists,
"Spellbooks": spellbooks,
"Wands e Rods": wandsRods
}
loadCategories();
$('.loading')[0].style.display = 'none';
console.log("Load Done!");
}).catch((error) => {
console.error('Error:', error);
});
// executedPromises();
}
var loadData = async (baseURL, varName, path) => {
return new Promise((resolve, reject) => {
$.ajax({
contentType: 'text/plain; charset=utf-8',
url: baseURL + '/index.php?title=Tibia_Wiki:' + path + '/json&action=raw',
type: 'GET',
success: function(data) {
callbacks(data.replace(/<pre id="[^"]*">/gi, '').replace(/<\/pre>/gi, ''), varName);
resolve('Loaded: ' + varName);
},
error: function(error) {
console.error(error);
callbacks(null, varName);
}
});
});
}
var callbacks = (codigo, varName) => {
if (codigo == null) {
codigo = "";
} else {
console.log('Loaded:', varName);
window[varName] = JSON.parse(codigo);
}
// executedPromises();
}
var executedPromises = async () => {
// await Promise.all(promises).
}
var selectedItem = new Object();
var promises = [];
$(document).ready(function () {
$(".version-label").text("v" + version);
// Adiona os eventos aos componentes.
addEventListeners();
loadAllItens();
});
