script.js

/* Sound effects and other */
const bgMusic = new Audio('sounds/Background.mp3');
bgMusic.loop = true;     
bgMusic.volume = 0.12;   
const meowSound = new Audio('sounds/meow.mp3');
const shelfopenSound = new Audio('sounds/shelfopen.mp3');
const shelfcloseSound = new Audio('sounds/shelfclose.mp3');
const box1openSound = new Audio('sounds/box1open.mp3');
const box1closeSound = new Audio('sounds/box1close.mp3');
const box2openSound = new Audio('sounds/box2open.mp3');
const box2closeSound = new Audio('sounds/box2close.mp3');
const slidingSound = new Audio('sounds/sliding.mp3');
const paperSound = new Audio('sounds/paper.mp3');
const bookcloseSound = new Audio('sounds/bookclose.mp3');
bookcloseSound.volume = 0.2;
const bookopenSound = new Audio('sounds/bookopen.mp3');
const windowcloseSound = new Audio('sounds/windowclose.mp3');
const windowopenSound = new Audio('sounds/windowopen.mp3');
const lockedopenSound = new Audio('sounds/locked open.mp3');
const lockedpaperSound = new Audio('sounds/lockedpaper.mp3');
const dialogueSound = new Audio('sounds/dialogue.mp3');
const clickSound = new Audio('sounds/click.mp3');

/* Shelf actions */
const shelfClosed = document.getElementById("shelf-closed");
const shelfOpen = document.getElementById("shelf-open");
const shelfHitbox = document.getElementById("shelf-hitbox");
const shelfBooks = document.getElementById("shelf-books-container");
const bookOverlay = document.getElementById("book-overlay");
const bookTextDisplay = document.getElementById("book-view-text");
const bookCloseBtn = document.getElementById("book-close-btn");
shelfHitbox.addEventListener("click", () => {
    const isOpening = shelfOpen.classList.contains("hidden");

    if (isOpening) {
        shelfopenSound.play();
        shelfClosed.classList.add("hidden");
        shelfOpen.classList.remove("hidden");
        shelfBooks.classList.remove("hidden");
    } else {
        shelfcloseSound.play();
        shelfClosed.classList.remove("hidden");
        shelfOpen.classList.add("hidden");
        shelfBooks.classList.add("hidden"); 
        bookOverlay.classList.add("hidden"); 
    }
});
/* Book actions */
document.querySelectorAll(".book").forEach(book => {
    book.addEventListener("click", (e) => {
      bookopenSound.play();
        e.stopPropagation(); 
      const fullText = book.dataset.text;
        const leftPage = document.getElementById("book-view-text-left");
        const rightPage = document.getElementById("book-view-text-right");

        let middle = Math.floor(fullText.length / 2);
        
        let splitIndex = fullText.indexOf(" ", middle);

        if (splitIndex === -1) splitIndex = middle;

        leftPage.textContent = fullText.substring(0, splitIndex).trim();
        rightPage.textContent = fullText.substring(splitIndex).trim();
        
        document.getElementById("book-overlay").classList.remove("hidden");
    });
});


bookCloseBtn.addEventListener("click", () => {
    bookcloseSound.play();
    bookOverlay.classList.add("hidden");
});

bookCloseBtn.addEventListener("click", () => {
  bookOverlay.classList.add("hidden");
});

bookOverlay.addEventListener("click", (e) => {
  if (e.target === bookOverlay) {
    bookOverlay.classList.add("hidden");
  }
});
/* Locked present actions */
const lockedClosed = document.getElementById("locked-present");
const lockedOpen = document.getElementById("locked-present-open");
const keypadOverlay = document.getElementById("keypad-overlay");
const innerPaper = document.getElementById("inner-paper-item");
const finalPaper = document.getElementById("final-paper-overlay");
const codeInput = document.getElementById("code-input");
const keypadError = document.getElementById("keypad-error");

const SECRET_CODE = "5280";

lockedClosed.addEventListener("click", () => {
  keypadOverlay.classList.remove("hidden");
  codeInput.value = "";
  keypadError.classList.add("hidden");
});

document.getElementById("submit-code").addEventListener("click", () => {
  if (codeInput.value === SECRET_CODE) {
    lockedopenSound.play();
    keypadOverlay.classList.add("hidden");
    lockedClosed.classList.add("hidden");
    lockedOpen.classList.remove("hidden");
    innerPaper.classList.remove("hidden");
  } else {
    keypadError.classList.remove("hidden");
    clickSound.play();
    codeInput.value = "";
  }
});

innerPaper.addEventListener("click", () => {
  lockedpaperSound.play();
    finalPaper.classList.remove("hidden");
});

document.getElementById("close-keypad").addEventListener("click", () => {
  keypadOverlay.classList.add("hidden");
  clickSound.play();
});
document.getElementById("close-final-paper").addEventListener("click", () => {
  finalPaper.classList.add("hidden");
  clickSound.play();
});
/* Box action */
const box1Closed = document.getElementById("box1");
const box1Open   = document.getElementById("box1-open");
const paper1 = document.getElementById("paper1");

box1Closed.addEventListener("click", () => {
  box1openSound.play();
  box1Closed.classList.add("hidden");
  box1Open.classList.remove("hidden");
  paper1.classList.remove("hidden");
});

