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

2019-06-09 00:18:00 -06:00 · 2019-06-09 00:18:00 -06:00 · 9ad1589423
commit 9ad1589423
parent a2cba74aaa
9 changed files with 118 additions and 53 deletions
--- a/www/css/app.css
+++ b/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 {
--- a/www/css/home.css
+++ b/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;
 }
--- a/www/css/inventory.css
+++ b/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;
 }
--- a/www/index.html
+++ b/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>
--- a/www/js/home.js
+++ b/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");
 });
--- a/www/js/inventory.js
+++ b/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();
-        $("#item-bin #bag-preloader").removeClass("display-none");
+        $(target + " .item-bin .item-col").remove();
+        $(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 () {
-    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
+    // Prevent multiple events from firing
+    $(target).unbind("click");
+
+    $(target).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,
+            placeid: (inventoryloadedfromplacepopup ? $("#place-popup").data("placeid") : null)
+        }, 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, target);
+        }, function (error) {
+            //app.dialog.alert(error, "Error");
        });
-        loadInventory(true);
-    }, function (error) {
-        app.dialog.alert(error, "Error");
    });
-});
+}
--- a/www/pages/home.html
+++ b/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">
--- a/www/pages/inventory.html
+++ b/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="title"><i class="game-icon game-icon-school-bag"></i> Items</div>
+        <div class="navbar-inner">
+            <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="col text-align-center padding-top" id="bag-preloader">
+            <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. 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>
--- a/www/routes.js
+++ b/www/routes.js
@ -30,14 +30,7 @@ var routes = [
        name: 'inventory',
        on: {
            pageAfterIn: function () {
-                function tryToLoadInventory() {
-                    if (typeof loadInventory != "function") {
-                        setTimeout(tryToLoadInventory, 100);
-                    } else {
-                        loadInventory(function () {});
-                    }
-                }
-                tryToLoadInventory();
+                loadInventory(function () {}, "#inventory-page");
            }
        }
    },