[Patch!] New Draw Simulator

Wow, okay, so this wasn't just a weekend job, but it's still been pretty fun to make so far. I figured I'd let you in on what I've been doing and show you what I've got so far:

New and improved draw simulator

It's about 80% complete at this point. I just put it on the remote server today to test it out on IE (since IE doesn't like running JS on the local machine), and fixed up some IE-only bugs. Still have that fast roaming hover card issue to deal with on IE.

The whole idea behind it was to implement something I was doing in my head, anyway. I would use the simulator and try to figure out how much land I could get in each of the turns and what kind of cards I could play. The problem was that it was hard to keep track of the land, turn, which spells I played, etc.

So, this new draw simulator includes additional card sections, such as a three-tiered battlefield, graveyard, exile pile, etc. It also has mulligans, turn tracking, shuffling, sorting, etc. It's not really meant to emulate every function of the MTG cards, but it at least gets you most of the way there with some mouse clicks.

I'll provide some implementation instructions and beef up the JS comments after I'm finished with the thing. (That I think I really can complete in a weekend.) In a nutshell, the whole thing was designed completely in jQuery with some extra CSS thrown in for some of the layout.

Let me know if you have any suggestions or design changes to make.

Posted 12 February 2011 at 07:19

Permalink

13 replies

Also, I wanted to point out that I started off with the image resizing (which I'm using in the demo). The cards use that small/medium/large model I was referring to in another thread.

Seeing that you're hosted on a IIS server, I was looking around for some good Windows batch resizing tools. Unfortunately, it seems like everybody wants to sell shareware for Windows (and some of them aren't well supported or any good), whereas Linux has a ton of free and very useful tools. So I went towards The GIMP (for Windows), since it's GNU. (It's my image editor of choice for work, since it's free. Been using it for years, and the Windows version is 1000x more stable than when it was 10 years ago.) You can grab it here: http://www.gimp.org/downloads/

From there, you can grab David's Batch Processor and throw it into the GIMP-2.0\lib\gimp\2.0\plug-ins directory. I then used the following settings to convert the images:

Resize tab -> Enable, Absolute, X/Y size (medium = 234 × 334, small = 80 × 111), Exact Padding
Rename tab -> Add Prefix: "../medium/" (looks weird, but it works fine), Dither = Floyd-Steinberg (not sure if that's needed)
Output tab -> JPG, Progressive, Quality = 0.75, Smoothing = 0.25, all else default

(The progressive scanning seems to work well in giving users that split-second identification of the card as it's loading, yet doesn't cost anything in size.)

Output sizes of 19 example cards :

Large / Original = 1.83 MB (1,928,709 bytes)
Medium = 490 KB (502,181 bytes)
Small = 118 KB (120,966 bytes)
Combined Small/Medium = 608 KB (623,147 bytes)

So, even with all of the small/medium images loaded up, that would use up only a third of the bandwidth as loading all of the original-sized images. A third of the bandwidth, a third of the per-GB costs, a third of the load time. Plus, the cards look better with proper dithering.

Posted 12 February 2011 at 07:30

Permalink

WOW.

I'm speechless, this is absolutely fantastic, this must've taken you hours! I will look into resizing the images tomorrow (or at least get my more arty better half to do it for me). :P

Loving the progress, I was never in a million years expecting this, keep me posted! :)

Posted 12 February 2011 at 21:39

Permalink

Looks awesome Sineswiper - will look at sorting the images out soon :)

Ian

Posted 15 February 2011 at 22:58

Permalink

Still here. Just had a busy week last week, so I didn't get a chance to dive into it much. Finishing up some stuff and bug testing. Should have it ready in a few days.

Posted 21 February 2011 at 22:59

Permalink

This is really well done, I'm honestly impressed. I like the transparent images for the on-hover, nice touch.

Posted 22 February 2011 at 01:31

Permalink

Looking awesome :D Can;t wait for the release, implementing it should be fun!

Ian

Posted 23 February 2011 at 19:36

Permalink

Only a month or so after this original post but I'm nearly done resizing the images :p

Also the demo site seems to be down? :( I was going to use the transparent hover over on a rejigged Draw Sim (using thumbnails).. can you get the JS over to me Sineswiper?

Cheers

Posted 10 March 2011 at 09:58

Permalink

Really? It's up for me. Maybe it's an IE bug I need to fix. Or, was the server down?

And I haven't forgotten about this. I just have a life counter to finish up and cookies, and I'll call it done for now. (I have a "wishlist" at the top, but I don't want to scope creep myself to infinity, either.)

Posted 10 March 2011 at 12:41

Permalink

Hi SineSwiper - I can't actually connect, it just times out. Can't even access http://www.resonatorsoft.org/ :(

Maybe something to do with the fact I'm in the UK?

Cheers

Posted 10 March 2011 at 12:44

Permalink

Aye, same for me (though we are on the same IP at the moment :p), odd. :(

Posted 10 March 2011 at 12:46

Permalink

OMG this is awesome! Thanks for taking the time to do this!!!

Posted 16 March 2011 at 22:33

Permalink

Sorry for the delay on this. This is more or less finished. See if you can test it from the site:

http://www.resonatorsoft.org/deckdemo/DrawSimulator.aspx.html

Here's the different parts that would need to be installed:

jQuery.js - Just grab the latest version of jQuery, or use the version I've included.
DrawSimulator.aspx.html - This will need to be added into the DrawSimulator.aspx code. There are HTML comments of "NEW EDIT" showing what is different from the existing code.
drawsimulator-new.css - Append this into drawsimulator.css, and follow the instructions on the top comments.
drawsimulator.js - This is the main simulator engine. Just need to drop this in.
dynamic-deck.js - This is an example JS of the deck variables. This would actually need to be replaced with some sort of ASPX script that generates JS code just like this, except with the deck that you're looking at.

Discussion Forum

[Patch!] New Draw Simulator

13 replies