xxxxxxxxxx
444
// all the html element image variables
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();
}