From 9ad1589423f022945cacf8caff2b79f3f146c660 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 9 Jun 2019 00:18:00 -0600 Subject: [PATCH] Refactor inventory code a bit, add item action to place popup (close #1) --- www/css/app.css | 2 +- www/css/home.css | 4 ++ www/css/inventory.css | 18 +++++++-- www/index.html | 1 + www/js/home.js | 8 +++- www/js/inventory.js | 83 +++++++++++++++++++++++++--------------- www/pages/home.html | 26 +++++++++++++ www/pages/inventory.html | 20 +++++----- www/routes.js | 9 +---- 9 files changed, 118 insertions(+), 53 deletions(-) diff --git a/www/css/app.css b/www/css/app.css index 40239d0..ba184a3 100644 --- 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 { diff --git a/www/css/home.css b/www/css/home.css index 8841969..b620030 100644 --- 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; } diff --git a/www/css/inventory.css b/www/css/inventory.css index 1bc5383..1533235 100644 --- 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; } \ No newline at end of file diff --git a/www/index.html b/www/index.html index bf1fc9d..21a5e8b 100644 --- a/www/index.html +++ b/www/index.html @@ -52,3 +52,4 @@ + diff --git a/www/js/home.js b/www/js/home.js index 03e727d..9d24572 100644 --- 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(""); }); } 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"); }); \ No newline at end of file diff --git a/www/js/inventory.js b/www/js/inventory.js index 3e37680..d2ab6e0 100644 --- 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('
' + var usebtn = ""; + if (item.classname == "healmagic" || (inventoryloadedfromplacepopup && item.classname == "artifact")) { + usebtn = ''; + } + $(target + " .item-bin").append('
' + '
' + (item.qty > 1 ? 'x' + item.qty + '' : "") + '
' + '
' + '

' + item.name + '

' + item.description - + (item.classname == "healmagic" ? '' : '') + + usebtn + '
' + '
' + '
'); - }) + }); }, 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: ' ' + 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: ' ' + 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"); }); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/www/pages/home.html b/www/pages/home.html index 42ac376..b9869f9 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -101,6 +101,10 @@ Magic
+
+ + Item +

Artifacts

@@ -122,6 +126,28 @@
+ +
diff --git a/www/pages/inventory.html b/www/pages/inventory.html index 895df02..179d1dc 100644 --- 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/. --> -
- +
-
-
Items
+
+
Items
+
-
-
-
+
+

Opening bag...

+
@@ -28,6 +32,4 @@
- -
\ No newline at end of file diff --git a/www/routes.js b/www/routes.js index 9e5f8ee..2c20d9a 100644 --- 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"); } } },