script.js - master - DOLOR3SS/lovee

script.js
100 строк3 KB
DOLOR3SS
Create: index.html, style.css, script.js, cat_angry.png, cat_happy.png, kitten.png, heart_red.png, msg3.png, msg2.png, msg1.png
16 июн 2026, 21:03
Верифицирован
16 июн 2026, 21:0300b347e
document.addEventListener('DOMContentLoaded', () => {

  // Все экраны
  const screens = {
    question: document.getElementById('screen-question'),
    angry: document.getElementById('screen-angry'),
    congrats: document.getElementById('screen-congrats'),
    choices: document.getElementById('screen-choices'),
    letter: document.getElementById('screen-letter'),
    screenshots: document.getElementById('screen-screenshots')
  };

  // Кнопки
  const btnYes = document.querySelector('.btn-yes');
  const btnNo = document.querySelector('.btn-no');
  const btnBackFromAngry = document.querySelector('.btn-back');
  const btnOk = document.querySelector('.btn-ok');
  const btnLetter = document.getElementById('btn-letter');
  const btnHeart = document.getElementById('btn-heart');
  const backFromLetter = document.getElementById('back-from-letter');
  const backFromScreenshots = document.getElementById('back-from-screenshots');

  // Флаги, что кнопка уже была открыта
  let letterOpened = false;
  let heartOpened = false;

  // Функция переключения экранов (плавно)
  function showScreen(screenId) {
    Object.values(screens).forEach(s => s.classList.remove('active'));
    document.getElementById(screenId).classList.add('active');
  }

  // ---- Вопрос ----
  btnYes.addEventListener('click', () => {
    showScreen('screen-congrats');
  });

  btnNo.addEventListener('click', () => {
    showScreen('screen-angry');
  });

  btnBackFromAngry.addEventListener('click', () => {
    showScreen('screen-question');
  });

  // ---- Молодец ----
  btnOk.addEventListener('click', () => {
    showScreen('screen-choices');
  });

  // ---- Первая кнопка (Письмо) ----
  btnLetter.addEventListener('click', () => {
    if (!heartOpened) {
      // если вторая ещё не открыта — показываем стрелку назад
      showScreen('screen-letter');
      // добавляем стрелку назад, она уже есть в HTML
    } else {
      // если вторая уже открыта — показываем красное сердечко
      showScreen('screen-letter');
      showFinalHeart('final-heart-container');
    }
    letterOpened = true;
  });

  // ---- Вторая кнопка (Сердечко / скриншоты) ----
  btnHeart.addEventListener('click', () => {
    if (!letterOpened) {
      showScreen('screen-screenshots');
    } else {
      showScreen('screen-screenshots');
      showFinalHeart('final-heart-container-2');
    }
    heartOpened = true;
  });

  // ---- Назад к выбору ----
  backFromLetter.addEventListener('click', () => {
    showScreen('screen-choices');
  });

  backFromScreenshots.addEventListener('click', () => {
    showScreen('screen-choices');
  });

  // ---- Функция для красного сердечка ----
  function showFinalHeart(containerId) {
    const container = document.getElementById(containerId);
    if (container.querySelector('.final-heart')) return; // уже есть

    const heartImg = document.createElement('img');
    heartImg.src = 'images/heart_red.png';
    heartImg.className = 'final-heart';
    heartImg.alt = 'Сердечко';
    heartImg.addEventListener('click', () => {
      alert('Я тебя люблю ❤️');
    });
    container.appendChild(heartImg);
  }

});