Add ability to use items from inventory

www/js/inventory.js

@@ -5,9 +5,14 @@
  */
 
 
-function loadInventory() {
+function loadInventory(reload) {
-    $("#item-bin #bag-preloader").removeClass("display-none");
+    if (typeof reload != "boolean") {
-    $("#item-bin .item-col").remove();
+        reload = false;
+    }
+    if (reload == false) {
+        $("#item-bin .item-col").remove();
+        $("#item-bin #bag-preloader").removeClass("display-none");
+    }
     callAPI("inventory", {
         username: localStorage.getItem("username"),
         password: localStorage.getItem("password")
@@ -31,19 +36,47 @@ function loadInventory() {
             }
         }
 
-        $("#item-bin #bag-preloader").addClass("display-none");
+        $("#item-bin .item-col").remove();
+        if (reload == false) {
+            $("#item-bin #bag-preloader").addClass("display-none");
+        }
 
         items.forEach(function (item) {
             $("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
-                    + '<div class="item padding margin" data-uuids="' + item.uuids + '" data-qty="' + item.qty + '">'
+                    + '<div class="item padding margin" data-uuids="' + item.uuids.join("|") + '" data-qty="' + item.qty + '">'
                     + '<i class="item-icon ' + item.icon + ' text-color-' + item.color + '"></i><br />'
                     + (item.qty > 1 ? '<span class="badge color-green text-color-black padding">x' + item.qty + '</span>' : "")
                     + '<h3>' + item.name + '</h3>'
                     + item.description
+                    + (item.classname == "healmagic" ? '<button class="button button-fill margin-top useitem-button">Use</button>' : '')
                     + '</div>'
                     + '</div>');
         })
     }, function (msg) {
         app.dialog.alert(msg, "Error");
     });
-}
+}
+
+$("body").on("click", ".useitem-button", function () {
+    var itemdom = $(this).parent(".item");
+    var uuids = itemdom.data("uuids") + "";
+    console.log(uuids);
+    console.log(uuids.split("|")[0]);
+    var qty = itemdom.data("qty");
+    var uuid = uuids.split("|")[0];
+    callAPI("useitem", {
+        username: localStorage.getItem("username"),
+        password: localStorage.getItem("password"),
+        uuid: uuid
+    }, function (success) {
+        app.toast.show({
+            text: '<i class="game-icon game-icon-school-bag"></i> ' + success.msg,
+            position: "center",
+            destroyOnClose: true,
+            closeTimeout: 5000
+        });
+        loadInventory(true);
+    }, function (error) {
+        app.dialog.alert(error, "Error");
+    });
+});

www/pages/home.html

@@ -59,7 +59,7 @@
     <div class="popup display-flex justify-content-center align-items-center dark-popup" id="menu-popup">
         <div class="row" id="mainmenu-items">
             <div class="col-50 mainmenu-item popup-close" onclick="router.navigate('/inventory');">
-                <i class="game-icon game-icon-light-backpack fa-4x"></i><br />
+                <i class="game-icon game-icon-school-bag fa-4x"></i><br />
                 Items
             </div>
             <div class="col-50 mainmenu-item">

www/pages/inventory.html

@@ -6,7 +6,7 @@
 
     <div class="navbar">
     <div class="navbar-inner">
-        <div class="title"><i class="game-icon game-icon-light-backpack"></i> Items</div>
+        <div class="title"><i class="game-icon game-icon-school-bag"></i> Items</div>
     </div>
 </div>