let h = 3;

let s = 100;

​

let cbx = 50;

let cby = 50;

​

let cells = new Array(w * h).fill(0);

​

let recipes = {

  "[0,\"a\",0,0,\"a\",0,0,\"a\",0]": "b"

}

​

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER);

}

​

function draw() {

  let b = JSON.stringify(cells) in recipes ? 255 : 220;

  background(b);

  drawCraftBox(cbx, cby);

}

​

function keyReleased() {

  if(keyCode == BACKSPACE || keyCode == DELETE) {

    let v = getMouseBox();

    cells[v.x + v.y * w] = 0;

  }

}

​

function keyTyped() {

  let v = getMouseBox();

  cells[v.x + v.y * w] = key;

  console.log(recipes[JSON.stringify(cells)])

}

​

function getMouseBox() {

  let x = floor((mouseX - cbx)/s);

  let y = floor((mouseY - cby)/s);

  return createVector(x, y);

}

​

function drawCraftBox(x, y) {

  for(let i = 0; i < w; i ++) {

    for(let j = 0; j < h; j ++) {

      if(pInBox(mouseX, mouseY, x + i*s, y + j*s, s, s)) {

        fill(100, 200, 100);

      } else {

        fill(220);

      }

      rect(x + i * s, y + j * s, s, s);

      fill(0);

      if(cells[i + j * w]) {

        text(cells[i + j * w], x + (i * s) + s/2, y + (j * s) + s/2); 

      }

    }

  }

}

​

function pInBox(px, py, bx, by, w, h) {

  return px >= bx && px <= bx + w && py >= by && py <= by + h;

}