var doorClose,doorOpen,cashier,cashierWhite,rug, rugWhite,flowerTable,flowerTableWhite,redFlower,yellowFlower,blueFlower,purpleFlower,purpleFlower2,greenFlower,pinkFlower,exit,right,left,bouquet;

​

// background color, used in many places

var backgroundColor;

​

// bool for displaying scenes

var ifDisplayStore = false;

var ifDisplayMenu = false;

​

// index for keeping track of what flower you're on when flipping through the menu

var displayCounter = 0;

// array of images for all the flower types we have

var flowerOptions = [];

// users add flowers they want into this array

var cart = [];

// button for adding flowers into cart

let addButton;

// button for checking out/buying flowers

let checkoutButton;

// money you have left to spend

var balance = 100;

// total cost of everything in your cart right now

var cartCost = 0;

​

// sound variables

var clickSound;

var music;

​

// p5js image elements to display in the final bouquet

var redFlowerBouquet,

    yellowFlowerBouquet,

    blueFlowerBouquet,

    purpleFlowerBouquet,

    purpleFlowerBouquet2,

    greenBouquet,

    pinkBouqeut;

// array of all the image variables from above^ so I can index them -- corresponds to the other flower options array, but these are different types of image variables that I can move around more easily

var flowerOptionsBouquet;

​

function preload() {

  // preload all the images

  doorOpen = createImg("door_open.png","alt");

  doorClose = createImg("door_close.png", "alt");

  cashier = createImg("cashier.png","alt");

  cashierWhite = createImg("cashier_white.png", "alt");

  rug = createImg("rug.png","alt");

  rugWhite = createImg("rug_white.png", "alt");

  flowerTable = createImg("flower_table.png", "alt");

  flowerTableWhite = createImg("flower_table_white.png", "alt");

  redFlower = createImg("red_flower.png", "alt");

  yellowFlower = createImg("yellow_flower.png", "alt");

  blueFlower = createImg("blue_flower.png", "alt");

  purpleFlower = createImg("purple_flower.png", "alt");

  purpleFlower2 = createImg("purple_flower_2.png", "alt");

  pinkFlower = createImg("pink_flower.png", "alt");

  greenFlower = createImg("green_flower.png", "alt");

  exit = createImg("exit.png", "alt");

  right = createImg("right.png", "alt");

  left = createImg("left.png", "alt");

  // put all the flower images into array

  flowerOptions = [pinkFlower, greenFlower, purpleFlower2, redFlower, yellowFlower, blueFlower, purpleFlower];

  // different type of image variable for flowers to be displayed in the final bouquet

  redFlowerBouquet = loadImage("red_flower.png");

  yellowFlowerBouquet = loadImage("yellow_flower.png");

  blueFlowerBouquet = loadImage("blue_flower.png");

  purpleFlowerBouquet = loadImage("purple_flower.png");

  purpleFlowerBouquet2 = loadImage("purple_flower_2.png");

  pinkFlowerBouquet = loadImage("pink_flower.png");

  greenFlowerBouquet = loadImage("green_flower.png");

  flowerOptionsBouquet = [pinkFlowerBouquet, greenFlowerBouquet, purpleFlowerBouquet2, redFlowerBouquet, yellowFlowerBouquet, blueFlowerBouquet, purpleFlowerBouquet];

  bouquet = createImg("bouquet.png", "alt");

  // load all the sound files

  clickSound = loadSound("mouse_click.mp3"); // https://www.youtube.com/watch?v=i0DON3AjhW4

  music = loadSound("music.mp3"); // https://www.youtube.com/watch?v=gzXmYH_BMVM

}

​

