const can = document.getElementById('app')
const ctx = can.getContext('2d')

const CELL_SIZE = 24

const W = 36
const H = 18

can.width = W * CELL_SIZE
can.height = H * CELL_SIZE

let grid = [
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
  [0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1],
  [1,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [1,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
]

function render() {
  ctx.strokeStyle = 'rgb(128, 128, 128)'

  for (let y = 0 ; y < H ; y++) {
    for (let x = 0 ; x < W ; x++) {
      let cell = grid[y][x]

      if (cell == 0)
        ctx.fillStyle = 'rgb(255, 255, 255)'
      else
        ctx.fillStyle = 'rgb(0, 0, 0)'

      ctx.fillRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE)
      ctx.strokeRect(x * CELL_SIZE, y * CELL_SIZE, CELL_SIZE, CELL_SIZE)
    }
  }
}

function getCellValue(x, y) {
  if (typeof grid[y] != 'undefined')
    if (typeof grid[y][x] != 'undefined')
      return grid[y][x]

  return 0
}

function getNbNeighborsAlive(x, y) {
  return getCellValue(x - 1 , y - 1) +
    getCellValue(x, y - 1) +
    getCellValue(x + 1, y - 1) +
    getCellValue(x - 1, y) +
    getCellValue(x + 1, y) +
    getCellValue(x - 1, y + 1) +
    getCellValue(x, y + 1) +
    getCellValue(x + 1, y + 1)
}

function update() {
  render()

  let newGrid = []

  for (let y = 0 ; y < H ; y++) {
    newGrid[y] = []

    for (let x = 0 ; x < W ; x++) {
      let cell = grid[y][x]
      let nbNeighborsAlive = getNbNeighborsAlive(x, y)

      if (cell == 0 && nbNeighborsAlive == 3)
        newGrid[y][x] = 1
      else if (cell == 1 && (nbNeighborsAlive == 2 || nbNeighborsAlive == 3))
        newGrid[y][x] = 1
      else
        newGrid[y][x] = 0
    }
  }

  grid = newGrid

  setTimeout(update, 100)
}

update()