Achievement List Renovation

[DanielTheBard]

The achievement list is getting pretty big. Should we consider a new way to start showing achievements to avoid clutter?

I was thinking maybe a grid of the badges with a pop-up of the achievement name and description when you hover over it. Not sure if that's a good fix, but something should probably be done eventually. (I imagine we'll need to do something similar with the quests in the store at some point. Perhaps a separate quests page. One part is for gem-bought quests and the other for random encounters)

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[quin-jay]

To clarify, you mean on the profile page, right? (The last bit about quests made me wonder whether it was referencing the Market)

[DanielTheBard]

Yes, on the profile page. The quests part was a separate tangent aha

[SabreCat]

:+1: I've thought the very same thing! Maybe there could be dull gray versions of the unattained achievements sitting in the grid before they're earned?

[DanielTheBard]

@SabreCat - That could work!

[deilann]

What if you could also decide say, a specific number of achievements that showed up in your modal?

[quin-jay]

Ooh, good idea -- like if you had 3 you were most proud of you could display those right underneath your avatar or something, and then the rest would be down below in the grid

[Aiseant]

What about having only the icons of the achievement and the title then detailed text when hovering ? Still with the gray unattained achievments all at the bottom of the list, or something.

And would it be possible to display only the icons when you're looking on the profile of somebody else ?

[lemoness]

I like the grid idea, like the greyed-out idea (promotes collection), like the "favored badges" concept... in short, this whole Github thread is golden.

[Alys]

Progressing (probably) in https://github.com/HabitRPG/habitrpg/issues/2373 'Split up "Stats & Achievements" to "Stats" and "Achievements" (or similar)'

[khipkin]

This is turning out to be harder than I expected. There are so many different conditional things going on for each achievement, the logic can't be pulled cleanly into a mixin. This results in several questions that must be addressed.

Which of the following things would still be desirable in the proposed grid format?

1. some achievements are always hidden if they are not achieved

   (e.g., kickstarter, rebirth, veteran, original user, friends/party seasonal spells, habitica days, habit birthdays, seasonal world quests, costume contests, seasonal cards)

   • some of these can potentially NEVER be achieved if they aren't already (specifically kickstarter), so it would be lame to show these in a completionist-oriented grid when they're impossible
   • some of these are seasonal / time-sensitive and therefore not necessarily in the user's control to achieve right now
   • maybe some of these could be moved into a separate "Special"/"Rare" row for only optional achievements, similar to rare and quest pets on the pets page

2. some achievements are hidden only to other users if they are not achieved

   (e.g., habitica surveys, contributor level, streaks, perfect days, etc)

   • I assume this was originally done to avoid clutter from displaying unnecessary information, which would no longer be a problem in the grid solution

3. some achievements have multiple possible completion conditions (1 vs >1 vs something else)

   (e.g., 1 vs many habitica surveys completed, 1 vs many streaks, 1 vs many perfect days, various ultimate gear classes, number of rebirths, etc)

   • would these conditions stack in one achievement slot, with the most prestigious achieved one on display?
   • the ultimate gear achievements are NOT mutually exclusive, so should they be separated? or have some weird sub-grid going on?

[dgodovanets]

Can that things be mutual? I thinks it is the best way.

[khipkin]

@Eramik what?

[khipkin]

(edit: nevermind)

[lemoness]

1. I think having a visible Seasonal Section for badges is actually a good thing, because it results in users learning that there are Seasonal events to look forward to. For example, if you see a greyed-out badge with "Celebrated Habitica Naming Day on July 31st", that encourages you to stick around for Naming Day. If you see "Cast Seafoam on a Friend during the Sumer Splash event" that gives you an event to look forward to, teaches you that Habitica has events, and gets you excited to try out that feature when it's available.
2. Yes, I don't think that's an issue anymore.
3. Ultimate gear achievements should be kept separated. Not quite sure about the rest of the question?

On Fri, Jul 15, 2016 at 1:36 PM, Kaitlin Hipkin notifications@github.com wrote:

