let logoImage;

let choosingImage;

let backImage;

​

let scene = 0;

const WELCOME = 0;

const CHOOSING = 1;

const BREATHING = 2;

const MANTRAS = 3;

const JOURNALING = 4;

let buttonsChoosing = [];

let buttonBack;

​

  // let strings = [];

​

function preload() {

  backgroundImage = loadImage("background.jpeg");

  logoImage = loadImage("Logo.png");

  choosingImage = loadImage("Sun.png");

  backImage = loadImage("Back.png");

  // strings = loadStrings("quotes.csv")

}

​

function setup() {

  createCanvas(620, 388);

​

  buttonsChoosing.push(new ChoosingButtons(20, 150, choosingImage, BREATHING));

  buttonsChoosing.push(new ChoosingButtons(235, 150, choosingImage, MANTRAS));

  buttonsChoosing.push(

    new ChoosingButtons(450, 150, choosingImage, JOURNALING)

  );

  buttonBack = new ChoosingButtons(0, 0, backImage, WELCOME);

​

  // buttonBack = new ChoosingButtons(20, 20, backImage, WELCOME); // replace with left arrow image

​

}

​

function draw() {

  print(scene);

​

  switch (scene) {

    case WELCOME:

      image(backgroundImage, 0, 0);

      image(logoImage, 160, 0, 300, 240);

      fill(80);

      textSize(25);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER, CENTER);

​

      text(

        "This is the welcoming page of the Meditation Center. Today you can immerse yourself into the world of meditation and relaxation",

        100,

        260,

        width / 1.5

      );

​

      textSize(15);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER, BOTTOM);

      text(

        "Please, press ENTER to see instructions and proceed with the experience",

        0,

        350,

        width

      );

      break;

​

    case CHOOSING:

      image(backgroundImage, 0, 0);

      image(logoImage, 420, 0, 200, 150);

​

      fill(80);

      textSize(20);

      textFont("Dancing");

      //line(0, 12, width, 12);

      textAlign(CENTER);

      text("BREATHING", 95, 350);

      text("MANTRAS", 305, 350);

      text("JOURNALING", 525, 350);

​

      for (let i = 0; i < buttonsChoosing.length; i++) {

        buttonsChoosing[i].display();

      }

​

      //  WHY NOT MAKING BUTTONS TINT AND CLICKED ON ?

      //buttonsChoosing.mouseOverImage();

      //buttonsChoosing.mouseClickedOnImage();

​

      buttonBack.scenery = WELCOME;

      buttonBack.display();

      break;

​

    case BREATHING:

      image(backgroundImage, 0, 0);

​

      // code for the bouncing ball

      // noStroke();

      //  fill(100,0,100);

​

      // x = x + speedX;

      // if((x>width)|| (x<0)){

      //   speedX = speedX * -1;

​

      // ellipse(x, 200, 100, 100);

​

      //displayBreathing();

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

​

      break;

​

    case MANTRAS:

      image(backgroundImage, 0, 0);

      //  displayMantras();

​

  // singleRow = split(strings[int (random(strings.length))], ',');

  // randomly presented mantras 

   //   csv file to story mantras 

      // // selecting 3 random quotes

  // for (let i = 0; i < strings.length; i++) {

  //   strings[i] = strings[Math.floor(random(1, strings.length))];

//   }

      // text (0,0);

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

      break;

​

    case JOURNALING:

      image(backgroundImage, 0, 0);

      // not sure how to use it: https://p5js.org/examples/dom-input-and-button.html 

  //    in greeting make it random prompts from the same quotes csv file but from second row 

      // displayJournaling();

      buttonBack.scenery = CHOOSING;

      buttonBack.display();

      break;

  }

}

​

class ChoosingButtons {

  constructor(inX, inY, inImg, inScenery) {

    // what does this mean?

    this.x = inX;

    this.y = inY;

    this.img = inImg;

    this.scenery = inScenery; // where to go if this button is clicked

  }

​

  display() {

    stroke(0);

​

    // tint the image on mouse hover

    if (this.mouseOverImage()) {

      tint(100, 0, 100);

    } else {

      noTint();

    }

​

    // change scene if mouse is clicked on the iamge

    if (this.mouseClickedOnImage()) {

      tint(100, 0, 100);

​

      scene = this.scenery;

    } else {

      noTint();

    }

​

    image(this.img, this.x, this.y);

  }

​

  // over automatically matches the width & height of the image read from the file

  // see this.img.width and this.img.height below

  mouseOverImage() {

    if (

      mouseX > this.x &&

      mouseX < this.x + this.img.width &&

      mouseY > this.y &&

      mouseY < this.y + this.img.height

    ) {

      return true;

    } else {

      return false;

    }

  }

​

  // over automatically matches the width & height of the image read from the file

  // see this.img.width and this.img.height below

  mouseClickedOnImage() {

    if (

      mouseIsPressed &&

      mouseX > this.x &&

      mouseX < this.x + this.img.width &&

      mouseY > this.y &&

      mouseY < this.y + this.img.height

    ) {

      return true;

    } else {

      return false;

    }

  }

}

​

function keyPressed() {

  if (keyCode === ENTER && scene === WELCOME) {

    scene = CHOOSING;

    print("changing state to choosing");

  }

}

​