Colorful Leaderboard - A script to color player names in the leaderboard

I’ve been at work creating another EyeWire script to enhance the user experience. This time, I decided to enrich the leaderboard by coloring the players’ names in the color of their highest rank. One reason for doing so is outlined by a5hm0r:

Before creating this topic, I asked for feedback on a prototype of the script in chat with the following image:

This was an early draft of how the leaderboard could look, and since then a lot of discussion and feedback has happened in the chat.
As you can see in the screenshot, larabadara19 and bl4ckscor3 are colored in moderator/mentor colors. My first plan was to color the users in the same color that would appear if they write a chat message. This is also the color that a user, should they have multiple ranks, can decide on via the /team command. Initial feedback asked for dynamic updating of the color on the leaderboard once a user changes their chat color:

This posed an issue on the development side of mine, as I couldn’t find a way to hook into that. There may be a way to do so, however after further feedback, which I will outline in the next paragraphs, the idea for chat-based colors was scrapped.
Very early on, it was also suggested to add a legend to to the leaderboard to explain the different colors and symbols:

I do not have any objections to this and feel this is a must-have if any of this is implemented. So there will be a legend, probably in the form of a questionmark symbol in the top left of the leaderboard.

A major talking point following that was to have the color be the color of the user’s highest rank (Player < Scout < Scythe < Mystic < Admin), and additionally indicate users as a moderator and/or mentor on the leaderboard using icons. This immediately solves the /team problem I explained above. There are about 100 chat messages in a discussion relating to this, which I have posted in a secret gist here. I will be compiling the key aspects in the following.

The first idea was to use the emojis :open_book: and :left_speech_bubble: to indicate moderators and mentors respectively. Over the course of the discussion, many different emojis were proposed (:mag_right: and :scissors:; :star:, :sunny:, and :star2: for both; :grey_exclamation:, :grey_question:, and :interrobang: for both; :computer: for both) however I personally found the book and the speech bubble the best of those all - even if it’s just for the sake of prototyping. It is important to note, that this can still be changed and is by no means final. Other proposed ideas were to use colored dots like for competitions, or specially crafted images - however they may look.

The next problem that arose was: “Where should these icons be placed?” Ideas included having them show up at the very front of the leaderboard like this…

…or behind players’ flags, like this:

(Sidenote: The coloring is left out in these images as I did not have the script running at the time.)

The first idea seems very clean at first glance, however the biggest problem with this is, that there is no connection between the icon and the rank number - they belong to two completely different contexts. Think of it like placing the country flag in front of the rank number. I do not think that this solution is great.
The second thought looks much better compared to the first one. The country’s flag and the moderator/mentor icons regarding the specific user are bundled in one place, and look easily accessible. However, objections from users in chat came up, saying they thought these icons got invisible behind the flag. Thus, a third option was thrown into the room:
Have a seperate column for the moderator/mentor icons. This may be ok, however in my opinion the columns should be related to the leaderboard, and whether a user is a moderator and /or mentor is not related to the leaderboard, but to the user. Again, think of it like the flag had a seperate column just to show a user’s country. For the sake of completeness, here are two images of how such an extra column could look (created using an image editor to save time):


If I had to choose between these two options, I would choose the second one.

This has been everything I have received feedback-wise so far. What follows, is a short summary including some additional information about the script:
This script will edit the leaderboard to show each player’s name in the color of their highest rank, and display some icons based on whether they are a moderator and/or mentor. This includes the leaderboard after submitting a cube. The main problems are what icons to display, and where to display them. Currently, to make it possible for the moderator/mentor icons to display properly regardless of the user’s name, the leaderboard’s width is increased by a bit. The same is done to the cubes panel, should the Cubes addon be enabled (this is only applicable to players ranked scout and above). The leaderboard will not be edited when a competition is displayed, meaning no rank colors, and no moderator/mentor icons (see screenshot at the bottom of the post) in order to preserve information about the competition.

Short, technical information (you can skip this if you are not intereseted in how the script works)

Every time the leaderboard is updated, an API query is sent to get the information displayed on the leaderboard. Based on that, each player is queried regarding their assigned ranks. These are then saved so that the next time the leaderboard updates, the information about the players is already there and no additional API queries have to be made.


And now I am asking for your thoughts and opinions. If you have any feedback, please do not hesitate to reply to this topic. I am open to everything. Thank you very much!

To try out the script, please visit this GitHub page and follow the installation instructions: https://github.com/bl4ckscor3/ColorfulLeaderboard

And lastly, two images showing the script in action at the time of posting this:

The script does nothing when a competition is displayed as to not obscure information about said competition:

5 Likes

A loose idea: how about using italics and underline for mods and mentors instead of icons? Not sure, if it would look good, but it could save you from the need to add another column and resize the leaderboard.

I was also thinking about moving the flags to the left of the usernames, to make them more even. I think, your script would be the best place for that, if anybody would like to implement it.

2 Likes

I associate mentor with a cube, thus ikon like https://i.imgur.com/5T9qQJn.png or a simple square.
For moderator i like best the ! (it’s mostly a warning).
To not stay with ikons, you could use mod and men.
As to the position: I prefer a separate column. You perhaps could position it behind the points-column and make it possible to blend that mod/men column out?

1 Like

I’m not sure how I feel about the cube. Not every user may associate mentor with a cube and that could lead to confusion. As for using text: It may be ok, however it does look odd to since the title of the column is mod/mentor. The exclamation mark is my next favorite after the book.
Here are both ideas, created in an image editor:

Images

Cube/Exclamation mark: https://i.imgur.com/tXYtKhq.png
mod/men: https://i.imgur.com/N4vaKFT.png
and an alternative with mentor written out: https://i.imgur.com/b8tyqLz.png

Text styling could actually work, good idea. My only concern is, that italic text may be hard to distinguish from normal text for some people. Then again, the mentor role is more important to users for asking for help and thus should stand out more, which it does when being underlined. Here’s today’s leaderboard with text-styling applied and the flags infront of the names. Because there wasn’t a user on the leaderboard who is a moderator and not a mentor, I made dereks’ name show up in italic to show how it would look for such a user.

I will definitely keep the flag reordering as a setting.

1 Like

your second pic (mod/med) looks very good to me :slight_smile: It doesn’t look weird at all.
I prefer that from Kruks version with underlining and italics. Then you would definitely need an explanation-window.

1 Like

Thank you all for your feedback so far! I used the modified script privately the couple days and I feel like the italic/underlined player names are great. I’ve now changed the script to mark moderators/mentors in italic/underlined respectively, and added the flag reordering that KrzysztofKruk suggested. Furthermore, I added a setting for each feature so people can turn them on or off as they please:


Additionally, I also added a setting with which the leaderboard can be hidden from the overview by default. This setting is turned off initially.

From my side, this script looks good to go (EDIT: after I added the information about what the colors and markings mean), but because it lacks testing I have not set the version to 1.0 yet. Of course, testing and feedback in any shape or form is still very much appreciated!

And here’s the help window for the colors and markings:

I think I’ve now added everything that was requested.

1 Like

Maybe you could also at a little green dot infront of the players names,to show who’s online?
dunno how hard that would be tho.

But awesome job non the less!!

Edit: or maybe green = active, yellow = online but not active last 5/10 minutes, red offline.
I know the chat has an !online command, maybe you could use that to provide yoou with the info needed.

The main concern with this that I see is that I would have to periodically check everyone on the leaderboard in order to keep the information up to date, which could strain servers if a lot of people have that feature active.

i see i am a bit late into the conversation, but have you tried the version with flag - name - rank icon?
to me underlined/italic is very difficault to understand.
i like the book, and think the bubble and ! both are good symbols for mods but better with bubble if after name since a name probably can have ! in it
mod/mentor written out is very easy to understand, but that would make the leaderboard much bigger?

