let game;

// Establishing variables to store images and audio

let ingredientImages = {};

let dishImages = {};

let font;

let shelfImage;

let titleImage;

let menuImage;

let recipeImage;

let honeySaltFont;

let ovenImages = [];

let finalImage;

let bgMusic;

let tickingSound;

​

// Buttons for dish selection

let buttons = [];

​

function preload() {

  // Loading custom fonts

  honeySaltFont = loadFont("assets/Honey Salt.otf");

  font = loadFont("assets/Goldfish.ttf");

  shelfImage = loadImage("assets/shelf.png");

  titleImage = loadImage("assets/title.png");

  menuImage = loadImage("assets/menu.png");

  recipeImage = loadImage("assets/recipe.png");

  ovenImages[0] = loadImage("assets/oven1.png");

  ovenImages[1] = loadImage("assets/oven2.png");

  ovenImages[2] = loadImage("assets/oven3.png");

  finalImage = loadImage("assets/final.png");

  bgMusic = loadSound("assets/background.mp3");

  tickingSound = loadSound("assets/ticking.mp3");

​

  // Load ingredient images

  ingredientImages["Flour"] = loadImage("assets/flour.png");

  ingredientImages["Sugar"] = loadImage("assets/sugar.png");

  ingredientImages["Eggs"] = loadImage("assets/eggs.png");

  ingredientImages["Milk"] = loadImage("assets/milk.png");

  ingredientImages["Butter"] = loadImage("assets/butter.png");

  ingredientImages["Chocolate"] = loadImage("assets/chocolate.png");

  ingredientImages["Baking Powder"] = loadImage("assets/baking powder.png");

  ingredientImages["Vanilla"] = loadImage("assets/vanilla.png");

  ingredientImages["Salt"] = loadImage("assets/salt.png");

  ingredientImages["Honey"] = loadImage("assets/honey.png");

  ingredientImages["Yeast"] = loadImage("assets/yeast.png");

  ingredientImages["Apples"] = loadImage("assets/apples.png");

​

  // Load dish images

  dishImages["Brownie"] = loadImage("assets/brownie.png");

  dishImages["Cupcake"] = loadImage("assets/cupcake.png");

  dishImages["Pie"] = loadImage("assets/pie.png");

}

​

// Creating a button class to select the recipes

class Button {

  constructor(label, x, y, w, h, callback) {

    this.label = label;

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.callback = callback;

  }

​

  display() {

    // Drawing the buttons, its color, and setting its dimensions

    fill("#BDE0FE");

    stroke(0);

    strokeWeight(2);

    rect(this.x, this.y, this.w, this.h, 10);

​

    fill("#332211");

    noStroke();

    textSize(38);

    textAlign(CENTER, CENTER);

    textFont(font);

    text(this.label, this.x + this.w / 2, this.y + this.h / 2);

  }

​

  checkClick(px, py) {

    // Ensuring button works when clicked on and not outside of bounds

    return (

      px > this.x && px < this.x + this.w && py > this.y && py < this.y + this.h

    );

  }

}

​

// Creating a class of Ingredients

class Ingredient {

  constructor(x, y, name) {

    this.x = x;

    this.y = y;

    this.size = 100;

    this.selected = false; // Ensuring that the selection can be undone

    this.name = name;

  }

​

  display() {

    // Will only display the ingredients in the Selection stage

    if (game.state === "selection") {

      let img = ingredientImages[this.name];

      if (img) {

        image(img, this.x - img.width / 2, this.y - img.height / 2);

      }

​

      if (this.selected) {

        // Displays a circle when the ingredient is selected

        noFill();

        stroke(0);

        strokeWeight(2);

        ellipse(this.x, this.y, this.size + 20, this.size + 20);

      }

    }

  }

​

  select() {

    if (!this.selected) {

      this.selected = true;

      game.selectedIngredients.push(this.name); // Add to selectedIngredients array when selected

    }

  }

​

  deselect() {

    this.selected = false; // Makes the selection false if the user clicks the ingredient again

    let index = game.selectedIngredients.indexOf(this.name);

    if (index !== -1) {

      game.selectedIngredients.splice(index, 1); // Remove from selectedIngredients if deselected

    }

  }

​

  checkClick(px, py) {

    return (

      px > this.x - this.size / 2 &&

      px < this.x + this.size / 2 &&

      py > this.y - this.size / 2 &&

      py < this.y + this.size / 2

    );

  }

}

​

class Game {

  // Creating a game class to store the game stages

  constructor() {

    this.state = "start";

    this.selectedDish = null;

    this.correctIngredients = [];

    this.selectedIngredients = [];

    this.allIngredients = this.generateIngredients();

    this.memoryTimer = 0;

    this.bakingTimer = 0;

    this.selectionTimer = 0;

  }

​

  generateIngredients() {

    let ingredients = [];

    // Displaying the ingredients on the shelf

    let cols = 4;

    let rows = 3;

    let spacing = 200;

    let ingredientNames = Object.keys(ingredientImages);

​

    for (let i = 0; i < cols * rows; i++) {

      let x = 150 + (i % cols) * spacing;

      let y = 200 + Math.floor(i / cols) * spacing; // Standard y position calculation

​

      let name = ingredientNames[i % ingredientNames.length];

​

      // Adjusting The position within the shelf

      if (name === "Eggs") {

        y += 30;

      } else if (name === "Butter") {

        y += 30;

      } else if (name === "Chocolate") {

        y += 30;

      } else if (name === "Baking Powder") {

        y -= 15;

      } else if (name === "Vanilla") {

        y -= 15;

      } else if (name === "Salt") {

        y -= 20;

      } else if (name === "Honey") {

        y -= 15;

      } else if (name === "Yeast") {

        y -= 20;

      } else if (name === "Apples") {

        y += 30;

      }

​

      ingredients.push(new Ingredient(x, y, name));

    }

​

    return ingredients;

  }

