Conway's Life Question (Given)

by Nick Iaconis

HTML

<div id="root">
  <p>Given this HTML/CSS checkerboard as a starting point, build Conway's Game of Life.</p>
  <p>Assume the grid environment will always be square. Take in a grid size, a JSON matrix of initial game state (see examples in JS for data format), and a simulation speed.</p>
  <p>Provide two buttons: one to initialize the grid and one to start/stop the simulation.</p>
  <p>If time permits, enable grid cells to be clicked while the simulation is paused to toggle life in that cell.</p>
  <p>Game rules reference:</p>
  <ul>
    <li>each cell has 8 neighbors</li>
    <li>live cells with 2 or 3 live neighbors stay alive</li>
    <li>dead cells with 3 live neighbors become alive</li>
    <li>all other cells die</li>
  </ul>
  <div class="grid">
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
  </div>
</div>

CSS

.grid {
  width: 100%;
  padding-top: 100%;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.grid > :first-child {
  margin-top: -100%;
}

.grid > * {
  flex-grow: 1;
  width: 100%;
  display: flex;
}

.grid > * > * {
  display: block;
  flex-grow: 1;
}

.grid > :nth-child(odd) > :nth-child(even),
.grid > :nth-child(even) > :nth-child(odd) {
  background-color: black;
}

JavaScript

/**
 * Sample Test Cases
 *
 * Dies on first tick: (grid 4+)
 * [[],[0,0,1],[0,1],[]]
 *
 * Becomes a square on first tick: (grid 4+)
 * [[],[0,1,1],[0,1],[]]
 *
 * Alternates between horizontal/vertical line: (grid 5+)
 * [[],[0,0,1],[0,0,1],[0,0,1],[]]
 */