let currentStep = 0;

let canvasState = "menu"; // "menu", "starter", "main", "dessert", "video", "finalDish"

let currentCourse = "";

let currentGIF = null;

let gifPlayCount = 0;

let maxPlayCount = 3;

let gifStartTime;

let gifDuration = 2000; // Adjusted to 2 seconds per GIF loop

let choices = [];

let fullscreenEnabled = false;

​

let assets = {

  starter: {

    base: { 1: "lettuce.gif", 2: "kale.gif" },

    veggies: { 1: "carrot.gif", 2: "tomatoes.gif" },

    dressing: { 1: "olive_oil.gif", 2: "caesar_dressing.gif" },

    finalGIFs: {

      "111": "s_111.gif",

      "112": "s_112.gif",

      "121": "s_121.gif",

      "122": "s_122.gif",

      "211": "s_211.gif",

      "212": "s_212.gif",

      "221": "s_221.gif",

      "222": "s_222.gif",

    },

  },

  main: {

    base: { 1: "rice.gif", 2: "pasta.gif" },

    protein: { 1: "shrimp.gif", 2: "beef.gif" },

    veggies: { 1: "tomat.gif", 2: "peppers.gif" },

    finalGIFs: {

      "111": "m_111.gif",

      "112": "m_112.gif",

      "121": "m_121.gif",

      "122": "m_122.gif",

      "211": "m_211.gif",

      "212": "m_212.gif",

      "221": "m_221.gif",

      "222": "m_222.gif",

    },

  },

  dessert: {

    base: { 1: "cake.gif", 2: "pastry.gif" },

    fruit: { 1: "strawberry.gif", 2: "mango.gif" },

    garnish: { 1: "coconut_flakes.gif", 2: "chocolate_shavings.gif" },

    finalGIFs: {

      "111": "d_111.gif",

      "112": "d_112.gif",

      "121": "d_121.gif",

      "122": "d_122.gif",

      "211": "d_211.gif",

      "212": "d_212.gif",

      "221": "d_221.gif",

      "222": "d_222.gif",

    },

  },

};

​

function preload() {

  // Load GIF assets for all courses

  for (let course in assets) {

    for (let category in assets[course]) {

      if (category !== "finalGIFs") {

        for (let option in assets[course][category]) {

          let gifPath = assets[course][category][option];

          assets[course][category][option] = createImg(gifPath, "GIF");

          assets[course][category][option].hide(); // Hide GIFs initially

        }

      } else {

        for (let combo in assets[course][category]) {

          let gifPath = assets[course][category][combo];

          assets[course][category][combo] = createImg(gifPath, "GIF");

          assets[course][category][combo].hide(); // Hide final GIFs initially

        }

      }

    }

  }

}

​

function setup() {

  createCanvas(800, 600);

  textSize(18);

  textAlign(CENTER, CENTER);

​

  // Initialize serial communication

  serial = new p5.SerialPort();

  serial.on("data", readSerial);

  serialActive = false;

}

​

function draw() {

  background(255);

​

  if (canvasState === "menu") {

    displayMenu();

  } else if (canvasState === "starter" || canvasState === "main" || canvasState === "dessert") {

    displayChoices();

  } else if (canvasState === "video") {

    playCurrentGIF();

  } else if (canvasState === "finalDish") {

    displayFinalDish();

  }

}

​

function displayMenu() {

  textSize(32);

  text("Choose a Course:\nStarter, Main, Dessert", width / 2, height / 2);

​

  if (mouseIsPressed) {

    if (mouseX < width / 3) {

      currentCourse = "starter";

      canvasState = "starter";

    } else if (mouseX < (2 * width) / 3) {

      currentCourse = "main";

      canvasState = "main";

    } else {

      currentCourse = "dessert";

      canvasState = "dessert";

    }

  }

}

​

function displayChoices() {

  textSize(24);

  text(`Step ${currentStep + 1} of 3\nPress a Button to Choose`, width / 2, height / 2);

}

​

function playCurrentGIF() {

  if (currentGIF) {

    currentGIF.show();

    currentGIF.position(0, 0);

    currentGIF.size(width, height);

​

    if (millis() - gifStartTime >= gifDuration * maxPlayCount) {

      currentGIF.hide();

      if (currentStep < 3) {

        canvasState = currentCourse;

      } else {

        canvasState = "finalDish";

      }

    }

  }

}

​

function handleChoice(choice) {

  let categories = ["base", "veggies", "dressing"];

  if (currentCourse === "main") categories = ["base", "protein", "veggies"];

  if (currentCourse === "dessert") categories = ["base", "fruit", "garnish"];

​

  if (currentStep < 3) {

    let category = categories[currentStep];

    currentGIF = assets[currentCourse][category][choice];

    gifStartTime = millis();

    gifPlayCount = 0;

    choices.push(choice);

    currentStep++;

    canvasState = "video";

  }

}

​

function displayFinalDish() {

  let choiceString = choices.join("");

  let finalGIF = assets[currentCourse].finalGIFs[choiceString];

  finalGIF.show();

  finalGIF.position(0, 0);

  finalGIF.size(width, height);

​

  textSize(24);

  text("Your Final Dish! Press Reset to Start Over", width / 2, height - 50);

}

​

function resetSystem() {

  currentStep = 0;

  currentCourse = "";

  currentGIF = null;

  gifPlayCount = 0;

  choices = [];

  canvasState = "menu";

​

  // Hide all GIFs

  for (let course in assets) {

    for (let category in assets[course]) {

      for (let item in assets[course][category]) {

        assets[course][category][item].hide();

      }

    }

  }

}

​

// Fullscreen toggle

function keyPressed() {

  if (key === "f") {

    fullscreenEnabled = !fullscreenEnabled;

    fullscreen(fullscreenEnabled);

  }

}

​

// Serial communication functions

function readSerial() {

  let data = serial.readLine().trim();

  if (data === "reset") {

    resetSystem();

  } else if (data === "1" || data === "2") {

    handleChoice(parseInt(data));

  }

}

​