Implementing Takuzu (part three)

After part one (generating the board) and part two (hooking up some basic mouse handlers), it’s time to refine the interactions. Specifically last time I noted that, as written, it was possible to change the preset 0s and 1s of the initial game, and it was all too simple to select the 0s and 1s as we navigate around the board. Let’s fix those issues right now.

For the first one, I’m going to declare another class for the initial preset cells: fixedcell. Since this means I’ll be altering the CSS, I’ll also make the board have a san-serif font and make the text bold so that we can see the state of play more easily. Here’s the new CSS:

* {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}

#board {width:960px;margin:10px auto;font-family:Calibri,Helvetica,sans-serif;}
#board table {margin:0 auto;}
#board td {border:1px solid #dfdfdf;padding:5px;text-align:center;width:15px;cursor:pointer;font-weight:bold;}
.cell {color:#008800;background-color:white;}
.fixedcell {color:black;background-color:#f8fefe;}

I’ve also altered the text color of the cells I can change to a green. The preset cells have black as the color of the text and a slightly off-white color to help them stand out a little more.

There is therefore a slight change to the code that sets up the table: we have to check to see if the cell can be modified by the user as part of play (class is cell) or is fixed because it’s a preset (class is fixedcell). Here’s the change to the drawBoard() function:

if (boardData[index] === ' ') {
  classValue = "cell";
} 
else {
  classValue = "fixedcell";
}
g.start("td", {id: idValue, class: classValue});
g.addText(boardData[index]);

That is essentially all we have to do to solve the first problem. Since the preset values are not in table cells of class cell, the existing code will not attach handlers to them.

Now, for the other issue I had to do some Googling. As it happens, StackOverflow had the answer I was looking for (I used the top answer). Love it when that happens. Mind you, since it mentions jQuery 1.8, I changed the page to load that version (I was still using jQuery 1.7.1).

You can now play this particular game to its conclusion here.

What’s left? Well, quite a bit really. First off, there’s a need for the board to signal that the player’s solution, once complete, is, in fact, correct, and second, how to generate games at will. That last one is going to be very interesting and will probably make use of some code I’ll write for the former, so that’s what we’ll do next time.

  Loading links to posts on similar topics...