TappedOut.js
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>
becomes:
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.
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.
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.
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.
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.
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.
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.
As someone with a prominent Magic tumblr, this is great.
May 19, 2014 10:36 p.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.
Yeah, no ! that's just cosmetic. haha. I should change that.
May 20, 2014 11:59 a.m.
TheAnnihilator says... #21
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.
TheAnnihilator says... #22
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.
TheAnnihilator its not available yet in general on the site. Its for external blogs for now.
May 20, 2014 1:05 p.m.
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.
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.
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.
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.
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.
So here's my blog page's code:
And here's a post showing that it doesn't work:
http://justmagicthings.tumblr.com/private/86378129546/tumblr_n5wpcjlc6C1rknjon
May 21, 2014 12:28 a.m.
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.
That does not work, no amount of post editing does anything.
May 21, 2014 8:22 a.m.
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"> </div>'
May 21, 2014 8:41 a.m.
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.
Ah, there we go, it finally works after I add the " ", 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.
Apparently tumblr clears out empty tags in the html. So, that's something to remember.
May 21, 2014 8:54 a.m.
Tumblr is really finicky with HTML (and always has been), I wish they'd work on that.
May 21, 2014 8:56 a.m.
This post appears to work fine for web browsers:
http://justmagicthings.tumblr.com/post/86402052266/test-post
May 21, 2014 9:09 a.m.
Just disabled the mobile theme on my blog, should work now.
May 21, 2014 9:14 a.m.
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.
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.
Well, I added it to the div and it did nothing I can notice.
May 21, 2014 10:48 a.m.
<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.
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.