successful basic operation

life.css

@@ -1,7 +1,7 @@
 
 
 body {
-    background-color:brown;
+    background-color:#613318;
 }
 
 .cell {
@@ -10,12 +10,16 @@ body {
     position:absolute;
     top:50px;
     left:100px;
-    background-color:beige;
-    border:1px solid brown;
+    background-color:#404F24;
+    border:1px solid #855723;
+}
+
+.formerly {
+    background-color:#855723
 }
 
 .occupied {
-    background-color: brown;
+    background-color:#DBCA69;
 }
 
 

src/main.js

@@ -2,52 +2,61 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Immutable from 'immutable';
+import process from '../build/processor.js';
 
 
+const occupiedStates = ['', 'formerly', 'occupied'];
 const Cell = React.createClass({
     render() {
-        let classname = this.props.occupied ? "cell occupied" : "cell";
-        return <div className={classname} style={{top:this.props.y, left:this.props.x}}></div>;
+        let classname = this.props.occupied ? "cell " + occupiedStates[this.props.occupied] : "cell";
+        return <div className={classname} style={{top:this.props.y, left:this.props.x, width:this.props.size, height:this.props.size}}></div>;
     },
 });
 
 
 const Board = React.createClass({
-    //render() {
-    //    let nh = this.props.settings.height || 10,
-    //        nw = this.props.settings.width || 10,
-    //        ot = this.props.settings.offsetTop || 0,
-    //        ol = this.props.settings.offsetLeft || 0,
-    //        cells = [];
-    //    for( let i = 0; i < nh; i++ ) {
-    //        for( let j = 0; j < nw; j++ ) {
-    //            let x = (((j % nw) * 10) + ol) + 'px',
-    //                y = ((i * 10) + ot) + 'px';
-    //            cells.push( <Cell x={x} y={y} /> );
-    //        }
-    //    }
-
-    //    return (
-    //        <div>
-    //            {cells}
-    //        </div>
-    //    );
-    //},
+    getInitialState () {
+        return {
+            world: this.props.world,
+            settings: this.props.settings.board,
+            speed: this.props.settings.speed,
+            playing: false,
+        };
+    },
+    preAdvance() {
+        requestAnimationFrame(this.advance);
+    },
+    advance() {
+        if( this.state.playing ) {
+            this.setState({world: process(this.state.world)});
+        }
+        setTimeout(this.preAdvance, 1000/this.state.speed);
+    },
+    componentDidMount() {
+        this.advance();
+    },
+    togglePlay() {
+        this.setState({playing: !this.state.playing});
+    },
     render() {
-        let ot = this.props.settings.offsetTop || 0,
-            ol = this.props.settings.offsetLeft || 0;
-        let cells = this.props.world.flatMap(function (row, y) {
-            return row.map(function eachCell(cell, x) {
-                let xc = ((x * 10) + ol) + 'px',
-                    yc = ((y * 10) + ot) + 'px',
-                    occu = ( !(x%2) && !(y%2) );
-                console.log('occupied?', x, y, occu);
-                return <Cell x={xc} y={yc} occupied={occu} />;
+        let ot = this.state.settings.offsetTop || 0,
+            ol = this.state.settings.offsetLeft || 0,
+            size = this.state.settings.cellSize || 10;
+        let cells = this.state.world.flatMap(function (row, y) {
+            return row.map(function eachCell(value, x) {
+                let xc = ((x * size) + ol) + 'px',
+                    yc = ((y * size) + ot) + 'px';
+                return <Cell key={'cell'+x+'-'+y} x={xc} y={yc} size={size} occupied={value} />;
             });
         }).toJS();
 
-        return <div>
-            {cells}
+        return <div id="panel">
+            <div id="board">
+                {cells}
+            </div>
+            <div id="controls">
+                <button onClick={this.togglePlay}>{this.state.playing ? "pause" : "play"}</button>
+            </div>
         </div>;
     },
 });
@@ -56,10 +65,14 @@ const Board = React.createClass({
 
 
 let settings = {
-    offsetTop:40,
-    offsetLeft:10,
-    width:50,
-    height:20
+    board: {
+        offsetTop:40,
+        offsetLeft:10,
+        width:50,
+        height:20,
+        cellSize:10,
+    },
+    speed:5,
 };
 function generateWorld(w = 10, h = 10) {
     let grid = [];
@@ -72,7 +85,16 @@ function generateWorld(w = 10, h = 10) {
     }
     return Immutable.fromJS(grid);
 }
-let world = generateWorld(100, 20);
+function populateRandomly(state) {
+    return state.map(function rows(row) {
+        return row.map(function cols(cell) {
+            let occupied = Math.random() < 0.2,
+                value = occupied ? 2 : 0;
+            return value;
+        });
+    });
+}
+let world = populateRandomly(generateWorld(100, 20));
 
 ReactDOM.render(
     <Board settings={settings} world={world} />,

src/processor.js

@@ -1,35 +1,41 @@
 
-import Immutable from 'Immutable';
-import processCell from './rules.js';
-
+const OCCUPIED = 2,
+    PREVIOUSLY = 1,
+    EMPTY = 0;
 
 export default function process(state) {
     return state.map(function procRow(row, y) {
-        return row.map(function procCells(cell, x) {
+        return row.map(function procCells(value, x) {
             const xb = x - 1,
-                xa = x + a,
+                xa = x + 1,
                 yb = y - 1,
                 ya = y + 1;
-            return processCell([
-                [
-                    (state.get(yb).get(xb) || 0),
-                    (state.get(yb).get(x) || 0),
-                    (state.get(yb).get(xa) || 0)
-                ],
-                [
-                    (state.get(y).get(xb) || 0),
-                    (state.get(y).get(x) || 0),
-                    (state.get(y).get(xa) || 0)
-                ],
-                [
-                    (state.get(ya).get(xb) || 0),
-                    (state.get(ya).get(x) || 0),
-                    (state.get(ya).get(xa) || 0)
-                ]
-            ]);
+
+            let livingNeighbours = 0;
+            for( let i = yb; i <= ya; i++ ) {
+                if( i >= 0 && i < state.size ) {
+                    for( let j = xb; j <= xa; j++ ) {
+                        if( !(i === y && j === x) && state.get(i).get(j) === 2 ) {
+                            if( j >= 0 && j < row.size ) {
+                                livingNeighbours += 1;
+                            }
+                        }
+                    }
+                }
+            }
+
+            if( value === OCCUPIED ) {
+                if( livingNeighbours < 2 || livingNeighbours > 3 ) {
+                    return PREVIOUSLY;
+                }
+            }
+            else if( livingNeighbours === 3 ) {
+                return OCCUPIED;
+            }
+
+            return value;
         });
     });
 };
 
 
-