Browse Source

Add in-app purchases (shop), improve main menu navbar, misc. tweaks

master
Skylar Ittner 5 years ago
parent
commit
a3bfeb18d1
  1. 1
      .gitignore
  2. 91
      config.xml
  3. 4
      nbproject/plugins.properties
  4. 52
      www/css/main.css
  5. 190
      www/js/shop.js
  6. 2
      www/js/user.js
  7. 120
      www/screens/inventory.html
  8. 7
      www/screens/licenses.html
  9. 57
      www/screens/menu.html
  10. 56
      www/screens/shop.html

1
.gitignore

@ -1,3 +1,4 @@
platforms/
plugins/
nbproject/private/
/www/manifest.json

91
config.xml

@ -1,21 +1,5 @@
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!--
Copyright 2016 Netsyms Technologies.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0" android-versionCode="104060" id="com.netsyms.terranquest.TerranQuest" version="1.4.6">
<?xml version='1.0' encoding='utf-8'?>
<widget android-versionCode="105002" id="com.netsyms.terranquest.TerranQuest" version="1.5.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
<name>TerranQuest</name>
<description>
Augmented Reality fantasy game
@ -23,45 +7,46 @@ limitations under the License.
<author email="admin@netsyms.com" href="https://netsyms.com">
Netsyms Technologies
</author>
<icon src="res/icon.png"/>
<preference name="SplashScreen" value="res/splash.9.png"/>
<preference name="FadeSplashScreen" value="true"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="SplashScreenDelay" value="1000"/>
<preference name="SplashMaintainAspectRatio" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="true"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="ShowSplashScreen" value="true"/>
<icon src="res/icon.png" />
<preference name="SplashScreen" value="res/splash.9.png" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value="2000" />
<preference name="SplashScreenDelay" value="1000" />
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashShowOnlyFirstTime" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreen" value="true" />
<platform name="browser">
<preference name="ShowSplashScreen" value="false"/>
<preference name="ShowSplashScreen" value="false" />
</platform>
<content src="index.html"/>
<access origin="*"/>
<allow-navigation href="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<content src="index.html" />
<access origin="*" />
<allow-navigation href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*"/>
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="browser" spec="~4.0.0"/>
<engine name="android" spec="latest"/>
<plugin name="cordova-plugin-whitelist" spec="~1.2.1"/>
<plugin name="cordova-plugin-console" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git"/>
<plugin name="cordova-plugin-device" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git"/>
<plugin name="cordova-plugin-camera" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git"/>
<plugin name="cordova-plugin-splashscreen" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git"/>
<plugin name="cordova-plugin-network-information" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git"/>
<plugin name="cordova-plugin-dialogs" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git"/>
<plugin name="cordova-plugin-media" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git"/>
<plugin name="cordova-plugin-media-capture" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git"/>
<plugin name="cordova-plugin-geolocation" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git"/>
<plugin name="com.phonegap.plugins.barcodescanner" spec="https://github.com/Telerik-Verified-Plugins/BarcodeScanner"/>
<plugin name="cordova-plugin-dialogs" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git" />
<plugin name="cordova-plugin-whitelist" spec="https://github.com/apache/cordova-plugin-whitelist.git" />
<plugin name="cordova-plugin-console" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git" />
<plugin name="cordova-plugin-device" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git" />
<plugin name="cordova-plugin-camera" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git" />
<plugin name="cordova-plugin-splashscreen" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git" />
<plugin name="cordova-plugin-network-information" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git" />
<plugin name="cordova-plugin-media" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git" />
<plugin name="cordova-plugin-media-capture" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git" />
<plugin name="cordova-plugin-geolocation" spec="https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git" />
<plugin name="com.phonegap.plugins.barcodescanner" spec="https://github.com/Telerik-Verified-Plugins/BarcodeScanner" />
<plugin name="cordova-plugin-inapppurchase" spec="~1.0.0" />
<engine name="browser" spec="~4.0.0" />
<engine name="android" spec="latest" />
</widget>

4
nbproject/plugins.properties

@ -9,8 +9,6 @@
# For more information about plugins see http://cordova.apache.org/blog/releases/2013/07/23/cordova-3.html
#
com.phonegap.plugins.barcodescanner=https://github.com/Telerik-Verified-Plugins/BarcodeScanner
#phonegap-plugin-barcodescanner=https://github.com/phonegap/phonegap-plugin-barcodescanner.git
cordova-plugin-whitelist=https://github.com/apache/cordova-plugin-whitelist.git
cordova-plugin-splashscreen=https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
cordova-plugin-dialogs=https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git
@ -21,3 +19,5 @@ cordova-plugin-geolocation=https://git-wip-us.apache.org/repos/asf/cordova-plugi
cordova-plugin-network-information=https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git
cordova-plugin-console=https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git
cordova-plugin-device=https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
com.phonegap.plugins.barcodescanner=https://github.com/Telerik-Verified-Plugins/BarcodeScanner3
cordova-plugin-inapppurchase=https://github.com/AlexDisler/cordova-plugin-inapppurchase

