array-based initialization

life.css

@@ -1,4 +1,9 @@
 
+
+body {
+    background-color:brown;
+}
+
 .cell {
     width:9px;
     height:9px;
@@ -9,6 +14,10 @@
     border:1px solid brown;
 }
 
+.occupied {
+    background-color: brown;
+}
+
 
 
 

src/main.js

@@ -1,35 +1,54 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Immutable from 'immutable';
 
 
 const Cell = React.createClass({
     render() {
-        return <div className="cell" style={{top:this.props.y, left:this.props.x}}></div>;
+        let classname = this.props.occupied ? "cell occupied" : "cell";
+        return <div className={classname} style={{top:this.props.y, left:this.props.x}}></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>
+    //    );
+    //},
     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} /> );
-            }
-        }
+        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} />;
+            });
+        }).toJS();
 
-        return (
-            <div>
-                {cells}
-            </div>
-        );
+        return <div>
+            {cells}
+        </div>;
     },
 });
 
@@ -42,9 +61,21 @@ let settings = {
     width:50,
     height:20
 };
+function generateWorld(w = 10, h = 10) {
+    let grid = [];
+    for( let i = 0; i < h; i++ ) {
+        let row = [];
+        for( let j = 0; j < w; j++ ) {
+            row.push(0);
+        }
+        grid.push(row);
+    }
+    return Immutable.fromJS(grid);
+}
+let world = generateWorld(100, 20);
 
 ReactDOM.render(
-    <Board settings={settings} />,
+    <Board settings={settings} world={world} />,
     document.getElementById('board')
 );