Anyway, I've started parametizing the achievements and I made an achievementWrapper mixin that abstracts away all of the /show vs no-show/, /muted vs unmuted/, /badge vs no-badge/ logic that is already in place.

The mixin can replace the first 3ish lines of each achievement with just 1 line to pass parameters into achievementWrapper.

I think this is the first step toward cleaning up the achievements page.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitrpg/issues/2893#issuecomment-233063492, or mute the thread https://github.com/notifications/unsubscribe-auth/ADVQwfZWwLxxRcvojwyTatxkqCEocXSwks5qV-9jgaJpZM4BjBhN .

[khipkin]

@lemoness Mostly, the achievements that fit into the 3rd point are ones with plural variations of the standard singular title and/or description. The ultimate gear achievement is the outlier.

[khipkin]

@lemoness A few more questions:

The kickstarter achievement title takes the tier as a parameter. Should I add a new string without the parameter so the badge can be shown (greyed-out) if unachieved?

"kickstartName": "Kickstarter Backer - $<%= tier %> Tier", "kickstartText": "Backed the Kickstarter Project"

As mentioned in previous comments, some achievements with both singular and plural forms. Would it be okay to use the singular form for unachieved instances as well? Example: Habitica Naming Days

"habiticaDay": "Habitica Naming Day", "habiticaDaySingularText": "Celebrated Habitica's Naming Day! Thanks for being a fantastic user.", "habiticaDayPluralText": "Celebrated <%= number %> Naming Days! Thanks for being a fantastic user."

[khipkin]

@lemoness

Another thing. Rebirth achievement strings are weird...

"rebirthOrb": "Used an Orb of Rebirth to start over after attaining Level", "rebirthOrb100": "Used an Orb of Rebirth to start over after attaining Level 100 or higher"

The rebirthOrb string is just manually concatenated with a number in the client instead of passing a parameter into the string. I have to add a string that doesn't mention the rebirth level for use when the achievement is unachieved. Do you want me to add the param to rebirthOrb since I'm in the file anyway?

[khipkin]

The plural versions of Streak and PerfectDays achievement titles also do weird concatenation things.

(edit: expand)

Weirdly, the plural forms of the strings are used for 0 values, which are currently only visible to the current user. It looks awkward... I propose using the singular forms instead, especially because it will be more consistent with the other changes I am making:

[SabreCat]

Kickstarter: We try not to show grayed-out achievements that it's not actually possible for the user to work toward. Kickstarter backing is an example: there's not likely to be another Kickstarter any time soon (probably not ever), so it'd be misleading to say "here's an achievement you can get!"

Singular for grayed-out version: Sounds good.

Pluralization/parameterization of Rebirth and others: Getting proper interpolation in place is ideal. That might require creating fresh strings instead of modifying old ones lest we cause a bunch of unnecessary errors.

[khipkin]

@SabreCat Thanks for the input!

Yeah, I agree with hiding impossible, unearned achievements. So that would include the NPC, Kickstarter, Veteran, and Original User achievements, correct? Any others? Do costume contests still happen? I'm leaning towards having a section similar to the Rare Pets/Mounts sections, where things appear there only if you've earned them.

Yayy! I've been using singular forms for unachieved stuff across the board to keep things consistent, so it made sense to do that for Streaks and PerfectDays as well.

Interpolation?? Okay, I'll create all new strings when necessary, rather than modifying existing ones. The old ones can maybe be removed later on to reduce clutter and minimize the chance of errors.

[SabreCat]

Interpolation -- I mean passing a parameter into the string. Maybe I used the wrong word :P

[khipkin]

Nah you're probably right... I just didn't know the word. :P What if I rename the variable being used for interpolation? Is that world-ending?

[lemoness]

Costume Contests do still happen every year, so that one can go in the Seasonal section.

On Mon, Jul 18, 2016 at 3:33 PM, Kaitlin Hipkin notifications@github.com wrote:

Nah you're probably right... I just didn't know the word. :P What if I rename the variable being used for interpolation? Is that world-ending?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitrpg/issues/2893#issuecomment-233479434, or mute the thread https://github.com/notifications/unsubscribe-auth/ADVQwWcuEbqRuR-elaUUMBK1h8YnrOyUks5qW_9NgaJpZM4BjBhN .

