@seabuffalo/grid-generator v1.0.0

Grid Generator

JavaScript class to generate nested arrays and map them to the DOM.

Install

npm install @seabuffalo/grid-generator

API

const { Grid, Cell } = require("grid-generator")
new Cell(r, g, b, a)
new Grid(rows, columns, Cell)

Example

const { Grid, Cell } = require("grid-generator")

const newCell = new Cell(0, 200, 100, 1)
const newGrid = new Grid(3, 3, newCell)

//append generated grid element to a parent
//grid element will size relative to its container
const gridContainer = document.querySelector(".grid-container")
gridContainer.append(newGrid.element)


function setRows(rows) {
  //remove grid from DOM
  gridContainer.removeChild(newGrid)

  //update grid value
  newGrid.setRows(rows)

  //append updated grid back to DOM
  gridcontainer.append(newGrid)
}

function setRed(r) {
  gridContainer.removeChild(newGrid)
  newGrid.setRed(r)
  gridContainer.append(newGrid)
}

function setColors(r, g, b, a) {
  gridContainer.removeChild(newGrid)
  newGrid.setCellColors(r, g, b, a)
  gridContainer.append(newGrid)
}

Properties & Methods

//Grid

//Constructor
new Grid(rows, column, Cell) //creates grid with n rows/columns  
                             //using supplied Cell values

//Properties
newGrid.element              //returns grid mapped to a DOM element
newGrid.grid                 //returns current grid
newGrid.rows                 //returns total rows
newGrid.columns              //returns total columns
newGrid.totalCells           //returns total cells
newGrid.cell                 //returns current cell properties

//Methods
newGrid.addRows(rows)        //add n rows
newGrid.addColumns(columns)  //add n columns
newGrid.setRows(rows)        //modify grid to n rows
newGrid.setColumns(columns)  //modify grid to n columns
newGrid.setRed(r)            //change red value of cell rgba
newGrid.setGreen(g)          //change green value of cell rgba
newGrid.setBlue(b)           //change blue value of cell rgba
newGrid.setAlpha(a)          //change alpha value of cell rgba
newGrid.setCellColors(r, g, b, a)  //change cell rgba values

//Cell

//Constructor
new Cell(r, g, b, a)         //creates cell to be used in grid
                             //takes rgba values for cell color

//Properties
cell.r                       //cell's red value
cell.g                       //cell's green value
cell.b                       //cell's blue value
cell.a                       //cells alpha value

//Methods
cell.setColors(r, g, b, a)   //change cell's rgba values

License

MIT