Skip to content

Commit

Permalink
Add and remove gildings from the maker and shows the chance range
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaoschoen
joaoschoen committed Dec 3, 2024
1 parent d429713 commit 8b1f465
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 47 deletions.
193 changes: 156 additions & 37 deletions code.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Here is where the data for the gildables go
var item_select_options = [{
// ITEM
var maker_item_select_options = [{
"name": "--Please select an item--",
"icon":"",
"link": "#",
Expand All @@ -11,7 +11,10 @@ var item_select_options = [{
"slot": [
]
},]
var maker_gildings = []
var maker_base_item = {}

// GILDING
var gilding_select_options = []
var gilding_affinity_filter = []
var gilding_option_list = []
Expand All @@ -25,10 +28,10 @@ function generate_options_for_item_select(){
option.textContent = "--Please select an item--"
item_select.appendChild(option)
//real options
item_select_options.forEach((value,index) =>{
maker_item_select_options.forEach((value,index) =>{
const option = document.createElement('option')
option.value = index
option.textContent = item_select_options[index].name
option.textContent = maker_item_select_options[index].name
item_select.appendChild(option)
})
}
Expand All @@ -54,57 +57,57 @@ function slot_selected(selection){
const selected_slot = document.getElementById("selected_slot")
selected_slot.innerHTML = selection

item_select_options = filter_equipment_by_slot(selection)
item_select_options = item_select_options.sort((a,b)=>{
maker_item_select_options = filter_equipment_by_slot(selection)
maker_item_select_options = maker_item_select_options.sort((a,b)=>{
return a.name[0] > b.name[0] ? 1 : -1
})
generate_options_for_item_select()
}

function item_selected(index){
window.localStorage.setItem("selected_item",index)
window.localStorage.setItem("maker_selected_item",index)
//We check for -1 because a null option is always added to the options list
if(index != -1){
const item = item_select_options[index]
maker_base_item = maker_item_select_options[index]

const icon = document.getElementById("selected_icon")
icon.src = item.icon
const slots = document.getElementById("selected_slots")
slots.innerHTML = item.slot
const icon = document.getElementById("maker_base_item_icon")
icon.src = maker_base_item.icon
const slots = document.getElementById("maker_base_item_slots")
slots.innerHTML = maker_base_item.slot
//null option
const option = document.createElement('option')
option.value = -1

// BONUS
const bonus = document.getElementById("selected_bonus")
bonus.innerText = ""
if(Object.keys(item.bonus).length != 0){
let keys = Object.keys(item.bonus)
const bonus = document.getElementById("maker_base_item_bonus")
bonus.innerHTML = ""
if(Object.keys(maker_base_item.bonus).length != 0){
let keys = Object.keys(maker_base_item.bonus)
for (let i = 0; i < keys.length; i++) {
let el = document.createElement("span")
el.innerText = "" + keys[i] + " " + item.bonus[keys[i]]
el.innerText = "" + keys[i] + " " + maker_base_item.bonus[keys[i]]
el.className = "p-2"
bonus.appendChild(el)
}
} else {
bonus.innerText = "No bonus"
bonus.innerHTML = "No bonus"
}
// ARMOR
row_armor_0 = document.getElementById("row_armor_0")
row_armor_1 = document.getElementById("row_armor_1")
row_armor_2 = document.getElementById("row_armor_2")
row_armor_3 = document.getElementById("row_armor_3")
if(Object.keys(item.armor).length != 0){
if(Object.keys(maker_base_item.armor).length != 0){
row_armor_0.className = ""
row_armor_1.className = ""
row_armor_2.className = ""
row_armor_3.className = ""
selected_armor_hp = document.getElementById("selected_armor_hp")
selected_armor_hp.innerText = item.armor.hp
selected_armor_hp.innerText = maker_base_item.armor.hp
selected_armor_abs_x = document.getElementById("selected_armor_abs_x")
selected_armor_abs_x.innerText = item.armor.abs_x
selected_armor_abs_x.innerText = maker_base_item.armor.abs_x
selected_armor_abs_y = document.getElementById("selected_armor_abs_y")
selected_armor_abs_y.innerText = item.armor.abs_y
selected_armor_abs_y.innerText = maker_base_item.armor.abs_y
} else {
row_armor_0.className = "hidden"
row_armor_1.className = "hidden"
Expand All @@ -113,20 +116,17 @@ function item_selected(index){
}
// GILDING
const affinity = document.getElementById("selected_affinity")
const row_chance_min = document.getElementById("base-item-chance_min")
const row_chance_max = document.getElementById("base-item-chance_max")
const chance_min = document.getElementById("selected_chance_min")
const chance_max = document.getElementById("selected_chance_max")
if(item.affinity != undefined){
affinity.innerHTML = item.affinity
chance_min.innerHTML = item.chance_min
row_chance_min.className = ""
chance_max.innerHTML = item.chance_max
row_chance_max.className = ""
const maker_base_item_chances = document.getElementById("maker_base_item_gild_chances")
const chance_min = document.getElementById("maker_base_item_chance_min")
const chance_max = document.getElementById("maker_base_item_chance_max")
if(maker_base_item.affinity != undefined){
affinity.innerHTML = maker_base_item.affinity
maker_base_item_chances.className = ""
chance_min.innerHTML = maker_base_item.chance_min
chance_max.innerHTML = maker_base_item.chance_max
} else {
affinity.innerHTML = "Not Gildable"
row_chance_min.className = "hidden"
row_chance_max.className = "hidden"
maker_base_item_chances.className = "hidden"
}
}
}
Expand Down Expand Up @@ -175,7 +175,7 @@ function filter_gildings_by_affinity(selection){
let options = []
let slot = window.localStorage.getItem("selected_slot")
let selected_item = window.localStorage.getItem("selected_item")
let equipment = item_select_options[selected_item]
let equipment = maker_item_select_options[selected_item]
if(equipment.affinity == undefined){
return options
}
Expand Down Expand Up @@ -204,6 +204,23 @@ function filter_gildings_by_affinity(selection){
})
return options
}
function maker_add_gilding(index){
console.log(index)
let item = gilding_option_list[index]
for (let i = 0; i < maker_gildings.length; i++) {
const element = maker_gildings[i];
if(element.name == item.name){
return
}
}
maker_gildings.push(item)
generate_maker_slots()
}
function maker_remove_gilding(index){
console.log(index)
maker_gildings.splice(index,1)
generate_maker_slots()
}

function generate_gildings_list(){
const gilding_results = document.getElementById("gilding-results")
Expand All @@ -224,16 +241,21 @@ function generate_gildings_list(){
link.href = item.link
link.className = "cursor-pointer text-blue-700"
link.innerText = item.name
link.target = "_blank"
name.appendChild(link)
const icon = document.createElement('td')
const add_button = document.createElement('button')
add_button.className = "rounded-full border-black border-2 w-8 h-8"
add_button.id = index
add_button.addEventListener('click', (event) => {
maker_add_gilding(event.target.id)
});
add_button.className = "rounded-full border-black border-2 w-8 h-8 font-bold"
add_button.innerText = "+"
const img = document.createElement("img")
img.src = item.icon
icon.appendChild(img)
row1.appendChild(name)
row1.appendChild(icon)
row1.appendChild(name)
row1.appendChild(add_button)
table.appendChild(row1)
div.appendChild(table)
Expand Down Expand Up @@ -272,6 +294,102 @@ function generate_gildings_list(){
})
}

function generate_maker_slots(){
let base_min = parseFloat(maker_base_item.chance_min.replace("%","")) / 100
let base_max = parseFloat(maker_base_item.chance_max.replace("%","")) / 100
console.log(base_min)
console.log(base_max)
console.log(maker_base_item)
console.log(maker_gildings)
const maker_slots = document.getElementById("maker_slots")
maker_slots.innerHTML = ""
for (let i = 0; i < maker_gildings.length; i++) {
const gild = maker_gildings[i];
let gild_min = parseFloat(gild.chance_min.replace("%","")) / 100
let gild_max = parseFloat(gild.chance_max.replace("%","")) / 100
console.log(gild_min)
console.log(gild_max)

// container div
let div = document.createElement("div")
div.id = "maker_slot_" + i
let table = document.createElement("table")
table.className = "w-full"
if(i > 0){
let spacer = document.createElement("div")
spacer.className = "border-2 h-1"
div.appendChild(spacer)
}

// ROW 1
let row1 = document.createElement("tr")
let row1_td1 = document.createElement("td")
row1_td1.className = "w-1/4"

let icon = document.createElement("img")
icon.src = gild.icon
row1_td1.appendChild(icon)

let row1_td2 = document.createElement("td")
row1_td2.className = "1/2"
row1_td2.colSpan = "2"

let link = document.createElement("a")
link.className = "cursor-pointer text-blue-700"
link.href = gild.link
link.target = "_blank"
link.innerHTML = gild.name
row1_td2.appendChild(link)

let row1_td3 = document.createElement("td")
let remove_button = document.createElement("button")
remove_button.className = "bg-red-300 rounded-full border-black border-2 w-8 h-8 font-bold"
remove_button.innerHTML = "X"
remove_button.value = i
remove_button.addEventListener('click', (event) => {
maker_remove_gilding(event.target.value)
});
row1_td3.appendChild(remove_button)

// MOUNT ROW 1
row1.appendChild(row1_td1)
row1.appendChild(row1_td2)
row1.appendChild(row1_td3)

// ROW 2
let row2 = document.createElement("tr")
let row2_td1 = document.createElement("td")
row2_td1.className = "font-bold"
row2_td1.innerHTML = "Chance to apply:"
row2_td1.colSpan = "4"
row2.appendChild(row2_td1)

// ROW 3

let row3 = document.createElement("tr")
let row3_td1 = document.createElement("td")
row3_td1.innerHTML = "Min:"
let row3_td2 = document.createElement("td")
row3_td2.innerHTML = ((base_min * gild_min) * 100).toPrecision(2) + "%"
let row3_td3 = document.createElement("td")
row3_td3.innerHTML = "Max:"
let row3_td4 = document.createElement("td")
row3_td4.innerHTML = ((base_max * gild_max) * 100).toPrecision(2) + "%"
row3.appendChild(row3_td1)
row3.appendChild(row3_td2)
row3.appendChild(row3_td3)
row3.appendChild(row3_td4)
// MOUNT
table.appendChild(row1)
table.appendChild(row2)
table.appendChild(row3)
div.appendChild(table)

maker_slots.appendChild(div)
}

}

function script_loaded(){
const selected_slot = window.localStorage.getItem("selected_slot")
const selected_item = window.localStorage.getItem("selected_item")
Expand All @@ -295,6 +413,7 @@ function script_loaded(){
}

}

document.addEventListener("DOMContentLoaded", function() {
script_loaded()
});
Expand Down
48 changes: 38 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,8 +282,8 @@ <h2>Slots</h2>
</tbody>
</table>
</div>
<div id="item_maker" class="flex flex-col border-gray-400 border-2 p-2">
<div id="base-item">
<div id="item_maker" class="flex flex-col min-w-72 w-full border-gray-400 border-2 p-2">
<div id="maker-base-item">
<label class="border-2 border-gray-400" for="item-select">Item</label>
<select onchange="item_selected(this.value)" id="item-select">
<option value="-1">--Please choose a slot--</option>
Expand All @@ -297,19 +297,19 @@ <h2>Slots</h2>
<td class="w-16" id="selected_slot"></td>
<td class="w-16">
<div class="flex justify-center items-center w-16 h-16 border-black border-2">
<img class="max-w-16 max-h-16" id="selected_icon" src="" alt="">
<img class="max-w-16 max-h-16" id="maker_base_item_icon" src="" alt="">
</div>
</td>
</tr>
<tr>
<td>Slots:</td>
<td id="selected_slots" colspan="2"></td>
<td id="maker_base_item_slots" colspan="2"></td>
</tr>
<tr>
<td><h2 class="text-2xl font-bold">Bonus</h2></td>
</tr>
<tr>
<td colspan="3" id="selected_bonus"></td>
<td colspan="3" id="maker_base_item_bonus"></td>
</tr>
<tr id="row_armor_0">
<td><h2 class="text-2xl font-bold">Armor</h2></td>
Expand All @@ -333,17 +333,44 @@ <h2>Slots</h2>
<td>Affinity:</td>
<td id="selected_affinity" colspan="2"></td>
</tr>
<tr id="base-item-chance_min">
<tr id="maker_base_item_gild_chances">
<td>Min:</td>
<td id="selected_chance_min"></td>
</tr>
<tr id="base-item-chance_max">
<td id="maker_base_item_chance_min"></td>
<td>Max:</td>
<td id="selected_chance_max"></td>
<td id="maker_base_item_chance_max"></td>
</tr>
</table>
</div>
<div class="border-2 h-1" ></div>
<h2 class="text-2xl font-bold">Slots</h2>
<div id="maker_slots">
<div id="maker-slot-1" class="hidden">
<table class="w-full">
<tr>
<td class="w-1/4">
<img src="" alt="?">
</td>
<td colspan="2" class="w-1/2">
<a href="" target="_blank">Name</a>
</td>
<td>
<button class="bg-red-300 rounded-full border-black border-2 w-8 h-8 font-bold">X</button>
</td>
</tr>
<tr>
<td colspan="4" class="font-bold">Chance to apply:</td>
</tr>
<tr>
<td>Min:</td>
<td>0%</td>
<td>Max:</td>
<td>0%</td>
</tr>
</table>
<div class="border-2 h-1" ></div>
</div>
</div>

</div>
<div class="flex flex-col border-gray-400 border-2 p-2">
<h2 class="text-2xl font-bold" >Gilding</h2>
Expand Down Expand Up @@ -411,6 +438,7 @@ <h2 class="text-1xl font-bold">Bonus:</h2>
<div class="hidden">
<div class="bg-slate-200"></div>
<div class="bg-slate-300"></div>
<div class="bg-blue-300"></div>
</div>
</body>
</html>
Loading

0 comments on commit 8b1f465

Please sign in to comment.