[SabreCat]

@khipkin: Any change to what parameters an already published string expects, whether adding, removing, or renaming, will break existing translations. I'll defer to Transifex experts like @GitHubSphinx and @paglias as to what circumstances, if any, that's acceptable.

[crookedneighbor]

They just need to be updated before deploying so those strings get reset on Transifex.

[ghost]

For what it's worth, I would second @crookedneighbor

Please excuse me, I'm not sure I've managed to catch up with the discussion and the logic of the changes being suggested. @khipkin I hope I get the concept of variable being used for interpolation right ;-)

If you change a string in a json locales file (e.g. rename a variable) you only need to make sure that the place in code where the string is actually introduced provides values for corresponding variables. And vice versa. Whenever an updated string gets uploaded to Transifex, the system resets translations automatically (still allowing translators to see the previous ones in suggestions). So generally speaking renaming variables won't break translations (if the strings don't get broken in English).

Speaking about singular and plural words in translations, it's generally a global issue (it has been mentioned in the Translations v3 Trello card. Pluralization rules differ greatly across languages, but at least having separate strings for a single thing vs. multiple things would be great.

[SabreCat]

OK, cool. So disregard my prior comments about making new strings; you can change what's going on in the existing ones just fine, it sounds like!

[khipkin]

So which achievements should be rare, i.e. potentially unearnable if not already earned?

Here's what I was thinking:

• habit surveys
• backer NPC
• backer at any tier
• veteran
• original user

[khipkin]

Progress:

Thoughts:

• I think it would be better if the grid squares were larger, which would (maybe) mean the badges should also be larger.
• Not sure how best to handle the rare/special row. I can think of a few ideas though:
  • Figure out when no rare achievs are displayed and show some sort of text instead.
  • Put the surveys achievement and/or the contributor achievement in that row, even though they show when unachieved. This would guarantee that there's always something in that row.

[khipkin]

I'm also having trouble figuring out how to make the sprites grayscale? The only thing I can think of that might work is adding all new grayscale images for all of the achievements.

[lemoness]

I agree that making the badges larger is a good idea! Perhaps they could be at x2 the size. They'll need to be scaled up with nearest neighbor (or equivalent) to preserve the crisp pixels.

Let me know if you need help with art for making the badges greyscale.

All of the badges you listed as rare look good to me!

On Tue, Aug 9, 2016 at 2:40 PM, Kaitlin Hipkin notifications@github.com wrote:

I'm also having trouble figuring out how to make the sprites grayscale? The only thing I can think of that might work is adding all new grayscale images for all of the achievements.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitrpg/issues/2893#issuecomment-238700605, or mute the thread https://github.com/notifications/unsubscribe-auth/ADVQwWxrmjIUqruP3YG0j9Tv5TQsLqSIks5qePPZgaJpZM4BjBhN .

[khipkin]

@lemoness So does that mean all new images need to be added for the greyscale badges? If so, I would love some help making them!

[khipkin]

@SabreCat

In this commit, the achievement-helm img was renamed to achievement-ultimate-warrior, but the reference to the image in the npc achievement in the achievements list was never updated.

---

Right now, on the live site, the image is missing (screenshot of Bailey the Town Crier's profile):

[khipkin]

Here's what the grid looks like with 2x achievement images after I moved the survey and contributor achievements into the special section, both showing and hiding the hidden-if-unachieved achievs:

This way, the special section is guaranteed to never be completely empty.

(edit: wording)

[khipkin]

@lemoness Nevermind about needing help with the images. I figured out how to do it myself.

[khipkin]

[mandyzhou]

This looks really great! Two thoughts:

• Would it be possible to make the greyed out badges a little paler? Maybe it's just me, but right now they kind of look like silver badges.
• I'm not sure if this was already in the works, but for achievements that can stack, they should probably go into one achievement slot since the number of streaks and perfect days can get pretty high. Also, I feel like some sort of visual indicator (maybe a small, say, "x5" next to the badge) when a player has gotten multiple instances of that badge would help motivate them to continue to work towards that achievement. I'm personally motivated by seeing my number of streaks and perfect days increase, and I think I would be less motivated if those numbers only appeared on a mouseover.

[khipkin]

@mandyzhou Something like this?? :smile:

[khipkin]

And does this look better? I made the one muted badge brighter with lower contrast. If this is better, I can do the same to the rest of the muted badges.

[negue]

@khipkin great work, btw! could you send me a pm in habitica, I was about to start to work on an achievement api endpoint so that the mobile apps could have them as well, and I think we could could collaborate on this one :)

