• Recently Browsing   0 members

    No registered users viewing this page.

Tobbe

UserScript: Toggle completed quests

Recommended Posts

I wrote a user script (only tested with Tampermonkey for now) to hide/show completed quests at https://www.nerdfitness.com/level-up/my-quests/

The script is available here if you want to try it: https://github.com/Tobbe/nerdfitness/blob/master/NF_quest_toggler.user.js

 

Makes it a bit easier to browse through the list, as it can easily get pretty long with the limited filtering available to us :)

 

Please let me know if you try it out! :)

  • Thanks 1

Share this post


Link to post
Share on other sites

Hey @Tobbe this is pretty cool. I implemented this directly on the NFQ dev site and had a bit of feedback.

 

The exact purpose of the toggle is a bit unclear - when you say 'Show Completed' it kind of indicates that you're only going to be showing those results, not hiding them if it's unchecked.

 

For this use case, it'd be better to either have the checkbox say "Hide Completed" OR have the javascript actually only show completed quests when the box is checked.

 

That said, as cool as this is, I can't implement it on the production site in the codebase because it relies on a few fragile pieces (such as the image name of the complete checkmark) as compared to back-end data (which I know you don't have access to). Although it wouldn't be very hard to output an additional class into the div based on complete/incomplete ;-)

Share this post


Link to post
Share on other sites

Thanks a lot for the quick feedback! :)

 

I'll see if I can come up with some better wording for the checkbox label. 

 

Yeah, I realize it's very fragile. How often do you work on that part of the code? Do you have any future changes planed, or do you think it'll stay pretty much as it is? I haven't been a member for very long, so I have no idea how much things tend to change around here... Please, if you could include that class that would be great! Let me know as soon as you do (if you do) and I'll change the script to look for that instead :)

 

Next step is to publish the script on one of the user script sites, so it becomes easier to install

Share this post


Link to post
Share on other sites

I just added 'q-complete' or 'q-incomplete' to the quest wrapper div (where quest-head is). This should make it pretty easy to target those elements and manipulate them. 

 

Unfortunately this code doesn't get much attention - we have just one developer (me) and a lot of competing priorities! It's fairly safe to say this won't change for a bit, but I still want UI elements de-coupled from filter logic haha.

 

If you want to update the wording and the code a bit to use the classes I set up that'd be awesome!

  • Like 1

Share this post


Link to post
Share on other sites

There's something weird going on...

 

At first everything looked great, and I could filter on `q-complete`, but then I clicked on "Show starred only", and the new class disappeared :(

Am I missing something here? Or do I have a caching problem? Or did you forget to add it to all required places?

 

q-complete.thumb.png.614d8646176363998031c14c89d0badf.png

 

q-complete_gone.thumb.png.2bb515560ec10a847017adebff93e7c9.png

Share this post


Link to post
Share on other sites

Fixed that! I'd like to disclose that I didn't write this code originally, and there are at least 4 places this functionality is duplicated and I really have no idea which of those is actually implemented for any particular use case. Sooo. This case is fixed haha.

Share this post


Link to post
Share on other sites

Changed the wording (It's "Include completed" now)

Changed to looking at the newly added class (Thanks a lot ahartzog!)

Published on OpenUserJS (https://openuserjs.org/scripts/tlundberg/Nerd_Fitness_completed_quests_toggler)

 

So, now, if you already have a user script manager installed it should now be really easy to install my script!

 

Again, here's the link to install it :)

 

https://openuserjs.org/scripts/tlundberg/Nerd_Fitness_completed_quests_toggler

Share this post


Link to post
Share on other sites

Created an animated GIF of how the userscript works :) First time I make a gif screencast. Hope you get a feeling of why this would be useful.

 

 

nf_completed_toggler.thumb.gif.319514986a0e3ab56daf39acecc4bc8f.gif

 

Any suggestions on how to improve the gif?

Share this post


Link to post
Share on other sites

Updated the script to hide a quest as soon as you click "Mark Completed!" if you have unchecked "Include completed". Previously a refresh was needed to hide the newly completed quest.

 

Your user script manager will probably auto-update the script, but if not, or you want it ASAP, the latest update is available here: https://openuserjs.org/scripts/tlundberg/Nerd_Fitness_completed_quests_toggler

Share this post


Link to post
Share on other sites

And a gif to show off the new behavior :)

 

First I have the "Include completed" checkbox checked. So when I complete a quest you can see that it gets the green checkmark.

 

Then I uncheck the "Include completed" checkbox. So now, when I complete a quest it will instantly be removed, as the list will not include completed quests. But as soon as I check "Include completed" it will of course appear again

 

nf_instant_toggle.gif.ca6f35fd638defc654a3cb34923cb096.gif

 

(gif created with https://www.screentogif.com/)

Share this post


Link to post
Share on other sites

Working on being able to show only completed, only those you have not completed, and all quests.

 

This is what I currently have:

 

image.png.a89ef5aa986fdc39d397b1302ed74be9.png

 

Are those good words? Is it clear enough how it works?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.