Merge pull request #4 from Gadgetoid/master

Maintain dom elements between draw updates
AJFaraday · Aug 17, 2016 · 2e510c9 · 2e510c9
2 parents 0955786 + 81ebd0a
commit 2e510c9
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/lib/classes/board.js b/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

diff --git a/lib/classes/tile.js b/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,32 @@ 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())
+    .removeClass(function(index, css) {
+      return (css.match (/\btile_\S+/g) || []).join(' ');
+    })
+    .toggleClass('tile_city', this.city);
+
     if (this.player && this.value > 0) {
-      cell.addClass('tile_' + this.player.css_class);
+      this.cell.addClass('tile_' + this.player.css_class);
     }
-    return cell;
   };
 
   this.display_character = function () {
     if (!this.player || this.value <= 0) {
       return ''
     } else if (this.city) {
-      return 'C'
+      return 'C<small>' + this.value + '</small>';
     } else {
       return this.value;
     }

diff --git a/style/grid_game.css b/style/grid_game.css
@@ -21,6 +21,8 @@
   font-size: 28px;
   text-align: center;
   padding: 0px;
+  vertical-align: middle;
+  line-height: 30px;
 }
 
 .player_panel .btn.north {
@@ -81,7 +83,7 @@ table.game_board tr.row td.tile {
   height: 32px;
   width: 32px;
   text-align: center;
-  border: 1px black solid;
+  border: 1px darkgrey solid;
   font-size: 28px;
 }
 
@@ -105,6 +107,10 @@ table.game_board tr.row td.tile_yellow {
   color: orangered;
 }
 
+table.game_board tr.row td.tile_city small {
+  font-size:10px;
+}
+
 
 .footer {
   float:left;