let q;
let wrap;
let refCell;   // Cell where the mouse was first pressed (drag start anchor)
let lastCell;  // Cell from the *previous* drag step (for incremental delta)
Quadrille.outlineWeight = 1;
Quadrille.cellLength = 30;

function setup() {
  createCanvas(450, 300);
  reset();
  // Shift controls:
  wrap = createCheckbox('Wrap', true);
  wrap.position(10, 10);
  wrap.style('color', '#ddd');
}

function draw() {
  background(20);
  drawQuadrille(q);
}

function mousePressed() {
  const row = q.mouseRow;
  const col = q.mouseCol;
  if (q.isValid(row, col)) {
    refCell = { row, col };   // remember where drag started
    lastCell = { row, col };  // also initialize "previous" step here
  }
}

function mouseDragged() {
  if (!lastCell) return;
  const row = q.mouseRow;
  const col = q.mouseCol;
  if (q.isValid(row, col)) {
    // Compute delta relative to last drag step
    const dRow = row - lastCell.row;
    const dCol = col - lastCell.col;
    q.shift(dRow, dCol, wrap.checked());  // move incrementally
    lastCell = { row, col };              // update for the next step
  }
}

function mouseReleased() {
  // clear anchors after drag ends
  refCell = undefined;
  lastCell = undefined;
}

function keyPressed() {
  reset();
}

function reset() {
  // Random board so shift behavior is easy to see
  q = createQuadrille(15, 10)
    .rand(5, '🐲')
    .rand(5, '🦑')
    .rand(5, '🦜')
    .rand(5, '🐦')
    .rand(5, '🐞')
    .rand(5, '🍄');
  refCell = undefined;
  lastCell = undefined;
}