function setup() {

  createCanvas(400, 400);

  // play music, loop it in case it ends

  music.loop();

  // set background color 

  backgroundColor = color(252, 215, 237);

  background(backgroundColor);

  // display the shop with closed doors

  doorClose.position(0,0);

  // hide the open door

  doorOpen.position(0,0);

  doorOpen.hide();

  // if you hover over closed door, it'll open

  doorClose.mouseOver(displayOpenDoor);

  doorOpen.mouseOut(displayCloseDoor);

  // if you click on door, you can walk into store

  doorOpen.mouseClicked(displayStore);

  // set sizes and positions of images inside store

  // cash register - purchase bouquets here

  cashier.position(100,0);

  cashier.hide();

  cashierWhite.position(100,0);

  cashierWhite.hide();

  // welcome rug - can exit the store here and reset the experience once you spend your $100

  rug.position(90,323);

  rug.hide();

  rugWhite.position(90,323);

  rugWhite.hide();

  // where all the flowers are displayed - view flower catalogue here and add to cart

  flowerTable.position(75,135);

  flowerTable.hide();

  flowerTableWhite.position(75,135);

  flowerTableWhite.hide();

  // hover over different things in store, they'll turn white - clickable

  cashier.mouseOver(displayCashierWhite);

  cashierWhite.mouseOut(displayCashier)

  rug.mouseOver(displayRugWhite);

  rugWhite.mouseOut(displayRug);

  flowerTable.mouseOver(displayFlowerTableWhite);

  flowerTableWhite.mouseOut(displayFlowerTable);

  // click on the rug to leave the store

  rugWhite.mouseClicked(leaveStore);

  // hide the flower images and set their sizes+positions

  // also set the flower prices

  for (var i=0; i<flowerOptions.length; i++) {

    flowerOptions[i].hide();

    flowerOptions[i].position(55,75);

    flowerOptions[i].size(300,300);

    flowerOptions[i][1] = i * 5 + 5;

  }

  // hide and size buttons

  exit.hide();

  exit.size(25,25);

  exit.position(80,80);

  right.hide();

  left.hide();

  // clicking on the flower table to purchase and view flowers mechanisms

  // create a menu object

  let flowerMenu = new displayMenus("flower");

  flowerTableWhite.mouseClicked( function(){

    // play mouse click sound

    clickSound.play();

    // display meny after flower table is clicked

    flowerMenu.display();

  });

  // go back and forth between viewing each flower using right and left buttons

  right.mouseClicked( function() {

    if (displayCounter < flowerOptions.length-1) {

      // play mouse click sound

      clickSound.play();

      // undisplay the menu to get rid of previous screen

      flowerMenu.undisplay();

      displayCounter++;

      // display menu after updating which flower index we're on with displayCounter++

      flowerMenu.display();

    }

  });

  left.mouseClicked( function() {

    if (displayCounter > 0) {

      // play mouse click sound

      clickSound.play();

      // undisplay the menu to get rid of previous screen

      flowerMenu.undisplay();

      displayCounter--;

      // display menu after updating which flower index we're on with displayCounter++

      flowerMenu.display();

    }

  });

  // button for adding flowers into your cart

  addButton = createButton('Add to Cart');

  addButton.position(85,290);

  addButton.hide();

  addButton.mouseClicked( function() {

    // play mouse click sound

    clickSound.play();

    // the cost of each flower is accessible via the flowerOptions array

    let flowerCost = flowerOptions[displayCounter][1];

    if (cartCost + flowerCost <= balance) {

      // erase previous canvas, draw new canvas bc new numbers

      flowerMenu.undisplay();

      // add the flower index to cart array

      cart.push(displayCounter);

      // add the flower cost to total cost

      cartCost += flowerOptions[displayCounter][1];

      flowerMenu.display();

    }

    else {

      // if you don't have enough money, display text

      textSize(20);

      text("No more funds...", 130,370);

    }

  });

  // create a menu object for checking out

  let cashierMenu = new displayMenus("cashier");

  // if user clicks on the cash register counter

  cashierWhite.mouseClicked( function(){

    // play mouse click sound

    clickSound.play();

    cashierMenu.display();

  });

  // button for checking out

  checkoutButton = createButton('Check Out');

  checkoutButton.position(85,290);

  checkoutButton.hide();

  checkoutButton.mouseClicked( function() {

    // play mouse click sound

    clickSound.play();

    // update all the money/stats, and then redisplay the menu

    cashierMenu.undisplay();

    balance -= cartCost;

    cartCost = 0;

    cashierMenu.display();

  })

  // exit out of display menus when users click on X button

  exit.mouseClicked( function() {

    // play mouse click sound

    clickSound.play();

    flowerMenu.undisplay();

    cashierMenu.undisplay();

  });

  // bouquet settings

  bouquet.position(130,160);

  bouquet.size(150,150);

  bouquet.hide();

}

​

function draw() {

  // display balance you have left and total cost of bouquet in cart

  if (ifDisplayStore || ifDisplayMenu) {

    fill(74, 18, 41);

    textSize(18);

    text("Balance:\n"+"$"+balance,20,30);

    textAlign(RIGHT);

    text("Cart:\n"+"$"+cartCost,380,30); 

    textAlign(LEFT); 

  }

}

