@ -19,10 +19,13 @@
< body > < body >
< nav class = "uk-navbar-container" uk-navbar > < nav class = "uk-navbar-container" uk-navbar >
< div class = "uk-navbar-center" > < div class = "uk-navbar-center" >
< a href = "" class = "uk-navbar-item uk-logo" > Orna Tools< / a >
< a href = "" class = "uk-navbar-item uk-logo" > Orna Tools - Equipment Combinations < / a >
< / div > < / div >
< / nav > < / nav >
< div class = "uk-container" > < div class = "uk-container" >
< div id = "help-container" class = "uk-padding-large uk-text-center uk-text-muted uk-margin-large-left uk-margin-large-right" >
< div > Use the three tabs to input your options for each equipment slot (head/chest/leg). Click the calculate button to populate a table with possible combinations. Click on the column headers to sort results. Use the green + to input additional items.< / div >
< / div >
< div id = "equipment-container" class = "uk-padding-large" > < div id = "equipment-container" class = "uk-padding-large" >
< ul class = "uk-flex-center" uk-tab > < ul class = "uk-flex-center" uk-tab >
< li class = "uk-active" > < a href = "" > Head< / a > < / li > < li class = "uk-active" > < a href = "" > Head< / a > < / li >
@ -63,23 +66,33 @@
< / ul > < / ul >
< / div > < / div >
< div class = "uk-text-center uk-margin-bottom" > < div class = "uk-text-center uk-margin-bottom" >
< button id = "clear-button" class = "uk-button uk-button-danger" > Clear< / button >
< button id = "calculate-button" class = "uk-button uk-button-primary" > Calculate< / button > < button id = "calculate-button" class = "uk-button uk-button-primary" > Calculate< / button >
< / div > < / div >
< div id = "result-panel" class = "uk-section" >
< div id = "results -panel" class = "uk-section uk-overflow-auto " hidden >
< hr class = "uk-divider-icon" / > < hr class = "uk-divider-icon" / >
< table id = "results-table" class = "uk-table uk-table-divider uk-table-striped uk-table-hover" > < table id = "results-table" class = "uk-table uk-table-divider uk-table-striped uk-table-hover" >
< thead > < thead >
< th > Total< / th >
< th data-sort-default > Total< / th >
< th > Defense< / th > < th > Defense< / th >
< th > Resistance< / th > < th > Resistance< / th >
< th class = "uk-table-expand" > Head< / th >
< th class = "uk-table-expand" > Chest< / th >
< th class = "uk-table-expand" > Legs< / th >
< th class = "uk-table-expand" data-sort-method = 'none' > Head< / th >
< th class = "uk-table-expand" data-sort-method = 'none' > Chest< / th >
< th class = "uk-table-expand" data-sort-method = 'none' > Legs< / th >
< / thead > < / thead >
< tbody > < / tbody > < tbody > < / tbody >
< / table > < / table >
< / div > < / div >
<!-- Footer -->
< footer class = "uk-text-center uk-margin-large-top uk-margin-small-bottom" >
© < script > document . write ( new Date ( ) . getFullYear ( ) ) ; < / script > by < a href = "http://binaryatrocity.name" > binaryatrocity< / a >
|
Created for the < span class = "uk-text-success" > Legends of Palisma< / span > Kingdom
|
< a href = "http://playorna.com" > OrnaRPG< / a >
< / footer >
< / div > < / div >
< / body > < / body >
< script > < script >
@ -127,12 +140,18 @@
} }
table_sort.refresh(); table_sort.refresh();
document.querySelector("div#results-panel").hidden = false;
results_tbody.scrollIntoView();
} }
// Send data to backend // Send data to backend
function calculateEquipment() { function calculateEquipment() {
let data = gatherEquipmentData(); let data = gatherEquipmentData();
// Store data in localStorage
localStorage.setItem('eq_data', JSON.stringify(data));
// Clear out existing table rows // Clear out existing table rows
for(let row of document.querySelectorAll("table#results-table > tbody > tr")) { for(let row of document.querySelectorAll("table#results-table > tbody > tr")) {
row.remove(); row.remove();
@ -143,7 +162,7 @@
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data) body: JSON.stringify(data)
}).then((response) => response.json()).then((data) => { }).then((response) => response.json()).then((data) => {
processEquipmentResults(data)
processEquipmentResults(data);
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error);
alert("There was a problem..."); alert("There was a problem...");
@ -189,6 +208,69 @@
return data; return data;
} }
function clearExistingData() {
localStorage.clear();
// Clear out existing table rows
for(let row of document.querySelectorAll("table > tbody > tr")) {
row.remove();
}
}
function loadExistingData() {
var data = localStorage.getItem('eq_data');
function appendToTable(eq, table_id) {
let input_element = document.createElement("input");
input_element.className="uk-input";
input_element.type = "text";
// Create the delete button
let delete_button = document.createElement("a");
delete_button.className="uk-icon-button del-row-button";
delete_button.setAttribute("uk-icon", "icon:minus-circle;ratio:1");
delete_button.addEventListener("click", deleteEquipmentTableRow, false);
let query = "table#" + table_id + " > tbody";
let tbody = document.querySelector(query);
let new_row = tbody.insertRow(-1);
// Append all of the child cells needed
new_row.insertCell(0).appendChild(delete_button);
input_element.value = eq[2];
new_row.insertCell(0).appendChild(input_element.cloneNode());
input_element.value = eq[1];
new_row.insertCell(0).appendChild(input_element.cloneNode());
input_element.value = eq[0];
new_row.insertCell(0).appendChild(input_element.cloneNode());
new_row.insertCell(0).appendChild(document.createTextNode(tbody.children.length))
}
if(data) {
data = JSON.parse(data);
// Remove existing rows from all tables
clearExistingData();
// Populate new rows in all eq tables
for(let hg of data['head']) {
appendToTable(hg, "head-table");
}
for(let cg of data['chest']) {
appendToTable(cg, "chest-table");
}
for(let lg of data['legs']) {
appendToTable(lg, "leg-table");
}
}
}
function confirmDataCleanse() {
if(confirm("Are you sure you want to clear all existing data?")) {
clearExistingData();
}
}
// Add event listeners to our table buttons // Add event listeners to our table buttons
const add_row_buttons = document.querySelectorAll("a.add-row-button"); const add_row_buttons = document.querySelectorAll("a.add-row-button");
for(let button of add_row_buttons) { for(let button of add_row_buttons) {
@ -201,9 +283,13 @@
// Add event listener to Calculate button, call backend // Add event listener to Calculate button, call backend
document.querySelector("#calculate-button").addEventListener("click", calculateEquipment, false); document.querySelector("#calculate-button").addEventListener("click", calculateEquipment, false);
document.querySelector("#clear-button").addEventListener("click", confirmDataCleanse, false);
// Enable sorting for our results table // Enable sorting for our results table
var table_sort = new Tablesort(document.querySelector("table#results-table"));
var table_sort = new Tablesort(document.querySelector("table#results-table"), {descending: true});
// Load any existing data from LocalStorage
loadExistingData();
< / script > < / script >
< style type = "text/css" > < style type = "text/css" >
table:not(#results-table) > tbody > tr > td:first-child { table:not(#results-table) > tbody > tr > td:first-child {
