Add place screen (#1), still needs a lot of work

2019-05-22 14:11:30 -06:00 · 2019-05-22 14:11:30 -06:00 · 2c792bfeb1
commit 2c792bfeb1
parent dfec733060
15 changed files with 194 additions and 11 deletions
--- 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);
+    }
 }
--- 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;
 }

--- a/www/img/place/.directory
+++ b/www/img/place/.directory
@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2019,5,22,13,57,56
+Version=4
--- a/www/img/place/0.png
+++ b/www/img/place/0.png
--- a/www/img/place/1.png
+++ b/www/img/place/1.png
--- a/www/img/place/2.png
+++ b/www/img/place/2.png
--- a/www/img/place/background.png
+++ b/www/img/place/background.png
--- a/www/img/place/white.png
+++ b/www/img/place/white.png
--- 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" />
    <path
-       style="opacity:0.5;fill:#171717;stroke-width:3.77952743"
+       style="opacity:0.75;fill:#171717;stroke-width:3.77952743"
       d="M 0 0 L 0 113.38672 L 113.38672 113.38672 L 415.74805 75.589844 L 491.33789 75.589844 L 529.13477 60.472656 L 491.33789 45.353516 L 415.74805 45.353516 L 302.36133 0 L 113.38672 0 L 0 0 z "
       transform="matrix(0.26458334,0,0,0.26458334,-2.6638281,0.20097625)"
       id="rect2077-3" />
--- a/www/img/player-info-bg.svg
+++ b/www/img/player-info-bg.svg
@ -1,2 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="140mm" height="30mm" preserveAspectRatio="none" version="1.1" viewBox="0 0 140 30" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.6638 -.20098)" fill="#171717"><rect x="-2.0359" y="-34.71" width="30" height="30" opacity=".75"/><path d="m27.964-14.71h80l-80 10z" opacity=".75"/><g><rect x="27.964" y="-34.71" width="50" height="12" opacity=".75"/><path d="m77.964-22.71h30l-30-12z" opacity=".75"/><rect x="27.964" y="-22.71" width="100" height="8" opacity=".75"/></g><path d="m127.96-18.71h10l-10-4z" opacity=".75"/><path d="m127.96-18.71h10l-10 4z" opacity=".75"/><path transform="matrix(.26458 0 0 .26458 -2.6638 .20098)" d="m0 0v113.39h113.39l302.36-37.797h75.59l37.797-15.117-37.797-15.119h-75.59l-113.39-45.354h-188.97-113.39z" fill="#171717" opacity=".5" stroke-width="3.7795"/></g></svg>
+<svg width="140mm" height="30mm" preserveAspectRatio="none" version="1.1" viewBox="0 0 140 30" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(2.6638 -.20098)" fill="#171717">
+  <rect x="-2.0359" y="-34.71" width="30" height="30" opacity=".75"/>
+  <path d="m27.964-14.71h80l-80 10z" opacity=".75"/>
+  <g>
+   <rect x="27.964" y="-34.71" width="50" height="12" opacity=".75"/>
+   <path d="m77.964-22.71h30l-30-12z" opacity=".75"/>
+   <rect x="27.964" y="-22.71" width="100" height="8" opacity=".75"/>
+  </g>
+  <path d="m127.96-18.71h10l-10-4z" opacity=".75"/>
+  <path d="m127.96-18.71h10l-10 4z" opacity=".75"/>
+  <path transform="matrix(.26458 0 0 .26458 -2.6638 .20098)" d="m0 0v113.39h113.39l302.36-37.797h75.59l37.797-15.117-37.797-15.119h-75.59l-113.39-45.354h-188.97-113.39z" fill="#171717" opacity=".75" stroke-width="3.7795"/>
+ </g>
+</svg>
--- 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("<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);
 }

@ -84,4 +87,73 @@ function scanCode() {
                disableSuccessBeep: true
            }
    );
-}
+}
+
+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 () {
+
+});
--- 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)
--- 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"
--- a/www/pages/home.html
+++ b/www/pages/home.html
@ -56,7 +56,7 @@
        </a>
    </div>

-    <div class="popup display-flex justify-content-center align-items-center dark-popup" id="menu-popup">
+    <div class="popup display-flex justify-content-center align-items-center padding-horizontal dark-popup" id="menu-popup">
        <div class="row" id="mainmenu-items">
            <div class="col-50 mainmenu-item popup-close" onclick="router.navigate('/inventory');">
                <i class="game-icon game-icon-school-bag fa-4x"></i><br />
@ -86,6 +86,38 @@
        </div>
    </div>

+    <div class="popup dark-popup padding-horizontal" id="place-popup">
+        <h1 id="place-title"></h1>
+
+        <div id="place-info" class="display-none">
+            <div class="row align-content-center">
+                <div class="col-50">
+                    <img src="img/place/white.png" id="place-image" />
+                    <span class="progressbar" id="place-health-bar" data-progress="0"></span>
+                </div>
+                <div class="col-50">
+                    <h3>Actions</h3>
+                    <div class="bg-color-primary action-button margin-bottom" id="magic-action-button">
+                        <i class="game-icon game-icon-magic-swirl fa-2x"></i>
+                        <span id="magic-action-label">Magic</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="text-center">
+            <div class="preloader color-white" style="width: 44px; height: 44px"></div>
+        </div>
+
+        <div id="place-error-msg" class="display-none"></div>
+
+        <div class="fab fab-center-bottom">
+            <a href="#" class="popup-close" data-popup="#place-popup">
+                <i class="fas fa-2x fa-times"></i>
+            </a>
+        </div>
+    </div>
+
    <div class="popup display-flex justify-content-center align-items-center dark-popup" id="founditem-popup">
        <div class="row">
            <div class="col-100 tablet-50 block text-align-center" id="founditem-block">
--- a/www/yarn.lock
+++ b/www/yarn.lock
@ -76,6 +76,11 @@ buffer-from@^1.0.0:
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==

+canvas-renderer@~2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/canvas-renderer/-/canvas-renderer-2.1.1.tgz#d91fe9511ab48056ff9fa8a04514bede76535f55"
+  integrity sha512-/V0XetN7s1Mk3NO7x2wxPZYv0pLMQtGAhecuOuKR88beiYCUle1AbCcFZNLu+4NVzi9RVHS0rXtIgzPEaKidLw==
+
 cardinal@~0.4.2:
  version "0.4.4"
  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-0.4.4.tgz#ca5bb68a5b511b90fe93b9acea49bdee5c32bfe2"
@ -166,6 +171,13 @@ isarray@~1.0.0:
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=

+jdenticon@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/jdenticon/-/jdenticon-2.1.1.tgz#f9288e87b3466e2c5f05948c68db58e1c9e1b800"
+  integrity sha512-bFD210JMaK2RMHGSkdDXqdQzasMrVIGDfxUMXD/Uwq2t7g9Njb4T6kms5TrocsLU0CDmQCoB0laGJ6JETiprsg==
+  dependencies:
+    canvas-renderer "~2.1.1"
+
 jquery@^3.4.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.0.tgz#8de513fa0fa4b2c7d2e48a530e26f0596936efdf"