Quadrille.cellLength = 20;
let quadrille, cropped, hint;
let w = -3, h = 3;
let lime, olive, yellow, fuchsia;

function setup() {
  createCanvas(400, 200);
  lime = color('lime');
  yellow = color('yellow');
  olive = color('olive');
  fuchsia = color('fuchsia');
  quadrille = createQuadrille(10, 10, 25, lime);
  quadrille.rand(20, olive).rand(30, yellow).fill(fuchsia);
  update();
}

function draw() {
  background('coral');
  // Base quadrille (left)
  drawQuadrille(quadrille, { outline: 'white', row: 0, col: 0 });
  const row = quadrille.mouseRow;
  const col = quadrille.mouseCol;
  // Hint rectangle (only if defined)
  if (hint) {
    const absW = Math.abs(w), absH = Math.abs(h);
    const top  = (h >= 0 ? row : row - (absH - 1));
    const left = (w >= 0 ? col : col - (absW - 1));
    drawQuadrille(hint, { outline: 'cyan', row: top, col: left });
  }
  // Cropped preview on the right (only if defined)
  if (cropped) {
    drawQuadrille(cropped, { outline: 'cyan', row: 0, col: 11 });
  }
  noStroke();
  fill(0);
  text(`w ${w}  h ${h}`, 210, 195);
}

function mouseMoved() {
  update();
}

function keyPressed() {
  if (key === 'ArrowLeft')  w--;
  else if (key === 'ArrowRight') w++;
  else if (key === 'ArrowUp')    h--;
  else if (key === 'ArrowDown')  h++;
  update();
  return false; // prevent page scroll
}

function update() {
  const row = quadrille.mouseRow;
  const col = quadrille.mouseCol;
  // If either dimension is zero, skip drawing both hint and result
  if (w === 0 || h === 0) {
    hint = undefined;
    cropped = undefined;
    return;
  }
  // Keep the hint sized to |w| × |h|
  hint = createQuadrille(Math.abs(w), Math.abs(h));
  // Try cropping; may return undefined if out of bounds
  cropped = quadrille.crop(row, col, w, h);
}