Add inventory menu, add game-icons.net icon font, add player info bg

master
Skylar Ittner 5 years ago
parent 15a3d106b1
commit 1e4522fddc

@ -6,4 +6,8 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
#app.framework7-root {
padding-top: 0px;
}
.popup {
overflow-y: scroll;
}

@ -25,9 +25,17 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
#playerinfo {
position: absolute;
left: 0;
right: 0;
top: var(--f7-statusbar-height);
padding: 10px;
padding-right: 20px;
padding-bottom: 20px;
width: 20em;
height: 70px;
max-width: 90vw;
background-image: url(../img/player-info-bg.svg);
background-size: 100% 65px;
background-repeat: no-repeat;
background-position: top 5px left 0px;
}
.usericon {

@ -0,0 +1,23 @@
/*
This Source Code Form is subject to the terms of the Mozilla Public
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 .item {
text-align: center;
border-radius: 5px;
border: 1px solid white;
min-height: 300px;
position: relative;
}
#item-bin .item .badge {
position: absolute;
top: -10px;
right: -10px;
}
#item-bin .item .item-icon {
font-size: 6em;
}

@ -25,6 +25,8 @@ TODO: Change image based on place health/strength {0,1,2}.png
/*
Colorize images for map display
CSS filters made with https://codepen.io/sosuke/pen/Pjoqqp
*/
/*

File diff suppressed because it is too large Load Diff

@ -0,0 +1,107 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="140mm"
height="30mm"
preserveAspectRatio="none"
version="1.1"
viewBox="0 0 140 30"
id="svg1415"
sodipodi:docname="player-info-bg-src.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata1421">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs1419" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1013"
id="namedview1417"
showgrid="false"
inkscape:zoom="2.1069062"
inkscape:cx="269.68202"
inkscape:cy="93.921442"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="g1413"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<g
id="g1413"
style="fill:#171717"
transform="translate(2.6638281,-0.20097625)">
<rect
style="opacity:0.75"
id="rect2077"
height="30"
width="30"
y="-34.710007"
x="-2.0359328" />
<path
style="opacity:0.75;stroke-width:1"
inkscape:connector-curvature="0"
id="path2079"
d="M 27.964068,-14.710009 H 107.96407 L 27.964068,-4.7100087 Z" />
<rect
style="opacity:0.75;stroke-width:0.99999994"
id="rect2081"
height="11.999998"
width="50"
y="-34.710007"
x="27.964067" />
<path
style="opacity:0.75;stroke-width:0.99999994"
inkscape:connector-curvature="0"
id="path2083"
d="M 77.964067,-22.710011 H 107.96407 L 77.964067,-34.710008 Z" />
<rect
style="opacity:0.75;stroke-width:0.99999994"
id="rect2085"
height="8"
width="100"
y="-22.710011"
x="27.964067" />
<path
style="opacity:0.75;stroke-width:1"
inkscape:connector-curvature="0"
id="path2087"
d="m 127.96407,-18.71001 h 10 l -10,-4 z" />
<path
d="m 127.96407,-18.71001 h 10 l -10,4 z"
id="path2089"
inkscape:connector-curvature="0"
style="opacity:0.75;stroke-width:1" />
<path
style="opacity:0.5;fill:#171717;stroke-width:3.77952743"
d="M 0 0 L 0 113.38672 L 113.38672 113.38672 L 415.74805 75.589844 L 491.33789 75.589844 L 529.13477 60.472656 L 491.33789 45.353516 L 415.74805 45.353516 L 302.36133 0 L 113.38672 0 L 0 0 z "
transform="matrix(0.26458334,0,0,0.26458334,-2.6638281,0.20097625)"
id="rect2077-3" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140mm" height="30mm" preserveAspectRatio="none" version="1.1" viewBox="0 0 140 30" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.6638 -.20098)" fill="#171717"><rect x="-2.0359" y="-34.71" width="30" height="30" opacity=".75"/><path d="m27.964-14.71h80l-80 10z" opacity=".75"/><g><rect x="27.964" y="-34.71" width="50" height="12" opacity=".75"/><path d="m77.964-22.71h30l-30-12z" opacity=".75"/><rect x="27.964" y="-22.71" width="100" height="8" opacity=".75"/></g><path d="m127.96-18.71h10l-10-4z" opacity=".75"/><path d="m127.96-18.71h10l-10 4z" opacity=".75"/><path transform="matrix(.26458 0 0 .26458 -2.6638 .20098)" d="m0 0v113.39h113.39l302.36-37.797h75.59l37.797-15.117-37.797-15.119h-75.59l-113.39-45.354h-188.97-113.39z" fill="#171717" opacity=".5" stroke-width="3.7795"/></g></svg>

After

Width:  |  Height:  |  Size: 859 B

@ -9,12 +9,14 @@
<link rel="icon" href="img/logo.svg">
<link rel="stylesheet" href="fonts/material/Material_Icons.css">
<link rel="stylesheet" href="fonts/roboto/Roboto.css">
<link rel="stylesheet" href="fonts/game-icons/game-icons.css">
<link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/inventory.css">
<title>TerranQuest</title>

@ -0,0 +1,49 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* 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/.
*/
function loadInventory() {
$("#item-bin #bag-preloader").removeClass("display-none");
$("#item-bin .item-col").remove();
callAPI("inventory", {
username: localStorage.getItem("username"),
password: localStorage.getItem("password")
}, function (resp) {
var items = [];
for (var i = 0; i < resp.items.length; i++) {
var item = resp.items[i];
var found = false;
for (var j = 0; j < items.length; j++) {
if (items[j].id == item.id && items[j].json == item.json) {
items[j].qty += 1;
items[j].uuids.push(item.uuid);
found = true;
break;
}
}
if (!found) {
item["qty"] = 1;
item["uuids"] = [item.uuid];
items.push(item);
}
}
$("#item-bin #bag-preloader").addClass("display-none");
items.forEach(function (item) {
$("#item-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
+ '<div class="item padding margin" data-uuids="' + item.uuids + '" data-qty="' + item.qty + '">'
+ '<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>' : "")
+ '<h3>' + item.name + '</h3>'
+ item.description
+ '</div>'
+ '</div>');
})
}, function (msg) {
app.dialog.alert(msg, "Error");
});
}

