Teascade.net/ts/main.ts

interface Window {
   currPage: string;
   currOpacity: number;
   blogpostDataStr: string;
   blogpostData: {title: string, source: string, time: number}[];
}


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

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

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

   let links = document.getElementsByClassName("js-link");
   for (let i = 0; i < links.length; i++) {
      let link: HTMLLinkElement = <HTMLLinkElement>links[i];
      let href = link.getAttribute("href").split("/").filter(f => f != "")[0];
      link.removeAttribute("href");
      link.onclick = () => {
         openPage(href);
      }
   }

   addBlogposts();

   let search = window.location.search;
   if (search != "") {
      setBlogTextOnSearch(search);
   }

   window.onpopstate = () => {
      let page = window.location.pathname.split("/").filter(f => f != "")[0];
      let search = window.location.search.slice(0, -1);

      if (page == "blogtext") {
         setBlogTextOnSearch(search);
      }
      openPage(page || "about", page, false);
   }
}

function openPage(page: string, new_url: string = null, renew_history=true) {
   if (page == window.currPage) { return; }

   slideOpacity(() => {
      let link = document.getElementById(window.currPage + "-link");
      let new_link = document.getElementById(page + "-link");
      console.log(new_link);
      if (link) {
         link.children[0].className = ""
      } if (new_link) {
         new_link.children[0].className = "active"
      }

      document.getElementById(window.currPage).className = "hiddenarea";
      window.currPage = page;
      document.getElementById(page).style.opacity = "0";
      document.getElementById(page).className = "";
      let target = new_url || page;
      let targetPg = "/" + target;
      if (target == "about") { target = ""; targetPg = ""; };

      if (renew_history) {
         window.history.pushState(target, target, `${targetPg}/`);
      }
      document.title = "Teascade | " + page;

      document.getElementsByClassName("stuffarea")[0].scrollTop = 0;

      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);
}

function addBlogposts() {
   window.blogpostData = JSON.parse(window.blogpostDataStr);

   let div = document.getElementById("blog");
   let blogpostData = window.blogpostData.sort((a, b) => {return b.time - a.time});

   blogpostData.forEach((val) => {
      let title = document.createElement("h2");
      title.className = "blogtitle"
      title.innerHTML = val.title;
      let timestamp = document.createElement("p");
      timestamp.className += "timestamp";
      timestamp.innerHTML = new Date(val.time).toUTCString();
      title.appendChild(timestamp);

      div.appendChild(title);

      title.onclick = () => {
         openPage("blogtext", "blogtext?id=" + val.source.slice(0, -5));
         setBlogText(val.source, new Date(val.time).toUTCString());
      };
   })
}

function setBlogTextOnSearch(search: string) {
   search = search.slice(1, -1);
   let parts = search.split("=");
   if (parts[0] == "id") {

      let timestamp: string;
      for (let i in window.blogpostData) {
         console.log(window.blogpostData[i].source);
         console.log(search + ".html");
         if (window.blogpostData[i].source == parts[1] + ".html") {
            timestamp = new Date(window.blogpostData[i].time).toUTCString();
         }
      }
      setBlogText(parts[1] + ".html", timestamp);
   }
}

function setBlogText(source: string, time: string) {
   let xmlhttp = new XMLHttpRequest();

   xmlhttp.onreadystatechange = () => {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
         if (xmlhttp.status == 200) {
            document.getElementById("blogtext").innerHTML = xmlhttp.responseText;

            let timestamp = document.createElement("p");
            timestamp.className += "timestamp";
            timestamp.innerHTML = time;

            document.getElementById("blogtext").appendChild(timestamp);
         }
      }
   }

   xmlhttp.open("GET", "/blogposts/" + source, true);
   xmlhttp.send();
}