diff --git a/www/css/home.css b/www/css/home.css
index 5743692..e20fefb 100644
--- a/www/css/home.css
+++ b/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;
}
\ No newline at end of file
diff --git a/www/css/map.css b/www/css/map.css
index bf9686d..c8554bc 100644
--- a/www/css/map.css
+++ b/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%);
}
\ No newline at end of file
diff --git a/www/img/place/0.png b/www/img/place/0.png
new file mode 100644
index 0000000..6485d49
Binary files /dev/null and b/www/img/place/0.png differ
diff --git a/www/img/place/1.png b/www/img/place/1.png
new file mode 100644
index 0000000..0f41920
Binary files /dev/null and b/www/img/place/1.png differ
diff --git a/www/img/place/2.png b/www/img/place/2.png
new file mode 100644
index 0000000..f940cd3
Binary files /dev/null and b/www/img/place/2.png differ
diff --git a/www/js/home.js b/www/js/home.js
index c093495..0092a54 100644
--- a/www/js/home.js
+++ b/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(" 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);
diff --git a/www/js/map.js b/www/js/map.js
index bda8c1b..e62abe0 100644
--- a/www/js/map.js
+++ b/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;
diff --git a/www/pages/home.html b/www/pages/home.html
index fa92814..06b17ff 100644
--- a/www/pages/home.html
+++ b/www/pages/home.html
@@ -15,7 +15,7 @@
-
+
diff --git a/www/settings.template.js b/www/settings.template.js
index 286f79c..c6c4537 100644
--- a/www/settings.template.js
+++ b/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"}
}
};
\ No newline at end of file