TerranQuest/Game
1
0
Fork 0
Code Issues 4 Pull Requests Releases 1 Wiki Activity

Add player avatar icons (#2)

Browse Source
This commit is contained in:
Skylar Ittner 2019-05-24 00:25:05 -06:00
parent 6e740f54f7
commit c3c7599be8
6 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/css/home.css
View File

@ -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%;
}

1
www/index.html
View File

@ -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>

19
www/js/chat.js
View File

@ -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) {

2
www/js/home.js
View File

@ -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);
}

50
www/js/usericons.js
View File

@ -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"
};
// 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"
};
return jdenticon.toSvg(data, 100);
}
/**
* 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);
}

12
www/settings.template.js
View File

@ -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}
}
};