Implemented marquee border

Author: basicallydan

src/GameOfLife.js

@@ -16,6 +16,44 @@ class GameOfLife extends Component {
       populatedCells: (props.startingPopulation || []).map((cell) => {
         return cell[0] + (cell[1] * props.width);
       }),
+      border: this.props.border,
+    };
+  }
+
+  cellIsPopulated(populatedCells, x, y) {
+    let cellIndex = x + (y * this.state.width);
+    return populatedCells.includes(cellIndex);
+  }
+
+  getAdjacentCellIndices(x, y) {
+    let left = x - 1;
+    let right = x + 1;
+    if (this.state.border === 'marquee') {
+      if (left < 0) {
+        left = this.state.width - 1;
+      }
+      if (right >= this.state.width) {
+        right = 0;
+      }
+    } else {
+      right = Math.min(this.state.width - 1, x + 1);
+    }
+
+    let top = y - 1;
+    let bottom = y + 1;
+    if (this.state.border === 'marquee') {
+      if (bottom >= this.state.height) {
+        bottom = 0;
+      }
+      if (top < 0) {
+        top = this.state.height - 1;
+      }
+    } else {
+      bottom = Math.min(this.state.height - 1, y + 1);
+    }
+
+    return {
+      top, right, bottom, left,
     };
   }
 
@@ -25,8 +63,14 @@ class GameOfLife extends Component {
       for (let y = 0; y < this.state.height; y++) {
         const currentCellIndex = x + (y * this.state.width);
         let numberOfPopulatedNeighbours = 0;
-        for (let nx = x - 1; nx <= Math.min(this.state.width - 1, x + 1); nx++) {
-          for (let ny = y - 1; ny <= Math.min(this.state.height - 1, y + 1); ny++) {
+        // let cellRight = x + 1 >= this.state.width ? 0 : x + 1;
+        // let cellBelow = y + 1 >= this.state.height ? 0 : y + 1;
+        const { top, right, bottom, left } = this.getAdjacentCellIndices(x, y);
+        let xOptions = x === right ? [left, x] : [left, x, right];
+        let yOptions = y === bottom ? [top, y] : [top, y, bottom];
+
+        for (let nx of xOptions) {
+          for (let ny of yOptions) {
             let cellIndex = nx + (ny * this.state.width);
             let populated = populatedCells.includes(cellIndex);
             if ((nx !== x || ny !== y) && populated) {
@@ -132,11 +176,14 @@ GameOfLife.propTypes = {
   height: PropTypes.number,
   generation: PropTypes.number,
   start: PropTypes.bool,
+  gridBehaviour: PropTypes.bool,
+  border: PropTypes.oneOf(['hard', 'marquee']),
 }
 
 GameOfLife.defaultProps = {
   generation: 0,
   start: false,
+  border: 'hard',
 }
 
 export default GameOfLife;

src/GameOfLife.test.js

@@ -125,3 +125,37 @@ describe('when the population is specified in props and then stepped', () => {
   });
 });
 
+describe('when grid behaviour is marquee', () => {
+  let game, wrapper;
+
+  beforeAll(() => {
+    const div = document.createElement('div');
+    const population = [[0, 0], [0, 1], [0, 2],];
+    game = <GameOfLife width={4} height={4} startingPopulation={population} border='marquee' />;
+    wrapper = mount(game);
+  });
+
+  it('should put a triomino line which is cut off to the other side on generation increment', () => {
+    /*
+    xooo     oooo
+    xooo --> xxox
+    xooo     oooo
+    oooo     oooo
+    */
+    let allCells = wrapper.find(Cell);
+    allCells.should.have.lengthOf(16);
+    allCells.at(0).props().populated.should.equal(true);
+    allCells.at(4).props().populated.should.equal(true);
+    allCells.at(8).props().populated.should.equal(true);
+    wrapper.setProps({ generation: 1 });
+    wrapper.update();
+    allCells = wrapper.find(Cell);
+    allCells.should.have.lengthOf(16);
+    allCells.at(4).props().populated.should.equal(true);
+    allCells.at(5).props().populated.should.equal(true);
+    allCells.at(7).props().populated.should.equal(true);
+
+    const deadCells = wrapper.findWhere(cell => cell.props().populated === false);
+    deadCells.should.have.lengthOf(13);
+  });
+});

src/index.js

@@ -4,8 +4,14 @@ import './index.css';
 import GameOfLife from './GameOfLife';
 import * as serviceWorker from './serviceWorker';
 
-const gliderPopulation = [[1, 0],[2, 1],[0, 2],[1, 2],[2, 2],]
-ReactDOM.render(<GameOfLife width={25} height={25} startingPopulation={gliderPopulation} start={true} />, document.getElementById('root'));
+const gliderPopulation = [[1, 0], [2, 1], [0, 2], [1, 2], [2, 2],]
+ReactDOM.render(<GameOfLife
+    width={10}
+    height={10}
+    startingPopulation={gliderPopulation}
+    start={true}
+    border='marquee'
+/>, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.