Numbers shuffle

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Calculate sizes based on the smaller dimension to fit on screen
  let minDim = min(windowWidth, windowHeight);
  padding = minDim * 0.05; // 5% padding
  boardSize = minDim - 2 * padding;
  tileSize = boardSize / gridSize;

  initializeGrid();
  // Create a button to shuffle/reset the game
  shuffleButton = createButton('Shuffle');
  shuffleButton.position(padding, padding + boardSize + 20); // Position below the board
  shuffleButton.mousePressed(shuffleGrid); // Call shuffleGrid when button is pressed
  shuffleButton.style('font-size', '24px');
  shuffleButton.style('padding', '10px 20px');
  shuffleButton.style('background-color', '#4CAF50'); // Green button
  shuffleButton.style('color', 'white');
  shuffleButton.style('border', 'none');
  shuffleButton.style('border-radius', '5px');
  shuffleButton.style('cursor', 'pointer');
}

function initializeGrid() {
  grid = [];
  let num = 1;
  for (let i = 0; i < gridSize; i++) {
    grid[i] = [];
    for (let j = 0; j < gridSize; j++) {
      if (i === gridSize - 1 && j === gridSize - 1) {
        grid[i][j] = 0; // Empty space is represented by 0
        emptyX = j;
        emptyY = i;
      } else {
        grid[i][j] = num++;
      }
    }
  }
  isSolved = true; // Initially, the puzzle is solved
  moves = 0;
}

function shuffleGrid() {
  shuffling = true; // Set shuffling state
  isSolved = false;
  moves = 0;

  // Perform a fixed number of random moves to shuffle the grid
  // A larger number of moves results in a more thoroughly shuffled puzzle
  for (let i = 0; i < 500; i++) {
    makeRandomMove();
  }
  shuffling = false; // Reset shuffling state
}

function makeRandomMove() {
  let possibleMoves = [];
  // Check adjacent tiles to the empty space
  if (emptyY > 0) possibleMoves.push({x: emptyX, y: emptyY - 1}); // Up
  if (emptyY < gridSize - 1) possibleMoves.push({x: emptyX, y: emptyY + 1}); // Down
  if (emptyX > 0) possibleMoves.push({x: emptyX - 1, y: emptyY}); // Left
  if (emptyX < gridSize - 1) possibleMoves.push({x: emptyX + 1, y: emptyY}); // Right

  if (possibleMoves.length > 0) {
    let move = random(possibleMoves); // Pick a random valid move
    swapTiles(move.x, move.y);
  }
}

function draw() {
  background(240); // Light grey background

  drawGrid();
  drawEmptySpace();
  drawInfo();

  if (isSolved) {
    drawSolvedOverlay(); // Show "Solved!" message
  }
}

function drawGrid() {
  push();
  translate(padding, padding); // Translate to top-left of the board
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      if (grid[i][j] !== 0) { // Don't draw the empty tile
        let x = j * tileSize;
        let y = i * tileSize;

        fill(200); // Tile background color
        stroke(100);
        strokeWeight(2);
        rect(x, y, tileSize, tileSize, 5); // Rounded rectangles for tiles

        fill(0); // Text color
        noStroke();
        textAlign(CENTER, CENTER);
        textSize(tileSize * 0.4); // Dynamic text size based on tile size
        text(grid[i][j], x + tileSize / 2, y + tileSize / 2);
      }
    }
  }
  pop();
}

function drawEmptySpace() {
  push();
  translate(padding, padding);
  let x = emptyX * tileSize;
  let y = emptyY * tileSize;
  fill(180); // Empty space color
  noStroke();
  rect(x, y, tileSize, tileSize, 5); // Rounded rectangle for empty space
  pop();
}

function drawInfo() {
  fill(0);
  noStroke();
  textSize(20);
  textAlign(LEFT, TOP);
  text(`Moves: ${moves}`, padding, padding + boardSize + 80); // Info below the button

  if (isSolved && !shuffling) {
    fill(0, 150, 0); // Green color for solved message
    text('Puzzle Solved!', padding, padding + boardSize + 110);
  } else if (shuffling) {
    fill(200, 0, 0); // Red color for shuffling message
    text('Shuffling...', padding, padding + boardSize + 110);
  }
}

function drawSolvedOverlay() {
  push();
  fill(0, 200, 0, 150); // Semi-transparent green overlay
  noStroke();
  translate(padding, padding);
  rect(0, 0, boardSize, boardSize);

  fill(255); // White text
  textSize(tileSize * 0.6);
  textAlign(CENTER, CENTER);
  text('Solved!', boardSize / 2, boardSize / 2);
  pop();
}

function mousePressed() {
  if (shuffling || isSolved) {
    return; // Don't allow moves while shuffling or if already solved
  }

  // Calculate grid coordinates from mouse/touch position
  let mouseGridX = floor((mouseX - padding) / tileSize);
  let mouseGridY = floor((mouseY - padding) / tileSize);

  // Check if click is within the board boundaries
  if (mouseGridX >= 0 && mouseGridX < gridSize &&
      mouseGridY >= 0 && mouseGridY < gridSize) {
    moveTile(mouseGridX, mouseGridY); // Attempt to move the clicked tile
  }
}

function moveTile(x, y) {
  // Check if the clicked tile (x, y) is adjacent to the empty space (emptyX, emptyY)
  let isAdjacent = (abs(x - emptyX) === 1 && y === emptyY) || // Horizontal adjacency
                   (abs(y - emptyY) === 1 && x === emptyX);   // Vertical adjacency

  if (isAdjacent) {
    swapTiles(x, y);
    moves++; // Increment move counter
    isSolved = checkSolved(); // Check if the puzzle is now solved
  }
}

function swapTiles(x, y) {
  let temp = grid[y][x];
  grid[y][x] = grid[emptyY][emptyX];
  grid[emptyY][emptyX] = temp;

  emptyX = x; // Update empty space coordinates
  emptyY = y;
}

function checkSolved() {
  let num = 1;
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      if (i === gridSize - 1 && j === gridSize - 1) {
        if (grid[i][j] !== 0) return false; // Empty space must be at the end
      } else {
        if (grid[i][j] !== num++) return false; // Tiles must be in sequential order
      }
    }
  }
  return true; // All tiles are in order
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  let minDim = min(windowWidth, windowHeight);
  padding = minDim * 0.05;
  boardSize = minDim - 2 * padding;
  tileSize = boardSize / gridSize;

  // Reposition the shuffle button
  shuffleButton.position(padding, padding + boardSize + 20);
}