Add a couple more badges, add generic badge image if image 404

This commit is contained in:
Skylar Ittner 2016-09-05 01:26:10 -06:00
parent 0cee4fc2f8
commit ef5e21eaca
4 changed files with 70 additions and 70 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
www/assets/badges/badge.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -15,74 +15,74 @@
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
--> -->
<div class="h4" id="player-name"></div> <div class="h4" id="player-name"></div>
<div id="player-level"></div> <div id="player-level"></div>
<div class="h5" id="badge-header">Badges</div> <div class="h5" id="badge-header">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" id="badge-container">
<div class="row" id="badges"> <div class="row" id="badges">
</div> </div>
</div> </div>
<script> <script>
function popBadge(name, desc) { function popBadge(name, desc) {
navigator.notification.alert(desc, null, name, "Close"); 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) { 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('Player does not exist.'); $('#player-level').text('Player does not exist.');
} }
$('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid)); $('#player-name').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid)); $('#player-name').css('color', '#' + getTeamColorFromId(data.stats.teamid));
$('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid)); $('#player-level').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid)); $('#badge-header').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid)); $('#badges').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
$('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid)); $('.badge-img').css('border-color', '#' + getTeamColorFromId(data.stats.teamid));
} else { } else {
$('#player-level').text('Cannot load player stats.'); $('#player-level').text('Cannot load player stats.');
} }
}).fail(function () { }).fail(function () {
$('#player-level').text('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"'); $('#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" onerror="this.src=\'assets/badges/badge.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( ).fail(
function (err) { function (err) {
$('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"'); $('#loading-badges').html('Loading failed. <a onclick="loadProfile(\'' + user + '\')">Reload</a>"');
} }
); );
} }
</script> </script>