Changed drawing methods to preserve dom elements

lib/classes/board.js

@@ -18,11 +18,17 @@ GridGame.classes.board = function () {
   };
 
   this.build_row = function (y) {
+    var board = this;
+    var current_row = $('<tr>');
+    current_row.addClass('row');
     var row = [];
     for (var x = 0; x < GridGame.width; x++) {
-      row.push(this.build_tile(x, y))
+      var tile = this.build_tile(x, y);
+      row.push(tile)
+      current_row.append(tile.build());
     }
     this.rows.push(row);
+    GridGame.table.append(current_row);
   };
 
   this.build_tile = function (x, y) {
@@ -32,7 +38,6 @@ GridGame.classes.board = function () {
   // Drawing
 
   this.draw = function () {
-    GridGame.table.empty();
     var board = this;
     $.each(this.rows, function (row_index, row_tiles) {
       board.draw_row(row_tiles);
@@ -41,12 +46,9 @@ GridGame.classes.board = function () {
 
   this.draw_row = function (row_tiles) {
     var board = this;
-    var current_row = $('<tr>');
-    current_row.addClass('row');
     $.each(row_tiles, function (row_index, tile) {
-      current_row.append(tile.draw());
+        tile.draw();
     });
-    GridGame.table.append(current_row);
   };
 
   // Interface

lib/classes/tile.js

@@ -4,6 +4,8 @@ GridGame.classes.tile = function (x, y) {
   this.x = x;
   this.y = y;
 
+  this.cell = $('<td>');
+
   this.player = null;
   this.value = 0;
   this.city = false;
@@ -70,23 +72,28 @@ GridGame.classes.tile = function (x, y) {
     return GridGame.board.tile(x + 1, y + 1);
   };
 
+  this.build = function () {
+    this.cell.addClass('tile');
+
+    return this.cell;
+  }
+
   // Draw
 
   this.draw = function () {
-    cell = $('<td>');
-    cell.addClass('tile');
-    cell.html(this.display_character());
+    this.cell.html(this.display_character());
     if (this.player && this.value > 0) {
-      cell.addClass('tile_' + this.player.css_class);
+      this.cell.addClass('tile_' + this.player.css_class);
+    }else{
+      this.cell.removeClass('tile_red tile_blue');
     }
-    return cell;
   };
 
   this.display_character = function () {
     if (!this.player || this.value <= 0) {
       return ''
     } else if (this.city) {
-      return 'C'
+      return 'C' + this.value.toString();
     } else {
       return this.value;
     }