box1Open.addEventListener("click", () => {
  box1closeSound.play();
  box1Open.classList.add("hidden");
  box1Closed.classList.remove("hidden");
  paper1.classList.add("hidden");
});

const box2Closed = document.getElementById("box2");
const box2Open   = document.getElementById("box2-open");
const paper2 = document.getElementById("paper2");
box2Closed.addEventListener("click", () => {
  box2openSound.play();
  box2Closed.classList.add("hidden");
  box2Open.classList.remove("hidden");
  paper2.classList.remove("hidden");
});

box2Open.addEventListener("click", () => {
  box2closeSound.play();
  box2Open.classList.add("hidden");
  box2Closed.classList.remove("hidden");
  paper2.classList.add("hidden");
});

document.querySelectorAll(".paper").forEach(paper => {
  paper.addEventListener("click", () => {
    paperSound.play();
    openOverlay(paper.dataset.text);
  });
}); 

/* Window action */
const windowClosed = document.getElementById("window-closed");
const windowOpen   = document.getElementById("window-open");
const windowCat = document.getElementById("window-cat");

const catBubble = document.getElementById("cat-bubble");


windowCat.addEventListener("click", (event) => {
  meowSound.play();
  event.stopPropagation();
  console.log("Cat clicked!"); 
  catBubble.classList.toggle("hidden");
});

window.addEventListener('click', () => {
    if (bgMusic.paused) {
        bgMusic.play();
    }
}, { once: true });

windowClosed.addEventListener("click", () => {
  windowopenSound.play();
  windowClosed.classList.add("hidden");
  windowOpen.classList.remove("hidden");
  windowCat.classList.remove("peek");
  setTimeout(() => {
    if (!windowOpen.classList.contains("hidden")) {
      windowCat.classList.add("peek");
    }
  }, 2000);
});

windowOpen.addEventListener("click", () => {
  windowcloseSound.play();
  windowOpen.classList.add("hidden");
  windowClosed.classList.remove("hidden");
  windowCat.classList.remove("peek");
  catBubble.classList.add("hidden");
});

const overlay = document.getElementById("overlay");
const overlayText = document.getElementById("overlay-text");
const overlayBtn = document.getElementById("overlay-btn");

function openOverlay(text) {
  overlayText.textContent = text;
  overlay.classList.remove("hidden");
}

overlayBtn.addEventListener("click", () => {
  clickSound.play();
  overlay.classList.add("hidden");
});
/* Wall objects action */
const painting = document.getElementById("painting");

painting.addEventListener("click", () => {
  slidingSound.play();
  painting.classList.toggle("moved");
});


const poster1 = document.getElementById("poster1"); 

poster1.addEventListener("click", () => {
  slidingSound.play();
  poster1.classList.toggle("moved");
});


const poster2 = document.getElementById("poster2"); 
poster2.addEventListener("click", () => {
   slidingSound.play();
  poster2.classList.toggle("moved");
});

const clock = document.getElementById("clock"); 
clock.addEventListener("click", () => {
   slidingSound.play();
  clock.classList.toggle("moved");
});
/* Dialogue bubble action */
const bubble = document.getElementById("present-bubble");
const bubbleText = document.getElementById("bubble-text");
const bubbleLink = document.getElementById("bubble-link");
const paperOverlay = document.getElementById("present-paper-overlay");
const paperImg = document.getElementById("paper-display-img");

document.querySelectorAll(".present").forEach(p => {
    p.addEventListener("click", (e) => {
      dialogueSound.play();
        e.stopPropagation(); 
        const type = p.dataset.type;

        bubble.classList.add("hidden");
        bubbleLink.classList.add("hidden");
        paperOverlay.classList.add("hidden");

        if (type === "dialogue" || type === "link") {
            const baseLeft = p.offsetLeft;
            const baseTop = p.offsetTop;

            const offsetX = parseInt(p.dataset.x) || 0;
            const offsetY = parseInt(p.dataset.y) || -100;

            bubble.style.left = (baseLeft + offsetX) + "px";
            bubble.style.top = (baseTop + offsetY) + "px";

            bubbleText.textContent = p.dataset.text;
            
            if (type === "link") {
                bubbleLink.href = p.dataset.url;
                bubbleLink.classList.remove("hidden");
            }
            bubble.classList.remove("hidden");
        } 
        else if (type === "paper") {
            paperImg.src = p.dataset.image;
            paperOverlay.classList.remove("hidden");
        }
    });
});


document.getElementById("close-paper").addEventListener("click", () => {
  clickSound.play();
    paperOverlay.classList.add("hidden");
});

document.addEventListener("click", () => {
    bubble.classList.add("hidden");
});

function resizeGame() {
    const gameContainer = document.getElementById("game");
    const scene = document.getElementById("scene");

    const targetWidth = 1280;
    const targetHeight = 720;

    const availableWidth = window.innerWidth;
    const availableHeight = window.innerHeight;

    const scaleX = availableWidth / targetWidth;
    const scaleY = availableHeight / targetHeight;
    
    const scale = Math.min(scaleX, scaleY);

    scene.style.transform = `scale(${scale})`;
}

window.addEventListener("resize", resizeGame);

resizeGame();