let titleFont, descFont, buttonFont;

let showStartScreen = true;

let showBoard = false;

let showPopup = false;

​

let quotes = {

  restart: [

    "Restart is always better than regret.",

    "Begin again, but this time with experience.",

    "You are not behind.\nYou are exactly where you need to be to start fresh.",

    "Starting over isn’t a setback—it’s a strategy.",

    "Some things break so better things can be built.",

    "Growth begins the moment you decide to try again.",

    "You don’t have to wait for a new year to begin again.",

  ],

  purpose: [

    "You don’t have to have it all figured out \nto move forward.",

    "Your purpose is not a destination:\nit’s how you live every day.",

    "Do what makes time disappear.",

    "What sets your soul on fire will guide your way.",

    "The work you’re avoiding might be the work \nyou’re meant to do.",

    "A purpose-driven life is not always a straight path.",

    "You won’t always feel ready. Do it anyway.",

  ],

  sign: [

    "If you’re waiting for a sign, \nyou have already made your decision",

    "Silence is an answer too.",

    "Sometimes, not getting what you want is \nthe best sign of all.",

    "You’ll never miss what’s meant for you.",

    "Trust that what’s unclear now will make sense later.",

    "The universe is always speaking. Pay attention.",

    "When one door closes, \ncheck if it was ever your door to open.",

  ],

  direction: [

    "You don’t need the full map—just the courage \nto take the next step.",

    "You are not lost. You are exploring.",

    "The best journeys aren’t planned,\n they unfold as you move.",

    "Clarity comes from movement, not from waiting.",

    "It’s okay if you don’t know where you’re going yet.",

    "Detours aren’t mistakes—they’re part of the route.",

    "The road changes, \nbut your destination remains yours to choose.",

  ],

  inspiration: [

    "Inspiration isn’t found—it’s made.",

    "Creativity begins where comfort ends.",

    "If you can’t find inspiration, create it.",

    "You won’t always feel motivated, \nso learn to be disciplined.",

    "Even the smallest idea can spark something great.",

    "Stay curious—everything you need is \nalready around you.",

    "Momentum is built by showing up,\n not waiting for the perfect moment.",

  ],

  peace: [

    "Peace isn’t the absence of problems:\n it’s the ability to remain calm despite those",

    "Protect your peace.\n It’s not selfish—it’s necessary.",

    "Not everything deserves your energy.",

    "Breathe. \nYou don’t have to solve everything today.",

    "Walking away from what drains you is an act of \nself-respect.",

    "The best revenge is a peaceful life.",

    "You deserve a life that feels good, \nnot just one that looks good.",

  ],

};

​

let currentDestination = ""; // Stores the current clicked destination

let currentQuoteIndex = 0; // Tracks the current quote index

​

function preload() {

  img = loadImage("airport.png"); // Departure board background

  cloudBg = loadImage("cloud_bg.jpg"); // Start screen background

  boxImg = loadImage("box.png"); // Box image for text

  clickButton = loadImage("click.png");

  boardImg = loadImage("board.png"); // Load the board image

  boxQuote = loadImage("boxQuote.png"); // Load the new image for the popup

​

  // Load local font files

  titleFont = loadFont("PlayfairDisplay-SemiBoldItalic.ttf");

  descFont = loadFont("OpenSans-Medium.ttf");

  buttonFont = loadFont("Montserrat-Bold.ttf");

​

  soundFormats("mp3");

  airportSound = loadSound("assets/airport.mp3");

  lofiSound = loadSound("assets/lofi.mp3");

}

​

function setup() {

  createCanvas(780, 500);

​

  airportSound.loop();

}

​

function draw() {

  print(mouseX + "," + mouseY);

​

  if (showStartScreen) {

    drawStartScreen();

  } else if (showBoard) {

    drawBoard();

  } else {

    drawDepartureBoard();

  }

​

  if (showPopup) {

    drawPopup();

  }

​

  // Draw the triangle exit button if not on the start screen

  if (!showStartScreen) {

    drawExitButton();

  }

}

​

