Ultimate Tic Tac Toe

Idea by Math With Bad Drawings... Implemented by Nikhil Baliga

by Nikhil Baliga

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- <div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Ultimate Tic Tac Toe</a>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li id="show_home" class="active menu_item"><a href="#">Game</a></li>
      <li id="show_options" class="menu_item"><a href="#">Options</a></li>
      <li id="show_help" class="menu_item"><a href="#">Help</a></li>
    </ul>
  </div>
</div> -->

<div class="container-fluid">

  <h2>Ultimate Tic Tac Toe</h2>
  <h4 class="author">
  By Nikhil Baliga
  </h4>

  <div class="btn_toolbar">
    <div class="span12">
      <button class="btn btn-primary btn-large" id="btn_start_game">New Game</button>
    </div>
  </div>



  <div class="">
    <div class="span9">
      <div id="game_board" class="board"></div>

      <div id="options_board" class="board hide">
        <h3>Options</h3>
        <label>
          <input type="checkbox" id="victorious_board_anywhere"> If you are sent to a board that's already been won, you may go wherever you like
        </label>

        <hr>

        <button class="btn" id="save_button">Save</button>
      </div>

      <div id="rules_board" class="board hide">
        <h3>Rules</h3>
        <ol>
          <li>The board consists of 9 Tic Tac Toe boards.</li>

          <li>When the game begins, you can make your move in any square of the board</li>

          <li>However, depending on which square was selected in the previous move, the corresponding section gets highlighted. Subsequent moves have to be made in the highlighted board only.</li>

          <li>Standard Tic Tac Toe rules apply per board. Person with most number of wins - well, wins...</li>

          <li>Currently you and your friend have to play on the same machine...</li>
        </ol>

        <p>
          <a...

CSS

#game_board {
	  margin: 0 auto;
	}
	
	.big_cell {
	  height: 180px;
	  width: 180px;
	  border: solid 5px #444;
	}
	
	.small_cell {
	  height: 60px;
	  width: 60px;
	  border: solid 1px #444;
	  text-align: center;
	  font-size: 24px;
	}
	
	.active_table {
	  border: solid 5px green !important;
	  background: #cdeb8e !important;
	  /* Old browsers */
	  background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%) !important;
	  /* FF3.6+ */
	  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cdeb8e), color-stop(100%, #a5c956)) !important;
	  /* Chrome,Safari4+ */
	  background: -webkit-linear-gradient(top, #cdeb8e 0%, #a5c956 100%) !important;
	  /* Chrome10+,Safari5.1+ */
	  background: -o-linear-gradient(top, #cdeb8e 0%, #a5c956 100%) !important;
	  /* Opera 11.10+ */
	  background: -ms-linear-gradient(top, #cdeb8e 0%, #a5c956 100%) !important;
	  /* IE10+ */
	  background: linear-gradient(to bottom, #cdeb8e 0%, #a5c956 100%) !important;
	  /* W3C */
	  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956', GradientType=0) !important;
	  /* IE6-9 */
	}
	
	.won_o {
	  background: #BBFFFF;
	}
	
	.won_x {
	  background: #FFB8A2;
	}
	
	.done_o {
	  color: blue;
	}
	
	.done_x {
	  color: red;
	}
	
	#current_symbol {
	  font-size: 36px;
	  text-align: center;
	}
	
	#score_board {
	  font-size: 36px;
	}

.btn_toolbar {
  margin-bottom: 20px;
}

.author {
  color: #000;
  font-weight: 300;
}

JavaScript

/*
This code was written a long time ago and in a tearing hurry
So don't judge me ;-)
Please feel free to work on improvements
https://github.com/baliganikhil/tictactoe
*/

var cur_symbol = "O";
var cur_table = "";
var total_x = 0;
var total_o = 0;

var victorious_board_anywhere = false;

function init_victorious_board_anywhere_rule() {
  if ($('#victorious_board_anywhere').is(':checked')) {
    victorious_board_anywhere = true;
  } else {
    victorious_board_anywhere = false;
  }
}

function init_board() {

  cur_symbol = "O";
  cur_table = "";
  total_x = 0;
  total_o = 0;

  var html = '<table id="big_board">';

  for (var i = 0; i < 3; i++) {
    html += '<tr>';

    for (var j = 0; j < 3; j++) {
      html += '<td class="big_cell" data-cell="' + ((3 * i) + j) + '">';

      html += '<table class="small_table" data-cell="' + ((3 * i) + j) + '" id="small_table_' + ((3 * i) + j) + '">';

      for (var k = 0; k < 3; k++) {
        html += '<tr>';

        for (var l = 0; l < 3; l++) {
          html += '<td data-cell="' + ((3 * k) + l) + '" class="small_cell" data-value="' + ((3 * k) + l) + '"></td>'
        }

        html += '</tr>';
      }

      html += '</table>';

      html += '</td>';
    }

    html += '</tr>';
  }

  html += '</table>';

  $('#game_board').html(html);
  update_side_panel();

}

init_board();



$('#game_board').on('click', '.small_cell', function() {

  var this_table = $(this).closest('.small_table').data('cell');

  if (cur_table !== "" && this_table !== cur_table) {
    return;
  }

  if ($(this).data('value') == 'X' || $(this).data('value') == 'O') {
    return;
  }

  var this_cell = $(this).data('cell');

  $(this).data('value', cur_symbol);
  $(this).html(cur_symbol);

  /**/
  // Check if victorious?

  // This block can perhaps be very elegantly written
  // I just wanted to get it over with :) Would be glad if someone can fix this

  if ($(this).closest('table').data('victorious') == undefined) {
    all_tds =...