Refactor inventory code a bit, add item action to place popup (close #1)

www/css/app.css

@@ -14,7 +14,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 }
 
 .popup {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #settings-bin .card {

www/css/home.css

@@ -13,6 +13,10 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     background-color: rgba(23, 23, 23, 0.75);
 }
 
+.solid-popup {
+    background-color: rgba(23, 23, 23, 1);
+}
+
 #menu-popup {
     overflow-y: hidden;
 }

www/css/inventory.css

@@ -4,18 +4,30 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
 
-#item-bin .card {
+.item-bin .card {
     text-align: center;
     min-height: 300px;
     position: relative;
 }
 
-#item-bin .card .badge {
+.item-bin .card .badge {
     position: absolute;
     top: -10px;
     right: -10px;
 }
 
-#item-bin .item .item-icon {
+.item-bin .item .item-icon {
     font-size: 6em;
+}
+
+.item-bin-horizontal {
+    overflow-x: scroll;
+}
+
+.item-bin-horizontal .card {
+    max-height: 100px;
+}
+
+.item-bin-horizontal .item .item-icon {
+    font-size: 4em;
 }

www/index.html

@@ -52,3 +52,4 @@
 <script src="js/usericons.js"></script>
 <script src="js/platform.js"></script>
 <script src="js/main.js"></script>
+<script src="js/inventory.js"></script>

www/js/home.js

@@ -90,7 +90,7 @@ function openPlace(id, name) {
     $("#place-popup").data("placeid", id);
     $("#place-popup").data("placepopupnonce", placepopupnonce);
     $("#place-title").text(name);
-    app.popup.open("#place-popup");
+   app.popup.open("#place-popup");
 
     updatePlaceStats(id, function (success) {
         $("#place-popup .preloader").addClass("display-none");
@@ -141,6 +141,7 @@ function updatePlaceStats(id, successCallback, errorCallback) {
                 $("#place-artifact-list").append("<span id=\"artifact-icon-" + artifact.id + "\" data-artifact=\"" + artifact.id + "\" data-energy=\"" + artifact.energy + "\" data-maxenergy=\"" + artifact.maxenergy + "\" class=\"place-artifact-icon " + artifact.icon + " fa-2x margin-right text-color-" + artifact.color + "\"></span>");
             });
         } else {
+            $("#place-artifact-list").html("");
             $("#place-info").addClass("color-white");
             $("#place-image").attr("src", "img/place/white.png");
             $("#magic-action-label").text("Control");
@@ -183,4 +184,9 @@ $("#magic-action-button").click(function () {
             closeTimeout: 1000 * 2
         });
     });
+});
+
+$("#item-action-button").click(function () {
+    app.popup.open("#inventory-popup");
+    loadInventory(function () {}, "#inventory-popup");
 });

www/js/inventory.js

@@ -4,24 +4,37 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+var inventoryloadedfromplacepopup = false;
 