​

class displayMenus {

  constructor(type) {

    // type will tell us if it's flower picking menu or cashier menu

    this.type = type;

  }

  display() {

    // set bool for displaying menu to true

    ifDisplayMenu = true;

    // draw the rectangle for display menu screen

    rectMode(CENTER);

    fill(252, 227, 237);

    rect(200,200,250,250);

    // hide all the furnature/objects inside the store

    cashier.hide();

    cashierWhite.hide();

    rug.hide();

    flowerTable.hide();

    flowerTableWhite.hide();

    // button to exit out of menu

    exit.show();

    // flower menu

    if (this.type=="flower") {

      // button for adding things to cart

      addButton.show();

      // buttons to switch between flowers 

      right.show();

      right.size(25,50);

      right.position(280,175);

      left.show();

      left.size(25,50);

      left.position(90,175);

      // display flower that we're on

      flowerOptions[displayCounter].show();

​

      // display cost of flower

      fill(74, 18, 41);

      textSize(18);

      text("$"+flowerOptions[displayCounter][1],280,100);

    }

    // cashier menu

    if (this.type=="cashier") {

      // button for purchasing

      checkoutButton.show();

      // display flowers in a bouquet shape

      imageMode(CENTER);

      // go through all the flowers in the cart array

      for (var i=0;i<cart.length;i++) {

        push();

        // random positions and orientation of flowers

        translate(random(170,240),random(140,210));

        rotate(random(-PI/6,PI/6));

        // display each flower inside the cart

        image(flowerOptionsBouquet[cart[i]],0,0,200,200);

        pop(); 

      }

      // display bouquet wrapping

      bouquet.show();

    }

  }

  // undisplay the menus function

  undisplay() {

    ifDisplayMenu = false;

    // go back to the store once you exit the menus

    displayStore();

    // hide buttons and images

    exit.hide();

    // flower menu

    if (this.type=="flower") {

      right.hide();

      left.hide();

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

        flowerOptions[i].hide();

      }

      addButton.hide();      

    }

    // cashier menu

    if (this.type=="cashier") {

      checkoutButton.hide();

      bouquet.hide();

    }

  }

}

​

// hide closed door and show opened door when user hovers 

function displayOpenDoor() {

  if (!ifDisplayStore) {

    doorClose.hide();

    doorOpen.show();

  }

}

​

// hide open door and show closed door when user unhovers

function displayCloseDoor() {

  if (!ifDisplayStore) {

    doorClose.show();

    doorOpen.hide();

  }

}

​

// this shows all the elements in the store and hides unnecessary ones

function displayStore() {

  // play mouse click sound

  clickSound.play();

  ifDisplayStore = true;

  doorOpen.hide();

  doorClose.hide();

  background(backgroundColor);

  cashier.show();

  rug.show();

  flowerTable.show();

}

​

// hover over cashier

function displayCashierWhite() {

  cashier.hide();

  cashierWhite.show();

}

​

// unhover (mouse out) from cashier

function displayCashier() {

  if (!ifDisplayMenu) {

    cashier.show();

    cashierWhite.hide(); 

  }

}

​

// hover over rug

function displayRugWhite() {

  rug.hide();

  rugWhite.show();

}

​

// unhover (mouse out) of rug

function displayRug() {

  if (ifDisplayStore) {

    rug.show();

    rugWhite.hide();

  }

}

​

// hover over flower table

function displayFlowerTableWhite() {

  if(!ifDisplayMenu) {

    flowerTableWhite.show();

    flowerTable.hide(); 

  }

}

​

// unhover (mouse out) from flower table

function displayFlowerTable() {

  if(!ifDisplayMenu) {

    flowerTable.show();

    flowerTableWhite.hide();

  }

}

​

// when user clicks on rug, leave store

function leaveStore() {

  background(backgroundColor);

  // play mouse click sound

  clickSound.play();

  // reset all the money and carts only if funds are all used up

  if (balance == 0) {

    cart = [];

    balance = 100;

    cartCost = 0; 

  }

  // display doors and undisplay elements from inside the store

  ifDisplayStore = false;

  doorClose.show();

  cashier.hide();

  rug.hide();

  rugWhite.hide();

  flowerTable.hide();

}