TerranQuest/Game
1
0
Fork 0
Code Issues 4 Pull Requests Releases 1 Wiki Activity

Use cards for inventory screen

Browse Source
This commit is contained in:
Skylar Ittner 2019-05-06 15:29:30 -06:00
parent d2961066e3
commit c017067ed9
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
www/css/inventory.css
View File

@ -4,15 +4,13 @@ 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/. file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/ */
#item-bin .item { #item-bin .card {
text-align: center; text-align: center;
border-radius: 5px;
border: 1px solid white;
min-height: 300px; min-height: 300px;
position: relative; position: relative;
} }
#item-bin .item .badge { #item-bin .card .badge {
position: absolute; position: absolute;
top: -10px; top: -10px;
right: -10px; right: -10px;

6
www/js/inventory.js
View File

@ -48,13 +48,15 @@ function loadInventory(reload) {
items.forEach(function (item) { items.forEach(function (item) {
$("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">' $("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
+ '<div class="item padding margin" data-uuids="' + item.uuids.join("|") + '" data-qty="' + item.qty + '">' + '<div class="card padding-half">'
+ '<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>' : "") + (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>' + '<h3>' + item.name + '</h3>'
+ item.description + item.description
+ (item.classname == "healmagic" ? '<button class="button button-fill margin-top useitem-button">Use</button>' : '') + (item.classname == "healmagic" ? '<button class="button button-fill margin-top useitem-button">Use</button>' : '')
+ '</div>' + '</div>'
+ '</div>'
+ '</div>'); + '</div>');
}) })
}, function (msg) { }, function (msg) {