function drawStartScreen() {

  if (!airportSound.isPlaying()) {

    airportSound.loop();

  }

​

  // Ensure lofi sound stops when on the welcome page

  lofiSound.stop();

  background(cloudBg); 

​

  // Resize Box Image

  let boxWidth = boxImg.width * 1.5;

  let boxHeight = boxImg.height * 1.5;

  let boxX = (width - boxWidth) / 2;

  let boxY = (height - boxHeight) / 2;

​

  image(boxImg, boxX, boxY, boxWidth, boxHeight);

​

  fill(0);

  textAlign(CENTER, CENTER);

​

  // Title Text 

  textFont(titleFont);

  textSize(22);

  text("Welcome to the Emotional Getaway", width / 2, boxY + boxHeight * 0.42);

​

  // Description 

  textFont(descFont);

  textSize(14.5);

  text(

    "Sometimes, we don’t just travel to places—we travel to emotions.\nWhat do you seek today?\n\nClick 'Start' to choose your destination.",

    width / 2,

    boxY + boxHeight * 0.55

  );

​

  // Start Button

  let buttonWidth = 100;

  let buttonHeight = 40;

  let buttonX = (width - buttonWidth) / 2;

  let buttonY = boxY + boxHeight - 110;

​

  // Check if mouse is over the button

  if (

    mouseX > buttonX &&

    mouseX < buttonX + buttonWidth &&

    mouseY > buttonY &&

    mouseY < buttonY + buttonHeight

  ) {

    fill("#1A9ED8"); // Lighter blue for hover effect

  } else {

    fill("#148EC6"); 

  }

​

  noStroke();

  rect(buttonX, buttonY, buttonWidth, buttonHeight, 10);

​

  fill(255);

  textFont(buttonFont);

  textSize(16);

  text("Start", width / 2, buttonY + buttonHeight / 2.25);

}

​

function drawDepartureBoard() {

  background(boardImg);

​

  if (!lofiSound.isPlaying()) {

    lofiSound.loop();

  }

​

  // Ensure airport sound stops when showing the board

  airportSound.stop();

  // Departure board background

  image(img, 0, 0, width, height);

​

  // Click button image on top of the departure board

  let clickButtonWidth = clickButton.width * 0.5; 

  let clickButtonHeight = clickButton.height * 0.4;

  let clickButtonX = (width - clickButtonWidth * 0.8) / 2; 

  let clickButtonY = height * 0.28;

  image(

    clickButton,

    clickButtonX,

    clickButtonY,

    clickButtonWidth,

    clickButtonHeight

  );

​

  fill(255); 

  stroke(0);

  strokeWeight(4);

  textAlign(CENTER, CENTER);

  textFont(buttonFont); 

  textSize(36); 

  textStyle(BOLD); 

​

  // Calculate the center of the clickButton image

  let textX = clickButtonX + clickButtonWidth * 0.5; // Center horizontally relative to the image

  let textY = clickButtonY + clickButtonHeight * 0.45; // Center vertically relative to the image

​

  text("Click!", textX, textY);

}

​

function drawBoard() {

  // Display the board image

  let zoomFactor = 1.2; // Adjust this to zoom in more or less

  let newWidth = boardImg.width * zoomFactor;

  let newHeight = boardImg.height * zoomFactor;

​

  // Center 

  let xOffset = (width - newWidth) / 2.5;

  let yOffset = (height - newHeight) / 2.5;

​

  image(boardImg, xOffset, yOffset, newWidth, newHeight);

}

​

function drawPopup() {

  // Draw a semi-transparent background

  fill(0, 150);

  rect(0, 0, width, height);

​

  // Resize and center the popup image

  let popupScale = 1.4; 

  let newBoxWidth = boxQuote.width * popupScale;

  let newBoxHeight = boxQuote.height * popupScale;

  let popupX = (width - newBoxWidth) / 2;

  let popupY = (height - newBoxHeight) / 2;

​

  image(boxQuote, popupX, popupY, newBoxWidth, newBoxHeight);

​

  // Select the current quote

  let quote = quotes[currentDestination][currentQuoteIndex];

​

  // Display the quote in the middle of the popup

  fill(0);

  textAlign(CENTER, CENTER);

  textFont(titleFont);

  textSize(20);

  text(quote, width / 2, height / 2);

​

  // Back button

  let backButtonX = popupX + 20;

  let backButtonY = height / 2;

  let backButtonWidth = 30;

  let backButtonHeight = 20;

​

  fill(255);

  triangle(

    backButtonX,

    backButtonY,

    backButtonX + backButtonWidth,

    backButtonY - backButtonHeight,

    backButtonX + backButtonWidth,

    backButtonY + backButtonHeight

  );

​

  // Draw the right arrow

  let nextButtonX = popupX + newBoxWidth - 20;

  triangle(

    nextButtonX,

    height / 2,

    nextButtonX - 30,

    height / 2 - 20,

    nextButtonX - 30,

    height / 2 + 20

  );

​

  // Add the "X" button in the top-right corner to close the popup

  fill(255, 0, 0);

  noStroke();

  ellipse(width - 30, 35, 30, 30);

  // Draw the "X" inside the button

  textFont("Courier New");

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("X", width - 30, 35);

}

