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").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");

   addBlogposts();

   let search = window.location.search;
   if (search != "") {
      search = search.slice(1, -1);
      let parts = search.split("=");
      if (parts[0] == "id") {
         setBlogText(parts[1] + ".html", () => {});
      }
   }
}

function openPage(page: string, new_url: string = null) {
   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 = new_url || page;
      let targetPg = "/" + target;
      if (target == "about") { target = ""; targetPg = ""; };

      window.history.pushState(target, target, `${targetPg}/`);
      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.innerHTML = val.title;
      let timestamp = document.createElement("p");
      timestamp.className += "timestamp";
      timestamp.innerHTML = new Date(val.time).toUTCString();
      title.appendChild(timestamp);

      div.appendChild(title);

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

function setBlogText(source: string, callback: () => void) {
   let xmlhttp = new XMLHttpRequest();

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

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