11

If I look at any user profile on any site, there's no easy way to distinguish hats earned on the current site and hats earned elsewhere. It would be nice if there was a toggle button for that. This is especially inconvenient if you try to collect hats on multiple sites, as it becomes harder and harder to keep track of which hats you're still missing on each.

This has been requested last year, and the year before too. So crossing fingers for next year :p

As @Abby pointed out in last year's answer, on the leaderboard we can see the top 9 hats for a given site. But that's really not the same, especially considering the total number of available hats (38?). I ended up tracking my progress on multiple sites using gists (on GitHub), which is less than ideal.

Improve this question
5
  • 2
    I requested that for my own profile last year.
    – Gilles 'SO- stop being evil'
    Dec 19, 2014 at 10:42
  • Your "year before too" link goes to last year as well. The year before that, the hat rack didn't even show hats from other sites, because you could only wear hats on the site you earned them on.
    – balpha StaffMod
    Dec 19, 2014 at 11:26
  • By the way, I'm all for this, but so far I can't think of a good way to display it non-annoyingly. I definitely do not want another checkbox / toggle button on the hat rack.
    – balpha StaffMod
    Dec 19, 2014 at 11:40
  • @balpha How about a little icon or maybe subtly shaded background for hats that were earned on this site?
    – Martin Ender
    Dec 19, 2014 at 12:04
  • 4
    Like so?
    – Martin Ender
    Dec 19, 2014 at 12:09

1 Answer 1

Reset to default
5

I have written some JavaScript that only shows the hats of the site on which you are:

var hats = $(".wb-outer");
var currSite = document.title.split("-")[1].replace(/&/g, "&")
    .replace(/Stack Exchange/g, "")
    .trim();
for (var i = 0; i < hats.length; i++) {
    var curr = $("#" + hats[i].id);
    curr.click();
    var sitesHtml = $("#wb-hat-details-info").last("p").html();
    if (sitesHtml.indexOf(currSite) === -1) {
        curr.hide();
    }
}

What it does: it simulates a click on all hats, looks at the displayed sites where you earned the hat, and if you have not earned it on the current side, the hat gets hidden.

I have tried to put this in a userscript, but that didn't work because the Winterbash JavaScript didn't load when I tried that. You could save it in a bookmarklet and run that when you need it. Here is a one-liner that can be used for that purpose:

var h=$(".wb-outer");var c=document.title.split("-")[1].replace(/&/g,"&amp;").replace(/Stack Exchange/g,"").trim();for(var i=0;i<h.length;i++){var n=$("#" +h[i].id);n.click();var t=$("#wb-hat-details-info").last("p").html();if(t.indexOf(c)===-1){n.hide();}}

And here is a version that highlights the hats earned on the current site, which Martin Büttner suggested:

var hats = $(".wb-outer");
var currSite = document.title.split("-")[1].replace(/&/g, "&amp;")
    .replace(/Stack Exchange/g, "")
    .trim();
for (var i = 0; i < hats.length; i++) {
    var curr = $("#" + hats[i].id);
    curr.click();
    var sitesHtml = $("#wb-hat-details-info").last("p").html();
    if (sitesHtml.indexOf(currSite) !== -1) {
        curr.css('background-color', '#ace89b');
    }
}

One-liner:

var h=$(".wb-outer");var c=document.title.split("-")[1].replace(/&/g,"&amp;").replace(/Stack Exchange/g,"").trim();for(var i=0;i<h.length;i++){var n=$("#" +h[i].id);n.click();var t=$("#wb-hat-details-info").last("p").html();if(t.indexOf(c)!==-1){n.css('background-color','#ace89b');}}
Improve this answer
3
  • 1
    Sorry about that, but you've made yourself too much work :) I just pushed a change that gives hats earned on the current site an extra CSS class. It's invisible (because I haven't found a good way to style it yet), but you can already use it. Just look for .wb-earned-here.
    – balpha StaffMod
    Dec 19, 2014 at 12:53
  • @balpha No problem, I had fun doing this :) Thanks for adding a built-in way!
    – ProgramFOX
    Dec 19, 2014 at 12:56
  • Wow, looks like the functionality is 90% there, just not enabled yet. For lack of a better option, I run $('.wb-earned-here').css('border', '1px solid red') in Chrome's JS console and that's really helpful. Thank you both!
    – janos
    Dec 19, 2014 at 13:19

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .