Style changes on profile screen

master
Skylar Ittner 8 years ago
parent ba26006bac
commit 6699240b82

@ -113,6 +113,7 @@ body {
.badge-img { .badge-img {
border: 2px solid green; border: 2px solid green;
margin-bottom: 10px;
} }
#terrain-image { #terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8); background: rgba(0,0,0,.8);
} }
.chatbox #chatmsgs .chat-username { .chat-username {
color: green; color: green;
font-weight: bold; font-weight: bold;
} }
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons { #buttons {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box { .scrollable-box {
overflow-y: auto; overflow-y: auto;
}
#player-name {
padding-left: 5px;
border-left: 1px solid white;
}
#player-level {
font-size: 120%;
color: #d5d5d5;
font-style: italic;
padding-left: 5px;
padding-top: 10px;
margin-top: -10px;
border-left: 1px solid white;
border-bottom: 1px solid white;
padding-right: 100px;
width: fit-content;
}
#badge-header {
padding-top: 5px;
border-top: 1px solid white;
border-right: 1px solid white;
}
#badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
}
#loading-badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
} }

@ -40,7 +40,11 @@ function getChat() {
data = sortResults(data, 'time', true); data = sortResults(data, 'time', true);
var content = ""; var content = "";
data.forEach(function (msg) { data.forEach(function (msg) {
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />"; var usernameclass = "chat-username";
if (msg.username === 'skylarmt') {
usernameclass = "chat-username-admin"
}
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
}); });
$('#chatmsgs').html(content); $('#chatmsgs').html(content);
}); });

@ -1,63 +1,71 @@
<div class="scrollable-box"> <div class="h4" id="player-name"></div>
<div class="h4" id="player-name"></div> <div id="player-level"></div>
<p id="player-level"></p> <div class="h5" id="badge-header">Badges</div>
<div class="h5">Badges</div> <div id="loading-badges">
<div id="loading-badges"> <i class="fa fa-spinner fa-pulse"></i> Loading...
<i class="fa fa-spinner fa-pulse"></i> Loading... </div>
</div> <div class="container" id="badge-container">
<div class="container"> <div class="row" id="badges">
<div class="row" id="badges">
</div>
</div> </div>
<script> </div>
function popBadge(name, desc) { <script>
navigator.notification.alert(desc, null, name, "Close"); function popBadge(name, desc) {
} navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) { function loadProfile(user) {
$('#player-name').text(user); $('#player-name').text(user);
loadBadges(user); loadBadges(user);
loadPlayerStats(user); loadPlayerStats(user);
} }
function loadPlayerStats(user) { function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), { $.getJSON(mkApiUrl('getstats'), {
user: user user: user
}, function (data) { }, function (data) {
if (data.status === 'OK' && data.stats !== null) { if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level)); $('#player-level').text('Level ' + Math.floor(data.stats.level));
} else { } else {
$('#player-level').text('Error: cannot load player stats.'); $('#player-level').text('Player does not exist.');
} }
}).fail(function () { $('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"'); $('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
}); $('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} $('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} else {
$('#player-level').text('Cannot load player stats.');
}
}).fail(function () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) { function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...'); $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block'); $('#loading-badges').css('display', 'block');
$.getJSON( $.getJSON(
mkApiUrl('getbadges') + '?user=' + user, mkApiUrl('getbadges') + '?user=' + user,
function (data) { function (data) {
if (data.status === 'OK') { if (data.status === 'OK') {
data.badges.forEach(function (item) { data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \ $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\ onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\ <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>'); </div>');
}); });
$('#loading-badges').css('display', 'none'); $('#loading-badges').css('display', 'none');
} else { } else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"'); $('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
} }
); }
} ).fail(
</script> function (err) {
</div> $('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>

@ -113,6 +113,7 @@ body {
.badge-img { .badge-img {
border: 2px solid green; border: 2px solid green;
margin-bottom: 10px;
} }
#terrain-image { #terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8); background: rgba(0,0,0,.8);
} }
.chatbox #chatmsgs .chat-username { .chat-username {
color: green; color: green;
font-weight: bold; font-weight: bold;
} }
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons { #buttons {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box { .scrollable-box {
overflow-y: auto; overflow-y: auto;
}
#player-name {
padding-left: 5px;
border-left: 1px solid white;
}
#player-level {
font-size: 120%;
color: #d5d5d5;
font-style: italic;
padding-left: 5px;
padding-top: 10px;
margin-top: -10px;
border-left: 1px solid white;
border-bottom: 1px solid white;
padding-right: 100px;
width: fit-content;
}
#badge-header {
padding-top: 5px;
border-top: 1px solid white;
border-right: 1px solid white;
}
#badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
}
#loading-badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
} }