52
www/css/main.css

@ -384,4 +384,56 @@ body {
left: 0;
width: 100%;
height: 100%;
}
#shopmessage {
position: fixed;
z-index: 9999;
background: rgba(0, 0, 0, .85);
border-radius: 10px;
left: 10%;
right: 10%;
top: 25%;
bottom: 25%;
height: fit-content;
max-height: 500px;
padding: 10px;
padding-top: 20px;
padding-bottom: 15px;
display: none;
}
.hugesymbol {
text-align: center;
margin-bottom: 20px;
display: none;
}
#shopmessagecontent {
font-size: 120%;
text-align: center;
margin-bottom: 10px;
}
#shop-balance-bar {
text-align: right;
position: fixed;
right: 10px;
background: rgba(0, 0, 0, .5);
border-radius: 5px;
z-index: 9500;
padding: 10px;
}
#menutablist {
z-index: 9999;
position: fixed;
width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, .8);
}
#menutabcontent {
padding-top: 85px;
}

190
www/js/shop.js

@ -0,0 +1,190 @@
/*
TerranQuest - Augmented Reality fantasy game
Copyright 2016 Netsyms Technologies
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
// Depending on the device, a few examples are:
// - "Android"
// - "BlackBerry"
// - "iOS"
// - "webOS"
// - "WinCE"
// - "Tizen"
var DEVICE_ANDROID = 0;
var DEVICE_GOOGLEPLAY = 1;
var DEVICE_IOS = 2;
var DEVICE_WEB = 3;
var DEVICE_WINDOWS_PHONE = 5;
var DEVICE_WINDOWS = 6;
var DEVICE_OTHER = 10;
function getPlatform() {
var devicePlatform = device.platform;
switch (devicePlatform) {
case 'Android':
return DEVICE_ANDROID;
case 'iOS':
return DEVICE_IOS;
case 'WinCE':
return DEVICE_WINDOWS_PHONE;
case 'Win32NT':
return DEVICE_WINDOWS_PHONE;
case 'Windows':
return DEVICE_WINDOWS;
case 'browser':
return DEVICE_WEB;
default:
return DEVICE_OTHER;
}
}
function buycoins(productId) {
if (getPlatform() == DEVICE_ANDROID) {
inAppPurchase
.buy(productId)
.then(function (data) {
console.log(JSON.stringify(data));
$.getJSON(mkApiUrl('processiap', 'gs'), {
os: 'android',
data: data.receipt,
signature: data.signature,
id: productId
}, function (result) {
if (result.status == 'OK') {
return inAppPurchase.consume(data.type, data.receipt, data.signature);
} else {
showShopMessage("Error: " + result.message, true);
}
}).fail(function () {
showShopMessage("Error: Lost connection to TerranQuest servers. If your purchase does not appear within a few hours, contact support@netsyms.com.", true);
});
})
.then(function () {
loadstorefront();
showShopMessage("Thanks for your purchase!", true);
})
.catch(function (err) {
console.log("Error: " + err.message);
showShopMessage("Error: " + err.message, true);
});
} else {
showShopMessage("Store not available on your device. Please go to terranquest.net to purchase coins.", true);
}
}
function showShopMessage(msg, iserror) {
if (iserror) {
$('#hugetimessign').css('display', 'block');
$('#hugecheckmark').css('display', 'none');
} else {
$('#hugetimessign').css('display', 'none');
$('#hugecheckmark').css('display', 'block');
}
$('#shopmessagecontent').text(msg);
$('#shopmessage').css('display', 'block');
}
function buyitem(id, cost) {
$('#shopitem-' + id).prop('onclick', null).off('click');
$.getJSON(mkApiUrl('buyitem', 'gs'), {
merchid: id,
cost: cost
}, function (data) {
if (data.status == 'OK') {
showShopMessage(data.message, false);
} else {
showShopMessage(data.message, true);
}
loadstorefront();
});
}
function getmerchhtmlfromjson(item) {
var itemhtml = "\
<div class='list-group-item shop-item' id='shopitem-" + item.merchid + "'>\
<h4 class='itemname'>" + item.title + "</h4>\
<p class='itemdesc'>" + item.desc + "</p>";
itemhtml += "<span class='btn btn-success' onclick=\"buyitem('" + item.merchid + "', " + item.cost + ")\">\
Buy Item (" + item.cost + " coins)\
</span>\
</div>";
return itemhtml;
}
function getcoinhtmlfromjson(coin) {
var coinhtml = "\
<div class='list-group-item shop-item' id='coinitem-" + coin.merchid + "'>\
<h4 class='itemname'>" + coin.display + " (" + coin.coins + ")</h4>";
coinhtml += "<span class='btn btn-success' onclick=\"buycoins('" + coin.merchid + "', " + coin.cost_usd + ")\">\
Buy Coins ($" + coin.cost_usd + ")\
</span>\
</div>";
return coinhtml;
}
function setcoinhtmlfromiap(coinsjson) {
var prodIds = [];
coinsjson.forEach(function (item) {
prodIds.push(item.merchid);
});
var coinsHtml = "";
inAppPurchase.getProducts(prodIds)
.then(function (products) {
console.log(products);
products.forEach(function (prod) {
coinsHtml += ""
+ "<div class='list-group-item shop-item' id='coinitem-" + prod.productId + "'>"
+ "<h4 class='itemname'>" + prod.title.replace(" (TerranQuest)", "") + "</h4>"
+ "<p class='itemdesc'>" + prod.description + "</p>"
+ "<span class='btn btn-success' onclick=\"buycoins('" + prod.productId + "')\">"
+ "Buy Coins (" + prod.price + ")"
+ "</span>"
+ "</div>";
});
$('#coin-list').html(coinsHtml);
/*
[{ productId: 'com.yourapp.prod1', 'title': '...', description: '...', price: '...' }, ...]
*/
})
.catch(function (err) {
console.log(err.message);
coinsHtml = getcoinhtmlfromjson(coinsjson);
$('#coin-list').html(coinsHtml);
});
}
function loadstorefront() {
$.getJSON(mkApiUrl('shopitems'), function (data) {
var content = "";
if (data.status == 'OK') {
var items = data.items;
var coins = data.coins;
items.forEach(function (item) {
content += getmerchhtmlfromjson(item);
});
setcoinhtmlfromiap(coins);
$('#coinbalance').text(data.balance);
} else {
content = "<div class='list-group-item'>An error occurred.</div>";
coincode = "<div class='list-group-item'>An error occurred.</div>";
}
$('#shop-list').html(content);
});
loadinventory(); // Make sure purchases stay in sync
// Put it last in case it fails, so it doesn't crash stuff badly
}

