Using this p5.js code, this is a game for dragging letters from words into the correct order. The number of letters from the word is represented by black boxes, and letters are placed randomly on the screen for the user to drag into the correct place. My problem is that after I drag the letter into a box with a letter already on it, I need the letter that was previously there to move to the next position over to the other box, or if it's in the last position of the boxes, to then be placed at the beginning of the boxes while each subsequent letter is moved to the right. Here is the code: let words = [
    "HEAD", "FACE", "EYE", "EAR", "NOSE",
    "MOUTH", "TEETH", "TONGUE", "NECK", "SHOULDER",
    "ARM", "ELBOW", "HAND", "FINGER", "THUMB",
    "WRIST", "CHEST", "STOMACH", "BACK", "HIP",
    "WAIST", "LEG", "THIGH", "KNEE", "ANKLE",
    "FOOT", "HEEL", "TOE"
  ];
  let currentWord;
  let wordIndex;
  let letterBoxes = [];
  let draggedBox;
  
  function setup() {
    createCanvas(800, 600);
    background(200);
    startNewRound();
  }
  
  function draw() {
    background(200);
  
    // draw word placeholders
    for (let i = 0; i < currentWord.length; i++) {
      rect(width / 2 - (currentWord.length * 30) / 2 + i * 30, 100, 25, 30);
    }
  
    // display letter boxes
    for (const box of letterBoxes) {
      box.render();
    }
  }
  
  function mousePressed() {
    draggedBox = null;
    for (const box of letterBoxes) {
      if (box.isMouseInside()) {
        draggedBox = box;
        break;
      }
    }
  }
  
  function mouseDragged() {
    if (draggedBox) {
      draggedBox.moveTo(mouseX, mouseY);
    }
  }

  function mouseReleased() {
    if (draggedBox) {
      let index = null;
      for (let i = 0; i < currentWord.length; i++) {
        let x = width / 2 - (currentWord.length * 30) / 2 + i * 30;
        let y = 100;
        if (dist(mouseX, mouseY, x + 25 / 2, y + 30 / 2) < 30) {
          index = i;
          break;
        }
      }
      
      let posX = mouseX - 25 / 2;
      let posY = mouseY - 30 / 2;
      posX = constrain(posX, 0, width - 25);
      posY = constrain(posY, 0, height - 30);
      
      if (index !== null) {
        // Find the direction to shift the other letters
        const occupiedBox = letterBoxes.find(box => box.x === width / 2 - (currentWord.length * 30) / 2 + index * 30 && box.y === 100);
        let shiftDirection = 1;
        if (occupiedBox) {
          const occupiedIndex = letterBoxes.indexOf(occupiedBox);
          if (occupiedIndex < letterBoxes.length / 2) {
            shiftDirection = -1;
          }
        }
  
        // Shift the other letters
        for (let i = 0; i < letterBoxes.length; i++) {
          const box = letterBoxes[i];
          if (box === draggedBox || box.y !== 100) {
            continue;
          }
          if (shiftDirection === 1 && box.x >= width / 2 - (currentWord.length * 30) / 2 + index * 30) {
            box.snapTo(box.x + 25 * shiftDirection, 100);
          } else if (shiftDirection === -1 && box.x <= width / 2 - (currentWord.length * 30) / 2 + index * 30) {
            box.snapTo(box.x + 25 * shiftDirection, 100);
          }
        }
  
        draggedBox.snapTo(width / 2 - (currentWord.length * 30) / 2 + index * 30, 100);
      } else {
        draggedBox.moveTo(posX, posY);
      }
      
      draggedBox.homeX = posX;
      draggedBox.homeY = posY;
      if (checkComplete()) {
        alert( "Well done!");
        startNewRound();
      }
    }
  }

