search

HabitRPG / habitica

A habit tracker app which treats your goals like a Role Playing Game.
https://habitica.com
Other
12.01k stars 4.1k forks source link

habitrpg-boss-button extension -- integration into HabitRPG website is desirable! #4138

Closed tjwds closed 9 years ago

tjwds commented 10 years ago

Hey all—

I made a chrome extension for my own personal use, habitrpg-boss-button which provides a toggle to hide the elements of the site that make it look like a game at first glance, allowing me to tab over to it sans fear of an awkward conversation.

Is this kosher? Should I go ahead and publish it to the Chrome Web Store (after some cosmetic modification [for free, of course]), or would you all think that this is something you'd want me (or someone else) to integrate into the site itself?

Thanks.

Alys commented 10 years ago

I think this is a great idea! I would definitely use it at work, as either an extension or in-site feature. In fact, I am quite impatient to use it now. :) I've seen enough comments from other users asking for this sort of thing to believe it would be popular. There is at least one other extension that does something similar, but I think it's more of a semi-permanent change and is harder to switch off. I LOVE the idea of a quick toggle button in the header.

Whether it's integrated into the site is something that should be discussed here, with input from at least some of the staff. I suspect the discussion might take a while so if you wanted to add it to the Chrome Web Store now, that would be FANTASTIC!

Alys commented 10 years ago

Note that if you follow the link that @tjwds provided, there's a screenshot of the button's effects.

So, regarding whether we want to integrate something like this into the site, here's some points to consider (and my opinions):

  1. Large adjustment of site appearance - are we happy with that? I personally think it's fine because it's just what some users want, but I don't have a good understanding of site branding concepts.
  2. Extra "clutter" in the navigation bar - is this a problem either now or in the future when we might need to have other buttons there too? Could be a problem, especially on small screens, but it might be useful and popular enough to be worth it.
  3. Should this be added as merely another option under Settings -> Site along with Sticky Header? Disadvantage: It would be much harder to quickly toggle the appearance. I think the quick access to the toggle button is one of the best things about this, so putting it in settings would make it less useful for me. I'd probably keep using the extension instead.
  4. Are non-gamer users going to be confused by the term "boss"? If they have never come across the concept of a boss button, they'll think it has something to do with quests. There will be repetitive questions every so often in the Tavern and we already have enough of those. :) Can the button have a different label? Perhaps the button text could toggle between "compressed" and "full" (or better words, or icons). Note that this does not apply to an extension in the Web Store. If people are installing it, they'll know what it means.
  5. Extra code and CSS complexity.
  6. Anything else?
tjwds commented 10 years ago

I'm glad you're excited about it, haha ^^ Here's what I think, point-by-point:

  1. Large adjustment of site appearance - are we happy with that? Since I've been on it, which isn't even that long, HabitRPG has seen some relatively radical makeovers; I don't think this would be too much of a shift from the overall theme of the site.
  2. Extra "clutter" in the navigation bar - is this a problem either now or in the future when we might need to have other buttons there too? I definitely think that this will be a problem—very good point. Finding the right place for the button might be tricky, that's for sure.
  3. Should this be added as merely another option under Settings -> Site along with Sticky Header? I definitely think it should be a toggle; at least that's the way that I've found it to be the most useful.
  4. Are non-gamer users going to be confused by the term "boss"? If you all do want to add this to the functionality of the site, I think the language here would still be fine if a tool-tip was added, or if an explanation was added in the initial walkthrough (and if, when pushed, Bailey gives a little heads-up to everyone).
  5. Extra code and CSS complexity. Actually, I think the code here is rather trivial; I'm personally a fan of jQuery, which makes hiding elements extremely quick.

Edit: I can try to mock-up a version built into the site, but mongo is extremely finicky on my computer and I'm in a bit of a time crunch this week, so it might take some time.

paglias commented 10 years ago