-function loadInventory(reload) {
+function loadInventory(reload, target) {
+    if (typeof target != "string") {
+        target = "#inventory-page";
+    }
+    inventoryloadedfromplacepopup = false;
+    if ($("#place-popup").hasClass("modal-in")) {
+        inventoryloadedfromplacepopup = true;
+    }
     if (typeof reload != "boolean") {
         reload = false;
         // Make it reload if there's already stuff there,
         // to keep the items from disappearing and coming back
-        if ($("#item-bin .item-col").length > 0) {
+        if ($(target + " .item-bin .item-col").length > 0) {
             reload = true;
         }
     }
     if (reload == false) {
-        $("#item-bin .item-col").remove();
+        $(target + " .item-bin .item-col").remove();
-        $("#item-bin #bag-preloader").removeClass("display-none");
+        $(target + " .item-bin .bag-preloader").removeClass("display-none");
     }
     callAPI("inventory", {
         username: localStorage.getItem("username"),
         password: localStorage.getItem("password")
     }, function (resp) {
+        if (resp.items.length == 0) {
+            $(target + " .bag-empty").removeClass("display-none");
+        } else {
+            $(target + " .bag-empty").addClass("display-none");
+        }
         var items = [];
         for (var i = 0; i < resp.items.length; i++) {
             var item = resp.items[i];
@@ -41,49 +54,57 @@ function loadInventory(reload) {
             }
         }
 
-        $("#item-bin .item-col").remove();
+        $(target + " .item-bin .item-col").remove();
         if (reload == false) {
-            $("#item-bin #bag-preloader").addClass("display-none");
+            $(target + " .item-bin .bag-preloader").addClass("display-none");
         }
 
         items.forEach(function (item) {
-            $("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
+            var usebtn = "";
+            if (item.classname == "healmagic" || (inventoryloadedfromplacepopup && item.classname == "artifact")) {
+                usebtn = '<button class="button button-fill margin-top useitem-button">Use</button>';
+            }
+            $(target + " .item-bin").append('<div class="col-100 tablet-33 ' + (target == "#inventory-page" ? "desktop-25 " : "") + 'item-col">'
                     + '<div class="card padding-half">'
                     + (item.qty > 1 ? '<span class="badge color-green text-color-black padding">x' + item.qty + '</span>' : "")
                     + '<div class="item card-content" data-uuids="' + item.uuids.join("|") + '" data-qty="' + item.qty + '">'
                     + '<i class="item-icon ' + item.icon + ' text-color-' + item.color + '"></i><br />'
                     + '<h3>' + item.name + '</h3>'
                     + item.description
-                    + (item.classname == "healmagic" ? '<button class="button button-fill margin-top useitem-button">Use</button>' : '')
+                    + usebtn
                     + '</div>'
                     + '</div>'
                     + '</div>');
-        })
+        });
     }, function (msg) {
         app.dialog.alert(msg, "Error");
     });
-}
 
-$("body").on("click", ".useitem-button", function () {
+    // Prevent multiple events from firing
-    var itemdom = $(this).parent(".item");
+    $(target).unbind("click");
-    var uuids = itemdom.data("uuids") + "";
+
-    console.log(uuids);
+    $(target).on("click", ".useitem-button", function () {
-    console.log(uuids.split("|")[0]);
+        var itemdom = $(this).parent(".item");
-    var qty = itemdom.data("qty");
+        var uuids = itemdom.data("uuids") + "";
-    var uuid = uuids.split("|")[0];
+        console.log(uuids);
-    callAPI("useitem", {
+        console.log(uuids.split("|")[0]);
-        username: localStorage.getItem("username"),
+        var qty = itemdom.data("qty");
-        password: localStorage.getItem("password"),
+        var uuid = uuids.split("|")[0];
-        uuid: uuid
+        callAPI("useitem", {
-    }, function (success) {
+            username: localStorage.getItem("username"),
-        app.toast.show({
+            password: localStorage.getItem("password"),
-            text: '<i class="game-icon game-icon-school-bag"></i> ' + success.msg,
+            uuid: uuid,
-            position: "center",
+            placeid: (inventoryloadedfromplacepopup ? $("#place-popup").data("placeid") : null)
-            destroyOnClose: true,
+        }, function (success) {
-            closeTimeout: 5000
+            app.toast.show({
+                text: '<i class="game-icon game-icon-school-bag"></i> ' + success.msg,
+                position: "center",
+                destroyOnClose: true,
+                closeTimeout: 5000
+            });
+            loadInventory(true, target);
+        }, function (error) {
+            //app.dialog.alert(error, "Error");
         });
-        loadInventory(true);
-    }, function (error) {
-        app.dialog.alert(error, "Error");
     });
-});
+}

www/pages/home.html

@@ -101,6 +101,10 @@
                         <i class="game-icon game-icon-magic-swirl fa-2x"></i>
                         <span id="magic-action-label">Magic</span>
                     </div>
+                    <div class="bg-color-primary action-button margin-bottom" id="item-action-button">
+                        <i class="game-icon game-icon-school-bag fa-2x"></i>
+                        <span id="item-action-label">Item</span>
+                    </div>
                     <h3>Artifacts</h3>
                     <div id="place-artifact-list">
 
@@ -122,6 +126,28 @@
         </div>
     </div>
 
+    <div class="popup dark-popup solid-popup" id="inventory-popup">
+        <div class="block">
+            <div class="row justify-content-center item-bin">
+                <div class="col text-align-center padding-top bag-preloader">
+                    <div class="preloader color-green"></div>
+                    <br />
+                    <h3>Opening bag...</h3>
+                </div>
+                <div class="col text-align-center padding-top bag-empty display-none">
+                    <i class="game-icon game-icon-open-chest fa-3x"></i>
+                    <br />
+                    <h3>Your bag is empty.</h3>
+                </div>
+            </div>
+        </div>
+        <div class="fab fab-center-bottom">
+            <a href="#" class="popup-close" data-popup="#inventory-popup">
+                <i class="fas fa-2x fa-times"></i>
+            </a>
+        </div>
+    </div>
+
     <div class="popup display-flex justify-content-center align-items-center dark-popup" id="founditem-popup">
         <div class="row">
             <div class="col-100 tablet-50 block text-align-center" id="founditem-block">

www/pages/inventory.html

@@ -2,22 +2,26 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<div class="page" data-name="inventory">
+<div class="page" data-name="inventory" id="inventory-page">
-
     <div class="navbar">
-    <div class="navbar-inner">
+        <div class="navbar-inner">
-        <div class="title"><i class="game-icon game-icon-school-bag"></i> Items</div>
+            <div class="title"><i class="game-icon game-icon-school-bag"></i> Items</div>
+        </div>
     </div>
-</div>
 
     <div class="page-content">
         <div class="block">
-            <div class="row justify-content-center" id="item-bin">
+            <div class="row justify-content-center item-bin">
-                <div class="col text-align-center padding-top" id="bag-preloader">
+                <div class="col text-align-center padding-top bag-preloader">
                     <div class="preloader color-green"></div>
                     <br />
                     <h3>Opening bag...</h3>
                 </div>
+                <div class="col text-align-center padding-top bag-empty display-none">
+                    <i class="game-icon game-icon-open-chest fa-3x"></i>
+                    <br />
+                    <h3>Your bag is empty. Try scanning some &nbsp;<i class="fas fa-qrcode"></i> barcodes!</h3>
+                </div>
             </div>
         </div>
     </div>
@@ -28,6 +32,4 @@
         </a>
     </div>
 
-    <script src="js/inventory.js"></script>
-
 </div>

www/routes.js

@@ -30,14 +30,7 @@ var routes = [
         name: 'inventory',
         on: {
             pageAfterIn: function () {
-                function tryToLoadInventory() {
+                loadInventory(function () {}, "#inventory-page");
-                    if (typeof loadInventory != "function") {
-                        setTimeout(tryToLoadInventory, 100);
-                    } else {
-                        loadInventory(function () {});
-                    }
-                }
-                tryToLoadInventory();
             }
         }
     },