let bgMusic;

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",

    },

  },

};

​

function preload() {

  bgMusic = loadSound("a_background.mp3");

  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);

  bgMusic.loop();

  bgMusic.setVolume(1);

}

​

function draw() {

  background(255);

  fill(0);

  text("Press Space Bar to select Serial Port", 20, 30);

​

  switch (canvasState) {

    case "start":

      displayStartScreen();

      break;

    case "menu":

      displayMenu();

      break;

    case "starter":

    case "main":

    case "dessert":

      displayPrompt();

      break;

    case "video":

      playCurrentGIF();

      break;

    case "finalDish":

      displayFinalDish();

      break;

  }

}

​

function keyPressed() {

  if (key === " ") setUpSerial();

  if (key === "f") toggleFullscreen();

  if (key === "m") {

    bgMusic.isPlaying() ? bgMusic.pause() : bgMusic.play();

  }

  if (key === "1" || key === "2" || key === "3") {

    if (canvasState === "menu") {

      if (key === "1") {

        currentCourse = "starter";

        canvasState = "starter";

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

        currentCourse = "main";

        canvasState = "main";

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

        currentCourse = "dessert";

        canvasState = "dessert";

      }

    }

  }

}

​

function toggleFullscreen() {

  fullscreen(!fullscreen());

}

​

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];

​

  // Ensure category and prompts exist

  if (!assets[currentCourse]?.prompts || !assets[currentCourse].prompts[category]) {

    console.error("Invalid currentCourse or category:", currentCourse, category);

    return;

  }

​

  let promptGif = assets[currentCourse].prompts[category];

  promptGif.show();

  promptGif.position(0, 0);

  promptGif.size(width, height);

}

​

function playChoiceGIF(choice) {

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

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

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

​

  let category = categories[currentStep];

​

  // Ensure category and GIF exist

  if (!assets[currentCourse]?.[category] || !assets[currentCourse][category][choice]) {

    console.error("Invalid choice or category:", category, choice);

    return;

  }

​

  let choiceGif = assets[currentCourse][category][choice];

  choiceGif.show();

  choiceGif.position(0, 0);

  choiceGif.size(width, height);

​

  setTimeout(() => {

    choiceGif.hide();

    currentStep++;

    if (currentStep >= 3) {

      canvasState = "finalDish";

    } else {

      displayPrompt(); // Show the next prompt

    }

  }, 5000);

}

​

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;

}

​

function readSerial(data) {

  console.log("Serial data received: ", data);

  if (data === "reset") {

    canvasState = "start";

    currentStep = 0;

    choices = [];

    currentGIF = null;

    loop(); // Restart the loop

    console.log("Game reset");

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

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

      let choice = parseInt(data);

      choices.push(choice);

      playChoiceGIF(choice); // Display the selected GIF and then proceed

    }

  }

}

​

async function setUpSerial() {

  ({ port, reader, writer } = await getPort());

  runSerial();

}

​

async function runSerial() {

  try {

    while (true) {

      const { value, done } = await reader.read();

      if (done) {

        reader.releaseLock();

        break;

      }

      readSerial(value);

    }

  } catch (e) {

    console.error(e);

  }

}

​