​

function drawExitButton() {

  // Draw the black background for the exit button

  fill(0); 

  noStroke();

  rect(20, height - 50, 30, 30, 5);

​

  fill(255); // White triangle

  noStroke();

​

  // Centering the triangle inside the black rectangle

  let centerX = 20 + 15; 

  let centerY = height - 50 + 15;

​

  let triangleX1 = centerX - 6; 

  let triangleY1 = centerY; 

​

  let triangleX2 = centerX + 4; 

  let triangleY2 = centerY - 6; 

​

  let triangleX3 = centerX + 4; 

  let triangleY3 = centerY + 6; 

​

  triangle(

    triangleX1,

    triangleY1,

    triangleX2,

    triangleY2,

    triangleX3,

    triangleY3

  );

}

​

function mousePressed() {

  let startButtonX = (width - 100) / 2;

  let startButtonY =

    (height - boxImg.height * 1.5) / 2 + boxImg.height * 1.5 - 100;

​

  if (

    showStartScreen &&

    mouseX > startButtonX &&

    mouseX < startButtonX + 100 &&

    mouseY > startButtonY &&

    mouseY < startButtonY + 40

  ) {

    showStartScreen = false;

  }

​

  // Handle exit button click

  if (

    !showStartScreen &&

    mouseX > 20 &&

    mouseX < 50 &&

    mouseY > height - 50 &&

    mouseY < height - 20

  ) {

    if (showPopup) {

      showPopup = false; // Close popup if open

    } else if (showBoard) {

      showBoard = false; // Go back to departure board

    } else {

      showStartScreen = true; // Go back to start screen

    }

  }

​

  // Check if the mouse click is within the specified area for the board image

  if (

    !showStartScreen &&

    mouseX > 100 &&

    mouseX < 250 &&

    mouseY > 150 &&

    mouseY < 250

  ) {

    showBoard = true;

  }

​

  // Handle clickable areas for destinations

  if (showBoard) {

    if (mouseX > 250 && mouseX < 350 && mouseY > 115 && mouseY < 135) {

      currentDestination = "restart";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    } else if (mouseX > 250 && mouseX < 370 && mouseY > 140 && mouseY < 155) {

      currentDestination = "purpose";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    } else if (mouseX > 250 && mouseX < 310 && mouseY > 168 && mouseY < 185) {

      currentDestination = "sign";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    } else if (mouseX > 250 && mouseX < 395 && mouseY > 190 && mouseY < 210) {

      currentDestination = "direction";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    } else if (mouseX > 250 && mouseX < 430 && mouseY > 215 && mouseY < 230) {

      currentDestination = "inspiration";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    } else if (mouseX > 250 && mouseX < 330 && mouseY > 240 && mouseY < 260) {

      currentDestination = "peace";

      showPopup = true;

      currentQuoteIndex = Math.floor(

        Math.random() * quotes[currentDestination].length

      );

    }

  }

​

  // Handle arrow clicks in the popup

  if (showPopup) {

    let popupX = (width - boxQuote.width * 1.4) / 2;

    let popupY = (height - boxQuote.height * 1.4) / 2;

​

    // Left arrow click

    if (

      mouseX > popupX + 20 &&

      mouseX < popupX + 50 &&

      mouseY > height / 2 - 20 &&

      mouseY < height / 2 + 20

    ) {

      currentQuoteIndex =

        (currentQuoteIndex - 1 + quotes[currentDestination].length) %

        quotes[currentDestination].length;

    }

​

    // Right arrow click

    if (

      mouseX > popupX + boxQuote.width * 1.4 - 50 &&

      mouseX < popupX + boxQuote.width * 1.4 - 20 &&

      mouseY > height / 2 - 20 &&

      mouseY < height / 2 + 20

    ) {

      currentQuoteIndex =

        (currentQuoteIndex + 1) % quotes[currentDestination].length;

    }

​

    // Close the popup when clicking the X button in the top-right corner

    if (

      mouseX > width - 40 &&

      mouseX < width - 10 &&

      mouseY > 10 &&

      mouseY < 40

    ) {

      showPopup = false;

    }

  }

}

​