Flood Paint

by origineil

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
Currently with a board 19x19 ...there are some issues with orphaned nodes.
<table> 
    <tr>
        <td>
    <div>
     Choose a template
   <select data-bind="options: preDefinedTestCases,
                   optionsText: 'label',
                   optionsValue: 'contents',
                   value:test"></select>
</div>
<div>
<span style='vertical-align:top'>or paste one (newlines expected):</span>
    <textarea data-bind="value: board, valueUpdate: 'afterkeydown'"></textarea>
</div>
            <div data-bind='if: $root.complete'>
                Despite it's appearance <br/>
                (sometimes the value displayed isn't the actual value)
                <br/>
                the board is COMPLETE!
            </div>
            <div data-bind='ifnot: $root.complete'>
Select Move:
            <div data-bind='foreach: availableMoves'>
           
            <input type="radio" name="move" data-bind="checked: $root.move, checkedValue: $data"></input>
           <label data-bind='text: $data'></label>
            </div>
            </div>
   </td>
   <td>
       <div id='QueryArea' data-bind="with: board">
           Row
           <input data-bind='value: $root.debug.x'></input>
           Column
           <input data-bind='value: $root.debug.y'></input>
           <button type='button' data-bind="click: $root.debug.log">Debug</button>
       </div>
       
   </td>
 </tr>
</table>
        
<div data-bind="with: board">
    <span data-bind='text: $root.boardSize'></span>
   
    <div data-bind="if: $root.moveHistory().length > 0">
        <span data-bind="text: ko.toJSON($root.moveHistory)"></span>
    </div>
    
    <table  data-bind="foreach: {data: $root.boardDisplay, as: 'row'}">
        
        <tr data-bind="foreach: {data: row, as: 'columnObj'}">
            <td>
                <label data-bind='text: value, attr: {"class" :...

CSS

.regularNode{
     margin: 10px;
}
.paintedNode{
margin: 10px;
color: blue;
 border: solid 1px blue    
}
.centerNode{
 
  margin:10px;
  padding: 1px;
  color: red;
  border: solid 1px red
   
}

JavaScript

var example = function(){
return "4 5 1 1 2 2 1 6 2 6 3 4 2 3 2 3 1 6 3\n"+
"4 2 6 3 4 4 5 6 4 4 5 3 3 3 3 5 4 3 4\n"+
"2 3 5 2 2 5 5 1 2 6 2 6 6 2 1 6 6 1 2\n"+
"4 6 5 5 5 5 4 1 6 6 3 2 6 4 2 6 3 6 6\n"+
"1 6 4 4 4 4 6 4 2 5 5 3 2 2 4 1 5 2 5\n"+
"1 6 2 1 5 1 6 4 4 1 5 1 3 4 5 2 3 4 1\n"+
"3 3 5 3 2 2 2 4 2 1 6 6 6 6 1 4 5 2 5\n"+
"1 6 1 3 2 4 1 3 3 4 6 5 1 5 5 3 4 3 3\n"+
"4 4 1 5 5 1 4 6 3 3 4 5 5 6 1 6 2 6 4\n"+
"1 4 2 5 6 5 5 3 2 5 5 5 3 6 1 4 4 6 6\n"+
"4 6 6 2 6 6 2 4 2 6 1 5 6 2 3 3 4 3 6\n"+
"6 1 3 6 3 5 5 3 6 1 3 4 4 5 1 2 6 4 3\n"+
"2 6 1 3 2 4 2 6 1 1 5 2 6 6 6 6 3 3 3\n"+
"3 4 5 4 6 6 3 3 4 1 1 6 4 5 1 3 4 1 2\n"+
"4 2 6 4 1 5 3 6 4 3 4 5 4 2 1 1 4 1 1\n"+
"4 2 4 1 5 2 2 3 6 6 6 5 2 5 4 5 4 5 1\n"+
"5 6 2 3 4 6 5 4 1 3 2 3 2 1 3 6 2 2 4\n"+
"6 5 4 1 3 2 2 1 1 1 6 1 2 6 2 5 6 4 5\n"+
"5 1 1 4 2 6 2 5 6 1 3 3 4 1 6 1 2 1 2"
}

var grouping = function(){
return '55155\n'+
'56215\n'+
'56315\n'+
'56215\n'+
'55155\n';
}

var NeighborHandler = function(board){
    var self = this;
    self.board = board;
    
    var _assign = function(property, obj){
        //console.log("Assigning " + property)
        var _node = function(rowIndex, columnIndex){
        var row = board[rowIndex]
        return row ? row[columnIndex] : row;  
        }
        
        var neighbor;
        switch(property){
            case "N": 
                var neighbor = _node(obj.row-1, obj.column)
                if(neighbor){
                    obj.neighbors[property] = neighbor;
                    neighbor.neighbors.S = obj
                }
                 break;
            case "W":
                var neighbor = _node(obj.row, obj.column -1)
                if(neighbor){
                    obj.neighbors[property] = neighbor;
                    neighbor.neighbors.E = obj
                }
                break;
        }
    }
    
    self.assignNeighbors = function(obj){
        _assign("N", obj)
        _assign("W", obj)
    }

     var _key = function(obj){
       ...