One of the first board games that we played over and over was Settlers of Catan. We got a lot of enjoyment out of that game, but the more we played it, the more frustrated we got with how random the game could be. We almost always played with the random board, but the initial city spots could vary so much in quality that picking first could be enough to win the game. But even more frustrating than the randomness of the board was the randomness of the dice. It seemed like some games we would roll three sixes for every eight. In others we would have long streaks of fours or tens that could win the game for the player on those tiles.

To solve this problem with a game that we otherwise still enjoyed, we created a fair board builder and fair die roller. The board builder would try to make a board that was balanced for all the players and the fair die roller would try to even out the distribution of rolls within a single game. The first version of this program was in Java and Java Web Start. As Java and especially Java Web Start fell out of favor and I learned C#, I re-wrote the application in C#. The C# app was great, but could be a pain to install at friends houses before a game. At my last job I learned Flash, so I re-wrote the fair die roller and board builder in Flash. Now that Flash is falling out of favor, I have re-written the fair die roller again in javascript.

Like the other re-writes before it, this version has been a learning experience. I have programmed in javascript before, but for this application I decided to learn and use jQuery. jQuery has some great features and there is a lot to like, but I would have to say that this version of the fair die roller has taken me longer to build than any of the others except the original in Java. I am not an expert at HTML or CSS and I spent a lot of time fighting with the layout of the page.

You can check out my latest fair die roller here. You can also compare it to the previous versions in flash, c#, and java.

I’d like to eventually add the fair board builder. But for that I will probably try to learn the HTML5 canvas. We also don’t play Settlers as much as we used to, so that isn’t a very high priority right now.

The key to making this work is to put the table into a containing div and to set a hard coded height for the table and header. The containing div needs to have a specific height and an overflow of hidden. The table body needs to have a height that is smaller than the containing div by the height of the header. It needs to have a display of block, overflow of auto and vertical-align of middle:

.tableContainer {
  height: 600px;
  overflow: hidden;
}
.tableContainer table tbody {
  height: 575px;
  display: block;
  overflow: auto;
  vertical-align: middle;
}

This works, but now the table header columns aren’t lined up with the table body columns. This is because the scroll bar width is taken from the body and not from the header. I didn’t find a perfect solution to this problem. First you want to move the header over by the width of the scroll bar. Then you have to adjust the width of each th to be a fraction less than the width of each td. The fraction depends on how many columns you have. I had 10 columns, so this was the code I ended up with:

.tableContainer table thead tr {
  display: block;
  position: relative;
  margin-right: 10px;
}.tableContainer td {
  width: 100px;
}
.tableContainer th {
  width: 98px;
}

Then, I prettied things up a bit with some borders and ended up with the following css:

.tableContainer {
  height: 600px;
  margin-top: 10px;
  margin-left: 15px;
  overflow: hidden;
}
.tableContainer table {
  border: 1px solid #555;
  border-collapse: separate;
  border-spacing: 0px;
  border-width: 0px;
}
.tableContainer table thead tr {
  display: block;
  position: relative;
  margin-right: 10px;
}

.tableContainer table tbody {
  height: 575px;
  display: block;
  overflow: auto;
  vertical-align: middle;
}
.tableContainer td {
  width: 100px;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #DDD;
  border-top: 1px solid #DDD;
}
.tableContainer th {
  width: 98px;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #555;
}

I also wanted the table to scroll to the bottom on startup. That was done with one line of javascript:

$(#tableBody).scrollTop(9999);

The final results looks like this:

The website: weissoft.com/practicelog looked pretty bad and may have been discouraging people from downloading the software. The new look is better:

I am not a web designer, so it is still lacking some polish. I used some of the css from the wordpress theme that this blog is using and the free icon that the application itself uses.

The web site allows you to login and see/edit your log. It is not as full featured as the windows application, but it provides a way for the users of the android app to access their log on a large screen and, more importantly, to export their data. Here is what the site looks like today:

This site uses the same color scheme as the main practice log page and jquery-ui buttons and dialogs:

If you haven’t used jQuery before, it is very, very nice. I strongly recommend it. There is a bit of a learning curve and it makes some callback functions look uglier. But the benefits are huge. Making that dialog would have taken me hours without jQuery. Here is the code to do the login dialog:

<div id=”login_dialog” title=”Login”>
<form name=”login”>
<table>
<tr><td>Username:</td><td><input type=”text” name=”username”/></td></tr>
<tr><td>Password:</td><td><input type=”password” name=”password”/></td></tr>
</table>
</form>
</div>

  $('#login_dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "Ok": function() {
        // Call the php to login
      $.post("../login.php", {
        username: document.login.username.value,
        password: document.login.password.value
        }, function(xml) {
...
        });
      },
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });

And that includes the some of the code that actually logs the user in. jQuery also makes it easy to operate on a set of page elements or XML. The most difficult part of developing the web site was getting the table body to scroll without the table header scrolling too. I’ll make a separate blog entry for how I solved that problem since it took me a while to figure out. The majority of my time was spent picking colors and tweaking layout. Somehow html layout is very non-intuitive to me and it takes me a long time to get things looking the way I want. The export button prompts the user to download a .csv file of their data. This works by setting the location.href to a server side php. The php script sets the Content-Disposition header to the file and then writes the CSV data to the output stream. Here are the interesting lines of code:

  header("Content-Disposition: attachment; filename=practiceData.csv");
  $outStr = fopen("php://output", "w");
  while ( $row = mysql_fetch_assoc($result) )
  {
    $data = array($row['day'], $row['minutes'], $row['note']);
    fputcsv($outStr, $data);
  }
  fclose($outStr);

I also made a new version of the Android app. Navigating between days was non-intuitive and slow. The only way to change the displayed day was to swipe left/right on the main screen. That method still works, but I added a couple of buttons to make it more obvious. I also added the capability to click on a particular day displayed in the week view to change to that day. You can now swipe left/right on the week view to go back/forward 10 weeks and the days with notes are highlighted. I made the note section expand to fill the available space on larger devices and added a menu option that takes you to the website so that you can export your data.

Updating the android app was quick and mostly painless. I added the new .apk to the marketplace and was able to download the update to my phone after 10 minutes or so.