let winHeight = 300;

​

function setup() {

  // Create the canvas (adjust width and height as needed)

  let canvas = createCanvas(winWidth, winHeight);

  // Create the Game Boy emulator container

  let gameBoyEmulator = createDiv();

  gameBoyEmulator.id("game-boy-emulator");

​

  // Create the game container

  let gameContainer = createDiv();

  gameContainer.id("game-container");

​

  // Create the score container

  let scoreContainer = createDiv("Score: ");

  scoreContainer.id("score-container");

  scoreSpan = createP("0");

  scoreSpan.id("score");

​

  // Create the Game Boy text

  let gameBoyText = createDiv("GameBoy");

  gameBoyText.id("game-boy-text");

​

  // Create the button container

  let buttonContainer = createDiv();

  buttonContainer.id("button-container");

  // Create the arrow buttons container

  let arrowButtons = createDiv();

  arrowButtons.id("arrow-buttons");

​

  // Create the left and right buttons container

  let leftRightButtons = createDiv();

  // Create the action buttons container

  let actionButtons = createDiv();

  actionButtons.id("action-buttons");

  // Set styles for the Game Boy emulator container

  gameBoyEmulator.style("background-color", "#8b8b8b");

  gameBoyEmulator.style("border", "10px solid #000");

  gameBoyEmulator.style("border-radius", "10px");

  gameBoyEmulator.style("padding", "20px");

  gameBoyEmulator.style("box-shadow", "0 0 20px rgba(0, 0, 0, 0.8)");

​

  // Set styles for the button container

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

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

  buttonContainer.style("justify-content", "space-between");

  buttonContainer.style("margin-top", "20px");

​

  // Set styles for the arrow buttons container

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

  arrowButtons.style("flex-direction", "column");

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

​

  // Set styles for the action buttons container

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

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

  // Select the page's body element and

  // return it wrapped in a p5.Element

  let body = select('body');

​

  // Add the gameboyEmulator to the body element

  body.child(gameBoyEmulator);

  // Add containers to the main container

  gameBoyEmulator.child(gameContainer);

  gameBoyEmulator.child(gameBoyText);

  gameBoyEmulator.child(buttonContainer);

   // Add elements to their respective containers

  gameContainer.child(scoreContainer);

  gameContainer.child(canvas);

  scoreContainer.child(scoreSpan);

  buttonContainer.child(arrowButtons);

  buttonContainer.child(actionButtons);

​

}

​

function draw() {

  background(51);

}