Game now displays places on map, minor tweaks

platforms/android/assets/www/assets/bars.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>

platforms/android/assets/www/css/main.css

@@ -193,4 +193,37 @@ body {
 .chatbox #chatmsgs .chat-username {
     color: green;
     font-weight: bold;
+}
+
+#buttons {
+    position: absolute;
+    right: 0px;
+    top: 25%;
+    width: 70px;
+    padding-top: auto;
+    padding-bottom: auto;
+    padding-right: 10px;
+    display: block;
+    z-index: 9000;
+}
+
+#buttons .circlebutton {
+    border: 1px solid black;
+    background: rgba(255,255,255,.8);
+    border-radius: 50%;
+    box-shadow: 0 0 5px grey;
+    width: 60px;
+    height: 60px;
+}
+
+#buttons .circlebutton img {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 50px;
+    height: 50px;
+}
+
+.scrollable-box {
+    overflow-y: auto;
 }

platforms/android/assets/www/js/auth.js

@@ -4,6 +4,14 @@
 
 var authOpInProgress = false;
 
+function logout() {
+    localStorage.setItem("username", '');
+    localStorage.setItem("password", '');
+    username = null;
+    password = null;
+    $('#content-zone').load("screens/login.html");
+}
+
 function dosignup() {
     if (authOpInProgress) {
         return;

platforms/android/assets/www/js/home.js

@@ -20,7 +20,7 @@ var lastgpstime = 0;
 var terraintypeid = 0;
 var map = L.map('map');
 var tileurl = "http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg";
-map.setZoom(16);
+map.setZoom(17);
 map.dragging.disable();
 //map.touchZoom.disable();
 //map.doubleClickZoom.disable();
@@ -64,13 +64,28 @@ var lc = L.control.locate({
     },
     locateOptions: {}  // define location options e.g enableHighAccuracy: true or maxZoom: 10
 }).addTo(map);
-map.addLayer(new L.tileLayer(tileurl, {minZoom: 15, maxZoom: 17}));
-
+map.addLayer(new L.tileLayer(tileurl, {minZoom: 17, maxZoom: 17}));
+// GeoJSON layer
+var placeLayer = L.geoJson(
+        {"name": "Places", "type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [0, 0]}, "properties": {"osm_id": -1, "name": null}}]},
+{
+    onEachFeature: onPlaceTap,
+    pointToLayer: function (feature, latlng) {
+        return L.circleMarker(latlng, {
+            radius: 8,
+            fillColor: "#ff7800",
+            color: "#000",
+            weight: 1,
+            opacity: 1,
+            fillOpacity: 0.8
+        });
+    }
+}).addTo(map);
 lc.start();
-
 function mapPos(lat, lon) {
     lockGot = true;
     hideLoading();
+    loadPlaces(latitude, longitude);
     //map.setView(new L.LatLng(lat, lon), 16, {animate: true});
     //map.panTo(new L.LatLng(lat, lon));
     //map.invalidateSize();
@@ -82,6 +97,30 @@ function mapPos(lat, lon) {
 //    }, 100);
 }
 
+function onPlaceTap(feature, layer) {
+    layer.on('click', function (e) {
+
+    });
+}
+
+function loadPlaces(lat, long) {
+    $.getJSON(
+            "http://earth.apis.netsyms.net/places.php?format=geojson&lat=" + lat + "&long=" + long + "&radius=.25&names=1",
+            function (data) {
+                if (data.type === 'FeatureCollection') {
+                    placeLayer.clearLayers();
+                    data.features.forEach(function (item) {
+                        item.properties.popupContent = "<span class='marker-popup-text' onclick='openplace(" + item.properties.osm_id + ")'>" + item.properties.name + "</span>";
+                        placeLayer.addData(item);
+                    });
+                }
+            });
+}
+
+function openplace(osmid) {
+    alert(osmid);
+}
+
 /**
  * Hide the loading overlay if everything is loaded, otherwise do nothing
  */
@@ -105,7 +144,6 @@ var updatePosition = function (position) {
     }
     mapPos(latitude, longitude);
 };
-
 var updateTerrain = function (position) {
     latitude = position.coords.latitude;
     longitude = position.coords.longitude;
@@ -125,14 +163,12 @@ var updateTerrain = function (position) {
         $('#terrain-image').attr('src', 'assets/terrain/0.png');
     });
 };
-
 function pingServer() {
     if (lockGot && gpsaccuracy < 30) {
         $.get(mkApiUrl('ping') + "?user=" + username + "&lat=" + latitude + "&long=" + longitude);
     }
 }
 ;
-
 function onError(error) {
     $('#loading-error').text("Check your device's network and location settings, and ensure a clear view of the sky.");
 }
@@ -149,7 +185,6 @@ function popGPS() {
 $('#terrain-image').click(function () {
     popGPS();
 });
-
 // Initial GPS position and stuff
 navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
 // Update position
@@ -159,18 +194,14 @@ setInterval(function () {
 // Update position + terrain
 setInterval(function () {
     navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
-}, 1000 * 10);
+    loadPlaces(latitude, longitude);
+}, 1000 * 20);
 // Ping the server with coordinates
 setInterval(pingServer, 5000);
 // Show error if it's taking too long
 setTimeout(function () {
     onError();
 }, 15 * 1000);
-
-
-
-
-
 //////////////////////////////////////////////
 //  Profile, stats, and chat stuff
 //////////////////////////////////////////////
@@ -228,7 +259,6 @@ setInterval(function () {
 setInterval(function () {
     getChat();
 }, 2000);
-
 // Send chat messages
 $("#chatsendform").submit(function (event) {
     message = $('#chatbox-input').val();
@@ -248,7 +278,6 @@ $("#chatsendform").submit(function (event) {
     event.preventDefault();
     return false;
 });
-
 function toggleChat() {
     if ($('#chatmsgs').css('display') === 'none') {
         openChat();
@@ -280,6 +309,15 @@ function openRules() {
     });
 }
 
+function openMenu(topage) {
+    topage = typeof topage !== 'undefined' ? topage : "";
+    $('#main-content').load("screens/menu.html", null, function (x) {
+        $('#overlay-main').css('display', 'block');
+        if (topage !== '') {
+            $('#' + topage + '-tab').tab('show');
+        }
+    });
+}
 
 
 
@@ -302,7 +340,6 @@ document.addEventListener("backbutton", function (event) {
         toggleChat();
     }
 }, false);
-
 // Show the rules
 if (localStorage.getItem("seenrules") !== 'yes') {
     openRules();

platforms/android/assets/www/screens/home.html

@@ -23,7 +23,7 @@
 </div>
 
 <div id="overlay-top">
-    <p id="namedisp" onclick="openProfile()"></p>
+    <p id="namedisp" onclick="openMenu('profile')"></p>
     <div class="progress" id="energybar-container">
         <div id="energybar" class="progress-bar" role="progressbar" >
         </div>
@@ -31,6 +31,13 @@
     <p id="energybar-label"><i class="fa fa-bolt"></i> <i>Energy</i></p>
     <img src="assets/terrain/0.png" alt="" id="terrain-image" class="img-circle" />
 </div>
+
+<div id="buttons">
+    <div class="circlebutton" onclick="openMenu()">
+        <img src="assets/bars.svg" alt="Menu" />
+    </div>
+</div>
+
 <div class="chatbox" style="z-index: 9501; height: 50%;">
     <div class="well well-sm" id="chatmsgs"></div>
     <div class="input-group" style="position: absolute; left: 0px; bottom: 0px; height: 35px; width: 100%; z-index: 9501;">

platforms/android/assets/www/screens/inventory.html

@@ -0,0 +1,3 @@
+<div class="scrollable-box">
+    
+</div>

platforms/android/assets/www/screens/login.html

@@ -40,11 +40,11 @@
 <script>
     userset = false;
     passset = false;
-    if (localStorage.getItem("username") !== null) {
+    if (localStorage.getItem("username") !== null && localStorage.getItem("username") !== '') {
         $('#usernameBox').val(localStorage.getItem("username"));
         userset = true;
     }
-    if (localStorage.getItem("password") !== null) {
+    if (localStorage.getItem("password") !== null && localStorage.getItem("password") !== '') {
         $('#passwordBox').val(localStorage.getItem("password"));
         passset = true;
     }

platforms/android/assets/www/screens/menu.html

@@ -0,0 +1,24 @@
+<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");
+</script>

platforms/android/assets/www/screens/profile.html

@@ -1,59 +1,61 @@
-<div class="h4" id="player-name"></div>
-<p id="player-level"></p>
-<div class="h5">Badges</div>
-<div id="loading-badges">
-    <i class="fa fa-spinner fa-pulse"></i> Loading...
-</div>
-<div class="row" id="badges">
+<div class="scrollable-box">
+    <div class="h4" id="player-name"></div>
+    <p id="player-level"></p>
+    <div class="h5">Badges</div>
+    <div id="loading-badges">
+        <i class="fa fa-spinner fa-pulse"></i> Loading...
+    </div>
+    <div class="row" id="badges">
 
-</div>
-<script>
-    function popBadge(name, desc) {
-        navigator.notification.alert(desc, null, name, "Close");
-    }
+    </div>
+    <script>
+        function popBadge(name, desc) {
+            navigator.notification.alert(desc, null, name, "Close");
+        }
 
-    function loadProfile(user) {
-        $('#player-name').text(user);
-        loadBadges(user);
-        loadPlayerStats(user);
-    }
+        function loadProfile(user) {
+            $('#player-name').text(user);
+            loadBadges(user);
+            loadPlayerStats(user);
+        }
 
-    function loadPlayerStats(user) {
-        $.getJSON(mkApiUrl('getstats'), {
-            user: user
-        }, function (data) {
-            if (data.status === 'OK') {
-                $('#player-level').text('Level ' + Math.floor(data.stats.level));
-            } else {
-                $('#player-level').text('Error: cannot load player stats.');
-            }
-        }).fail(function () {
-            $('#player-level').text('Error: check your connection.');
-        });
-    }
+        function loadPlayerStats(user) {
+            $.getJSON(mkApiUrl('getstats'), {
+                user: user
+            }, function (data) {
+                if (data.status === 'OK' && data.stats !== null) {
+                    $('#player-level').text('Level ' + Math.floor(data.stats.level));
+                } else {
+                    $('#player-level').text('Error: cannot load player stats.');
+                }
+            }).fail(function () {
+                $('#player-level').text('Error: Loading failed.  <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
+            });
+        }
 
-    function loadBadges(user) {
-        $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
-        $('#loading-badges').css('display', 'block');
-        $.getJSON(
-                mkApiUrl('getbadges') + '?user=' + user,
-                function (data) {
-                    if (data.status === 'OK') {
-                        data.badges.forEach(function (item) {
-                            $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
-                            onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
-                            <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
-                            </div>');
-                        });
-                        $('#loading-badges').css('display', 'none');
-                    } else {
-                        $('#loading-badges').html('Loading failed.  <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
+        function loadBadges(user) {
+            $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
+            $('#loading-badges').css('display', 'block');
+            $.getJSON(
+                    mkApiUrl('getbadges') + '?user=' + user,
+                    function (data) {
+                        if (data.status === 'OK') {
+                            data.badges.forEach(function (item) {
+                                $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
+                                onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
+                                <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
+                                </div>');
+                            });
+                            $('#loading-badges').css('display', 'none');
+                        } else {
+                            $('#loading-badges').html('Loading failed.  <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
+                        }
                     }
-                }
-        ).fail(
-                function (err) {
-                    $('#loading-badges').html('Loading failed.  <a onclick="loadBadges(\'' + user + '\')">Reload</a>"');
-                }
-        );
-    }
-</script>
+            ).fail(
+                    function (err) {
+                        $('#loading-badges').html('Loading failed.  <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
+                    }
+            );
+        }
+    </script>
+</div>

platforms/android/assets/www/screens/rules.html

@@ -1,18 +1,20 @@
-<div class="h4">Rules</div>
-<p>Please read these rules.  Because TerranQuest is a game involving other
-    people and the environment, it's important to show good etiquette.</p>
-<ol class="list-group">
-    <li class="list-group-item">Do not endanger yourself or others</li>
-    <li class="list-group-item">be considerate and polite in the in-game chat, and don't swear</li>
-    <li class="list-group-item">Observe all local laws and rules</li>
-    <li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
-    <li class="list-group-item">Be nice to other people and try not to look too creepy</li>
-    <li class="list-group-item">Respect and minimize your impact on the environment</li>
-    <li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
-    <li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
-    <li class="list-group-item">Socialize with any players of other games, such as Geocaching and Ingress, you might meet</li>
-    <li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
-    <!--
-    <li class="list-group-item"></li>
-    -->
-</ol>
+<div class="scrollable-box">
+    <div class="h4">Rules</div>
+    <p>Please read these rules.  Because TerranQuest is a game involving other
+        people and the environment, it's important to show good etiquette.</p>
+    <ol class="list-group">
+        <li class="list-group-item">Do not endanger yourself or others</li>
+        <li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
+        <li class="list-group-item">Observe all local laws and rules</li>
+        <li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
+        <li class="list-group-item">Be nice to other people and try not to look too creepy</li>
+        <li class="list-group-item">Respect and minimize your impact on the environment</li>
+        <li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
+        <li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
+        <li class="list-group-item">Socialize with any players of other games, such as Geocaching and Ingress, you might meet</li>
+        <li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
+        <!--
+        <li class="list-group-item"></li>
+        -->
+    </ol>
+</div>

platforms/android/assets/www/screens/settings.html

@@ -0,0 +1,26 @@
+<div class="scrollable-box">
+    <div class='list-group'>
+        <div class='list-group-item' onclick='logout()'>
+            Logout from app
+        </div>
+        <div class='list-group-item'>
+            <p>
+                <span style='font-weight: bold;'>Third-Party Licenses</span>
+                <br />
+                Map tiles by Stamen Design (stamen.com), under CC BY 3.0 (creativecommons.org/licenses/by/3.0).
+                <br />
+                Map tile data by OpenStreetMap (openstreetmap.org), under CC BY-SA (creativecommons.org/licenses/by-sa/3.0).
+                <br />
+                Places from OpenStreetMap and contributers, licensed under the ODbL (opendatacommons.org/licenses/odbl).  Email apis@netsyms.com for free access to our API.
+                <br />
+                Map display is powered by Leaflet (leafletjs.com), copyright (c) 2010-2016, Vladimir Agafonkin and copyright (c) 2010-2011, CloudMade.  BSD 2-clause license.
+                <br />
+                Terrain information for the United States from the MRLC National Land Cover Database 2011 (mrlc.gov).
+                <br />
+                Weather data Powered by Forecast (forecast.io).
+                <br />
+                Geocache data from the OpenCaching.US OKAPI.  Data licensed under the CC BY-NC-SA 2.5 (creativecommons.org/licenses/by-nc-sa/2.5).
+            </p>
+        </div>
+    </div>
+</div>

www/assets/bars.svg

@@ -0,0 +1 @@
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>

www/css/main.css

@@ -193,4 +193,37 @@ body {
 .chatbox #chatmsgs .chat-username {
     color: green;
     font-weight: bold;
+}
+
+#buttons {
+    position: absolute;
+    right: 0px;
+    top: 25%;
+    width: 70px;
+    padding-top: auto;
+    padding-bottom: auto;
+    padding-right: 10px;
+    display: block;
+    z-index: 9000;
+}
+
+#buttons .circlebutton {
+    border: 1px solid black;
+    background: rgba(255,255,255,.8);
+    border-radius: 50%;
+    box-shadow: 0 0 5px grey;
+    width: 60px;
+    height: 60px;
+}
+
+#buttons .circlebutton img {
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    width: 30px;
+    height: 30px;
+}
+
+.scrollable-box {
+    overflow-y: auto;
 }

www/js/auth.js

@@ -4,6 +4,14 @@
 
 var authOpInProgress = false;
 
+function logout() {
+    localStorage.setItem("username", '');
+    localStorage.setItem("password", '');
+    username = null;
+    password = null;
+    $('#content-zone').load("screens/login.html");
+}
+
 function dosignup() {
     if (authOpInProgress) {
         return;

www/js/home.js

@@ -20,7 +20,7 @@ var lastgpstime = 0;
 var terraintypeid = 0;
 var map = L.map('map');
 var tileurl = "http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg";
-map.setZoom(16);
+map.setZoom(17);
 map.dragging.disable();
 //map.touchZoom.disable();
 //map.doubleClickZoom.disable();
@@ -64,13 +64,28 @@ var lc = L.control.locate({
     },
     locateOptions: {}  // define location options e.g enableHighAccuracy: true or maxZoom: 10
 }).addTo(map);
-map.addLayer(new L.tileLayer(tileurl, {minZoom: 15, maxZoom: 17}));
-
+map.addLayer(new L.tileLayer(tileurl, {minZoom: 17, maxZoom: 17}));
+// GeoJSON layer
+var placeLayer = L.geoJson(
+        {"name": "Places", "type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "Point", "coordinates": [0, 0]}, "properties": {"osm_id": -1, "name": null}}]},
+{
+    onEachFeature: onPlaceTap,
+    pointToLayer: function (feature, latlng) {
+        return L.circleMarker(latlng, {
+            radius: 8,
+            fillColor: "#ff7800",
+            color: "#000",
+            weight: 1,
+            opacity: 1,
+            fillOpacity: 0.8
+        });
+    }
+}).addTo(map);
 lc.start();
-
 function mapPos(lat, lon) {
     lockGot = true;
     hideLoading();
+    loadPlaces(latitude, longitude);
     //map.setView(new L.LatLng(lat, lon), 16, {animate: true});
     //map.panTo(new L.LatLng(lat, lon));
     //map.invalidateSize();
@@ -82,6 +97,30 @@ function mapPos(lat, lon) {
 //    }, 100);
 }
 
+function onPlaceTap(feature, layer) {
+    layer.on('click', function (e) {
+
+    });
+}
+
+function loadPlaces(lat, long) {
+    $.getJSON(
+            "http://earth.apis.netsyms.net/places.php?format=geojson&lat=" + lat + "&long=" + long + "&radius=.25&names=1",
+            function (data) {
+                if (data.type === 'FeatureCollection') {
+                    placeLayer.clearLayers();
+                    data.features.forEach(function (item) {
+                        item.properties.popupContent = "<span class='marker-popup-text' onclick='openplace(" + item.properties.osm_id + ")'>" + item.properties.name + "</span>";
+                        placeLayer.addData(item);
+                    });
+                }
+            });
+}
+
+function openplace(osmid) {
+    alert(osmid);
+}
+
 /**
  * Hide the loading overlay if everything is loaded, otherwise do nothing
  */
@@ -105,7 +144,6 @@ var updatePosition = function (position) {
     }
     mapPos(latitude, longitude);
 };
-
 var updateTerrain = function (position) {
     latitude = position.coords.latitude;
     longitude = position.coords.longitude;
@@ -125,14 +163,12 @@ var updateTerrain = function (position) {
         $('#terrain-image').attr('src', 'assets/terrain/0.png');
     });
 };
-
 function pingServer() {
     if (lockGot && gpsaccuracy < 30) {
         $.get(mkApiUrl('ping') + "?user=" + username + "&lat=" + latitude + "&long=" + longitude);
     }
 }
 ;
-
 function onError(error) {
     $('#loading-error').text("Check your device's network and location settings, and ensure a clear view of the sky.");
 }
@@ -149,7 +185,6 @@ function popGPS() {
 $('#terrain-image').click(function () {
     popGPS();
 });
-
 // Initial GPS position and stuff
 navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
 // Update position
@@ -159,18 +194,14 @@ setInterval(function () {
 // Update position + terrain
 setInterval(function () {
     navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
-}, 1000 * 10);
+    loadPlaces(latitude, longitude);
+}, 1000 * 20);
 // Ping the server with coordinates
 setInterval(pingServer, 5000);
 // Show error if it's taking too long
 setTimeout(function () {
     onError();
 }, 15 * 1000);
-
-
-
-
-
 //////////////////////////////////////////////
 //  Profile, stats, and chat stuff
 //////////////////////////////////////////////
@@ -228,7 +259,6 @@ setInterval(function () {
 setInterval(function () {
     getChat();
 }, 2000);
-
 // Send chat messages
 $("#chatsendform").submit(function (event) {
     message = $('#chatbox-input').val();
@@ -248,7 +278,6 @@ $("#chatsendform").submit(function (event) {
     event.preventDefault();
     return false;
 });
-
 function toggleChat() {
     if ($('#chatmsgs').css('display') === 'none') {
         openChat();
@@ -280,6 +309,15 @@ function openRules() {
     });
 }
 
+function openMenu(topage) {
+    topage = typeof topage !== 'undefined' ? topage : "";
+    $('#main-content').load("screens/menu.html", null, function (x) {
+        $('#overlay-main').css('display', 'block');
+        if (topage !== '') {
+            $('#' + topage + '-tab').tab('show');
+        }
+    });
+}
 
 
 
@@ -302,7 +340,6 @@ document.addEventListener("backbutton", function (event) {
         toggleChat();
     }
 }, false);
-
 // Show the rules
 if (localStorage.getItem("seenrules") !== 'yes') {
     openRules();

www/screens/home.html

@@ -23,7 +23,7 @@
 </div>
 
 <div id="overlay-top">
-    <p id="namedisp" onclick="openProfile()"></p>
+    <p id="namedisp" onclick="openMenu('profile')"></p>
     <div class="progress" id="energybar-container">
         <div id="energybar" class="progress-bar" role="progressbar" >
         </div>
@@ -31,6 +31,13 @@
     <p id="energybar-label"><i class="fa fa-bolt"></i> <i>Energy</i></p>
     <img src="assets/terrain/0.png" alt="" id="terrain-image" class="img-circle" />
 </div>
+
+<div id="buttons">
+    <div class="circlebutton" onclick="openMenu()">
+        <img src="assets/bars.svg" alt="Menu" />
+    </div>
+</div>
+
 <div class="chatbox" style="z-index: 9501; height: 50%;">
     <div class="well well-sm" id="chatmsgs"></div>
     <div class="input-group" style="position: absolute; left: 0px; bottom: 0px; height: 35px; width: 100%; z-index: 9501;">

www/screens/inventory.html

@@ -0,0 +1,3 @@
+<div class="scrollable-box">
+    
+</div>

www/screens/login.html

@@ -40,11 +40,11 @@
 <script>
     userset = false;
     passset = false;
-    if (localStorage.getItem("username") !== null) {
+    if (localStorage.getItem("username") !== null && localStorage.getItem("username") !== '') {
         $('#usernameBox').val(localStorage.getItem("username"));
         userset = true;
     }
-    if (localStorage.getItem("password") !== null) {
+    if (localStorage.getItem("password") !== null && localStorage.getItem("password") !== '') {
         $('#passwordBox').val(localStorage.getItem("password"));
         passset = true;
     }

www/screens/menu.html

@@ -0,0 +1,24 @@
+<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");
+</script>

www/screens/profile.html

@@ -1,59 +1,61 @@
-<div class="h4" id="player-name"></div>
-<p id="player-level"></p>
-<div class="h5">Badges</div>
-<div id="loading-badges">
-    <i class="fa fa-spinner fa-pulse"></i> Loading...
-</div>
-<div class="row" id="badges">
+<div class="scrollable-box">
+    <div class="h4" id="player-name"></div>
+    <p id="player-level"></p>
+    <div class="h5">Badges</div>
+    <div id="loading-badges">
+        <i class="fa fa-spinner fa-pulse"></i> Loading...
+    </div>
+    <div class="row" id="badges">
 
-</div>
-<script>
-    function popBadge(name, desc) {
-        navigator.notification.alert(desc, null, name, "Close");
-    }
+    </div>
+    <script>
+        function popBadge(name, desc) {
+            navigator.notification.alert(desc, null, name, "Close");
+        }
 
-    function loadProfile(user) {
-        $('#player-name').text(user);
-        loadBadges(user);
-        loadPlayerStats(user);
-    }
+        function loadProfile(user) {
+            $('#player-name').text(user);
+            loadBadges(user);
+            loadPlayerStats(user);
+        }
 
-    function loadPlayerStats(user) {
-        $.getJSON(mkApiUrl('getstats'), {
-            user: user
-        }, function (data) {
-            if (data.status === 'OK') {
-                $('#player-level').text('Level ' + Math.floor(data.stats.level));
-            } else {
-                $('#player-level').text('Error: cannot load player stats.');
-            }
-        }).fail(function () {
-            $('#player-level').text('Error: check your connection.');
-        });
-    }
+        function loadPlayerStats(user) {
+            $.getJSON(mkApiUrl('getstats'), {
+                user: user
+            }, function (data) {
+                if (data.status === 'OK' && data.stats !== null) {
+                    $('#player-level').text('Level ' + Math.floor(data.stats.level));
+                } else {
+                    $('#player-level').text('Error: cannot load player stats.');
+                }
+            }).fail(function () {
+                $('#player-level').text('Error: Loading failed.  <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
+            });
+        }
 
-    function loadBadges(user) {
-        $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
-        $('#loading-badges').css('display', 'block');
-        $.getJSON(
-                mkApiUrl('getbadges') + '?user=' + user,
-                function (data) {
-                    if (data.status === 'OK') {
-                        data.badges.forEach(function (item) {
-                            $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
-                            onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
-                            <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
-                            </div>');
-                        });
-                        $('#loading-badges').css('display', 'none');
-                    } else {
-                        $('#loading-badges').html('Loading failed.  <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
+        function loadBadges(user) {
+            $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
+            $('#loading-badges').css('display', 'block');
+            $.getJSON(
+                    mkApiUrl('getbadges') + '?user=' + user,
+                    function (data) {
+                        if (data.status === 'OK') {
+                            data.badges.forEach(function (item) {
+                                $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
+                                onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
+                                <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
+                                </div>');
+                            });
+                            $('#loading-badges').css('display', 'none');
+                        } else {
+                            $('#loading-badges').html('Loading failed.  <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
+                        }
                     }
-                }
-        ).fail(
-                function (err) {
-                    $('#loading-badges').html('Loading failed.  <a onclick="loadBadges(\'' + user + '\')">Reload</a>"');
-                }
-        );
-    }
-</script>
+            ).fail(
+                    function (err) {
+                        $('#loading-badges').html('Loading failed.  <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
+                    }
+            );
+        }
+    </script>
+</div>

www/screens/rules.html

@@ -1,18 +1,20 @@
-<div class="h4">Rules</div>
-<p>Please read these rules.  Because TerranQuest is a game involving other
-    people and the environment, it's important to show good etiquette.</p>
-<ol class="list-group">
-    <li class="list-group-item">Do not endanger yourself or others</li>
-    <li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
-    <li class="list-group-item">Observe all local laws and rules</li>
-    <li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
-    <li class="list-group-item">Be nice to other people and try not to look too creepy</li>
-    <li class="list-group-item">Respect and minimize your impact on the environment</li>
-    <li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
-    <li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
-    <li class="list-group-item">Socialize with any players of other games, such as Geocaching and Ingress, you might meet</li>
-    <li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
-    <!--
-    <li class="list-group-item"></li>
-    -->
-</ol>
+<div class="scrollable-box">
+    <div class="h4">Rules</div>
+    <p>Please read these rules.  Because TerranQuest is a game involving other
+        people and the environment, it's important to show good etiquette.</p>
+    <ol class="list-group">
+        <li class="list-group-item">Do not endanger yourself or others</li>
+        <li class="list-group-item">Be considerate and polite in the in-game chat, and don't swear</li>
+        <li class="list-group-item">Observe all local laws and rules</li>
+        <li class="list-group-item">Respect property rights and obtain permission for playing on private land</li>
+        <li class="list-group-item">Be nice to other people and try not to look too creepy</li>
+        <li class="list-group-item">Respect and minimize your impact on the environment</li>
+        <li class="list-group-item">Don't tamper with or deface any objects, landmarks, barcodes, or other real-world items</li>
+        <li class="list-group-item">Pick up any trash you find and dispose of it properly if you can</li>
+        <li class="list-group-item">Socialize with any players of other games, such as Geocaching and Ingress, you might meet</li>
+        <li class="list-group-item">Follow the Netsyms Technologies Terms of Service at netsyms.com/legal</li>
+        <!--
+        <li class="list-group-item"></li>
+        -->
+    </ol>
+</div>

www/screens/settings.html

@@ -0,0 +1,26 @@
+<div class="scrollable-box">
+    <div class='list-group'>
+        <div class='list-group-item' onclick='logout()'>
+            Logout from app
+        </div>
+        <div class='list-group-item'>
+            <p>
+                <span style='font-weight: bold;'>Third-Party Licenses</span>
+                <br />
+                Map tiles by Stamen Design (stamen.com), under CC BY 3.0 (creativecommons.org/licenses/by/3.0).
+                <br />
+                Map tile data by OpenStreetMap (openstreetmap.org), under CC BY-SA (creativecommons.org/licenses/by-sa/3.0).
+                <br />
+                Places from OpenStreetMap and contributers, licensed under the ODbL (opendatacommons.org/licenses/odbl).  Email apis@netsyms.com for free access to our API.
+                <br />
+                Map display is powered by Leaflet (leafletjs.com), copyright (c) 2010-2016, Vladimir Agafonkin and copyright (c) 2010-2011, CloudMade.  BSD 2-clause license.
+                <br />
+                Terrain information for the United States from the MRLC National Land Cover Database 2011 (mrlc.gov).
+                <br />
+                Weather data Powered by Forecast (forecast.io).
+                <br />
+                Geocache data from the OpenCaching.US OKAPI.  Data licensed under the CC BY-NC-SA 2.5 (creativecommons.org/licenses/by-nc-sa/2.5).
+            </p>
+        </div>
+    </div>
+</div>