let button1, button2, button3, stopButton;

let volumeSlider;

let aspectRatio = 800 / 400; // Original aspect ratio of the game

​

function preload() {

  // Preload music files

  song1 = loadSound('1.mp3');

  song2 = loadSound('2.mp3');

  song3 = loadSound('3.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  adjustCanvasSize();

  textAlign(CENTER);

​

  // Static UI Elements setup only once

  setupStaticUIElements();

}

​

function setupStaticUIElements() {

  let buttonWidth = 150;

  let buttonHeight = 40;

​

  // Create button 1

  button1 = createButton('Play Harry Potter');

  button1.size(buttonWidth, buttonHeight);

  button1.position(150, 130);

  button1.mousePressed(() => playSong(song1));

​

  // Create button 2

  button2 = createButton('Play Pirates of the Caribbean');

  button2.size(buttonWidth, buttonHeight);

  button2.position(150, 180);

  button2.mousePressed(() => playSong(song2));

​

  // Create button 3

  button3 = createButton('Play Titanic');

  button3.size(buttonWidth, buttonHeight);

  button3.position(150, 230);

  button3.mousePressed(() => playSong(song3));

​

  // Create stop button

  stopButton = createButton('Stop All');

  stopButton.size(buttonWidth, buttonHeight);

  stopButton.position(150, 280);

  stopButton.mousePressed(stopSongs);

​

  // Create volume slider

  let sliderWidth = 150;

  volumeSlider = createSlider(0, 1, 0.5, 0.01);

  volumeSlider.size(sliderWidth);

  volumeSlider.position(400, 100);

}

​

function adjustCanvasSize() {

  if (fullscreen()) {

    resizeCanvas(displayWidth, displayHeight);

  } else {

    resizeCanvas(windowWidth, windowHeight);

  }

}

​

function playSong(song) {

  stopSongs(); // Stop any currently playing songs

  song.setVolume(volumeSlider.value()); // Set initial volume

  song.play(); // Play selected song

}

​

function stopSongs() {

  if (song1.isPlaying()) {

    song1.stop();

  }

  if (song2.isPlaying()) {

    song2.stop();

  }

  if (song3.isPlaying()) {

    song3.stop();

  }

}

​

function draw() {

  background(50, 50, 100);

​

  // Draw lights around the screen edges

  drawRandomCircles();

​

  // Volume control text

  fill(255);

  noStroke();

  textSize(width / 50);

  text('Volume Control', volumeSlider.x + volumeSlider.width / 2, volumeSlider.y - 10);

​

  // Playing song text

  text('Choose your Music', 220, 100);

​

  // Adjust volume in real-time

  let volume = volumeSlider.value();

  song1.setVolume(volume);

  song2.setVolume(volume);

  song3.setVolume(volume);

​

  // Draw back to home button

  let buttonWidth = width / 8;

  let buttonHeight = height / 10;

  fill(80, 120, 255);

  rect(20, height - buttonHeight - 20, buttonWidth, buttonHeight);

  fill(255);

  textSize(buttonHeight / 3);

  text("Home", 20 + buttonWidth / 2, height - buttonHeight / 2 - 20);

}

​

function drawRandomCircles() {

  let circleDiameter = width / 40;

  let circleSpacing = width / 20;

​

  // Circles along the top and bottom borders

  for (let x = 0; x < width; x += circleSpacing) {

    fill(random(255), random(255), random(255)); // Random color for each circle

    ellipse(x, 0, circleDiameter, circleDiameter); // Top border circle

    ellipse(x, height, circleDiameter, circleDiameter); // Bottom border circle

  }

​

  // Circles along the left and right borders

  for (let y = 0; y < height; y += circleSpacing) {

    fill(random(255), random(255), random(255)); // Random color for each circle

    ellipse(0, y, circleDiameter, circleDiameter); // Left border circle

    ellipse(width, y, circleDiameter, circleDiameter); // Right border circle

  }

}

​

function keyPressed() {

  if (key === 'f') {

    let fs = fullscreen();

    fullscreen(!fs);

    adjustCanvasSize();

  }

}

​

function mousePressed() {

  // Check if the "Home" button is clicked

  let buttonWidth = width / 8;

  let buttonHeight = height / 10;

  if (mouseX >= 20 && mouseX <= 20 + buttonWidth && mouseY >= height - buttonHeight - 20 && mouseY <= height - 20) {

    // Redirect to the arcade home page

    window.location.href = "index.html";

  }

}

​