Browse Source

Display achievements on user profiles

tags/v1.8.0
Morgan Bazalgette 2 years ago
parent
commit
1f32c9fcb6
Signed by: howl <the@howl.moe> GPG Key ID: 40D328300D245DA5
5 changed files with 97 additions and 6 deletions
  1. +1
    -1
      semantic.json
  2. +62
    -4
      static/profile.js
  3. +21
    -0
      static/ripple.css
  4. +1
    -0
      templates/base.html
  5. +12
    -1
      templates/profile.html

+ 1
- 1
semantic.json View File

@@ -64,4 +64,4 @@
"api"
],
"version": "2.2.6"
}
}

+ 62
- 4
static/profile.js View File

@@ -27,6 +27,7 @@ $(document).ready(function() {
$(this).addClass("active");
window.history.replaceState('', document.title, wl.pathname + "?mode=" + m + wl.hash);
});
initialiseAchievements();
initialiseFriends();
// load scores page for the current favourite mode
var i = function(){initialiseScores($("#scores-zone>div[data-mode=" + favouriteMode + "]"), favouriteMode)};
@@ -39,8 +40,65 @@ $(document).ready(function() {
});

function initialiseAchievements() {
api('users/achievements', {id: userID}, function (resp) {
console.log("fofo");
api('users/achievements' + (currentUserID == userID ? '?all' : ''),
{id: userID}, function (resp) {
var achievements = resp.achievements;
// no achievements -- show default message
if (achievements.length === 0) {
$("#achievements")
.append($("<div class='ui sixteen wide column'>")
.text(T("Nothing here. Yet.")));
$("#load-more-achievements").remove();
return;
}

var displayAchievements = function(limit, achievedOnly) {
var $ach = $("#achievements").empty();
limit = limit < 0 ? achievements.length : limit;
var shown = 0;
for (var i = 0; i < achievements.length; i++) {
var ach = achievements[i];
if (shown >= limit || (achievedOnly && !ach.achieved)) {
continue;
}
shown++;
$ach.append(
$("<div class='ui two wide column'>").append(
$("<img src='https://s.ripple.moe/images/medals-" +
"client/" + ach.icon + ".png' alt='" + ach.name +
"' class='" +
(!ach.achieved ? "locked-achievement" : "achievement") +
"'>").popup({
title: ach.name,
content: ach.description,
position: "bottom center",
distanceAway: 10
})
)
);
}
// if we've shown nothing, and achievedOnly is enabled, try again
// this time disabling it.
if (shown == 0 && achievedOnly) {
displayAchievements(limit, false);
}
};

// only 8 achievements - we can remove the button completely, because
// it won't be used (no more achievements).
// otherwise, we simply remove the disabled class and add the click handler
// to activate it.
if (achievements.length <= 8) {
$("#load-more-achievements").remove();
} else {
$("#load-more-achievements")
.removeClass("disabled")
.click(function() {
$(this).remove();
displayAchievements(-1, false);
});
}
displayAchievements(8, true);
});
}

@@ -85,7 +143,7 @@ function friendClick() {
var t = $(this);
if (t.hasClass("loading")) return;
t.addClass("loading");
api("friends/" + (t.attr("data-friends") == 1 ? "del" : "add"), {user: +userID}, setFriendOnResponse, true);
api("friends/" + (t.attr("data-friends") == 1 ? "del" : "add"), {user: userID}, setFriendOnResponse, true);
}

var defaultScoreTable;
@@ -375,5 +433,5 @@ function ppOrScore(pp, score) {
function beatmapLink(type, id) {
if (type == "s")
return "<a href='/s/" + id + "'>" + id + '</a>';
return "<a href='/b/" + id + "'>" + id + '</a>';
return "<a href='/b/" + id + "'>" + id + '</a>';
}

+ 21
- 0
static/ripple.css View File

@@ -377,3 +377,24 @@ a.camouflaged:hover {
justify-content: center;
align-items: center;
}

/* SO, of course: https://stackoverflow.com/a/8612047/5328069 */
img.achievement {
-webkit-filter: drop-shadow(0 5px 5px #777);
filter: drop-shadow(0 5px 5px #777);
}
img.locked-achievement {
-webkit-filter: brightness(0) drop-shadow(0 5px 5px #777);
filter: brightness(0) drop-shadow(0 5px 5px #777);
-webkit-transition: all 500ms ;
-moz-transition: all 500ms ;
-ms-transition: all 500ms ;
-o-transition: all 500ms ;
transition: all 500ms ;
}
img.locked-achievement:hover {
filter: gray; /* IE6-9 */
-webkit-filter: brightness(0.5) drop-shadow(0 5px 5px #777);
filter: brightness(0.5) drop-shadow(0 5px 5px #777);
}


+ 1
- 0
templates/base.html View File

@@ -112,6 +112,7 @@
cheesegullAPI: {{ .Conf.CheesegullAPI }},
language: {{ with $lang }}{{ . }}{{ else }}"en"{{ end }},
};
var currentUserID = {{ .Context.User.ID }};
</script>
{{/* If we got some more scripts to print, print'em */}}
<script src="//twemoji.maxcdn.com/2/twemoji.min.js?2.2"></script>


+ 12
- 1
templates/profile.html View File

@@ -7,7 +7,7 @@
{{ $favouritemode := _or $gqm .favourite_mode }}
<script>
window.favouriteMode = {{ $favouritemode }};
window.userID = '{{ .id }}';
window.userID = {{ .id }};
</script>
{{ if after .silence_info.end }}
<div class="ui error centered message">{{ $global.T "User is <b>silenced</b> for %s, expires %s." (.silence_info.reason | htmlescaper) (time .silence_info.end) | html }}</div>
@@ -184,6 +184,17 @@
</div>
{{ end }}
</div>

<div class="ui segment">
<h2 class="ui header">Achievements</h2>
<div id="achievements" class="ui grid">
</div>
<div class="right aligned">
<button class="ui disabled button" id="load-more-achievements">
{{ $global.T "Load more" }}
</button>
</div>
</div>
<div class="ui modal">
<i class="close icon"></i>
<div class="content">


Loading…
Cancel
Save