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!

  • +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 '15 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 '15 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 '15 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 '15 at 23:01
  • Nice one, @doppelgreener! – ire_and_curses Jan 13 '15 at 20:27
  • Interesting contribution. – Tom Au Jan 30 '15 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 '15 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 '15 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 '15 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 '15 at 2:41
  • 1
    Any update for the new colorless mana symbol? – David Z Mar 5 '16 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 '16 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 '16 at 16:03
  • @DavidZ Fair idea, I think I can do that just fine. – doppelgreener Mar 5 '16 at 16:11
  • @DavidZ Somehow this slipped through the cracks for me. This userscript now works in HTTPS. – doppelgreener Dec 5 '16 at 18:53

You must log in to answer this question.

Browse other questions tagged .