vyuvalv

// We must initialize the animate method in constructor
constructor() {
   super();
   this.animate = this.animate.bind(this);
}

onPlay() {
  // Run animation
  this.animate();
}

vyuvalv

this.speed = 500;
interval;

// activate the loop
onPlay() {
  this.interval = window.setInterval(() => {
      // Do Something
      this.nextGeneration();
  }, this.speed);
}

vyuvalv

// ** 
// Any live cell with fewer than two live neighbours dies, as if by underpopulation.
// Any live cell with more than three live neighbours dies, as if by overpopulation.
// Any live cell with two or three live neighbours lives on to the next generation.
// Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
// ** 

runRulesOfLife(state, neigbours) {
    if (state === 1 && neigbours < 2 || neigbours > 3) {
        return 0;

vyuvalv

// Will handle all Corners, Edges and Other Cells in Grid to find the neighbours of the the current examined cell
getNeighbourhoodCells(col, row, lastColumn, lastRow) {
    const indexStart = -1, indexEnd = 2;

    // TOP LEFT CORNER - 3 neighbours
    if (col === 0 && row === 0) {
        return {
            xStart: col,
            xEnd: indexEnd, // 2
            yStart: row,

vyuvalv

 // Edges should be handle differently as they won't have 8 cells serrounding them
 // Grid Corners will have 3 neighbours only
 // Rows and Columns Edges will have only 5 neighbours
 // All Other cells will have 8 neighbours
 // Iterate between -1 to 2 will allow to go to each neighbour cell from all sides

countNeighbours(grid, currentColumn, currentRow, lastColumn, lastRow) {
     // Getting iterators positions relative to this current column and row
     const { xStart, xEnd, yStart, yEnd } = this.getNeighbourhoodCells(currentColumn, currentRow, lastColumn, lastRow);
     // Build our neighbourhood array

vyuvalv

  // Calculate the next generation grid
    nextGeneration() {
        let nextUniverse = this.grid;
        let cells = [];
        const lastColumn = this.columns - 1, lastRow = this.rows - 1;

        for (let col = 0; col < this.columns; col++) {
            for (let row = 0; row < this.rows; row++) { 
                let state = nextUniverse[col][row];
                // check cell neighbours

vyuvalv

// Sets the height and width 
// Clear context 
// Drawing the grid on canvas 

renderGrid(grid) {
    this.context = this.getCanvasContext();
    // Sets width and Height
    this.columnWidth = this.context.width / this.columns;
    this.rowHeight = this.context.height / this.rows;

vyuvalv

import { LightningElement, track } from 'lwc';

const DEFAULT_SIZE = 3;
const DEFAULT_COLOUR = {
    ALIVE: '#bb202d',
    DEAD: '#ffffff'
}
export default class GameOfLife extends LightningElement {
 
    columns = DEFAULT_SIZE;

vyuvalv

.board-container {
    height:500px;
}
.board-canvas {
    width:100%;
    height:100%;
    border:5px solid black;
}

vyuvalv

<template>
<div class="board-container">
    <canvas class="board-canvas"></canvas>
</div>
</template>