@ -20,6 +20,9 @@ var app = new Framework7({
card: {
swipeToClose: false
},
popup: {
backdrop: false
},
init: true,
initOnDeviceReady: false,
routes: routes

@ -36,22 +36,22 @@
<div class="popup display-flex justify-content-center align-items-center dark-popup" id="menu-popup">
<div class="row" id="mainmenu-items">
<div class="col-50 mainmenu-item">
<i class="fas fa-3x fa-flask"></i><br />
<div class="col-50 mainmenu-item popup-close" onclick="router.navigate('/inventory');">
<i class="game-icon game-icon-light-backpack fa-4x"></i><br />
Items
</div>
<div class="col-50 mainmenu-item">
<i class="fas fa-3x fa-store"></i><br />
<i class="game-icon game-icon-shop fa-4x"></i><br />
Shop
</div>
<div class="col-100">
<div class="row">
<div class="col-50 mainmenu-item mainmenu-item-sm">
<i class="fas fa-3x fa-user-circle"></i><br />
<i class="fas fa-2x fa-user-circle"></i><br />
Profile
</div>
<div class="col-50 mainmenu-item mainmenu-item-sm">
<i class="fas fa-3x fa-cog"></i><br />
<i class="fas fa-2x fa-cog"></i><br />
Settings
</div>
</div>

@ -0,0 +1,33 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- 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="navbar">
<div class="navbar-inner">
<div class="title"><i class="game-icon game-icon-light-backpack"></i> Items</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="preloader color-green"></div>
<br />
<h3>Opening bag...</h3>
</div>
</div>
</div>
</div>
<div class="fab fab-center-bottom">
<a href="#" class="back">
<i class="fas fa-2x fa-times"></i>
</a>
</div>
<script src="js/inventory.js"></script>
</div>

@ -24,6 +24,24 @@ var routes = [
}
}
},
{
path: '/inventory',
templateUrl: './pages/inventory.html',
name: 'inventory',
keepAlive: true,
on: {
pageAfterIn: function () {
function tryToLoadInventory() {
if (typeof loadInventory != "function") {
setTimeout(loadInventory, 500);
} else {
loadInventory(function () {});
}
}
tryToLoadInventory();
}
}
},
{
path: '/signin',
url: './pages/signin.html',

Loading…
Cancel
Save