@tjwds @Alys my take on what you've pointed out:

  1. Large adjustment of site appearance - are we happy with that? I wouldn't define this a large adjustment, I mean the graphic is the same it simply hides some of the elements.
  2. Extra "clutter" in the navigation bar - is this a problem either now or in the future when we might need to have other buttons there too? This will have to be addressed, I would suggest a simple icons that acts as a notifications that the feature is active/inactive and also allow to activate it with a click
  3. Should this be added as merely another option under Settings -> Site along with Sticky Header? See point 2
  4. Are non-gamer users going to be confused by the term "boss"? When I first got the email about this issue I didn't understand that it could be something like that, so I find it a bit confusing in general
  5. Extra code and CSS complexity. We use Angular here and leave jQuery just to a few plugins not avalaible otherwise. I would go with a bunch of ng-show based on a preference in the database, if there aren't too many elements to be hidden (just the top level ones, not the children) it isn't going to change much in terms of performances.

@tjwds anyway this is really useful and if you need help coding it into the site feel free to ask.

The only things that comes to my mind is that this way the site main feature that is "gamification" will still be running behind the scened but will simply be hidden (btw, notifications are shown?) and this could be a problem in the long runif people keep using only this version of the site. Moreover most of the social features (challenges, parties, guilds, stable...) are already quite divided from the tasks part where there is just health and experience bars, rewards and the avatar.

@lemoness @lefnire @veeeeeee

tjwds commented 10 years ago

@paglias Alright, I really liked your suggestions regarding the button itself, I modified it so it looks like so in the extension (forgive the quick screengrabs):

hide!

show!

If someone wants to go in and add the angular controllers to convert from jQuery, I'd totally be down with that; I'm not really sure how I'd do that as an injection by an extension.

tjwds commented 10 years ago

Just as a brief argument, though I've worked with angular way less than jQuery, it seems to me that if jQuery is already being run with the site, using it here to show or hide elements would be quicker, more central, and take up less memory.

paglias commented 10 years ago

Angular would be my choice only if we moved it to a core feature of the website, if it remains an extension jquery is ok

2014-10-12 18:55 GMT+02:00 joe woods notifications@github.com:

Just as a brief argument, though I've worked with angular way less than jQuery, it seems to me that if jQuery is already being run with the site, using it here to show or hide elements would be quicker, more central, and take up less memory.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-58809512.

Matteo Pagliazzi - paglias.net

deilann commented 10 years ago

I like the idea of this as a feature. Not everyone can install plugins at work. I'd have the button invisible unless you turn it on with a setting, personally, and then put it in the navigation bar. On Oct 12, 2014 10:42 AM, "Matteo Pagliazzi" notifications@github.com wrote:

Angular would be my choice only if we moved it to a core feature of the website, if it remains an extension jquery is ok

2014-10-12 18:55 GMT+02:00 joe woods notifications@github.com:

Just as a brief argument, though I've worked with angular way less than jQuery, it seems to me that if jQuery is already being run with the site, using it here to show or hide elements would be quicker, more central, and take up less memory.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-58809512.

Matteo Pagliazzi - paglias.net

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-58812149.

tjwds commented 10 years ago

Alright, I'm giving up after having spent ~an hour trying (and failing) to get a local copy to work—I'm getting the same "worker disconnect" error that I was getting a while ago. I guess I don't have enough free time this week to really sort this out. :-/

If someone wants to take this over, I'll be eternally grateful. Sorry that I couldn't contribute more.

tjwds commented 10 years ago

I have, however, started more of the chore-y stuff here, with no promises that these edits will work.

paglias commented 10 years ago

If you can post the terminal output (stop the process Ctrl+c) we'll try to help you, usually it's a missing dependency Il 14/ott/2014 17:55 "joe woods" notifications@github.com ha scritto:

Alright, I'm giving up after having spent ~an hour trying (and failing) to get a local copy to work—I'm getting the same "worker disconnect" error that I was getting a while ago. I guess I don't have enough free time this week to really sort this out. :-/

If someone wants to take this over, I'll be eternally grateful. Sorry that I couldn't contribute more.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59069207.

