Skip to content

Instantly share code, notes, and snippets.

@bl4ckscor3
Created August 20, 2020 15:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bl4ckscor3/01765b1be353b54a10ff890b8c89e5ae to your computer and use it in GitHub Desktop.
Save bl4ckscor3/01765b1be353b54a10ff890b8c89e5ae to your computer and use it in GitHub Desktop.
EyeWire Colorful Leaderboard Script Feedback
21:10 <amy> allo allo!
21:10 <bl4ckscor3> o7
21:10 <amy> hey cool new script @bl4ckscor3!
21:10 <annkri> hei
21:11 <bl4ckscor3> still working on the leaderboard one @amy ^^ thanks!
21:11 <annkri> new script?
21:12 <bl4ckscor3> i started working on showing rank colors on the leaderboard today https://i.imgur.com/y0nQk7V.png @annkri
21:12 <bl4ckscor3> still a prototype
21:13 <amy> fun!
21:13 <annkri> cool are you using the chosen chat colour or somethng else?
21:14 <bl4ckscor3> currently, the colors are hardcoded, but i want to show the chat colors, yes
21:15 <annkri> what do you mean by hardcoded, don´t tell me you need to choose the colour manually for each promoted player?
21:16 <bl4ckscor3> it's not that bad! currently i get the highest rank of the player and then assign the color based on that rank
21:17 <bl4ckscor3> and for the sake of the screenshot, i colored me and lara in mentor/mod colors manually
21:17 <bl4ckscor3> but if you were to run the script, we would show as red/aqua
21:18 <bl4ckscor3> as i said, still very much work in progress
21:19 <annkri> ah, i think showing hightest rank is actually better than using chat colours, since that tell more than what each player choose
21:19 <amy> it definitely enriches the information shown on the leaderboard
21:21 <annkri> i know it was talk about leaderboard colours some time ago and then it was a sugestion to have a small icon showing of mentor and mod status
21:22 <bl4ckscor3> hm that is a good idea
21:22 <bl4ckscor3> show color of the highest rank, then show icons based on mod/mentor status
21:22 <annkri> yes
21:22 <amy> In the past we've definitely had difficulty coming up with icons that were immediately and clearly evident for Eyewire ranks
21:23 <amy> Also for the Eyewire Scyrthe actions - that's actually why the Scythe Toolbar still has letters in stead of icons
21:24 <amy> I think celia actually mocked something up a long time ago for the scythebar but it was never implemented
21:24 <bl4ckscor3> hmm
21:25 <bl4ckscor3> yeah, the apple icon from the achievement for mentor is maybe not that clear what it means ^^
21:27 <annkri> perhaps a book as mentor and a speech bubble for mod? since our current rank badge ix not very intuitive
21:27 <devonjones> it's a bit US-centric, the apple, maybe :) we have a tradition here around students giving apples to teachers
21:28 <bl4ckscor3> annkri: good idea
21:28 <bl4ckscor3> devon: today i learned :P
21:28 <devonjones> haha, now you know, yes!
21:29 <bl4ckscor3> i think i can use these emojis as a mockup for now 📖 🗨
21:29 <bl4ckscor3> downside: they're tiny
21:30 <amy> I personally think colors alone would be sufficient
21:30 <annkri> i can understand the apple with newton and the falling apple
21:30 <amy> But i guess it doesn't hurt to try
21:31 <bl4ckscor3> i currently have no way of knowing what chat color a user has - i can only get the roles and then assign predefined colors based on that
21:31 <bl4ckscor3> so Nseraf would be red instead of gray for instance
21:32 <annkri> @amy difficault to show both primary rank and mentor/mod rank with colour
21:32 <amy> yeah that's a good point
21:32 <bl4ckscor3> or should he be purple or pink because he's a mod and mentor? that's the question i would need to answer if i don't have the chat color
21:32 <amy> How many icons could a user theoretically have?
21:32 <amy> Mentor, Mod, Scout, Scythe, Mystic
21:33 <bl4ckscor3> yea, that would be 2 icons for mentor and mod
21:33 <bl4ckscor3> and color for the highest of scout scythe mystic
21:33 <bl4ckscor3> if a mystic were to set his color to scout (cough) then the chat-based color in the leaderboard would need to adapt as well
21:33 <bl4ckscor3> that could confuse people
21:33 <annkri> and i guess you should also add in admin
21:33 <bl4ckscor3> yup, already done
21:35 <annkri> how do the speech bubble look in leaderboard? ix it visible it did look very dark in chat
21:36 <amy> You could also use colored dots like during competitions
21:37 <bl4ckscor3> good point
21:37 <bl4ckscor3> @annkri - https://i.imgur.com/t5ONfM6.png
21:37 <annkri> :)
21:39 <amy> cool!
21:39 <bl4ckscor3> if i want to show the mod icon, i would have to increase the leaderboard width https://i.imgur.com/cgvYs9D.png
21:39 <amy> We could make simple little icons like stars etc and potentially add different colors for rank
21:40 <AzureJay> I adore all this (been lurking) but what I really, really want is a custom color picker for seed, trace, and explore trace. The slider just does not quite have options I like. xD
21:41 <AzureJay> I definitely agree with icon use though - since colors are not always accessible
21:41 <annkri> !colour
21:41 <nkem_test> Yellow: Admin | Purple: Moderator | Turquoise: Scout/Scythe | Lavender: Mentor
21:41 <nkem_test> Type /team in chat to see colors (teams) that are available for you.
21:42 <bl4ckscor3> the next question arises: where to place the icons? semantically, they do not make sense infront of the rank number, but they also make the leaderboard look rough when placed
21:42 <bl4ckscor3> infront of the name
21:42 <amy> @AzureJay that would be fun
21:43 <AzureJay> 🔎 for scout, ✂ for scythe? xD
21:43 <bl4ckscor3> the scissor xD
21:43 <bl4ckscor3> the question is about moderator/mentor icons though
21:43 <annkri> so like a purple star for mod a lavender star for mentor and a dual purple/lavender for both
21:43 <AzureJay> Scissor, Scythe, same difference
21:43 <bl4ckscor3> as those roles have a different color, but aren't gameplay roles like scout scythe mystic
21:44 <bl4ckscor3> annkri: those colors could look too similar for some folks
21:44 <bl4ckscor3> it's fine in chat i think, but when it comes to tiny icons...
21:44 <annkri> to show of who to ask if needing a mod or mentor
21:45 <AzureJay> Best to use design versus color, so... lesse...
21:45 <AzureJay> ⭐ mod ☀ mentor 🌟both
21:45 <AzureJay> Not *quite* the best choices because the two stars look the same
21:45 <annkri> yeah i agree, but weird to use other colours if it should be colour coded
21:46 <annkri> how would it be if you add the icon after the flag?
21:48 <AzureJay> More space to put multiple icons, but some people's names get truncated because they're too long for it
21:48 <AzureJay> so any flags, etc wouldn't show.
21:48 <bl4ckscor3> or less of the name which is less ideal
21:48 <AzureJay> Oh oh wait maybe
21:48 <bl4ckscor3> but it would make more sense to do so
21:49 <bl4ckscor3> buuut i could always increase the width of the leaderboard
21:49 <AzureJay> ❕ mod ❔ mentor ⁉ modmentor
21:49 <bl4ckscor3> hehe
21:49 <AzureJay> Or maybe make an optional expandable leaderboard?
21:50 <AzureJay> Like a left arrow that extends the panel out further so you can see more details
21:50 <bl4ckscor3> i think that would be too complicated for simple (user-facing wise) features
21:51 <annkri> that is a easy way to do it !? ?!
21:51 <AzureJay> You could also possibly just condense the spacing in the table itself to fit in the icons since there's a good margin for each column
21:52 <AzureJay> It makes sense to me - mods you report problems to (!), mentors you ask questions (?), modmentors are "what even are you people?!" (joking on the last one)
21:53 <bl4ckscor3> good that i am not a mod&mentor
21:53 <bl4ckscor3> 😜
21:54 <AzureJay> UI design is hard though no joke, I applaud you for working on making improvements!
21:54 <bl4ckscor3> thanks!
21:55 <bl4ckscor3> i try my best
22:02 <annkri> 💻 for both
22:15 <bl4ckscor3> all right, i toyed around a bit and this is how it can look with two icons. as you can see, i widened the leaderboard a bit. https://i.imgur.com/KJaiGrk.png
22:15 <bl4ckscor3> and that's without colors because i manually edited the html instead of doing it through script
22:15 <bl4ckscor3> so just view it with colors ;)
22:18 <AzureJay> That looks nice
22:18 <AzureJay> (I was lost looking at the CSS to see if I could figure out the color picker. I can't. xD)
22:25 <annkri> i think the first look was better with icon before name, it got a bit invisible behind the flag
22:26 <bl4ckscor3> see, the thing is, it doesn't make sense as the number and the icon have 0 to do together. having the icons behind the name makes the user think that the icons belong to the user
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment