path: root/prj_Irene/a.js

const opt_con_elem = document.getElementById("option-container");
const frame_elem = document.getElementById("box");
const box_elem = document.getElementById("box-2");
const char_elem = document.getElementById("charater-box");
const char_div = document.getElementById("char");
let counter = 0;
const iloveher = document.getElementById("only-for-you");
const getout = document.getElementById("?");
const lockicon = document.getElementById("lock-icon");
const iloveirene = document.getElementById("lockscreen-container");
const maincontent = document.getElementById("love-irene-container");

clickIcon = document.createElement("img");
clickIcon.src = "./sources/BERRY.png";
clickIcon.style.marginLeft = "10px";
clickIcon.style.display = "inline-block";
clickIcon.id = "click-icon-image";
clickIcon.toggle = false;
let count = 0;

// create a texter function
// create a story runner function
// create a continue event button
// create a character changer

function youarenotsupposedtobehere() {
  lockicon.remove();
  iloveirene.style.opacity = 1;
  getout.appendChild(iloveirene);
  const b = setInterval(() => {
    iloveher.innerHTML += "get out ";
    count++;
    count %= 10;
    iloveirene.style;
    if (count % 5 == 0) {
      iloveirene.style.backgroundColor = "red";
    } else {
      iloveirene.style.backgroundColor = "black";
    }
  }, 10);
}

function typeText(text, container = box_elem, speed = 30, tag = "div") {
  return new Promise((resolve) => {
    const textElem = document.createElement(tag);
    textElem.className = "text";
    textElem.innerHTML = "";
    container.appendChild(textElem);

    let i = 0;

    const interval = setInterval(() => {
      textElem.innerHTML += text[i];
      i++;

      if (i >= text.length) {
        clearInterval(interval);
        resolve(textElem);
      }
    }, speed);
  });
}

function deleteText() {
  a = document.querySelectorAll(".text").forEach((div) => div.remove());
}

function appendClickIcon() {
  return new Promise((resolve) => {
    box_elem.appendChild(clickIcon);

    box_elem.addEventListener(
      "click",
      () => {
        clickIcon.remove();
        resolve();
      },
      { once: true },
    );
  });
}

function charChanger(picPath) {
  let a = document.querySelector("#char > img");
  if (a) {
    a.remove();
  }

  const char = document.createElement("img");
  char.src = picPath;
  char.style.transform = "translateY(10%)";
  char.style.opacity = "0";
  char_div.appendChild(char);
  setTimeout(() => {
    char.style.transition = "transform 0.5s ease-out, opacity 0.5s ease-out";
    char.style.transform = "translateY(0)";
    char.style.opacity = "1";
  }, 100);
}

function openAnimation() {
  frame_elem.style.transition = "opacity 0.7s ease-out, transform 1s ease-out";
  frame_elem.style.opacity = "0.7";
  frame_elem.style.transform = "translate(-50%, 50%)";
}

const scene1 = [
  { text: ' "Hey you there! Are you Irene?"' },
  {
    text: "She tilts her head slightly, studying you with curious eyes. Her smile is gentle, but there’s something deliberate in it — as if this meeting was planned long before now. You hesitate for a moment before answering.",
  },
];

const scene1_Yes = [
  { text: '"Y-Yes! That\'s me!" ' },
  { text: "‎ " },
  { text: "Her expression brightens, relief flickering across her face." },
  {
    text: "\"Good, I thought he wouldn't make it in time and I'd never be able to see you like I am right now. \" ",
  },
  { text: "She steps a little closer, lowering her voice." },
  { text: "\“There’s something I need to tell you. Something… important.\”" },
];

const scene1_No = [
  {
    text: "She doesn’t answer right away. Her gaze stays on you, quiet and unreadable, as if she’s carefully tracing every detail of your face. The silence stretches, heavy but gentle, before her lips finally curve into a faint, tender smile.",
  },
  {
    text: '"Then… why are you here at all? This place was never meant for you. It was only created for that girl… you weren’t supposed to step into it."',
    speed: 40,
  },
];

scene2 = [
  {
    text: "Saya turns her eyes away for a moment, staring into the distance as if she’s looking at a world far beyond this one. When she speaks again, her voice is calm, but there’s something deeply sincere beneath it.",
  },
];

scene2_1 = [
  {
    text: '"You know… out there, there’s always someone who loves you without holding anything back. And that applies to you too."',
  },
  { text: '"I think you already know who I’m talking about."' },
];
scene2_1_1 = [{ text: '"Yes… I mean Poro."' }, { text: "‎ " }];
scene2_1_2 = [
  {
    text: 'You let out a quiet breath, your shoulders dropping slightly as old feelings resurface. "Yeah… I know. But what about him? I really don’t want to talk about him anymore. He’s such a kid."',
  },
  { text: "‎ " },
  {
    text: "Saya listens without interrupting, her expression softening as you speak. She nods slowly, understanding clear in her eyes. ",
  },
  {
    text: '"I won’t deny it. He’s childish, reckless, and sometimes unbearably annoying. I know he hurt you before. Every fight left memories that still ache when you think about them. When he told me everything… I was angry too. I really was."',
  },
  { text: "‎ " },
  {
    text: 'She pauses, fingers tightening slightly as if choosing her words carefully. "But Valentine’s Day is coming. Everyone seems to have someone by their side. And if he went as far as sending you to this place just so you could talk to me… then that means both of you must still be single, right now."',
  },
];

scene2_2 = [
  {
    text: "Saya closes her eyes and takes a deep breath, inhaling slowly before letting it out. When she opens them again, there’s resolve there, mixed with hesitation.",
  },
  {
    text: '"I have to admit it… he asked me to say this for him. He wanted me to ask you if you’d be his partner this Valentine’s Day. He wants you more than anything."',
  },
  {
    text: 'She lets out a small, tired laugh, shaking her head slightly. "Honestly, I don’t even know why I agreed to help him. He’s annoying, stubborn, and way too emotional. But… still. Do you want him to be your partner this Valentine? It’s completely your choice. I just… want to see both of you happy."',
  },
];

scene3_Yes = [
  {
    text: "Her eyes widen for a second before she breaks into a bright, genuine smile, one that she doesn’t bother trying to hide.",
  },
  {
    text: '"Huh… really? I’m happy for him. And honestly, a little jealous too. You’re beautiful, you’re smart,  he  is the luckiest person I have every seen. That’s all I wanted to say. Thank you for coming here. And hey… you should tell him yourself. I really want to see that kid lose his mind when he finds out."',
  },
  { text: '"See you, bunny ^_^"' },
];

scene3_No = [
  {
    text: "Her smile softens, and for just a moment, regret flickers across her face before she gently hides it away.",
  },
  {
    text: '"Oh… I understand. I really do. He’s not mature enough to be with you right now, and your feelings come first. Still, I’m glad I got to talk to you. You should tell him your decision yourself. He’ll respect it, even if it hurts. He won’t blame you. And even if you don’t care… just remember this—he loves you deeply, Irene."',
  },
  { text: '"Bye-bye ^_^"' },
];

async function playScene(scene) {
  for (const line of scene) {
    await typeText(line.text, box_elem, scene.speed ?? 30);
  }
}

async function storyRunner() {
  charChanger("./sources/happy2.png");

  await appendClickIcon();
  openAnimation();

  charChanger("./sources/talking1.png");

  await playScene(scene1);

  const option1 = document.createElement("div");
  option1.className = "option";
  option1.innerText = "Yes";
  option1.id = "option-1";

  const option2 = document.createElement("div");
  option2.className = "option";
  option2.innerText = "No";
  option2.id = "option-2";

  opt_con_elem.appendChild(option1);
  opt_con_elem.appendChild(option2);
  option1.addEventListener("click", async () => {
    localStorage.setItem("unlocked", true);

    charChanger("./sources/happy2.png");
    option1.remove();
    option2.remove();

    await playScene(scene1_Yes);
    await appendClickIcon();

    await playScene([{ text: '"What is it?" You asked.' }]);

    await appendClickIcon();

    deleteText();

    await appendClickIcon();
    await charChanger("./sources/confused.png");
    await playScene(scene2);

    await appendClickIcon();

    await charChanger("./sources/talking1.png");
    await playScene(scene2_1);

    await appendClickIcon();
    await playScene(scene2_1_1);
    await appendClickIcon();

    deleteText();
    await appendClickIcon();
    await playScene(scene2_1_2);

    await appendClickIcon();

    deleteText();
    await appendClickIcon();
    await charChanger("./sources/talking1.png");
    await playScene(scene2_2);

    const ILOVEYOUSOMUCH = document.createElement("div");
    ILOVEYOUSOMUCH.className = "option";
    ILOVEYOUSOMUCH.innerText = "Yes";

    const stillloveyoutho = document.createElement("div");
    stillloveyoutho.className = "option";
    stillloveyoutho.innerText = "No";

    opt_con_elem.appendChild(ILOVEYOUSOMUCH);
    opt_con_elem.appendChild(stillloveyoutho);

    ILOVEYOUSOMUCH.addEventListener("click", async () => {
      stillloveyoutho.remove();
      ILOVEYOUSOMUCH.remove();
      await charChanger("./sources/happy1.png");
      await deleteText();
      await appendClickIcon();
      await playScene(scene3_Yes);
      await appendClickIcon();
      window.location.href = "../index.html";
    });
    stillloveyoutho.addEventListener("click", async () => {
      stillloveyoutho.remove();
      ILOVEYOUSOMUCH.remove();
      await charChanger("./sources/happy2.png");
      await deleteText();
      await appendClickIcon();
      await playScene(scene3_No);
      await appendClickIcon();
      window.location.href = "../index.html";
    });
  });
  option2.addEventListener("click", async () => {
    localStorage.setItem("unlocked", false);

    charChanger("./sources/confused.png");
    option1.remove();
    option2.remove();

    await playScene(scene1_No);
    youarenotsupposedtobehere();
  });
}

lockicon.addEventListener("click", async () => {
  console.log("Paw clicked");
  console.log(localStorage.getItem("unlocked"));
  lockicon.style.height = "300px";
  lockicon.style.transition = "all 0.7s ease-out";
  setTimeout(() => {
    iloveirene.style.transition = "opacity 0.7s ease-out";
    iloveirene.style.opacity = "0";
    lockicon.style.opacity = "0";
    setTimeout(() => {
      iloveirene.remove();
      lockicon.remove();
      maincontent.style.display = "block";
    }, 700);
  }, 700);

  setTimeout(() => {
    frame_elem.style.transition =
      "opacity 0.7s ease-out, transform 1s ease-out";
    frame_elem.style.opacity = "0.7";
    frame_elem.style.transform = "translate(-50%, 50%)";
  }, 1400);
  setTimeout(() => {
    storyRunner();
  }, 3000);
});