Live Or Die

Variation on Conway's Game of Life

by jasonwilczak

HTML

<div id="main">
    <h1>Live Or Die</h1>
    <div id="gameSetup">
        <div class="row">
            <div class="column">
                <label for="ddlBoardType">Board Type: </label>
                <select id="ddlBoardType">
                    <option value="1">Line</option>
                    <option value="2">Frog</option>
                </select>
            </div>
            <div class="column">
                <label>
                    <input id="cbxJustWatchGame" type="checkbox"/>
                    <span class="buttonCheckbox">Just Watch Game</span>
                </label>
            </div>
            <div class="column">
                <a href="#" id="btnPlay">Play</a>
            </div>
        </div>
    </div>
    <div class="row" id="gamePlay">        
        <div class="column" id="gameArea"></div>    
    </div>
</div>
<div id="debugWindow"></div>

CSS

#debugWindow {
display: none;
    width:300px;
    height:300px;
    border: 1px solid black;
    overflow: auto;
}
.disabledGrid {
 pointer-events:none;   
}

label input[type="checkbox"] {
    display: none;
}

label > input[type="checkbox"] + span {
    display: block;
    background-color: white;
}

label > input[type="checkbox"]:checked + span {
    background-color: green;
}

#gameArea label > input[type="checkbox"] + span {
    width: 20px;
    height: 20px;
    background-color: yellow;
}

#gameArea label > input[type="checkbox"]:checked + span {
    background-color: black;
}

.buttonCheckbox {
    width: 120px;
    height: 20px;
    border: 1px solid black;
}

.row {
   margin:1px; 
    text-align: center;
    width: 100%;
}
.column {
 display: inline-block;
    margin: 5px;
    text-align: center;
}

JavaScript

(function() {
    var _ = self.LiveOrDie = function(settings) {        
        this.settings = settings;
        this.log = function(message){
          if(!this.settings.debug) { return;}
              var debugWindow = document.getElementById('debugWindow');
              debugWindow.style.display = 'block';
              debugWindow.innerHTML += message + "<br/>";
        };  
     this.log('initialize start');
      this.boardSetup = this.settings.boardSetup;
      this.container =  document.getElementById(this.settings.containerId)
      || document; 
        this.currentBoardView = [];
        this.modifiedBoardView = [];
        this.newBoardView = [];
        this.turnsLeft = this.settings.numberOfTurns;
        this.turnSpeed = this.settings.turnSpeed;
        this.log('initialize done');
    }
    _.prototype = {
        start: function(){
            this.log('starting');
            this.buildBoard();
            this.modifiedBoardView = helpers.cloneArray(this.currentBoardView);
            this.newBoardView = helpers.cloneArray(this.currentBoardView);
            this.play(this.settings.playMode);
        },
        buildBoard: function() {
            this.log('building board');
            this.container.innerHTML = '';
            var fragment = document.createDocumentFragment();
            var gameTable = document.createElement('div');
            this.log('rows: ' + this.boardSetup.rows + ', cols: ' + this.boardSetup.cells);
            for(var y=0;y<this.boardSetup.rows;y++)
            {
                this.log('building row: ' + y);
                this.currentBoardView[y]=[];
                var row = document.createElement('div');
                row.className = "row";
                for(var x=0;x<this.boardSetup.cells;x++)
                {
                    this.log('building cell: ' + x);
                    var cell = document.createElement('td');
                    cell.className = "column";
                    var...