Add places to map, improve player level badge

www/css/home.css

@@ -69,4 +69,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     background-color: #3ffc5e;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
+}
+
+#player-level-badge {
+    margin-bottom: 4px;
+    margin-left: auto;
 }

www/css/map.css

@@ -10,4 +10,82 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     left: 0;
     bottom: 0;
     right: 0;
+}
+
+/*
+TODO: Change image based on place health/strength {0,1,2}.png
+*/
+#mapbox .place-marker {
+    width: 10em;
+    height: 10em;
+    background-image: url(../img/place/2.png);
+    background-size: contain;
+}
+
+
+/*
+Colorize images for map display
+*/
+
+/*
+TODO: Adjust green and lightblue for better map visibility
+*/
+.color-filter-red {
+    filter: brightness(0) saturate(100%) invert(43%) sepia(63%) saturate(6607%) hue-rotate(344deg) brightness(111%) contrast(101%);
+}
+
+.color-filter-green {
+    filter: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(5468%) hue-rotate(70deg) brightness(96%) contrast(76%);
+}
+
+.color-filter-blue {
+    filter: brightness(0) saturate(100%) invert(51%) sepia(33%) saturate(1529%) hue-rotate(172deg) brightness(94%) contrast(104%);
+}
+
+.color-filter-pink {
+    filter: brightness(0) saturate(100%) invert(54%) sepia(96%) saturate(5960%) hue-rotate(330deg) brightness(99%) contrast(106%);
+}
+
+.color-filter-yellow {
+    filter: brightness(0) saturate(100%) invert(76%) sepia(89%) saturate(2826%) hue-rotate(8deg) brightness(112%) contrast(103%);
+}
+
+.color-filter-orange {
+    filter: brightness(0) saturate(100%) invert(53%) sepia(77%) saturate(1004%) hue-rotate(359deg) brightness(103%) contrast(108%);
+}
+
+.color-filter-purple {
+    filter: brightness(0) saturate(100%) invert(18%) sepia(61%) saturate(4153%) hue-rotate(281deg) brightness(95%) contrast(89%);
+}
+
+.color-filter-deeppurple {
+    filter: brightness(0) saturate(100%) invert(26%) sepia(27%) saturate(4860%) hue-rotate(246deg) brightness(89%) contrast(93%);
+}
+
+.color-filter-lightblue {
+    filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(4807%) hue-rotate(168deg) brightness(99%) contrast(98%);
+}
+
+.color-filter-teal {
+    filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(1351%) hue-rotate(149deg) brightness(94%) contrast(101%);
+}
+
+.color-filter-lime {
+    filter: brightness(0) saturate(100%) invert(80%) sepia(12%) saturate(1890%) hue-rotate(22deg) brightness(95%) contrast(114%);
+}
+
+.color-filter-deeporange {
+    filter: brightness(0) saturate(100%) invert(67%) sepia(41%) saturate(6786%) hue-rotate(342deg) brightness(98%) contrast(106%);
+}
+
+.color-filter-gray {
+    filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(162%) hue-rotate(202deg) brightness(87%) contrast(86%);
+}
+
+.color-filter-white {
+    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
+}
+
+.color-filter-black {
+    filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7432%) hue-rotate(210deg) brightness(88%) contrast(115%);
 }

www/js/home.js

@@ -19,7 +19,7 @@ function loadHomePage(callback) {
 
 function setupProfile() {
     $(".player-nickname").text(playerProfile.name);
-    $("#player-level-badge").text("Lv. " + playerProfile.level * 1);
+    $("#player-level-badge").html("<i class=\"" + SETTINGS["teams"][playerProfile.teamid]["icon"] + "\"></i> &nbsp; Lv. " + playerProfile.level * 1);
     $("#player-level-badge").addClass("bg-color-" + SETTINGS["teams"][playerProfile.teamid]["color"]);
     $("#player-level-badge").addClass("text-color-" + SETTINGS["teams"][playerProfile.teamid]["textcolor"]);
     app.progressbar.set($("#player-healthbar"), (playerProfile.energy / playerProfile.maxenergy) * 100, 500);

www/js/map.js

@@ -13,9 +13,10 @@ const map = new mapboxgl.Map({
     container: 'mapbox',
     style: SETTINGS['map_style_json'],
     attributionControl: false,
+    touchZoomRotate: 'center',
     pitch: 0,
     zoom: 0,
-    maxZoom: 18
+    maxZoom: 20
 });
 
 map.touchZoomRotate.enable({around: 'center'});
@@ -30,6 +31,7 @@ gotfirstfix = false;
 watchLocation(function (position) {
     if (gotfirstfix) {
         setMapLocation(position.coords.latitude, position.coords.longitude);
+        updatePlaceLayer(position.coords.latitude, position.coords.longitude);
     } else {
         animateMapIn(position.coords.latitude, position.coords.longitude, 16, position.coords.heading);
         gotfirstfix = true;
@@ -61,6 +63,39 @@ function setMapLocation(latitude, longitude) {
     });
 }
 
+function updatePlaceLayer(latitude, longitude) {
+    callAPI("nearbyplaces", {
+        username: localStorage.getItem("username"),
+        password: localStorage.getItem("password"),
+        latitude: latitude,
+        longitude: longitude,
+        radius: 5
+    }, function (data) {
+        var oldmarkers = document.getElementsByClassName("place-marker");
+        if (oldmarkers.length > 0) {
+            markerparent = oldmarkers[0].parentNode;
+            while (oldmarkers.length > 0) {
+                markerparent.removeChild(oldmarkers[0]);
+            }
+        }
+        data.features.forEach(function (place) {
+            var el = document.createElement("div");
+            el.className = "place-marker";
+            if (place.properties.teamid != null && place.properties.teamid > 0) {
+                el.className += " color-filter-" + SETTINGS["teams"][place.properties.teamid]["color"];
+            }
+
+            el.addEventListener('click', function () {
+                window.alert(place.properties.name + " \n" + place.properties.id);
+            });
+
+            new mapboxgl.Marker(el)
+                    .setLngLat(place.geometry.coordinates)
+                    .addTo(map);
+        });
+    });
+}
+
 function animateMapIn(latitude, longitude, zoom, heading) {
     if (typeof zoom == 'undefined') {
         zoom = 15;

www/pages/home.html

@@ -15,7 +15,7 @@
                 <div class="username-healthbar">
                     <span class="username">
                         <span class="player-nickname"></span>
-                        <span class="badge" id="player-level-badge"></span>
+                        <span class="badge margin-left" id="player-level-badge"></span>
                     </span>
                     <span data-progress="0" class="progressbar healthbar" id="player-healthbar"></span>
                 </div>

www/settings.template.js

@@ -16,9 +16,9 @@ var SETTINGS = {
     teams: {
         1: {id: 1, name: "Water", icon: "fas fa-tint", color: "blue", textcolor: "black"},
         2: {id: 2, name: "Fire", icon: "fas fa-fire", color: "red", textcolor: "black"},
-        3: {id: 3, name: "Earth", icon: "fas fa-mountain", color: "deeporange", textcolor: "black"},
+        3: {id: 3, name: "Earth", icon: "fas fa-mountain", color: "green", textcolor: "black"},
         4: {id: 4, name: "Wind", icon: "fas fa-wind", color: "lightblue", textcolor: "black"},
-        5: {id: 5, name: "Light", icon: "fas fa-sun", color: "white", textcolor: "black"},
+        5: {id: 5, name: "Light", icon: "fas fa-sun", color: "yellow", textcolor: "black"},
         6: {id: 6, name: "Dark", icon: "fas fa-moon", color: "black", textcolor: "white"}
     }
 };