2
www/js/user.js

@ -79,7 +79,7 @@ setInterval(function () {
}, 3000);
// Send chat messages
$("#chatsendform").submit(function (event) {
message = $('#chatbox-input').val();
var message = $('#chatbox-input').val();
if (message !== '') {
$.post(mkApiUrl('chat', 'cs'), {
user: username,

120
www/screens/inventory.html

@ -15,64 +15,64 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="scrollable-box">
<div class="list-group" id="inventory-list">
<div class="list-group-item">
<i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
</div>
</div>
</div>
<script>
function useitem(uuid) {
$('#invitem-' + uuid).prop('onclick',null).off('click');
$.getJSON(mkApiUrl('useitem', 'gs'), {
itemuuid: uuid
}, function (data) {
if (data.status === 'OK') {
loadinventory();
syncStats();
} else {
navigator.notification.alert(data.message, null, "Error", 'OK');
}
}).fail(function () {
navigator.notification.alert("Cannot use item. Try again.", null, "Error", 'OK');
});
}
function getitemhtmlfromjson(item) {
var itemhtml = "\
<div class='list-group-item inventory-item' id='item-" + item.itemuuid + "'>\
<h4 class='itemname'>" + item.itemname + "</h4>\
<p class='itemdesc'>" + item.itemdesc + "</p>";
if (item.classname == "healmagic") {
itemhtml += "<span class='btn btn-success' id='invitem-" + item.itemuuid + "' onclick=\"useitem('" + item.itemuuid + "')\">\
Use Item\
</span>";
}
itemhtml += "<span class='itemid' style='display: none;'>" + item.itemid + "</span>\
<span class='itemclassid' style='display: none;'>" + item.classid + "</span>\
<span class='itemjson' style='display: none;'>" + item.itemjson + "</span>\
</div>";
return itemhtml;
}
function loadinventory() {
$.getJSON(mkApiUrl('inventory'), {
user: username
}, function (data) {
var content = "";
if (data.status == 'OK') {
items = data.items;
items.forEach(function (item) {
content += getitemhtmlfromjson(item);
});
} else {
content = "<div class='list-group-item'>An error occurred.</div>";
}
$('#inventory-list').html(content);
});
}
loadinventory();
<div class="scrollable-box">
<div class="list-group" id="inventory-list">
<div class="list-group-item">
<i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
</div>
</div>
</div>
<script>
function useitem(uuid) {
$('#invitem-' + uuid).prop('onclick',null).off('click');
$.getJSON(mkApiUrl('useitem', 'gs'), {
itemuuid: uuid
}, function (data) {
if (data.status === 'OK') {
loadinventory();
syncStats();
} else {
navigator.notification.alert(data.message, null, "Error", 'OK');
}
}).fail(function () {
navigator.notification.alert("Cannot use item. Try again.", null, "Error", 'OK');
});
}
function getitemhtmlfromjson(item) {
var itemhtml = "\
<div class='list-group-item inventory-item' id='item-" + item.itemuuid + "'>\
<h4 class='itemname'>" + item.itemname + "</h4>\
<p class='itemdesc'>" + item.itemdesc + "</p>";
if (item.classname == "healmagic") {
itemhtml += "<span class='btn btn-success' id='invitem-" + item.itemuuid + "' onclick=\"useitem('" + item.itemuuid + "')\">\
Use Item\
</span>";
}
itemhtml += "<span class='itemid' style='display: none;'>" + item.itemid + "</span>\
<span class='itemclassid' style='display: none;'>" + item.classid + "</span>\
<span class='itemjson' style='display: none;'>" + item.itemjson + "</span>\
</div>";
return itemhtml;
}
function loadinventory() {
$.getJSON(mkApiUrl('inventory'), {
user: username
}, function (data) {
var content = "";
if (data.status == 'OK') {
var items = data.items;
items.forEach(function (item) {
content += getitemhtmlfromjson(item);
});
} else {
content = "<div class='list-group-item'>An error occurred.</div>";
}
$('#inventory-list').html(content);
});
}
loadinventory();
</script>

7
www/screens/licenses.html

@ -207,6 +207,13 @@ limitations under the License.
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
<h4>cordova-plugin-inapppurchase</h4>
<p>The MIT License</p>
<p>Copyright (c) 2016 Alex Disler</p>
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
<p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button>

57
www/screens/menu.html

@ -15,27 +15,38 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="menutablist">
<li role="presentation" class="active"><a href="#inventory" aria-controls="inventory" role="tab" data-toggle="tab" id="inventory-tab">Inventory</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" id="profile-tab">Profile</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" id="settings-tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="menutabcontent">
<div role="tabpanel" class="tab-pane active" id="inventory">...</div>
<div role="tabpanel" class="tab-pane" id="profile"></div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
<script>
$('#menutabcontent #profile').load("screens/profile.html", null, function (x) {
loadProfile(username);
});
$('#menutabcontent #settings').load("screens/settings.html");
$('#menutabcontent #inventory').load("screens/inventory.html");
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="menutablist">
<li role="presentation" class="active"><a href="#inventory" aria-controls="inventory" role="tab" data-toggle="tab" id="inventory-tab"><i class="fa fa-fw fa-cube"></i> Inventory</a></li>
<li role="presentation"><a href="#shop" aria-controls="shop" role="tab" data-toggle="tab" id="shop-tab"><i class="fa fa-fw fa-money"></i> Shop</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" id="profile-tab"><i class="fa fa-fw fa-user"></i> Profile</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" id="settings-tab"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" id="menutabcontent">
<div role="tabpanel" class="tab-pane active" id="inventory">...</div>
<div role="tabpanel" class="tab-pane" id="shop"></div>
<div role="tabpanel" class="tab-pane" id="profile"></div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
<script>
$(window).resize(function () {
$('#menutabcontent').css('padding-top', $('#menutablist').css("height"));
});
setInterval(function() {
$('#menutabcontent').css('padding-top', $('#menutablist').css("height"));
}, 250);
$('#menutabcontent #profile').load("screens/profile.html", null, function (x) {
loadProfile(username);
});
$('#menutabcontent #shop').load("screens/shop.html");
$('#menutabcontent #settings').load("screens/settings.html");
$('#menutabcontent #inventory').load("screens/inventory.html");
</script>

56
www/screens/shop.html

@ -0,0 +1,56 @@
<!--
TerranQuest - Augmented Reality fantasy game
Copyright 2016 Netsyms Technologies
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<div class="scrollable-box">
<div id="shop-balance-bar">
Coins: <span id="coinbalance"></span>
</div>
<h4>Items</h4>
<div class='list-group' id="shop-list">
<div class='list-group-item'>
<i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
</div>
</div>
<h4>Coins</h4>
<div class='list-group' id="coin-list">
<div class='list-group-item'>
<i class="fa fa-spinner fa-pulse fa-fw"></i> Loading...
</div>
</div>
</div>
<div id="shopmessage">
<div id="hugecheckmark" class="hugesymbol">
<i class="fa fa-5x fa-fw fa-check-circle" style="color: green;"></i>
</div>
<div id="hugetimessign" class="hugesymbol">
<i class="fa fa-5x fa-fw fa-times-circle" style="color: red;"></i>
</div>
<div id="shopmessagecontent">
</div>
<div class="btn btn-wide btn-default" onclick="$('#shopmessage').css('display', 'none')">
OK
</div>
</div>
<script src="js/shop.js"></script>
<script>
loadstorefront();
</script>