JSFiddle - React, Tailwind, and code Playground

by alexb

CSS

.grid {
  border-collapse: collapse;
  display: table;
}

.row {
  display: table-row;
}

.cell {
  border: 1px solid black;
  display: table-cell;
  height: 24px;
  width: 24px;
}

.cell[data-value="0"] {
  background: black;
}

.cell[data-value="1"] {
  background: white;
}

JavaScript

class Grid {
	constructor(width, height, initialValue) {
  	this.width = width;
    this.height = height;
    this.cells = new Array(height);
    for (let i = 0; i < height; i++) {
    	this.cells[i] = new Array(width).fill(initialValue);
    }
  }
  
  get(x, y) {
  	return this.cells[y][x];
  }
  
  set(x, y, value) {
  	this.cells[y][x] = value;
  }
}

function el(tagName, attrs) {
	const el = document.createElement(tagName);
  for (const prop in attrs) {
  	el.setAttribute(prop, attrs[prop]);
  }
  return el;
}

function render(grid) {
	const w = grid.width;
	const h = grid.height;
  const table = el('div', { class: 'grid' });
	for (let y = 0; y < h; y++) {
    const row = el('div', { class: 'row' })
  	for (let x = 0; x < w; x++) {
    	const cell = el('div', { class: 'cell' });
      cell.dataset.value = grid.get(x, y);
      row.appendChild(cell);
    }
    table.appendChild(row);
  }
  return table;
}

function generateMaze(grid, x1, y1, x2, y2) {
  const stack = [[x1, y1]];
  while (stack.length > 0) {
  	const [x, y] = stack.pop();
  }
}

const grid = new Grid(20, 20, 0);
generateMaze(grid, 1, 0, 18, 19);
document.body.appendChild(render(grid));