document.addEventListener("DOMContentLoaded", () => {
  var width = window.matchMedia("(min-width: 479px)");
  const breakpointChecker = function () {
    if (width.matches === true) {
      desktop();
      return;
    } else if (width.matches === false) {
      mobile();
    }
  };
  width.addEventListener("change", breakpointChecker);
  breakpointChecker();
});

function desktop() {
  document.querySelectorAll("[data-trigger='hero']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            hero();
          }
          console.log("hero");
        });
      },
      {
        rootMargin: "-30% 0px -30% 0px",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='collect']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            collect();
          }
        });
      },
      {
        rootMargin: "-30% 0px -30% 0px",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='trade']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            trade();
          }
        });
      },
      {
        rootMargin: "-30% 0px -30% 0px",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='upgrade']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            upgrade();
          }
        });
      },
      {
        rootMargin: "-30% 0px -30% 0px",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='battle']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            battle();
          }
        });
      },
      {
        rootMargin: "-30% 0px -30% 0px",
      }
    ).observe(trigger);
  });
}
function mobile() {
  document.querySelectorAll("[data-trigger='hero']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            hero();
          }
          console.log("hero");
        });
      },
      {
        rootMargin: "0px -45% 0px -45%",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='collect']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            collect();
          }
        });
      },
      {
        rootMargin: "0px -45% 0px -45%",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='trade']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            trade();
          }
        });
      },
      {
        rootMargin: "0px -45% 0px -45%",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='upgrade']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            upgrade();
          }
        });
      },
      {
        rootMargin: "0px -45% 0px -45%",
      }
    ).observe(trigger);
  });
  document.querySelectorAll("[data-trigger='battle']").forEach((trigger) => {
    new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            battle();
          }
        });
      },
      {
        rootMargin: "0px -45% 0px -45%",
      }
    ).observe(trigger);
  });
}

function hero() {
  document
    .querySelectorAll(".background-dealer")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-black")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-monitors:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-gadgets:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-desk:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-chair:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player-throwing-effect")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-1")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-2")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll("[data-animation='upgrade']")
    .forEach((target) => target.classList.remove("active"));
}

function collect() {
  document
    .querySelectorAll(".background-dealer:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-dealer-black")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-monitors:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-gadgets:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-desk:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-chair")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-effect")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-1")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-2")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll("[data-animation='upgrade']")
    .forEach((target) => target.classList.remove("active"));
}
function trade() {
  document
    .querySelectorAll(".background-dealer")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-black:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-monitors")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-gadgets")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-desk:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-chair")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-effect")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-1")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-2")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll("[data-animation='upgrade']")
    .forEach((target) => target.classList.remove("active"));
}
function upgrade() {
  document
    .querySelectorAll(".background-dealer")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-black")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-monitors")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-gadgets")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-desk")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-chair")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-effect")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-1")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-card-2")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll("[data-animation='upgrade']:not(.active)")
    .forEach((target) => target.classList.add("active"));
}
function battle() {
  document
    .querySelectorAll(".background-dealer")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-black")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-monitors")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-gadgets")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-desk:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-dealer-hooded:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player-throwing:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-chair")
    .forEach((target) => target.classList.remove("active"));
  document
    .querySelectorAll(".background-player-throwing-effect:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player-throwing-card-1:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll(".background-player-throwing-card-2:not(.active)")
    .forEach((target) => target.classList.add("active"));
  document
    .querySelectorAll("[data-animation='upgrade']")
    .forEach((target) => target.classList.remove("active"));
}