path: root/js/life/life.js

'use strict'

const b = {
    curry: function (fn) {
        const curried = (...args) => {
            if (args.length >= fn.length)
                return fn(...args)
            else
                return (...rest) => curried(...args, ...rest)
        }
        return curried
    },
    pipe: (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value),
};

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startPauseButton = document.getElementById('startPauseButton');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const cellSize = 10;
const rows = Math.floor(canvas.height / cellSize);
const cols = Math.floor(canvas.width / cellSize);

let grid = initializeGrid();
let animationId = null;

function initializeGrid() {
  return Array.from({ length: rows }, () => Array.from({ length: cols }, () => Math.random() > 0.8 ? 1 : 0));
}

const drawCell = b.curry((ctx, cellSize, x, y, cell) => {
  ctx.fillStyle = cell ? 'black' : 'white';
  ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
  ctx.strokeStyle = 'gray';
  ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
});

const drawGrid = (ctx, cellSize, grid) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  grid.forEach((row, y) => row.forEach((cell, x) => drawCell(ctx, cellSize, x, y, cell)));
};

const getNeighbors = (grid, x, y) => [
  grid[y - 1]?.[x - 1], grid[y - 1]?.[x], grid[y - 1]?.[x + 1],
  grid[y]?.[x - 1], /* cell */ grid[y]?.[x + 1],
  grid[y + 1]?.[x - 1], grid[y + 1]?.[x], grid[y + 1]?.[x + 1]
].filter(Boolean).reduce((acc, val) => acc + val, 0);

const nextCellState = b.curry((cell, neighbors) => (cell && neighbors === 2) || neighbors === 3 ? 1 : 0);

const nextGridState = (grid) => grid.map((row, y) => row.map((cell, x) => nextCellState(cell, getNeighbors(grid, x, y))));

const animate = () => {
  drawGrid(ctx, cellSize, grid);
  grid = nextGridState(grid);
  animationId = requestAnimationFrame(animate);
};

const toggleAnimation = () => {
  if (animationId) {
    cancelAnimationFrame(animationId);
    animationId = null;
    startPauseButton.textContent = 'Start';
  } else {
    animate();
    startPauseButton.textContent = 'Pause';
  }
};

startPauseButton.addEventListener('click', toggleAnimation);

canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((event.clientX - rect.left) / cellSize);
  const y = Math.floor((event.clientY - rect.top) / cellSize);
  grid[y][x] = grid[y][x] ? 0 : 1;
  drawGrid(ctx, cellSize, grid);
});

const startGame = b.pipe(initializeGrid, (grid) => {
  drawGrid(ctx, cellSize, grid);
  return grid;
});
grid = startGame();