24

Alternate name: a userscript for makin' the fancy pictures happen

I've created a userscript that auto-converts MTG's mana and tap symbols to image form. A lot of us have wanted this for a while so I went ahead and made it exist. You can get it here on Greasyfork:

Board Games SE mana symbols

Credit: Mana symbols by micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.

What's this script do?

This script will convert the following to fancy image icons:

  • The five colors and snow mana:
    {W} {U} {B} {R} {G} {S}
  • Tap, Untap, and the Energy counter symbol from Kaladesh (E):
    {T} {Q} {E}
  • Generic mana (0 to 20), and the new C symbol for colorless mana:
    {C} {0} {1} {2} {3} {4} {5} {6} {7} {8} {9}
    {10} {11} {12} {13} {14} {15} {16} {17} {18} {19} {20}
  • X, Y and Z (the latter two just for fun):
    {X} {Y} {Z}
  • Hybrid mana:
    {W/U} {W/B} {U/B} {U/R} {B/R} {B/G} {R/G} {R/W} {G/W} {G/U}
    • Writing the letters in reverse (U/W vs W/U) is ok.
  • 2/X hybrid mana:
    {2/W} {2/U} {2/B} {2/R} {2/G}
  • Phyrexian mana, including the plain P symbol featured on Rage Extractor:
    {WP} {UP} {BP} {RP} {GP} {P}

This script kicks in on any question page for this site (main or meta) when that question is tagged . It pays attention only to uppercase mana symbols in plain text. That means it ignores “{w/u}”, and it ignores code blocks and image alt text.

This script uses one sprite sheet so you're only loading one image.

With the script, the above section looks like this:

textual symbols on the screen get replaced with their equivalent images from the actual magic cards.

Recent changes (December 5th)

  • New improved sprite sheet & symbol appearance. As of 1.11.0 this is a double-sized sprite sheet, which adds support for high-resolution displays (retina, tablets/laptops with screen zoom, etc). Credit for the sprite assets at top.
  • Now works in HTTPS.
  • When you copy text with a mana symbol, the plaintext symbol will now actually be on your clipboard. In other words, if you highlight and “go {R} burn!” you'll have go {R} burn! on your clipboard; previously you'd just get go burn!. (This feature also happens to make the script screen reader friendly, in case that helps anyone.)
  • After you perform or load an edit, the newly edited version of the post will also have mana symbols. Previously the script wouldn't prettify a newly-loaded version of a post until you refreshed.
  • Added {P} (as featured on Rage Extractor), and more accurate {C} and {E} symbols.

Please let me know here if something's broken, or if there's something this script doesn't do that it should, or if there's some way I can improve where and how mana symbols are displayed.

Enjoy!

16
  • +1 Very cool. I hope that, if the site ever leaves beta, and assuming that performance doesn't take a huge hit, that this tool may be absorbed into the site. Any chance you could post page load times on a page with 100 symbols and another page with 1000 symbols, both with and without the script, across maybe five trials (that's a total of 2 times 2 times 5 results), just to show that performance is or is not negatively affected? I could help but lazy.
    – Rainbolt
    Jan 9, 2015 at 17:04
  • Do you know enough about this kind of thing to publish it as an extension for chrome so that it's easy to install/update?
    – Cascabel
    Jan 9, 2015 at 18:39
  • @Jefromi Argh! I didn't see Chrome had done that. I'll look into extension stuff for the future but for now I'm recommending Tampermonkey.
    – doppelgreener
    Jan 9, 2015 at 22:52
  • @doppelgreener Yeah, it was a while back, to try to stop people from doing it by accident. As a bonus, when you manually install it you get a warning that it can read and change your data on all websites :(
    – Cascabel
    Jan 9, 2015 at 23:01
  • Nice one, @doppelgreener!
    – ire_and_curses
    Jan 13, 2015 at 20:27
  • Interesting contribution.
    – Tom Au
    Jan 30, 2015 at 2:23
  • You can handle post previews by defining a Markdown editor hook, and new posts by using jQuery .ajaxComplete(); see this script for improved MtG card links for an example of how to do both.
    – Ilmari Karonen
    Feb 2, 2015 at 22:46
  • @Ilmari Thanks, I'll look into these! For the latter you might be interested in answering this Stack Apps question on that precisely.
    – doppelgreener
    Feb 2, 2015 at 22:50
  • Done. I also just updated my answer on SA to describe how to deal with edit previews, since I couldn't find a good description of that anywhere yet.
    – Ilmari Karonen
    Feb 3, 2015 at 0:15
  • @IlmariKaronen I saw and voted! I will probably accept it when I put it into action too. You could also make a self answered question for that post preview thing if it may fit better in that. :)
    – doppelgreener
    Feb 3, 2015 at 2:41
  • 1
    Any update for the new colorless mana symbol?
    – David Z
    Mar 5, 2016 at 15:22
  • @DavidZ Ah yeah, thanks for reminding me. Life got pretty full-on recently, but that's done and I've got the tools I had before to add that symbol in. Will be in soon. :)
    – doppelgreener
    Mar 5, 2016 at 15:39
  • 1
    @doppelgreener While you're at it, could you update the URL patterns to include the https protocol? Unless it would cause an inappropriate level of security warnings. (I can report this elsewhere if you prefer.)
    – David Z
    Mar 5, 2016 at 16:03
  • @DavidZ Fair idea, I think I can do that just fine.
    – doppelgreener
    Mar 5, 2016 at 16:11
  • @DavidZ Somehow this slipped through the cracks for me. This userscript now works in HTTPS.
    – doppelgreener
    Dec 5, 2016 at 18:53

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .