Browse Source

Localstorage additions, scrollto

master
Brandon Cornejo 7 months ago
parent
commit
4916f77a1d
3 changed files with 165 additions and 8 deletions
  1. 67
    0
      orna_tools.py
  2. 94
    8
      templates/index.html
  3. 4
    0
      wsgi.py

+ 67
- 0
orna_tools.py View File

@@ -0,0 +1,67 @@
1
+from flask import Flask, render_template, jsonify, request
2
+
3
+app = Flask(__name__)
4
+
5
+@app.route('/')
6
+def index():
7
+    return render_template('index.html')
8
+
9
+@app.route('/results', methods=['POST'])
10
+def results():
11
+    combinations = calculate_combinations(request.get_json())
12
+    return jsonify(combinations)
13
+
14
+
15
+# Data Methods
16
+def calculate_combinations(equipment, do_print=False):
17
+    # name, defense, resistance
18
+    eq_headware = equipment["head"]
19
+    eq_chestware = equipment["chest"]
20
+    eq_legwear = equipment["legs"]
21
+
22
+    # Create a list of all possible eq combinations
23
+    results = []
24
+    for hw in eq_headware:
25
+        for cw in eq_chestware:
26
+            for lw in eq_legwear:
27
+                result = {}
28
+                result["eq"] = [hw[0], cw[0], lw[0]]
29
+                result["def"] = hw[1] + cw[1] + lw[1]
30
+                result["res"] = hw[2] + cw[2] + lw[2]
31
+                results.append(result)
32
+
33
+    # Sort the combinations by combined total of def anf res
34
+    results.sort(key=lambda i: i["def"] + i["res"])
35
+
36
+    if do_print:
37
+        for result in results:
38
+            print("{} ({} def {} res) -".format(result["def"] + result["res"], result["def"], result["res"]))
39
+            for eq in result["eq"]:
40
+                print("\t{}".format(eq))
41
+
42
+    return results
43
+
44
+
45
+"""
46
+eq_headware = [
47
+    ["Ljosalfar Hood", 98, 510],
48
+    ["Kobold Hood", 0, 614],
49
+    ["Northern Cowl", 584, 130],
50
+    ["High Fomorian Hood", 487, 112]
51
+]
52
+
53
+eq_chestware = [
54
+    ["Ljosalfar Robe", 121, 528],
55
+    ["High Fomorian Garb", 544, 0],
56
+    ["Darkest Garb", 514, 169],
57
+    ["Northern Garb", 535, 119],
58
+    ["Northern Robe", 486, 108]
59
+]
60
+
61
+eq_legwear = [
62
+    ["Northern Boots", 636, 142],
63
+    ["Terra Boots", 129, 369],
64
+    ["High Fomorian Boots", 516, 0],
65
+    ["Ljosalfar Boots", 280, 280]
66
+]
67
+"""

+ 94
- 8
templates/index.html View File

@@ -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
+                &copy; <script>document.write(new Date().getFullYear());</script> by <a href="http://binaryatrocity.name">binaryatrocity</a>
91
+                &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
92
+                Created for  the <span class="uk-text-success">Legends of Palisma</span> Kingdom
93
+                &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
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 {

+ 4
- 0
wsgi.py View File

@@ -0,0 +1,4 @@
1
+from orna_tools import app as application
2
+
3
+if __name__ == "__main__":
4
+    application.run()

Loading…
Cancel
Save