Teascade.net/ts/main.ts

interface Window {
   currPage: string;
   currOpacity: number;
}


function main(page: string) {
   window.currPage = page;
   window.currOpacity = 1;

   document.getElementById("about-link").attributes.removeNamedItem("href");
   document.getElementById("games-link").attributes.removeNamedItem("href");
   document.getElementById("blog-link").attributes.removeNamedItem("href");

   document.getElementById("about-link").onclick = () => openPage("about");
   document.getElementById("games-link").onclick = () => openPage("games");
   document.getElementById("blog-link").onclick = () => openPage("blog");
}

function openPage(page: string) {
   if (page == window.currPage) { return; }

   slideOpacity(() => {
      document.getElementById(window.currPage).className = "hiddenarea";
      window.currPage = page;
      document.getElementById(page).style.opacity = "0";
      document.getElementById(page).className = "";
      let target = page;
      if (target == "about") { target = "" };

      window.history.pushState(target, target, `/${target}/`);
      slideOpacity(() => {

      }, 1.5);
   }, -1.5);
}

function slideOpacity(callback: () => void, step: number) {
   let currElem = document.getElementById(window.currPage);
   let id = setInterval(() => {
      window.currOpacity += 0.02 * step;
      currElem.style.opacity = "" + window.currOpacity;
      if ((window.currOpacity <= 0 && step < 0) || (window.currOpacity >= 1 && step > 0)) {
         clearInterval(id);
         callback();
      }
   }, 2);
}