Add player avatar icons (#2)

www/css/home.css

@@ -53,6 +53,14 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     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 {
@@ -109,6 +117,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     width: 64px;
 }
 
+#messagebar .message-avatar {
+    border-radius: 50%;
+    border: 1px solid rgba(255,255,255,0.25);
+}
+
 #place-info {
     width: 100%;
 }

www/index.html

@@ -36,5 +36,6 @@
 <script src="settings.js"></script>
 <script src="js/api.js"></script>
 <script src="routes.js"></script>
+<script src="js/usericons.js"></script>
 <script src="js/platform.js"></script>
 <script src="js/main.js"></script>

www/js/chat.js

@@ -85,27 +85,42 @@ 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) {
                 continue;
             }
+
+            // 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];
+            }
+
             if (msg.me) {
                 messagebox.addMessage({
                     text: msg.message,
+                    avatar: avatar,
                     attrs: {
                         'data-id': msg.id
                     }
                 });
             } else {
-                messagebox.addMessage({
+                var msg = {
                     text: msg.message,
                     type: 'received',
                     name: msg.nickname,
+                    avatar: avatar,
                     attrs: {
                         'data-id': msg.id
                     }
-                });
+                };
+                messagebox.addMessage(msg);
             }
         }
         if (isScrolledToBottom || forcescroll) {

www/js/home.js

@@ -37,9 +37,9 @@ function setupProfile() {
     $("#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);
+    $("#playerinfo .usericon").html(renderSvgIcon(playerProfile.id, SETTINGS["teams"][playerProfile.teamid]["hue"]));
     app.progressbar.set($("#player-healthbar"), (playerProfile.energy / playerProfile.maxenergy) * 100, 500);
 }
 

www/js/usericons.js

@@ -4,18 +4,40 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+/**
+ * Generate an abstract icon and return SVG code for it
+ * @param {String} data Different data, different icon
+ * @param {int} hue (optional) the icon hue
+ * @returns {String}
+ */
+function renderSvgIcon(data, hue) {
+    var hues = [];
+    if (typeof hue != "undefined") {
+        hues = [hue];
+    }
+    // Custom identicon style
+    // https://jdenticon.com/icon-designer.html?config=214726c41105452e42552f41
+    window.jdenticon_config = {
+        hues: hues,
+        lightness: {
+            color: [0.67, 0.86],
+            grayscale: [0.48, 0.65]
+        },
+        saturation: {
+            color: 0.69,
+            grayscale: 0.47
+        },
+        backColor: "#00000000"
+    };
+
+    return jdenticon.toSvg(data, 100);
+}
 
-// Custom identicon style
-// https://jdenticon.com/icon-designer.html?config=214726c41105452e42552f41
-window.jdenticon_config = {
-    hues: [261],
-    lightness: {
-        color: [0.67, 0.86],
-        grayscale: [0.48, 0.65]
-    },
-    saturation: {
-        color: 0.69,
-        grayscale: 0.47
-    },
-    backColor: "#00000000"
-};
+/**
+ * Convert a SVG string to a data URL
+ * @param {String} svg
+ * @returns {String}
+ */
+function svgToData(svg) {
+    return "data:image/svg+xml;base64," + window.btoa(svg);
+}

www/settings.template.js

@@ -14,11 +14,11 @@ var SETTINGS = {
     map_style_json: "https://maps.netsyms.net/styles/terranquest-3d/style.json",
     stripe_pubkey: "",
     teams: {
-        1: {id: 1, name: "Water", icon: "fas fa-tint", color: "blue", textcolor: "black"},
-        2: {id: 2, name: "Fire", icon: "fas fa-fire", color: "red", textcolor: "black"},
-        3: {id: 3, name: "Earth", icon: "fas fa-mountain", color: "green", textcolor: "black"},
-        4: {id: 4, name: "Wind", icon: "fas fa-wind", color: "lightblue", textcolor: "black"},
-        5: {id: 5, name: "Light", icon: "fas fa-sun", color: "yellow", textcolor: "black"},
-        6: {id: 6, name: "Dark", icon: "fas fa-moon", color: "deeppurple", textcolor: "white"}
+        1: {id: 1, name: "Water", icon: "fas fa-tint", color: "blue", textcolor: "black", hue: 230},
+        2: {id: 2, name: "Fire", icon: "fas fa-fire", color: "red", textcolor: "black", hue: 0},
+        3: {id: 3, name: "Earth", icon: "fas fa-mountain", color: "green", textcolor: "black", hue: 130},
+        4: {id: 4, name: "Wind", icon: "fas fa-wind", color: "lightblue", textcolor: "black", hue: 180},
+        5: {id: 5, name: "Light", icon: "fas fa-sun", color: "yellow", textcolor: "black", hue: 60},
+        6: {id: 6, name: "Dark", icon: "fas fa-moon", color: "deeppurple", textcolor: "white", hue: 265}
     }
 };