Add card display layout

[AlphaKretin]

Closes #1

Code is currently a sloppy draft based on the Discord version, and contains some idiosyncrasies that are no longer relevant. It's as of yet untested.

[AlphaKretin]

Besides the code cleanliness, current status is that it's too spacey, but I'm not sure how to do line breaks as opposed to paragraph breaks - Reddit ignores single newline characters. We can use smaller headings to save space, but I'm concerned about the "description" as well.

[kevinlul]

We can use ^(superscript: content) on the properties to reduce the space they take up, and apparently that will support single newlines. We can use bolding or a higher heading number (goes up to 6) to reduce the space taken up by headings. Finally, we can separate cards in the comment with a horizontal rule.

[kevinlul]

For image embedding, we actually have the images from Yugipedia available at card["images"]. We could display the first image at card["images"][0]["image"] the same way we embed Rush Duel card images in the Discord bot.

https://github.com/DawnbrandBots/bastion-bot/blob/50b0c7471e3ca00bb453efb4176526225f99037b/src/commands/rush-duel.ts#L450

So the URL would be f"https://yugipedia.com/wiki/Special:Redirect/file/{card['images'][0]['image']}?utm_source=bastion". Careful with quotes on this.

[AlphaKretin]

Oh, I forgot Markdown could embed images (...yes, despite the fact I posted one in GitHub just there) and didn't even consider it. I'll bear that in mind. As for the rest, I'll take it into consideration for the next revision.

[kevinlul]

If we want to try for video game artworks like Discord instead of card scans, when those are available, they are found in the illustration field instead of image, and can also be guessed like with Rush Duel (-MADU-EN-VG-artwork.png).

https://github.com/DawnbrandBots/bastion-bot/blob/50b0c7471e3ca00bb453efb4176526225f99037b/src/commands/rush-duel.ts#L41-L46

[AlphaKretin]

I've implemented the suggested markdown changes, but single new-lines didn't work in the superscript properties block, and with double newlines it looks particularly bad either way.

[AlphaKretin]

There's also the question of if we want to actually include the images, given that they'll take up further vertical space, instead of being able to tuck it in the empty corner

[kevinlul]

Okay, so ![]() does not work on Reddit. New Reddit has inline images, which might be UI only and not API/PRAW supported for now in comments. What we can do is simply hyperlink to the image, and make it clear that the hyperlink is for the card scan or illustration. If a desktop user has Reddit Enhancement Suite, then this is expandable. If not, at least they know they can click on it to find the image. Mobile clients might render this in all sorts of ways I'm not too sure about. Even old and new Reddit do markdown differently...

[kevinlul]

I got the single-newline idea from one of the last replies from the bot we are trying to replace (although some of this is broken on new Reddit).

Do you have a link to the broken behaviour on new Reddit?

I can't find this one and all the comments I see have double newlines between superscripts.

[AlphaKretin]

Here's the link to that reply And for posterity, here's the one where double new lines don't work within a superscript block.

[kevinlul]

So yeha, as discussed, you have to do ^(content) \n^(content) with two trailing spaces before the newline. This is effective on both old and new Reddit. I think with this, the image link, and snake casing function and variable names for pythonic style, this should be good enough for master to work off of.

[AlphaKretin]

The space beneath the description is a bit unfortunate, but feels unavoidable since superscript is "above" the line, followed by a header which puts a break before itself.