Improved card value display flexibility

[Justin Burdett]

From livrem on reddit
http://www.reddit.com/r/tabletopgamedesign/comments/1r3678/playtest_an_open_source_script_i_made_that_makes/cdjv21w

I think it would be very powerful if you just picked all values given for each card and created a div for it, with the name of the value as id. Then the user can create whatever card layout possible just by setting the CSS for that id, and would not be limited to some small hardcoded HTML template. This would probably result in even less code than your current solution AND be more useful, so big win (except for rewriting 5 lines of code).

[Aaron H]

+1 for not using table tags for the grid display. Tables are tricky to print and vary in rendering across browsers.
Using a "div" (or if you're HTML5 savvy, an "article" tag) and then using some basic dimensional styles in the base CSS, could be preferable.

Something like:

article.card {
  display: block;
  width: 250px;
  height: 300px;
  border: 1px dotted #aaa;
  float: left;
}
<article class="card">card details </article>

Wrap these in a block that will wrap them consistently:

div.page {
  width: 756px; /* 250 x 3 + 2px on each side for each card for the border */
  height: 906px; /* ditto */
}
<div id="page">
  <article class="card">...</article>
  <article class="card">...</article>
 <article class="card">...</article>
  ... (9 total) ...
</div>

The exact width/height values would need to be tweaked to print best on standard printer paper -- but it should be doable, at least. The upside is that you could hten have different card styles for different layouts.

article.halfsize.card {
  height: 150px;
}
<article class="halfsize card">card details</article>

[Justin Burdett]

Great input, thanks. I'll try to find some time to make the recommended changes. Pull requests are accepted too :)

[Aaron H]

I love Ruby and GameDesign -- I think this idea is great. I plan on contributing soon, just haven't had time to dig into it yet. :)