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

master
Skylar Ittner 5 years ago
parent a2cba74aaa
commit 9ad1589423

@ -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 {

@ -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;
}

@ -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;
}

@ -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>

@ -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");
});

@ -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");
});
});
}

@ -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">

@ -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>

@ -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");
}
}
},

Loading…
Cancel
Save