Ultimate Tic-Tac-Toe Challenge

This is my attempt at the Ultimate Tic-Tac-Toe code challenge.

It uses jQuery to build out the game grid and find the states of all the "buttons" (actually `s) when calculating whether or not someone has won an individual board or the entire game.

This version follows the recommendation that a filled board that is a draw does not count for either player.

``


Ultimate Tic-Tac-Toe


body { text-align: center; }
div { display: inline-block; }
.grid { padding: 5px; border: solid 1px #300; }
.current-grid { background-color: #ff0; }
.button { background-color: #eee; width: 25px; height: 25px; margin: 5px;
text-align: center; vertical-align: middle; font-size: 25px; }
.X-won { background-color: #cfc; }
.O-won { background-color: #cdf; }
.no-win { background-color: #ccc; }
.X-selected { color: #080; }
.O-selected { color: #008; }
#game { position: absolute; left: 0px; right: 0px; }


');
for (var i = 0; i ');
if (i % 3 == 2) {
$('#game').append('');
}
for (var j = 0; j ');
if (j % 3 == 2) {
$('#grid' + i).append('');
}
}
}
$('.button').click(function() {
var parent = $(this).parent();
var me = isXTurn ? 'X' : 'O';

if ($(this).is('.X-selected, .O-selected') || parent.is('.X-won, .O-won') ||
(currentGrid >= 0 && parent.attr('id') != 'grid' + currentGrid)) {
return;
}
$(this).addClass(me + '-selected').html(me);
if (checkForWin($(this), ('.' + me + '-selected'))) {
parent.addClass(me + '-won');
if (checkForWin(parent, ('.' + me + '-won'))) {
window.alert(me + ' wo

From a once over:

• I would use the HTML 5 tags, they are cleaner and more appropriate:

`



Your code validates perfectly as HTML5

• The UI setup probably deserves it's own function

• There is no separation of concerns ( more specifically logic and UI ) in your click handler, also you are using the UI as your data model, which is iffy.






• I love how short resetGame` is

• A lot of the numbers are hard coded, you seem so close to do any number of boards, if you were to polish this code further, I would suggest you look into that

For fun I made it run on jsbin : http://jsbin.com/rohe/3

StackExchange Code Review Q#41038, answer score: 10