  display() {

    background(255); // Set background to white

​

    if (this.state === "selection") {

      image(shelfImage, 0, 0, width, height); // Display shelf as background

    }

​

    textAlign(CENTER, CENTER);

    textFont(font);

​

    this.allIngredients.forEach((ingredient) => ingredient.display());

​

    stroke(0);

    strokeWeight(1);

    fill(0);

​

    if (this.state === "start") {

      image(titleImage, 0, 0, width, height); // Display title screen background image

      textSize(48);

      text("Sweet Treats Bakery", width / 2, height / 2 - 50); // Title Text

      textSize(32);

      text("Click to Start", width / 2, height / 2 + 50); // Subtitle Text

    } else if (this.state === "menu") {

      image(menuImage, 0, 0, width, height); // Display menu screen background image

      fill("#332211");

      textSize(64);

      text("MENU", width / 2, 100);

​

      buttons.forEach((button) => button.display());

    } else if (this.state === "memory") {

      image(recipeImage, 0, 0, width, height); // Display recipe image as background

      textSize(32);

      text("Memorize These Ingredients!", width / 2, 80);

      textFont(honeySaltFont);

      textSize(35);

      this.correctIngredients.forEach((ing, i) =>

        text(ing, width / 2, 300 + i * 50)

      );

​

      if (millis() - this.memoryTimer > 3000) {

        this.state = "selection";

        this.selectionTimer = millis();

      }

    } else if (this.state === "selection") {

      textSize(32);

      text("Select the Ingredients!", width / 2, 50);

      textSize(24);

      text(

        `Time left: ${Math.max(

          0,

          5 - floor((millis() - this.selectionTimer) / 1000)

        )}s`,

        width / 2,

        110

      );

​

      if (millis() - this.selectionTimer > 5000) {

        this.state = "baking";

        this.bakingTimer = millis();

      }

    } else if (this.state === "baking") {

      let elapsedTime = millis() - this.bakingTimer;

      let index = floor(elapsedTime / 1500); // Change image every 1.5 seconds

​

      index = min(index, 2);

​

      // Play ticking sound only when baking starts

      if (!tickingSound.isPlaying()) {

        tickingSound.loop();

        tickingSound.setVolume(0.8);

      }

​

      // Display the oven images

      image(ovenImages[index], 0, 0, width, height);

​

      textSize(32);

      fill("#332211");

      text("Baking...", width / 2, height / 2);

​

      // Stop ticking and move to result after 4.5 seconds

      if (elapsedTime > 4500) {

        this.state = "result";

        tickingSound.stop();

      }

    } else if (this.state === "result") {

      image(finalImage, 0, 0, width, height); // Display title screen background image

      textSize(40);

      if (this.checkWin()) {

        text(`Your ${this.selectedDish} is now ready!`, width / 2, 200);

        image(

          dishImages[this.selectedDish],

          width / 2 - dishImages[this.selectedDish].width / 2,

          300

        );

      } else {

        text("Oh no! Those were the wrong ingredients.", width / 2, height / 2);

      }

      textSize(20);

      text("Click to Play Again", width / 2, height / 2 + 250);

    }

  }

​

  handleClick() {

    if (this.state === "start") {

      this.state = "menu";

    } else if (this.state === "menu") {

      buttons.forEach((button) => {

        if (button.checkClick(mouseX, mouseY)) {

          this.selectedDish = button.label;

          this.correctIngredients = {

            // Storing the correct ingredients of the recipes

            Brownie: [

              "Flour",

              "Sugar",

              "Eggs",

              "Butter",

              "Baking Powder",

              "Chocolate",

            ],

            Cupcake: ["Flour", "Eggs", "Sugar", "Milk", "Vanilla"],

            Pie: ["Flour", "Sugar", "Eggs", "Butter", "Apples"],

          }[this.selectedDish];

​

          this.memoryTimer = millis();

          this.state = "memory";

        }

      });

    } else if (this.state === "selection") {

      this.allIngredients.forEach((ingredient) => {

        if (ingredient.checkClick(mouseX, mouseY)) {

          ingredient.select();

        }

      });

    } else if (this.state === "result") {

      this.resetGame();

    }

  }

​

  resetGame() {

    this.state = "menu";

    this.selectedIngredients = [];

    this.allIngredients.forEach((ingredient) => ingredient.deselect()); // Deselect all ingredients

  }

​

  checkWin() {

    return (

      this.selectedIngredients.length === this.correctIngredients.length &&

      this.selectedIngredients.every((ing) =>

        this.correctIngredients.includes(ing)

      )

    );

  }

}

function setup() {

  createCanvas(1000, 800);

  game = new Game();

​

  buttons = []; // Reset buttons to avoid duplicates

​

  // Creating buttons with static positions

  buttons.push(new Button("Brownie", 400, 200, 200, 100, () => {}));

  buttons.push(new Button("Cupcake", 400, 350, 200, 100, () => {}));

  buttons.push(new Button("Pie", 400, 500, 200, 100, () => {}));

​

  if (!bgMusic.isPlaying()) {

    bgMusic.loop(); // Play music in a loop

    bgMusic.setVolume(0.5);

​

    console.log(buttons);

  }

}

​

function draw() {

  game.display();

}

​

function mousePressed() {

  game.handleClick();

}

​