diff --git a/www/css/home.css b/www/css/home.css
index 5cf6a59..a97c227 100644
--- a/www/css/home.css
+++ b/www/css/home.css
@@ -4,6 +4,11 @@ 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/.
*/
+:root {
+ --playerinfo-height: 70px;
+ --playerinfo-fullheight: calc(var(--playerinfo-height) + 10px);
+}
+
.dark-popup {
background-color: rgba(23, 23, 23, 0.75);
}
@@ -34,7 +39,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
padding-right: 20px;
padding-bottom: 20px;
width: 20em;
- height: 70px;
+ height: var(--playerinfo-height);
max-width: 90vw;
background-image: url(../img/player-info-bg.svg);
background-size: 100% 65px;
@@ -78,7 +83,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
}
.healthbar span {
- background-color: #3ffc5e;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
@@ -103,4 +107,49 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
#messagebar .toggle-messages {
width: 64px;
+}
+
+#place-info {
+ width: 100%;
+}
+
+#place-info .progressbar {
+ height: 8px;
+ border-radius: 8px;
+ border: 2px solid rgba(255,255,255,0.5);
+ background: rgba(23, 23, 23, 0.25);
+}
+
+#place-popup {
+ margin-top: var(--playerinfo-fullheight);
+ height: calc(100% - var(--f7-statusbar-height) - var(--playerinfo-fullheight));
+}
+
+#place-popup .action-button {
+ border-radius: var(--f7-button-border-radius);
+ text-align: center;
+ cursor: pointer;
+}
+
+#place-info #place-image {
+ width: 100%;
+ max-height: 15em;
+ margin-bottom: 5px;
+ background-image: url(../img/place/background.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position-y: bottom;
+ background-position-x: center;
+ object-fit: contain;
+}
+
+#place-popup .action-button .game-icon {
+ vertical-align: middle;
+}
+
+@media (min-width: 630px) and (min-height: 630px) {
+ #place-popup {
+ margin-top: calc(-1 * var(--f7-popup-tablet-height)/ 2);
+ height: var(--f7-popup-tablet-height);
+ }
}
\ No newline at end of file
diff --git a/www/css/map.css b/www/css/map.css
index 96b372b..46eac48 100644
--- a/www/css/map.css
+++ b/www/css/map.css
@@ -18,7 +18,7 @@ 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-image: url(../img/place/white.png);
background-size: contain;
}
diff --git a/www/img/place/.directory b/www/img/place/.directory
new file mode 100644
index 0000000..844bcfe
--- /dev/null
+++ b/www/img/place/.directory
@@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2019,5,22,13,57,56
+Version=4
diff --git a/www/img/place/0.png b/www/img/place/0.png
index 6485d49..858d8c3 100644
Binary files a/www/img/place/0.png and b/www/img/place/0.png differ
diff --git a/www/img/place/1.png b/www/img/place/1.png
index 0f41920..33fbedb 100644
Binary files a/www/img/place/1.png and b/www/img/place/1.png differ
diff --git a/www/img/place/2.png b/www/img/place/2.png
deleted file mode 100644
index f940cd3..0000000
Binary files a/www/img/place/2.png and /dev/null differ
diff --git a/www/img/place/background.png b/www/img/place/background.png
new file mode 100644
index 0000000..afa10ab
Binary files /dev/null and b/www/img/place/background.png differ
diff --git a/www/img/place/white.png b/www/img/place/white.png
new file mode 100644
index 0000000..364bb03
Binary files /dev/null and b/www/img/place/white.png differ
diff --git a/www/img/player-info-bg-src.svg b/www/img/player-info-bg-src.svg
index 03012be..f462bd3 100644
--- a/www/img/player-info-bg-src.svg
+++ b/www/img/player-info-bg-src.svg
@@ -43,7 +43,7 @@
id="namedview1417"
showgrid="false"
inkscape:zoom="2.1069062"
- inkscape:cx="269.68202"
+ inkscape:cx="187.5711"
inkscape:cy="93.921442"
inkscape:window-x="0"
inkscape:window-y="0"
@@ -99,7 +99,7 @@
inkscape:connector-curvature="0"
style="opacity:0.75;stroke-width:1" />
diff --git a/www/img/player-info-bg.svg b/www/img/player-info-bg.svg
index 72dfee1..d5ce402 100644
--- a/www/img/player-info-bg.svg
+++ b/www/img/player-info-bg.svg
@@ -1,2 +1,15 @@
-
+
diff --git a/www/js/home.js b/www/js/home.js
index ed9972d..0c54ed8 100644
--- a/www/js/home.js
+++ b/www/js/home.js
@@ -33,10 +33,13 @@ function loadHomePage(callback) {
}
function setupProfile() {
+ $(".username-healthbar").addClass("color-theme-" + SETTINGS["teams"][playerProfile.teamid]["color"]);
+ $("#place-popup .action-button").addClass("color-theme-" + SETTINGS["teams"][playerProfile.teamid]["color"]);
+ $("#player-level-badge").addClass("text-color-" + SETTINGS["teams"][playerProfile.teamid]["textcolor"]);
+
+
$(".player-nickname").text(playerProfile.name);
$("#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);
}
@@ -84,4 +87,73 @@ function scanCode() {
disableSuccessBeep: true
}
);
-}
\ No newline at end of file
+}
+
+function openPlace(id, name) {
+ $("#place-info").addClass("display-none");
+ $("#place-error-msg").addClass("display-none");
+ $("#place-popup .preloader").removeClass("display-none");
+ $("#place-popup").data("placeid", id);
+ $("#place-title").text(name);
+ app.popup.open("#place-popup");
+
+ updatePlaceStats(id, function (success) {
+ $("#place-popup .preloader").addClass("display-none");
+ $("#place-info").removeClass("display-none");
+ }, function (error) {
+ $("#place-error-msg").text(error);
+ $("#place-popup .preloader").addClass("display-none");
+ $("#place-error-msg").removeClass("display-none");
+ });
+
+ var refreshPlaceStats = function () {
+ if (app.popup.get("#place-popup").opened) {
+ updatePlaceStats(id);
+ setTimeout(refreshPlaceStats, 2000);
+ }
+ };
+
+ setTimeout(refreshPlaceStats, 2000);
+}
+
+function updatePlaceStats(id, successCallback, errorCallback) {
+ callAPI("getplace", {
+ username: localStorage.getItem("username"),
+ password: localStorage.getItem("password"),
+ id: id
+ }, function (resp) {
+ var place = resp.place;
+ if (place.teamid != null && place.teamid > 0) {
+ $("#place-info").removeClass();
+ $("#place-info").addClass("color-theme-" + SETTINGS["teams"][place.teamid]["color"]);
+ $("#place-image").attr("src", "img/place/" + SETTINGS["teams"][place.teamid]["color"] + ".png");
+ if (playerProfile.teamid == place.teamid) {
+ $("#magic-action-label").text("Defend");
+ } else {
+ $("#magic-action-label").text("Attack");
+ }
+ } else {
+ $("#place-info").addClass("color-white");
+ $("#place-image").attr("src", "img/place/white.png");
+ $("#magic-action-label").text("Control");
+ }
+
+ if (place.currentlife != null && place.maxlife != null) {
+ app.progressbar.set("#place-health-bar", (place.currentlife / place.maxlife) * 100, 0);
+ } else {
+ app.progressbar.set("#place-health-bar", 100, 0);
+ }
+
+ if (typeof successCallback == "function") {
+ successCallback();
+ }
+ }, function (error) {
+ if (typeof errorCallback == "function") {
+ errorCallback(error);
+ }
+ });
+}
+
+$("#magic-action-button").click(function () {
+
+});
\ No newline at end of file
diff --git a/www/js/map.js b/www/js/map.js
index 2178c5e..27e3050 100644
--- a/www/js/map.js
+++ b/www/js/map.js
@@ -125,7 +125,7 @@ function updatePlaceLayer(latitude, longitude) {
}
el.addEventListener('click', function () {
- window.alert(place.properties.name + " \n" + place.properties.id);
+ openPlace(place.properties.id, place.properties.name);
});
new mapboxgl.Marker(el)
diff --git a/www/package.json b/www/package.json
index 585a142..98e2b55 100644
--- a/www/package.json
+++ b/www/package.json
@@ -6,6 +6,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^5.8.1",
"framework7": "^4.3.0",
+ "jdenticon": "^2.1.1",
"jquery": "^3.4.0",
"mapbox-gl": "^0.54.0",
"three": "^0.104.0"
diff --git a/www/pages/home.html b/www/pages/home.html
index a23df79..59dfdbe 100644
--- a/www/pages/home.html
+++ b/www/pages/home.html
@@ -56,7 +56,7 @@
- 
+
+