diff --git a/www/css/home.css b/www/css/home.css
index a97c227..21fd564 100644
--- a/www/css/home.css
+++ b/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%;
}
diff --git a/www/index.html b/www/index.html
index f11860c..482f8aa 100644
--- a/www/index.html
+++ b/www/index.html
@@ -36,5 +36,6 @@
+
diff --git a/www/js/chat.js b/www/js/chat.js
index b49bd10..4bae630 100644
--- a/www/js/chat.js
+++ b/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) {
diff --git a/www/js/home.js b/www/js/home.js
index 5382d2b..c322bfe 100644
--- a/www/js/home.js
+++ b/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(" 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);
}
diff --git a/www/js/usericons.js b/www/js/usericons.js
index 9a67bd8..1c9f3ad 100644
--- a/www/js/usericons.js
+++ b/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"
-};
\ No newline at end of file
+/**
+ * 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);
+}
\ No newline at end of file
diff --git a/www/settings.template.js b/www/settings.template.js
index 6c39411..11767f5 100644
--- a/www/settings.template.js
+++ b/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}
}
};
\ No newline at end of file