let currentStep = 0;

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

let currentCourse = "";

let currentGIF = null;

let choices = [];

let gifStartTime = 0;

​

let assets = {

  startScreen: "start.gif",

  menuGIF: "menu.gif",

  starter: {

    prompts: { base: "s_1.gif", veggies: "s_2.gif", dressing: "s_3.gif" },

    base: { 1: "s_lettuce.gif", 2: "s_kale.gif" },

    veggies: { 1: "s_cucumber.gif", 2: "s_pepper.gif" },

    dressing: { 1: "s_oil.gif", 2: "s_ranch.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: {

    prompts: { base: "m_1.gif", protein: "m_2.gif", veggies: "m_3.gif" },

    base: { 1: "m_rice.gif", 2: "m_pasta.gif" },

    protein: { 1: "m_beef.gif", 2: "m_shrimp.gif" },

    veggies: { 1: "m_carrot.gif", 2: "m_tomat.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: {

    prompts: { base: "d_1.gif", fruit: "d_2.gif", garnish: "d_3.gif" },

    base: { 1: "d_cake.gif", 2: "d_donut.gif" },

    fruit: { 1: "d_mango.gif", 2: "d_strawberry.gif" },

    garnish: { 1: "d_coconut.gif", 2: "d_chocolat.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",

    },

  },

};

​

let backgroundSound, finalDishSound;

​

function preload() {

  // Preload visual assets only

  for (let course in assets) {

    if (course === "startScreen" || course === "menuGIF") {

      assets[course] = createImg(assets[course], `${course} GIF`);

      assets[course].hide();

    } else {

      for (let category in assets[course]) {

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

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

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

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

        }

      }

    }

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Dynamically load audio files

  backgroundSound = loadSound("background.mp3");

  finalDishSound = loadSound("finalDish.mp3");

}

​

function draw() {

  background(255);

​

  switch (canvasState) {

    case "start":

      displayStartScreen();

      break;

    case "menu":

      displayMenu();

      break;

    case "starter":

    case "main":

    case "dessert":

      displayPrompt();

      break;

    case "video":

      playCurrentGIF();

      break;

    case "finalDish":

      if (backgroundSound.isPlaying()) {

        backgroundSound.stop();

        finalDishSound.loop();

      }

      displayFinalDish();

      break;

  }

}

​

function mousePressed() {

  // Start background sound after user interaction

  if (!backgroundSound.isPlaying()) {

    backgroundSound.loop();

  }

}

​

function displayStartScreen() {

  assets.startScreen.show();

  assets.startScreen.position(0, 0);

  assets.startScreen.size(width, height);

​

  if (keyIsPressed && key === " " && isDebouncedKeyPress()) {

    canvasState = "menu";

    assets.startScreen.hide();

  }

}

​

function displayMenu() {

  assets.menuGIF.show();

  assets.menuGIF.position(0, 0);

  assets.menuGIF.size(width, height);

​

  if (keyIsPressed && isDebouncedKeyPress()) {

    if (key === "1") {

      currentCourse = "starter";

      canvasState = "starter";

    } else if (key === "2") {

      currentCourse = "main";

      canvasState = "main";

    } else if (key === "3") {

      currentCourse = "dessert";

      canvasState = "dessert";

    }

    assets.menuGIF.hide();

  }

}

​

function displayPrompt() {

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

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

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

​

  let category = categories[currentStep];

  assets[currentCourse].prompts[category].show();

  assets[currentCourse].prompts[category].position(0, 0);

  assets[currentCourse].prompts[category].size(width, height);

​

  if (keyIsPressed && isDebouncedKeyPress()) {

    choices.push(key === "1" ? 1 : 2);

    assets[currentCourse].prompts[category].hide();

    currentGIF = assets[currentCourse][category][choices[currentStep]];

    canvasState = "video";

    gifStartTime = millis();

  }

}

​

function playCurrentGIF() {

  if (currentGIF) {

    if (!currentGIF._displayed) {

      currentGIF.show();

      currentGIF.position(0, 0);

      currentGIF.size(width, height);

      currentGIF._displayed = true;

    }

​

    if (millis() - gifStartTime > 5000) {

      currentGIF.hide();

      currentGIF._displayed = false;

      if (currentStep < 2) {

        currentStep++;

        canvasState = currentCourse;

      } else {

        canvasState = "finalDish";

      }

    }

  }

}

​

function displayFinalDish() {

  let choiceString = choices.join("");

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

  finalGIF.show();

  finalGIF.position(0, 0);

  finalGIF.size(width, height);

}

​

function isDebouncedKeyPress(delay = 200) {

  let currentTime = millis();

  if (currentTime - lastKeyPressTime > delay) {

    lastKeyPressTime = currentTime;

    return true;

  }

  return false;

}

​

​