let letters = ['a', 's', 'd', 'f', 'g', 'h', 'j','k','l','r']; // r is the rickroll so no button is created for it

​

function setup() {

  noCanvas();

  // Set up the title as a full-width red bar

  let title = createElement('h1', 'JUICERS');

  title.style('text-align', 'center');

  title.style('font-size', '64px');

  title.style('color', 'white');

  title.style('background-color', '#9B6FEA');

  title.style('margin', '0');

  title.style('padding', '20px');

  title.style('width', '100%'); // Full width of the screen

  title.position(0, 0); // Position at the top

  // Calculate button width dynamically

  let btnWidth = windowWidth / (letters.length-1); // the -1 is to remove r (rickroll) from the button list

​

  for (let i = 0; i < letters.length - 1; i++) {

    let btn = createButton('');

    btn.position(i * btnWidth, 100); // Adjust buttons to below the title

    btn.size(btnWidth, windowHeight - 100); // Adjust button height

    btn.style("background-color", getRandomColor());

    btn.style("border", "none");

    btn.style("cursor", "pointer");

    btn.style("display", "flex");

    btn.style("align-items", "center");

    btn.style("justify-content", "center");

    btn.mousePressed(() => sendLetter(letters[i]));

  }

}

​

function sendLetter(letter) {

  socket.emit("message", letter);

}

​

// Function to generate random colors

function getRandomColor() {

  return `rgb(${random(100, 255)}, ${random(100, 255)}, ${random(100, 255)})`;

}

​

socket.on("message", function (data) {

  console.log("Note pressed: " + data);

});

​

// Listen for key presses

function keyPressed() {

  let keyPressedLower = key.toLowerCase();

  if (letters.includes(keyPressedLower)) {

    sendLetter(keyPressedLower);

  }

}

​