TappedOut forum

Posted on May 19, 2014, 7:15 p.m. by yeaGO

http://tappedout.github.io/ has been updated to include a handy javascript widget you can use on your personal sites and blogs. Thanks to the wizardy client-side prowess of apt142 just include it and your deck lists will come alive.

Oh, and like all cool code, its in beta.

<blockquote>2x Bull Hippo3x Durkwood Boars17x Forest3x Grizzly Bears2x Lone Wolf2x Monstrous Growth2x Nature's Lore3x Norwood Archers1x Pride of Lions1x Renewing Touch1x Thorn Elemental1x Whirlwind2x Wild Ox</blockquote>


2x Bull Hippo3x Durkwood Boars17x Forest3x Grizzly Bears2x Lone Wolf2x Monstrous Growth2x Nature's Lore3x Norwood Archers1x Pride of Lions1x Renewing Touch1x Thorn Elemental1x Whirlwind2x Wild Ox

As you can see, we're still working out some kinks but it might look great on your page! Try it out and link it here!

Testing testing I'd like to thank Phyrexian Dreadnought for existing. But really Serra Angel [M10] is my jam.

Matsi883 says... #2

This is awesome, I just have one big question.

Can you go more into depth about what it does?

May 19, 2014 9:14 p.m.

Matsi883 says... #3

That makes more sense. Thank you.

May 19, 2014 9:17 p.m.

yeaGO says... #4


May 19, 2014 9:24 p.m.

Matsi883 says... #5

Can you please put the "Powered by T/O" inside the deck box. I'm getting really annoyed looking at it right now.

May 19, 2014 9:35 p.m.

Matsi883 says... #6

For that matter, put everything inside the box. It's driving me crazy.

May 19, 2014 9:36 p.m.

trentfaris242 says... #7

This looks really cool. Can't wait to play around with it. Good job.

May 19, 2014 9:51 p.m.

apt142 says... #8

Fix to clean up the css a bit is on the way. It will definitely need some tweaking. There is no telling what page this will end up on.

May 19, 2014 9:54 p.m.

apt142 says... #9

36x Relentless Rats
24x Swamp

May 19, 2014 10:04 p.m.

apt142 says... #10

You can give a try it in this thread by doing the following:

1 > 4x Card Name
2 > 4x Card Name
3 > 4x Card Name

(Remove 1, 2, and 3)

May 19, 2014 10:06 p.m.

yeaGO says... #11

preview won't indicate success

20x demonic tutor20x spirit of the night20x swamp10000x wins

p tag seems to be screwing it up. i put 3 spaces.

May 19, 2014 10:10 p.m.

apt142 says... #12

You need 2 spaces at the end of your lines. The markup parser will otherwise just cram them together

May 19, 2014 10:15 p.m.

Skyfolk says... #13

As someone with a prominent Magic tumblr, this is great.

May 19, 2014 10:36 p.m.

Warmonger says... #14

Very Nice!

May 20, 2014 5:15 a.m.

yeaGO says... #15

Skyfolk if you need help getting it working let me know

May 20, 2014 9:45 a.m.

iheartblue says... #16

This is really awesome. I can't wait to use this all over the place.

May 20, 2014 10:43 a.m.

Skyfolk says... #17

Thanks [user:yeaGO!], I'll fiddle with it a bit first.

May 20, 2014 11:58 a.m.

Skyfolk says... #18

Huh, I messed up that one lol

May 20, 2014 11:59 a.m.

yeaGO says... #19

May 20, 2014 11:59 a.m.

yeaGO says... #20

Yeah, no ! that's just cosmetic. haha. I should change that.

May 20, 2014 11:59 a.m.

How do you do this in a post? Because I tried it on a private deck of mine to try it out, and it didn't work. Here's what I typed, with the two spaces at the end and the ">" mentioned earlier:

4x Supreme Verdict
4x Detention Sphere

Am I missing a tag or something? I really want to use this.

May 20, 2014 12:43 p.m.

Oh, nevermind. Yeah, the preview needs to show it, because I was very confused. That's neat! Can you do it on deck comments?

May 20, 2014 12:44 p.m.

yeaGO says... #23

TheAnnihilator its not available yet in general on the site. Its for external blogs for now.

May 20, 2014 1:05 p.m.

4x lightning bolt

4x rift bolt

4x blazing salvo

May 20, 2014 1:33 p.m.

Cool stuff, good work guys.

May 20, 2014 1:34 p.m.

Skyfolk says... #26

So I'm wondering, where on my webpage's code should I include the script? It doesn't work if I just shove it in the middle somewhere (probably obviously).

May 20, 2014 10:59 p.m.

apt142 says... #27

It should work anywhere. It is pretty self contained.

Got a link to the page you included it on?

May 20, 2014 11:22 p.m.

yeaGO says... #28

If it's a tumblr blog you need to edit your sites code to find the head tag and just throw it in there.

May 20, 2014 11:55 p.m.

Skyfolk says... #29

Ah, there we go, got it working. It wasn't a problem with my code, it was a problem with my posting. Thanks.

May 21, 2014 12:09 a.m.

Skyfolk says... #30

And nevermind, apparently it's back to not working? It worked for a single post then stopped working all together. I really have no idea how that happened.

May 21, 2014 12:18 a.m.

Skyfolk says... #31

So here's my blog page's code:


And here's a post showing that it doesn't work:


May 21, 2014 12:28 a.m.

yeaGO says... #32

Can you make html posts?

May 21, 2014 3:45 a.m.

apt142 says... #33

You html is being escaped. So instead of actually implementing the html, the browser is displaying the characters that make it up. You'll need to edit your post as html.

May 21, 2014 6:50 a.m.

Skyfolk says... #34

That does not work, no amount of post editing does anything.

May 21, 2014 8:22 a.m.

yeaGO says... #35

Maybe the editor allows for ordinary block quotes?

May 21, 2014 8:40 a.m.

apt142 says... #36

Do this:

Edit your post

In the box where you can put the content of the post, click on the '<html>' button.

Once you do that you'll see the html of your posts. Post in your decklist div it should look like this:

'<div class="deck-list" data-stub="your-stub">&nbsp;</div>'

May 21, 2014 8:41 a.m.

yeaGO says... #37

I just pulled up the app and you can use an html editor

May 21, 2014 8:42 a.m.

apt142 says... #38

You can also use a blockquote with a deck list there too. The blockquote icon is a vertical line with an arrow next to it.

May 21, 2014 8:43 a.m.

Skyfolk says... #39

Ah, there we go, it finally works after I add the "&nbsp", for some reason that made all the difference, when the first time I did it it made no difference.

May 21, 2014 8:52 a.m.

apt142 says... #40

Apparently tumblr clears out empty tags in the html. So, that's something to remember.

May 21, 2014 8:54 a.m.

Skyfolk says... #41

Tumblr is really finicky with HTML (and always has been), I wish they'd work on that.

May 21, 2014 8:56 a.m.

Skyfolk says... #42

Thanks for your help, I appreciate it.

May 21, 2014 9:02 a.m.

yeaGO says... #43

Don't see a deck on mobile

May 21, 2014 9:05 a.m.

Skyfolk says... #44

This post appears to work fine for web browsers:


May 21, 2014 9:09 a.m.

Skyfolk says... #45

Just disabled the mobile theme on my blog, should work now.

May 21, 2014 9:14 a.m.

apt142 says... #46

The groovy thing about using the stub notation is that it pulls the deck from here. If you update your deck it'll update on your tumblr post too.

Pretty sweet, eh?

May 21, 2014 10:25 a.m.

yeaGO says... #47

Skyfolk add data-cols="2" to your div =)

May 21, 2014 10:39 a.m.

Skyfolk says... #48

Why for? And where exactly should I add it? (/me hasn't properly worked with HTML in 5 years)

May 21, 2014 10:41 a.m.

Skyfolk says... #49

Well, I added it to the div and it did nothing I can notice.

May 21, 2014 10:48 a.m.

yeaGO says... #50

<div data-cols="2" blah blah blha....>

the reason is the algorithm for splitting the columns will be smarter that way. look at it now and then look at it after, it should look better.

May 21, 2014 10:49 a.m.

Please login to comment