@ -40,7 +40,11 @@ function getChat() {
data = sortResults(data, 'time', true); data = sortResults(data, 'time', true);
var content = ""; var content = "";
data.forEach(function (msg) { data.forEach(function (msg) {
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />"; var usernameclass = "chat-username";
if (msg.username === 'skylarmt') {
usernameclass = "chat-username-admin"
}
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
}); });
$('#chatmsgs').html(content); $('#chatmsgs').html(content);
}); });

@ -1,63 +1,71 @@
<div class="scrollable-box"> <div class="h4" id="player-name"></div>
<div class="h4" id="player-name"></div> <div id="player-level"></div>
<p id="player-level"></p> <div class="h5" id="badge-header">Badges</div>
<div class="h5">Badges</div> <div id="loading-badges">
<div id="loading-badges"> <i class="fa fa-spinner fa-pulse"></i> Loading...
<i class="fa fa-spinner fa-pulse"></i> Loading... </div>
</div> <div class="container" id="badge-container">
<div class="container"> <div class="row" id="badges">
<div class="row" id="badges">
</div>
</div> </div>
<script> </div>
function popBadge(name, desc) { <script>
navigator.notification.alert(desc, null, name, "Close"); function popBadge(name, desc) {
} navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) { function loadProfile(user) {
$('#player-name').text(user); $('#player-name').text(user);
loadBadges(user); loadBadges(user);
loadPlayerStats(user); loadPlayerStats(user);
} }
function loadPlayerStats(user) { function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), { $.getJSON(mkApiUrl('getstats'), {
user: user user: user
}, function (data) { }, function (data) {
if (data.status === 'OK' && data.stats !== null) { if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level)); $('#player-level').text('Level ' + Math.floor(data.stats.level));
} else { } else {
$('#player-level').text('Error: cannot load player stats.'); $('#player-level').text('Player does not exist.');
} }
}).fail(function () { $('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"'); $('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
}); $('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} $('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} else {
$('#player-level').text('Cannot load player stats.');
}
}).fail(function () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) { function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...'); $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block'); $('#loading-badges').css('display', 'block');
$.getJSON( $.getJSON(
mkApiUrl('getbadges') + '?user=' + user, mkApiUrl('getbadges') + '?user=' + user,
function (data) { function (data) {
if (data.status === 'OK') { if (data.status === 'OK') {
data.badges.forEach(function (item) { data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \ $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\ onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\ <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>'); </div>');
}); });
$('#loading-badges').css('display', 'none'); $('#loading-badges').css('display', 'none');
} else { } else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"'); $('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
} }
); }
} ).fail(
</script> function (err) {
</div> $('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>

@ -113,6 +113,7 @@ body {
.badge-img { .badge-img {
border: 2px solid green; border: 2px solid green;
margin-bottom: 10px;
} }
#terrain-image { #terrain-image {
@ -191,11 +192,17 @@ body {
background: rgba(0,0,0,.8); background: rgba(0,0,0,.8);
} }
.chatbox #chatmsgs .chat-username { .chat-username {
color: green; color: green;
font-weight: bold; font-weight: bold;
} }
.chat-username-admin {
color: red;
font-weight: bold;
font-style: italic;
}
#buttons { #buttons {
position: absolute; position: absolute;
right: 0px; right: 0px;
@ -227,4 +234,40 @@ body {
.scrollable-box { .scrollable-box {
overflow-y: auto; overflow-y: auto;
}
#player-name {
padding-left: 5px;
border-left: 1px solid white;
}
#player-level {
font-size: 120%;
color: #d5d5d5;
font-style: italic;
padding-left: 5px;
padding-top: 10px;
margin-top: -10px;
border-left: 1px solid white;
border-bottom: 1px solid white;
padding-right: 100px;
width: fit-content;
}
#badge-header {
padding-top: 5px;
border-top: 1px solid white;
border-right: 1px solid white;
}
#badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
}
#loading-badges {
border-right: 1px solid white;
padding-top: 10px;
margin-top: -10px;
} }

@ -40,7 +40,11 @@ function getChat() {
data = sortResults(data, 'time', true); data = sortResults(data, 'time', true);
var content = ""; var content = "";
data.forEach(function (msg) { data.forEach(function (msg) {
content += "<span class='chat-username' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />"; var usernameclass = "chat-username";
if (msg.username === 'skylarmt') {
usernameclass = "chat-username-admin"
}
content += "<span class='" + usernameclass + "' onclick='openProfile(\"" + msg.username + "\");'>" + msg.username + "</span> " + msg.message + "<br />";
}); });
$('#chatmsgs').html(content); $('#chatmsgs').html(content);
}); });

@ -1,63 +1,71 @@
<div class="scrollable-box"> <div class="h4" id="player-name"></div>
<div class="h4" id="player-name"></div> <div id="player-level"></div>
<p id="player-level"></p> <div class="h5" id="badge-header">Badges</div>
<div class="h5">Badges</div> <div id="loading-badges">
<div id="loading-badges"> <i class="fa fa-spinner fa-pulse"></i> Loading...
<i class="fa fa-spinner fa-pulse"></i> Loading... </div>
</div> <div class="container" id="badge-container">
<div class="container"> <div class="row" id="badges">
<div class="row" id="badges">
</div>
</div> </div>
<script> </div>
function popBadge(name, desc) { <script>
navigator.notification.alert(desc, null, name, "Close"); function popBadge(name, desc) {
} navigator.notification.alert(desc, null, name, "Close");
}
function loadProfile(user) { function loadProfile(user) {
$('#player-name').text(user); $('#player-name').text(user);
loadBadges(user); loadBadges(user);
loadPlayerStats(user); loadPlayerStats(user);
} }
function loadPlayerStats(user) { function loadPlayerStats(user) {
$.getJSON(mkApiUrl('getstats'), { $.getJSON(mkApiUrl('getstats'), {
user: user user: user
}, function (data) { }, function (data) {
if (data.status === 'OK' && data.stats !== null) { if (data.status === 'OK' && data.stats != null) {
if (data.stats.level != null) {
$('#player-level').text('Level ' + Math.floor(data.stats.level)); $('#player-level').text('Level ' + Math.floor(data.stats.level));
} else { } else {
$('#player-level').text('Error: cannot load player stats.'); $('#player-level').text('Player does not exist.');
} }
}).fail(function () { $('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#player-level').text('Error: Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"'); $('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
}); $('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} $('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} else {
$('#player-level').text('Cannot load player stats.');
}
}).fail(function () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
});
}
function loadBadges(user) { function loadBadges(user) {
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...'); $('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
$('#loading-badges').css('display', 'block'); $('#loading-badges').css('display', 'block');
$.getJSON( $.getJSON(
mkApiUrl('getbadges') + '?user=' + user, mkApiUrl('getbadges') + '?user=' + user,
function (data) { function (data) {
if (data.status === 'OK') { if (data.status === 'OK') {
data.badges.forEach(function (item) { data.badges.forEach(function (item) {
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \ $('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\ onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\ <img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
</div>'); </div>');
}); });
$('#loading-badges').css('display', 'none'); $('#loading-badges').css('display', 'none');
} else { } else {
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"'); $('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
}
}
).fail(
function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
} }
); }
} ).fail(
</script> function (err) {
</div> $('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
}
);
}
</script>