|
|
@@ -19,10 +19,13 @@
|
|
19
|
19
|
<body>
|
|
20
|
20
|
<nav class="uk-navbar-container" uk-navbar>
|
|
21
|
21
|
<div class="uk-navbar-center">
|
|
22
|
|
- <a href="" class="uk-navbar-item uk-logo">Orna Tools</a>
|
|
|
22
|
+ <a href="" class="uk-navbar-item uk-logo">Orna Tools - Equipment Combinations</a>
|
|
23
|
23
|
</div>
|
|
24
|
24
|
</nav>
|
|
25
|
25
|
<div class="uk-container">
|
|
|
26
|
+ <div id="help-container" class="uk-padding-large uk-text-center uk-text-muted uk-margin-large-left uk-margin-large-right">
|
|
|
27
|
+ <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>
|
|
|
28
|
+ </div>
|
|
26
|
29
|
<div id="equipment-container" class="uk-padding-large">
|
|
27
|
30
|
<ul class="uk-flex-center" uk-tab>
|
|
28
|
31
|
<li class="uk-active"><a href="">Head</a></li>
|
|
|
@@ -63,23 +66,33 @@
|
|
63
|
66
|
</ul>
|
|
64
|
67
|
</div>
|
|
65
|
68
|
<div class="uk-text-center uk-margin-bottom">
|
|
|
69
|
+ <button id="clear-button" class="uk-button uk-button-danger">Clear</button>
|
|
66
|
70
|
<button id="calculate-button" class="uk-button uk-button-primary">Calculate</button>
|
|
67
|
71
|
</div>
|
|
68
|
72
|
|
|
69
|
|
- <div id="result-panel" class="uk-section">
|
|
|
73
|
+ <div id="results-panel" class="uk-section uk-overflow-auto" hidden>
|
|
70
|
74
|
<hr class="uk-divider-icon" />
|
|
71
|
75
|
<table id="results-table" class="uk-table uk-table-divider uk-table-striped uk-table-hover">
|
|
72
|
76
|
<thead>
|
|
73
|
|
- <th>Total</th>
|
|
|
77
|
+ <th data-sort-default>Total</th>
|
|
74
|
78
|
<th>Defense</th>
|
|
75
|
79
|
<th>Resistance</th>
|
|
76
|
|
- <th class="uk-table-expand">Head</th>
|
|
77
|
|
- <th class="uk-table-expand">Chest</th>
|
|
78
|
|
- <th class="uk-table-expand">Legs</th>
|
|
|
80
|
+ <th class="uk-table-expand" data-sort-method='none'>Head</th>
|
|
|
81
|
+ <th class="uk-table-expand" data-sort-method='none'>Chest</th>
|
|
|
82
|
+ <th class="uk-table-expand" data-sort-method='none'>Legs</th>
|
|
79
|
83
|
</thead>
|
|
80
|
84
|
<tbody></tbody>
|
|
81
|
85
|
</table>
|
|
82
|
86
|
</div>
|
|
|
87
|
+
|
|
|
88
|
+ <!-- Footer -->
|
|
|
89
|
+ <footer class="uk-text-center uk-margin-large-top uk-margin-small-bottom">
|
|
|
90
|
+ © <script>document.write(new Date().getFullYear());</script> by <a href="http://binaryatrocity.name">binaryatrocity</a>
|
|
|
91
|
+ |
|
|
|
92
|
+ Created for the <span class="uk-text-success">Legends of Palisma</span> Kingdom
|
|
|
93
|
+ |
|
|
|
94
|
+ <a href="http://playorna.com">OrnaRPG</a>
|
|
|
95
|
+ </footer>
|
|
83
|
96
|
</div>
|
|
84
|
97
|
</body>
|
|
85
|
98
|
<script>
|
|
|
@@ -127,12 +140,18 @@
|
|
127
|
140
|
}
|
|
128
|
141
|
|
|
129
|
142
|
table_sort.refresh();
|
|
|
143
|
+ document.querySelector("div#results-panel").hidden = false;
|
|
|
144
|
+
|
|
|
145
|
+ results_tbody.scrollIntoView();
|
|
130
|
146
|
}
|
|
131
|
147
|
|
|
132
|
148
|
// Send data to backend
|
|
133
|
149
|
function calculateEquipment() {
|
|
134
|
150
|
let data = gatherEquipmentData();
|
|
135
|
151
|
|
|
|
152
|
+ // Store data in localStorage
|
|
|
153
|
+ localStorage.setItem('eq_data', JSON.stringify(data));
|
|
|
154
|
+
|
|
136
|
155
|
// Clear out existing table rows
|
|
137
|
156
|
for(let row of document.querySelectorAll("table#results-table > tbody > tr")) {
|
|
138
|
157
|
row.remove();
|
|
|
@@ -143,7 +162,7 @@
|
|
143
|
162
|
headers: { 'Content-Type': 'application/json' },
|
|
144
|
163
|
body: JSON.stringify(data)
|
|
145
|
164
|
}).then((response) => response.json()).then((data) => {
|
|
146
|
|
- processEquipmentResults(data)
|
|
|
165
|
+ processEquipmentResults(data);
|
|
147
|
166
|
}).catch((error) => {
|
|
148
|
167
|
console.log(error);
|
|
149
|
168
|
alert("There was a problem...");
|
|
|
@@ -189,6 +208,69 @@
|
|
189
|
208
|
return data;
|
|
190
|
209
|
}
|
|
191
|
210
|
|
|
|
211
|
+ function clearExistingData() {
|
|
|
212
|
+ localStorage.clear();
|
|
|
213
|
+
|
|
|
214
|
+ // Clear out existing table rows
|
|
|
215
|
+ for(let row of document.querySelectorAll("table > tbody > tr")) {
|
|
|
216
|
+ row.remove();
|
|
|
217
|
+ }
|
|
|
218
|
+ }
|
|
|
219
|
+
|
|
|
220
|
+ function loadExistingData() {
|
|
|
221
|
+ var data = localStorage.getItem('eq_data');
|
|
|
222
|
+
|
|
|
223
|
+ function appendToTable(eq, table_id) {
|
|
|
224
|
+ let input_element = document.createElement("input");
|
|
|
225
|
+ input_element.className="uk-input";
|
|
|
226
|
+ input_element.type = "text";
|
|
|
227
|
+
|
|
|
228
|
+ // Create the delete button
|
|
|
229
|
+ let delete_button = document.createElement("a");
|
|
|
230
|
+ delete_button.className="uk-icon-button del-row-button";
|
|
|
231
|
+ delete_button.setAttribute("uk-icon", "icon:minus-circle;ratio:1");
|
|
|
232
|
+ delete_button.addEventListener("click", deleteEquipmentTableRow, false);
|
|
|
233
|
+
|
|
|
234
|
+ let query = "table#" + table_id + " > tbody";
|
|
|
235
|
+ let tbody = document.querySelector(query);
|
|
|
236
|
+ let new_row = tbody.insertRow(-1);
|
|
|
237
|
+
|
|
|
238
|
+ // Append all of the child cells needed
|
|
|
239
|
+ new_row.insertCell(0).appendChild(delete_button);
|
|
|
240
|
+ input_element.value = eq[2];
|
|
|
241
|
+ new_row.insertCell(0).appendChild(input_element.cloneNode());
|
|
|
242
|
+ input_element.value = eq[1];
|
|
|
243
|
+ new_row.insertCell(0).appendChild(input_element.cloneNode());
|
|
|
244
|
+ input_element.value = eq[0];
|
|
|
245
|
+ new_row.insertCell(0).appendChild(input_element.cloneNode());
|
|
|
246
|
+ new_row.insertCell(0).appendChild(document.createTextNode(tbody.children.length))
|
|
|
247
|
+ }
|
|
|
248
|
+
|
|
|
249
|
+ if(data) {
|
|
|
250
|
+ data = JSON.parse(data);
|
|
|
251
|
+
|
|
|
252
|
+ // Remove existing rows from all tables
|
|
|
253
|
+ clearExistingData();
|
|
|
254
|
+
|
|
|
255
|
+ // Populate new rows in all eq tables
|
|
|
256
|
+ for(let hg of data['head']) {
|
|
|
257
|
+ appendToTable(hg, "head-table");
|
|
|
258
|
+ }
|
|
|
259
|
+ for(let cg of data['chest']) {
|
|
|
260
|
+ appendToTable(cg, "chest-table");
|
|
|
261
|
+ }
|
|
|
262
|
+ for(let lg of data['legs']) {
|
|
|
263
|
+ appendToTable(lg, "leg-table");
|
|
|
264
|
+ }
|
|
|
265
|
+ }
|
|
|
266
|
+ }
|
|
|
267
|
+
|
|
|
268
|
+ function confirmDataCleanse() {
|
|
|
269
|
+ if(confirm("Are you sure you want to clear all existing data?")) {
|
|
|
270
|
+ clearExistingData();
|
|
|
271
|
+ }
|
|
|
272
|
+ }
|
|
|
273
|
+
|
|
192
|
274
|
// Add event listeners to our table buttons
|
|
193
|
275
|
const add_row_buttons = document.querySelectorAll("a.add-row-button");
|
|
194
|
276
|
for(let button of add_row_buttons) {
|
|
|
@@ -201,9 +283,13 @@
|
|
201
|
283
|
|
|
202
|
284
|
// Add event listener to Calculate button, call backend
|
|
203
|
285
|
document.querySelector("#calculate-button").addEventListener("click", calculateEquipment, false);
|
|
|
286
|
+ document.querySelector("#clear-button").addEventListener("click", confirmDataCleanse, false);
|
|
204
|
287
|
|
|
205
|
288
|
// Enable sorting for our results table
|
|
206
|
|
- var table_sort = new Tablesort(document.querySelector("table#results-table"));
|
|
|
289
|
+ var table_sort = new Tablesort(document.querySelector("table#results-table"), {descending: true});
|
|
|
290
|
+
|
|
|
291
|
+ // Load any existing data from LocalStorage
|
|
|
292
|
+ loadExistingData();
|
|
207
|
293
|
</script>
|
|
208
|
294
|
<style type="text/css">
|
|
209
|
295
|
table:not(#results-table) > tbody > tr > td:first-child {
|
