Better user icon creation, add empty profile page (#2)

www/js/chat.js

@@ -85,7 +85,6 @@ function refreshChat(forcescroll) {
 
     var messagebox = messages;
     callAPI("getchat", vars, function (success) {
-        var iconcache = [];
         for (var i = 0; i < success.messages.length; i++) {
             var msg = success.messages[i];
             if ($(".message[data-id=" + msg.id + "]").length > 0) {
@@ -95,11 +94,7 @@ function refreshChat(forcescroll) {
             // Make the avatar, or get it from the cache if it's already been rendered this update
             var avatar = null;
             if (msg.teamid != null) {
-                if (iconcache[msg.accountid] == null) {
-                    console.log("Generating avatar icon for account id", msg.accountid);
-                    iconcache[msg.accountid] = svgToData(renderSvgIcon(msg.accountid, SETTINGS["teams"][msg.teamid]["hue"]));
-                }
-                avatar = iconcache[msg.accountid];
+                avatar = getAvatarIcon(msg.accountid, msg.teamid, true);
             }
 
             if (msg.me) {
@@ -117,7 +112,9 @@ function refreshChat(forcescroll) {
                     name: msg.nickname,
                     avatar: avatar,
                     attrs: {
-                        'data-id': msg.id
+                        'data-id': msg.id,
+                        'data-playerid': msg.accountid,
+                        'data-playername': msg.nickname
                     }
                 };
                 messagebox.addMessage(msg);
@@ -190,4 +187,11 @@ $("#chatbox").on("keyup", function (evt) {
     if (evt.keyCode == 13) {
         sendChat();
     }
+});
+
+$("#messages").on("click", ".message-avatar", function () {
+    var message = $(this).closest(".message");
+    if (message.data("playerid") != undefined && message.data("playername") != undefined) {
+        router.navigate("/profile/" + message.data("playerid") + "/" + message.data("playername"));
+    }
 });

www/js/home.js

@@ -39,7 +39,10 @@ function setupProfile() {
 
     $(".player-nickname").text(playerProfile.name);
     $("#player-level-badge").html("<i class=\"" + SETTINGS["teams"][playerProfile.teamid]["icon"] + "\"></i> &nbsp; Lv. " + playerProfile.level * 1);
-    $("#playerinfo .usericon").html(renderSvgIcon(playerProfile.id, SETTINGS["teams"][playerProfile.teamid]["hue"]));
+    $("#playerinfo .usericon").html(getAvatarIcon(playerProfile.id, playerProfile.teamid));
+    $("#playerinfo").on("click", ".usericon,.player-nickname", function () {
+        router.navigate("/profile/" + playerProfile.id + "/" + playerProfile.name);
+    });
     app.progressbar.set($("#player-healthbar"), (playerProfile.energy / playerProfile.maxenergy) * 100, 500);
 }
 

www/js/profile.js

@@ -0,0 +1,10 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/.
+ */
+
+
+function loadProfile() {
+    
+}

www/js/usericons.js

@@ -4,6 +4,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+var avatar_cache = [];
+
+
+/**
+ * Get svg for a player's avatar
+ * Caches generated icons to eliminate performance penalty for repeated calls
+ * @param {int} playerid
+ * @param {int} teamid
+ * @param {boolean} asdata true to return base64 data URI, false to return svg
+ * markup
+ * @returns {string}
+ */
+function getAvatarIcon(playerid, teamid, asdata) {
+    if (avatar_cache[playerid] == null) {
+        console.log("Generating avatar icon for account id", playerid);
+        var svg = renderSvgIcon(playerid, SETTINGS["teams"][teamid]["hue"]);
+        var data = svgToData(svg);
+        avatar_cache[playerid] = {"svg": svg, "data": data};
+    }
+    if ((typeof asdata == "boolean") && (asdata == true)) {
+        return avatar_cache[playerid].data;
+    }
+    return avatar_cache[playerid].svg;
+}
+
 /**
  * Generate an abstract icon and return SVG code for it
  * @param {String} data Different data, different icon

www/pages/profile.html

@@ -0,0 +1,26 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+
+<div class="page" data-name="profile" data-playerid="{{$route.params.playerid}}">
+
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="title"><i class="fas fa-user"></i> {{$route.params.playername}}</div>
+        </div>
+    </div>
+
+    <div class="page-content">
+        <div class="block">
+        </div>
+    </div>
+
+    <div class="fab fab-center-bottom">
+        <a href="#" class="back">
+            <i class="fas fa-2x fa-times"></i>
+        </a>
+    </div>
+
+    <script src="js/profile.js"></script>
+
+</div>

www/routes.js

@@ -28,7 +28,6 @@ var routes = [
         path: '/inventory',
         templateUrl: './pages/inventory.html',
         name: 'inventory',
-        keepAlive: true,
         on: {
             pageAfterIn: function () {
                 function tryToLoadInventory() {
@@ -42,6 +41,23 @@ var routes = [
             }
         }
     },
+    {
+        path: '/profile/:playerid/:playername',
+        templateUrl: './pages/profile.html',
+        name: 'profile',
+        on: {
+            pageAfterIn: function () {
+                function tryToLoadProfile() {
+                    if (typeof loadProfile != "function") {
+                        setTimeout(loadProfile, 500);
+                    } else {
+                        loadProfile(function () {});
+                    }
+                }
+                tryToLoadProfile();
+            }
+        }
+    },
     {
         path: '/signin',
         url: './pages/signin.html',