deilann commented 10 years ago

Oh is the worker disconnect error happening when you try to start the server? Try stopping the service (for me on ubuntu its service mongodb stop) and then starting the server. On Oct 14, 2014 9:09 AM, "Matteo Pagliazzi" notifications@github.com wrote:

If you can post the terminal output (stop the process Ctrl+c) we'll try to help you, usually it's a missing dependency Il 14/ott/2014 17:55 "joe woods" notifications@github.com ha scritto:

Alright, I'm giving up after having spent ~an hour trying (and failing) to get a local copy to work—I'm getting the same "worker disconnect" error that I was getting a while ago. I guess I don't have enough free time this week to really sort this out. :-/

If someone wants to take this over, I'll be eternally grateful. Sorry that I couldn't contribute more.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59069207.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59071393.

tjwds commented 10 years ago

Stopping and restarting mongodb (which I could only do through brew?!!? I don't understand these applications in the least) didn't help. Maybe there's another thread of mongo running that I'm not seeing or something? Here's the error:

info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58443 disconnect! new worker:58450 fork

events.js:72 throw er; // Unhandled 'error' event ^ Error: bind EADDRINUSE at errnoException (net.js:904:11) at net.js:1084:30 at Object.8:1 (cluster.js:592:5) at handleResponse (cluster.js:171:41) at respond (cluster.js:192:5) at handleMessage (cluster.js:202:5) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at child_process.js:392:7 at process.handleConversion.net.Native.got (child_process.js:91:7) at process. (child_process.js:391:13) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at Pipe.channel.onread (child_process.js:343:11) info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58444 disconnect! new worker:58451 fork

tjwds commented 10 years ago

I changed the config.json to port 3001 and it's working now?!!?!!!? I fixed this by myself?!!?!!?!!?!!?!!!?!!?!!?

paglias commented 10 years ago

Mongodb is not the problem, it means that you have another process listening on port 3000 which is the default one used by HabitRPG. You can close the process using that port and try again or rename config.sample.json to config.json and change there the port used by HabitRPG, you can choose whichever you want Il 14/ott/2014 19:37 "joe woods" notifications@github.com ha scritto:

Stopping and restarting mongodb (which I could only do through brew?!!? I don't understand these applications in the least) didn't help. Maybe there's another thread of mongo running that I'm not seeing or something? Here's the error:

info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58443 disconnect! new worker:58450 fork

events.js:72 throw er; // Unhandled 'error' event ^ Error: bind EADDRINUSE at errnoException (net.js:904:11) at net.js:1084:30 at Object.8:1 (cluster.js:592:5) at handleResponse (cluster.js:171:41) at respond (cluster.js:192:5) at handleMessage (cluster.js:202:5) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at child_process.js:392:7 at process.handleConversion.net.Native.got (child_process.js:91:7) at process. (child_process.js:391:13) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at Pipe.channel.onread (child_process.js:343:11) info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58444 disconnect! new worker:58451 fork

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59085162.

paglias commented 10 years ago

It seems you already found the right way :) Il 14/ott/2014 19:43 "Matteo Pagliazzi" matteopagliazzi@gmail.com ha scritto:

Mongodb is not the problem, it means that you have another process listening on port 3000 which is the default one used by HabitRPG. You can close the process using that port and try again or rename config.sample.json to config.json and change there the port used by HabitRPG, you can choose whichever you want Il 14/ott/2014 19:37 "joe woods" notifications@github.com ha scritto:

Stopping and restarting mongodb (which I could only do through brew?!!? I don't understand these applications in the least) didn't help. Maybe there's another thread of mongo running that I'm not seeing or something? Here's the error:

info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58443 disconnect! new worker:58450 fork

events.js:72 throw er; // Unhandled 'error' event ^ Error: bind EADDRINUSE at errnoException (net.js:904:11) at net.js:1084:30 at Object.8:1 (cluster.js:592:5) at handleResponse (cluster.js:171:41) at respond (cluster.js:192:5) at handleMessage (cluster.js:202:5) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at child_process.js:392:7 at process.handleConversion.net.Native.got (child_process.js:91:7) at process. (child_process.js:391:13) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at Pipe.channel.onread (child_process.js:343:11) info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58444 disconnect! new worker:58451 fork

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59085162.

deilann commented 10 years ago

Yeah for me the issue is mongodb already using 3000 by not stopping correctly. On Oct 14, 2014 10:44 AM, "Matteo Pagliazzi" notifications@github.com wrote:

It seems you already found the right way :) Il 14/ott/2014 19:43 "Matteo Pagliazzi" matteopagliazzi@gmail.com ha scritto:

Mongodb is not the problem, it means that you have another process listening on port 3000 which is the default one used by HabitRPG. You can close the process using that port and try again or rename config.sample.json to config.json and change there the port used by HabitRPG, you can choose whichever you want Il 14/ott/2014 19:37 "joe woods" notifications@github.com ha scritto:

Stopping and restarting mongodb (which I could only do through brew?!!? I don't understand these applications in the least) didn't help. Maybe there's another thread of mongo running that I'm not seeing or something? Here's the error:

info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58443 disconnect! new worker:58450 fork

events.js:72 throw er; // Unhandled 'error' event ^ Error: bind EADDRINUSE at errnoException (net.js:904:11) at net.js:1084:30 at Object.8:1 (cluster.js:592:5) at handleResponse (cluster.js:171:41) at respond (cluster.js:192:5) at handleMessage (cluster.js:202:5) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at child_process.js:392:7 at process.handleConversion.net.Native.got (child_process.js:91:7) at process. (child_process.js:391:13) at process.EventEmitter.emit (events.js:117:20) at handleMessage (child_process.js:318:10) at Pipe.channel.onread (child_process.js:343:11) info: [Tue Oct 14 2014 13:32:13 GMT-0400 (EDT)] [master:58426] worker:58444 disconnect! new worker:58451 fork

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59085162.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59086185.

tjwds commented 10 years ago

Alright, this is way too over my head.

  1. I don't even know where these elements of a user's preferences are stored; the checkbox that I've generated is greyed out, assuming because there's no "user.preferences.bossButton" that I'm attempting to call.
  2. I don't even know how to write this function in angular; I don't think that elements can have multiple "ng-hide"s?
  3. I don't even know where to call this function from, or where the rest of the functions (say, hideHeader()) are coming from.
  4. I know next to nothing about stylus and jade—I can look at the code and parse out what it's doing, but if I wanted to, say, call a jquery function by clicking a button in the header, I don't even know what I'd even begin to search for to find out.

Sorry. :-/

tjwds commented 10 years ago

Here's what I've got so far.

Alys commented 10 years ago

@tjwds It is a big project for a programmer new to HabitRPG's code. :)

Were you still thinking of adding your extension to the Chrome Web Store? That would be a stop-gap measure until someone has time to integrate it into the site (could be a while...). We do give contributor tiers for third-party extensions and it would be a shame for your extension to go to waste!

tjwds commented 10 years ago

@Alys—added the .crx for easy installation here, feel free to direct people there for the time being.

Alys commented 10 years ago

Thank you!! I'll glance over your code and give the button a test at work for a few hours, then get back to you. :)

Alys commented 10 years ago

@tjwds I used the extension all day at work yesterday with no problems. It let me feel much more comfortable about using HabitRPG at work!

I've created a wiki page for it here: http://habitrpg.wikia.com/wiki/Boss_Button_Extension. Edit it as you wish of course. I'll post about it in the Tavern too.

If you tell me your unique User ID you will get a contributor tier for this. :)

tjwds commented 10 years ago

Wow, the wiki page looks great, thanks!

My user ID is 41777fc7-4647-4008-a2e9-3789e10e0652. Thanks again.

Alys commented 10 years ago

tier++ Thank YOU.

I'll leave this open so we can think further about integrating it into the site proper.

deilann commented 10 years ago

:+1:

tjwds commented 10 years ago

Big kudos to @crookedneighbor for improving (and making far more angular-friendly) my approach.

crookedneighbor commented 10 years ago

@alys Could we make a setting option that allows "Boss Button" (or whatever you're going to call it) to be enabled, and then that would add the "Eye" symbol to the top navbar.

Then the eye symbol would actually control the user preference for showing game-y elements or hiding them.

If the setting is turned on, and it hides something that doesn't have any descriptive text (like pets) I think it should also put in text explaining what the missing thing is. IE, "Base Wolf".

crookedneighbor commented 10 years ago

I also think it would be helpful to have a shortcut key mapped to turn it on. cmd/ctrl + b maybe?

lemoness commented 10 years ago

Quick comment a renaming option for "Boss Button" might be "Work Button" to avoid confusion with in-game bosses.

On Tue, Oct 21, 2014 at 9:22 AM, Blade Barringer notifications@github.com wrote:

I also think it would be helpful to have a shortcut key mapped to turn it on. cmd/ctrl + b maybe?

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-59955200.

crookedneighbor commented 10 years ago

Loses the reference, but I think that's a fine sacrifice to make to prevent confusion with in-game bosses.

crookedneighbor commented 9 years ago

Did anyone have thoughts about including a shortcut key to enable "Work Mode"?

Alys commented 9 years ago

Unless it was an exceptionally complicated set of keystrokes, I'd be concerned about people using it accidentally and then logging bug reports.

deilann commented 9 years ago

'greed

On Mon, Dec 1, 2014 at 5:42 PM, Alice Harris notifications@github.com wrote:

Unless it was an exceptionally complicated set of keystrokes, I'd be concerned about people using it accidentally and then logging bug reports.

— Reply to this email directly or view it on GitHub https://github.com/HabitRPG/habitrpg/issues/4138#issuecomment-65170953.

crookedneighbor commented 9 years ago

I can see that being a problem, but the whole point of a shortcut would be to activate 'work mode' quickly, in case your boss walks up to your desk unexpectedly. What if upon 'work mode' activation, a notification appeared explaining what had happened and direct the user how to turn it off?

Also, what was the consensus about checking a box in settings before the "work mode" button appears?

How about persistence? If you turn on work mode, should it persist after a page refresh, or only for that particular session?

Alys commented 9 years ago

You can't rely on users reading notifications, especially not when something completely unexpected has happened to the entire page. We'd get reports like "SOMETHING BAD HAPPENED! I saw an error appear but I didn't read it!" (where the error was the useful notification).

If the users are using the boss button to hide game elements at the moment that their boss suddenly appears, they will probably get caught, if not the first time then at some time. It's not an ideal way to use it. I see this button as being much more: "I have arrived at work. I click the button to make the page work-friendly and leave it that way all day.... I have arrived at home. I click the button again to make the page pretty." HabitRPG is all about getting your life in order. It's reasonable to assume users will use a boss button as a well-planned proactive action, not a reactive OMG-I'm-about-to-get-fired panic reaction.

The notification might even work against the users. The boss appears, they hit the shortcut, the notification lasts long enough for the boss to see it, the boss starts asking questions about why there's a "boss mode" notification on the screen. The boss sees the instructions on screen for how to turn off boss mode, uses those instructions on the user's computer, and sees the game-like avatars. Game over. :)

"a box in settings before the 'work mode' button appears" - I think that's a good idea to reduce interface clutter. I'd love to have a similar setting for preventing the audio theme button from being there (default setting is that the theme button WOULD be shown).

"How about persistence" - probably persist through refresh, for safety, although I'm not wedded to that idea. I think it's likely though that that would be the most useful alternative.

crookedneighbor commented 9 years ago

@alys, thanks for the well thought out response. You've persuaded me.

I was thinking to much about the inspiration for the button, and not enough about how Habiticans will use the button.

crookedneighbor commented 9 years ago

After discussing this further with @veeeeeee, we decided this feature was best left to the extension, as the maintenance cost for the site going forward would be large.