[mandyzhou]

@khipkin Oooh, I really like the way you implemented the numbers. The single-digit ones may need to be bumped over to the left just slightly, but they look great overall.

For the greyed out badges, I'm not sure but they still seem a tad dark to me ... Maybe someone with more design/pixel art experience can chime in? Again, just don't want them to be mistaken for silver badges.

[tricksyfox]

@khipkin Here from the Pixel guild. I see what you mean about them looking silver... but before you fiddle too much with making them look gray, I'd propose that if they're going to be larger anyway, it'd be a good opportunity for a redo of the icons. A bigger canvas allows for more detail, after all. Just a thought.

For making them look less silver, I think the "rain" icon is a great improvement. The further you lighten the black lines, the more it'll look like it's faded out and the less it'll look like it's an alternate color.

For the number icons, is there any way to make the counter ALWAYS a perfect circle, instead of the smaller oval in the single digits? That inconsistency would drive me crazy. You'll probably want to do a test-case with three digit numbers, as well, for those darn overachievers ;)

Overall I really love it and I'm excited to see what you do with it!

[crookedneighbor]

I think we should hold off on creating separate grayscale versions of the icons until the website redesign is underway. We'll want the disabled look to match the aesthetic of the redesign.

[khipkin]

@crookedneighbor I've already done like 95% of the work, and updating the images I already made wouldn't be a big deal to me. Is that why you're objecting? I'd prefer if the stuff I did is used for only a little while instead of not at all. And I'd be more than willing to update everything when the site redesign comes along.

[crookedneighbor]

It's less a matter of the amount of work you would have to do, and more about supporting these alternate sprites in perpetuity. We maintain all the sprites in s3 storage for the mobile apps to use. Would we need to commit to including these as well? I'm also wondering if it's necessary to have alternate images, or if we could apply whatever affect we need with css.

[khipkin]

@crookedneighbor Oh I see. Well, I agree that it would be better to accomplish this effect with CSS alone, but I couldn't figure out how to do it.

[lemoness]

As a side note, if we do decide to do greyscale art assets that are created separately, you won't need to do those yourself -- the Artisans will handle that. But I agree that we probably don't need to do that part yet if there's no other way to do it.

On Wed, Aug 17, 2016 at 8:30 PM, Kaitlin Hipkin notifications@github.com wrote:

@crookedneighbor https://github.com/crookedneighbor Oh I see. Well, I agree that it would be better to accomplish this effect with CSS alone, but I couldn't figure out how to do it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitrpg/issues/2893#issuecomment-240614823, or mute the thread https://github.com/notifications/unsubscribe-auth/ADVQwbvfnrSE0UbPk6v_sw3ienayaCgNks5qg9HJgaJpZM4BjBhN .

[tricksyfox]

Thinking about the "locked" badges (though I agree with @lemoness that you can definitely let the artisans handle it! We're an enthusiastic bunch :) ), we might not even need to bother with a "greyed out" version of each and every badge. It could be a consistent "there's a badge here that you haven't unlocked yet" icon, like for the quest pets that haven't hatched yet (paw print with a question mark).

[khipkin]

@tricksyfox Ohhh that's an amazing idea! What about a generic badge-shaped thing with a question mark on it? Either greyed-out or different in some other obvious way. That way the special badge icons can be unlocked! Ahh this is such a good idea. :tada: :+1: :tada:

[khipkin]

@lemoness How do I go about requesting art? Can I just ask in the Aspiring Artisans guild or should someone with authority do it?