advent: display leaderboards as a colour image

[katrinafyi]

uses pillow to render leaderboards into an image with a style very close to the website. inline display in the discord app is a bit smaller than i would've liked but alas. it should be much better on mobile at least.

text format is kept alongside the image since it's probably nice to have. maybe this should be behind an argument, but there are already so many.

also added url to website into the reply message

implementation has some weaknesses:

• unicode multi-character sequences and emoji aren't rendered
• relies very much on a monospace font for alignment
• it is also a touch slow, maybe
• the resolution on mobile is sometimes bad, depending on how discord scales the thumbnail

let me know if this is something you want.

OR, just inline the leaderboard into the message. it's only done as an attachment because slack let you preview text files on desktop and mobile.

[andrewj-brown]

I hate to well-actually, because this is uber cool, but it would probably be a better UX experience to have the boards be an embed with fancy discord interactions (e.g. buttons to scroll down or scroll up)?

I'll let others chime in on what they want AoC to "be" into the future though, because I don't see anyone jumping to write alternatives either - it would be silly to veto a good change just to make way for a "better" version that might not ever get written.

[katrinafyi]

A Discord embed is probably a good way to modernise it. I don't think full pagination is good (way too many clicks), but maybe something like showing the first 20 rows in an image, then a button to expand to the full image. From testing, this is comfortable to read on Discord and mobile.

I do like the images (I just think they're neat) so I'd like to make them work, but also open to feedback

[katrinafyi]

yippee

[TheOnlyMrCat]

I love it! It looks and feels a lot better than the old text format, especially on mobile.

My comments here are not blocking; just minor interaction points.

[katrinafyi]

changes in 344c0f6. re fonts, i wanted to have the most supported glyphs. i think this is import important than matching the website exactly. some comparisons: noto ibm sourcecodepro.

noto mono is the most extensive, but it does break the consistent monospace width sometimes. luckliy for us, this is not a problem since the only non-ascii characters are at the far right of each line (discord display names, example), so everything stays aligned.

[katrinafyi]

after 1fd826d:

                                  Total Star Total Star            Local 
      Star 1   Star 2  Both Stars   1 Time     2 Time   Total Time Order 
  1)  0:01:10  0:01:00    0:02:10    0:01:10    0:01:00    0:02:10   316 katrinafyi
  2)  0:01:25  0:01:52    0:03:17    0:01:25    0:01:52    0:03:17   314 Cameron Aavik
  3)  0:02:19  0:00:58    0:03:17    0:02:19    0:00:58    0:03:17   312 bradleysigma
  4)  0:03:05  0:01:33    0:04:38    0:03:05    0:01:33    0:04:38   310 b-paul

this can be separated from the bigger pr if you want

[TheOnlyMrCat]

re fonts, i wanted to have the most supported glyphs. i think this is import important than matching the website exactly.

Ah, yeah. I agree, that is more important. Shame pillow doesn't support fallback fonts

[TheOnlyMrCat]

The time changes probably should be in a separate PR, but they do work so it's all good. I'll merge sometime tomorrow if nobody has further comments.

[TheOnlyMrCat]

👍