//   function mouseReleased() {
//     if (draggedBox) {
//       let index = null;
//       for (let i = 0; i < currentWord.length; i++) {
//         let x = width / 2 - (currentWord.length * 30) / 2 + i * 30;
//         let y = 100;
//         if (dist(mouseX, mouseY, x + 25 / 2, y + 30 / 2) < 30) {
//           index = i;
//           break;
//         }
//       }
      
//       let posX = mouseX - 25 / 2;
//       let posY = mouseY - 30 / 2;
//       posX = constrain(posX, 0, width - 25);
//       posY = constrain(posY, 0, height - 30);
      
//       if (index !== null) {
//         draggedBox.snapTo(width / 2 - (currentWord.length * 30) / 2 + index * 30, 100);
//       } else {
//         draggedBox.moveTo(posX, posY);
//       }
      
//       draggedBox.homeX = posX;
//       draggedBox.homeY = posY;
//       if (checkComplete()) {
//         alert("Well done!");
//         startNewRound();
//       }
//     }
//   }
//   function mouseReleased() {
//     if (draggedBox) {
//       let index = null;
//       for (let i = 0; i < currentWord.length; i++) {
//         let x = width / 2 - (currentWord.length * 30) / 2 + i * 30;
//         let y = 100;
//         if (dist(mouseX, mouseY, x + 25 / 2, y + 30 / 2) < 30) {
//           index = i;
//           break;
//         }
//       }
//       if (index !== null) {
//         draggedBox.snapTo(width / 2 - (currentWord.length * 30) / 2 + index * 30, 100);
//       } else {
//         draggedBox.snapBack();
//       }
//       if (checkComplete()) {
//         alert("Well done!");
//         startNewRound();
//       }
//     }
//   }
  
  // utility functions
//   function startNewRound() {
//     wordIndex = Math.floor(Math.random() * words.length);
//     currentWord = words[wordIndex];
//     letterBoxes = [];
//     for (let i = 0; i < currentWord.length; i++) {
//       let box = new LetterBox(currentWord[i]);
//       let posX = Math.floor(Math.random() * (width - 50)) + 25;
//       let posY = Math.floor(Math.random() * (height - 200)) + 150;
//       box.moveTo(posX, posY);
//       letterBoxes.push(box);
//     }
//   }


function startNewRound() {
    wordIndex = Math.floor(Math.random() * words.length);
    currentWord = words[wordIndex];
    letterBoxes = [];
    for (let i = 0; i < currentWord.length; i++) {
      let box = new LetterBox(currentWord[i]);
      let posX = Math.floor(Math.random() * (500 - 50)) + 25;
      let posY = Math.floor(Math.random() * (300 - 50)) + 25;
      box.moveTo(posX, posY);
      box.homeX = posX;
      box.homeY = posY;
      letterBoxes.push(box);
    }
  }
  
  function checkComplete() {
    for (let i = 0; i < currentWord.length; i++) {
      let correctBox = letterBoxes.find(box => box.letter === currentWord[i]);
      if (!correctBox) return false;
  
      let x = width / 2 - (currentWord.length * 30) / 2 + i * 30;
      let y = 100;
      if (correctBox.x !== x || correctBox.y !== y) return false;
    }
    return true;
  }
  
  class LetterBox {
    constructor(letter) {
      this.letter = letter;
      this.x = 0;
      this.y = 0;
      this.homeX = 0;
      this.homeY = 0;
    }
  
    moveTo(x, y) {
      this.x = x - 25 / 2;
      this.y = y - 30 / 2;
    }
  
    snapTo(x, y) {
      this.x = x;
      this.y = y;
    }
  
    snapBack() {
      this.x = this.homeX;
      this.y = this.homeY;
    }
  
    isMouseInside() {
      return mouseX > this.x && mouseX < this.x + 25 && mouseY > this.y && mouseY < this.y + 30;
    }
  
    render() {
      fill(255);
      rect(this.x, this.y, 25, 30);
      textSize(24);
      textAlign(CENTER, CENTER);
      fill(0);
      text(this.letter, this.x + 25 / 2, this.y + 30 / 2 - 4);
    }
  }