Atomic Game

Atomic Game using Knockout.js

by homer2

HTML

Grid Size: <input type="number" data-bind="textInput: gridSize" step="2"> <button data-bind="click: createBoard">Reset</button>
<br>
<span data-bind="css: board().turn" style="color:whitesmoke; font-size:x-large"><span data-bind="text:board().turn"></span>'s turn</span><br/>

<table id="board" data-bind="foreach: board().rows" border="1">
  <tr data-bind="foreach: cols">
    <td data-bind="attr: {'class': owner}, click: $root.board().addValue">
      <span data-bind="text:owner" style="display:none;"></span><span data-bind="text: display"></span>
    </td>
  </tr>
</table>

CSS

td {
  cursor: pointer;
  color: white;
  font-size: xx-large;
  width: 40px;
  height: 40px;
  border: 1px solid grey;
  text-align: center;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

JavaScript

function cell(r, c) {
  var self = this;
  self.r = r;
  self.c = c;
  self.value = ko.observable(0);
  self.owner = ko.observable("");
  self.neighbors = [];

  this.display = ko.computed(function() {
    return self.value() > 0 ? self.value().toString() : " ";
  }, this);


  self.addValue = function(owner) {
    setTimeout(function() {
      self.value(self.value() + 1);
      if (owner) self.owner(owner);

      if (self.value() > self.neighbors.length) {
        alert("my value: " + self.value() + " is more than my neighbor's length: " + self.neighbors.length);
      } else if (self.value() == self.neighbors.length) {
        self.value(0);
        self.owner("");
        for (var n = 0; n < self.neighbors.length; n++) {
          self.neighbors[n].addValue(owner);
        }
      }
    }, 000);
  }
}

function board(initalSize) {
  var self = this;
  self.gridSize = initalSize;
  self.rows = [];

  self.turn = ko.observable("red");

  self.addValue = function(cell, event) {
    var taken = false;

    setTimeout(function() {
      if (cell.owner() == "") {
        for (var n = 0; n < cell.neighbors.length; n++) {
          if (cell.neighbors[n].owner() == self.turn()) {
            cell.addValue(self.turn());
            taken = true;
            break;
          }
        }
      } else if (cell.owner() == self.turn()) {
        cell.addValue(self.turn());
        taken = true;
      }
      if (taken) {
        if (self.turn() == "red")
          self.turn("blue");
        else
          self.turn("red");
      }
    }, 000);
  }

  for (var r = 0; r < self.gridSize; r++) {
    self.rows[r] = {};
    self.rows[r].cols = [];
    for (var c = 0; c < self.gridSize; c++) {
      self.rows[r].cols[c] = new cell(r, c);
    }
  }

  for (var r = 0; r < self.gridSize; r++) {
    for (var c = 0; c < self.gridSize; c++) {
      if (r < self.gridSize - 1) {
        //add the cell directly below
        self.rows[r].cols[c].neighbors.push(self.rows[r + 1].cols[c]);
 ...