Add basic profile page (name, icon, team, level) (close #2)

www/css/app.css

@@ -26,4 +26,29 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 #settings-bin .card .item-icon {
     font-size: 6em;
     height: 1.23em;
-}
+}
+
+.usericon {
+    border: 2px solid white;
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    overflow: hidden;
+}
+
+.usericon svg {
+    width: 100%;
+    height: 100%;
+    /* Make it a bit bigger so we can't see the sides */
+    transform: scale(1.1);
+}
+
+.usericon-2x {
+    height: 100px;
+    width: 100px;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}

www/css/home.css

@@ -47,22 +47,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     background-position: top 5px left 0px;
 }
 
-.usericon {
-    border: 2px solid white;
-    border-radius: 50%;
-    height: 50px;
-    width: 50px;
-    display: inline-block;
-    overflow: hidden;
-}
-
-.usericon svg {
-    width: 100%;
-    height: 100%;
-    /* Make it a bit bigger so we can't see the sides */
-    transform: scale(1.1);
-}
-
 #playerinfo .usericon {
     flex-shrink: 0;
 }

www/js/profile.js

@@ -6,5 +6,17 @@
 
 
 function loadProfile() {
-    
+    callAPI("getprofile", {
+        username: localStorage.getItem("username"),
+        password: localStorage.getItem("password"),
+        id: $(".page[data-name=profile]").data("playerid")
+    }, function (data) {
+        console.log(data);
+        $(".playerinfoflex").addClass("color-theme-" + SETTINGS.teams[data.profile.teamid].color);
+        $("#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);
+    }, function (err) {
+        app.dialog.alert(msg, "Error");
+    });
 }

www/pages/profile.html

@@ -6,12 +6,24 @@
 
     <div class="navbar">
         <div class="navbar-inner">
-            <div class="title"><i class="fas fa-user"></i> {{$route.params.playername}}</div>
+            <div class="title"><i class="fas fa-user"></i> Profile</div>
         </div>
     </div>
 
     <div class="page-content">
         <div class="block">
+            <div class="display-flex flex-wrap playerinfoflex">
+                <div id="playericon" class="margin-right">
+                    <div class="usericon usericon-2x"></div>
+                </div>
+                <div>
+                    <h2>{{$route.params.playername}}</h2>
+                    <div class="display-flex flex-wrap">
+                        <div id="playerteaminfo" class="button button-fill button-round button-small margin-right margin-bottom"></div>
+                        <div id="playerlevelinfo" class="button button-fill button-round button-small"></div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 

www/routes.js

@@ -15,7 +15,7 @@ var routes = [
             pageAfterIn: function () {
                 function tryToLoadHomePage() {
                     if (typeof loadHomePage != "function") {
-                        setTimeout(tryToLoadHomePage, 500);
+                        setTimeout(tryToLoadHomePage, 100);
                     } else {
                         loadHomePage(function () {});
                     }
@@ -32,7 +32,7 @@ var routes = [
             pageAfterIn: function () {
                 function tryToLoadInventory() {
                     if (typeof loadInventory != "function") {
-                        setTimeout(loadInventory, 500);
+                        setTimeout(loadInventory, 100);
                     } else {
                         loadInventory(function () {});
                     }
@@ -49,7 +49,7 @@ var routes = [
             pageAfterIn: function () {
                 function tryToLoadProfile() {
                     if (typeof loadProfile != "function") {
-                        setTimeout(loadProfile, 500);
+                        setTimeout(loadProfile, 100);
                     } else {
                         loadProfile(function () {});
                     }