also have you talked with the admins about the possibility to get it offical when tested? one thing is to have it for the players that install scripts, but we do not really need it so much as a new player would

Ok, I just released a fix for the leaderboard still being incorrectly colored during a competition after refreshing the page/returning to the overview - however it sometimes still does not work (I am guessing due to the leaderboard reloading multiple times with different values set to its data) and I don’t think I can do anything against that. At least now the name colors are correct in any case.

@annkri I would like to not add a new column to the leaderboard and would also like to not make it too much bigger to not obstruct the overview more. What exactly is difficult for you to understand? If you don’t know what underlined/italic means, there’s a small popup window that shows when you hover of the questionmark symbol at the top left of the leadeboard.

I have not initiated a conversation with them about getting the addon officially added, however @amy did want to add my other script to the official addons. She is also enjoying following progress on the leaderboard script and is using it herself as she told me yesterday. So I bet the admins will be in touch with me should anything need to be done on my part, or if/when the scripts get added officially.

it is mostly that it looks like very random signs, and i do not really want to have to read a manual to know what it means (will probably have to do that to know the rank colour but for a new player finding a mentor is more important than knowing the differance betwheen a scout and mystic )

for me it is almost impossible to see the differance betwheen italic/ normal and also more difficault to see the underline than a icon

but i see your point about not making it bigger than it has to be

Of course it looks “random” - there has to be something that differentiates the ranks. I could certainly try and re-add the old icons I used in the first versions of the script, and have it be an option to use those instead of the text styling, if that’s something that would help you and/or the admins would like to see.

I talked to @amy about this script for a little while yesterday, and she came up with the idea to use crests instead of colored names for distinguishing users, so that the leaderboard does not pull the focus away from the neuron. She also created the icons that I am using right now, and I think it looks very nice:

Hovering over the crests will show what role the player has and whether they are a moderator and/or mentor as well. I kept the italics/underline style for distinguishing these, and I will not bring back mod/mentor icons should the crests stay. Otherwise, the leaderboard will get too wide and obstruct too much of the screen - not everyone has a wide enough monitor to support this.
The script now also distinguishes between level 1 and level 2 players by only showing a green crest for level 2 players.

The updated script is available at https://github.com/bl4ckscor3/ColorfulLeaderboard

4 Likes

I have an idea for a script for you, if you’re interested.

I was thinking about hiding branches. It would work something like this:

  • selected a cube,
  • click a button,
  • all children of the selected cube are hidden,
  • the cube is marked to indicate, it has hidden children.

It would be per player basis - the hidden branches would be hidden only for the player that hid them. The data could be stored in localStorage so the hidden branches would stay hidden after a refresh.
There should also be buttons to unhide the hidden branch and all hidden branches in the cell.

It would be probably useful for both Scythes (when SCing a complicated, tangled cell) and Mystics to hide already traced branches for easier tracing and to not miss branches, that still need to be traced.

Not sure, how complicated it would be and how useful, but I’m leaving the idea here as a food for thought.

1 Like

i can see the usefulness of this to sc in very complicated cells, since the admins now of day are very restrictive with splitting cells we need to do a lot of sc without really seeing what we are doing. about mystic i am more unsure how usefull it would be compared to custom highlight.

Too leave it in local storage could be dangerous because we could miss growing mergers if all children are invisible. on the same reason i think perhaps it could be useful to make the branches visible again when changing cell.

Would there be a possibility of making the branches ‘transparent’ / lower opacity, so that instead of completely disappearing (as annkri mentioned this can lead to errors), they are faded but still partially visible?

Just updating to say I’ve had this on for a week by now and other than the very initial bug I ran into (and reported to you in chat/fixed re: default settings for underline/italics) it’s been going smooth. I like it. :slight_smile:

1 Like

Thank you! We’ll hopefully have this officially added in EyeWire soon. Been talking to amy about that.