Add badges to profile page (#2)

www/css/app.css

@@ -52,3 +52,16 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 .flex-wrap {
     flex-wrap: wrap;
 }
+
+.badges .badge {
+    width: 50px;
+    height: 50px;
+    border: 2px solid white;
+    border-radius: 50%;
+    overflow: hidden;
+    margin: 1em;
+}
+
+.badges .badge i {
+    font-size: 35px;
+}

www/js/profile.js

@@ -16,6 +16,27 @@ function loadProfile() {
         $("#playericon .usericon").html(getAvatarIcon(data.profile.id, data.profile.teamid));
         $("#playerteaminfo").html("<i class='" + SETTINGS.teams[data.profile.teamid].icon + "'></i> " + SETTINGS.teams[data.profile.teamid].name);
         $("#playerlevelinfo").html("Level " + data.profile.level * 1);
+
+        data.profile.badges.forEach(function (badge) {
+            $("#badgebin").append('<div class="badge" data-name="' + badge.name + '" data-desc="' + badge.desc + '" style="color: ' + badge.color + '; background: ' + badge.background + '"><i class="' + badge.icon + '"></i></div>');
+        });
+
+        $("#badgebin").on("click", ".badge", function () {
+            var name = $(this).data("name");
+            var desc = $(this).data("desc");
+            app.popover.create({
+                targetEl: this,
+                backdrop: false,
+                content: '<div class="popover">'+
+              '<div class="popover-inner">'+
+                '<div class="block">'+
+                  '<b>' + name + '</b>'+
+                  '<p>' + desc + '</p>'+
+                '</div>'+
+              '</div>'+
+            '</div>'
+            }).open();
+        });
     }, function (err) {
         app.dialog.alert(msg, "Error");
     });

www/pages/profile.html

@@ -12,7 +12,8 @@
 
     <div class="page-content">
         <div class="block">
-            <div class="display-flex flex-wrap playerinfoflex">
+            <div class="row justify-content-start">
+            <div class="display-flex flex-wrap playerinfoflex col-100 tablet-50 desktop-33">
                 <div id="playericon" class="margin-right">
                     <div class="usericon usericon-2x"></div>
                 </div>
@@ -24,6 +25,10 @@
                     </div>
                 </div>
             </div>
+            <div class="display-flex flex-wrap margin-top badges col-100 tablet-50 desktop-33" id="badgebin">
+
+            </div>
+            </div>
         </div>
     </div>
 

www/routes.js

@@ -32,7 +32,7 @@ var routes = [
             pageAfterIn: function () {
                 function tryToLoadInventory() {
                     if (typeof loadInventory != "function") {
-                        setTimeout(loadInventory, 100);
+                        setTimeout(tryToLoadInventory, 100);
                     } else {
                         loadInventory(function () {});
                     }
@@ -48,10 +48,10 @@ var routes = [
         on: {
             pageAfterIn: function () {
                 function tryToLoadProfile() {
-                    if (typeof loadProfile != "function") {
+                    if (typeof loadProfile === "function") {
-                        setTimeout(loadProfile, 100);
-                    } else {
                         loadProfile(function () {});
+                    } else {
+                        setTimeout(tryToLoadProfile, 100);
                     }
                 }
                 tryToLoadProfile();
@@ -91,7 +91,7 @@ var routes = [
             pageAfterIn: function () {
                 function tryToLoadSettings() {
                     if (typeof loadSettings != "function") {
-                        setTimeout(loadSettings, 500);
+                        setTimeout(tryToLoadSettings, 500);
                     } else {
                         loadSettings();
                     }