all the js shit. yea all of it. gonna do some changes so commiting before i break shit

assets/main.js

@@ -1,16 +1,43 @@
 let stylesheet
+var audio = new(window.AudioContext)
+let jsDiv
+let mode
+let side
+let focusMain
+let focusSecond
+const focusSelector = "a, d"
+const back = document.createElement("a")
+back.setAttribute("onclick", "tui.home()")
+back.setAttribute("tabindex", "0")
+back.className = "back"
+back.innerHTML = `⬑Back`
 
 window.addEventListener("load", () => {
     stylesheet = document.styleSheets[0];
-    
+
+    // randomize loading text
+    fetch("/assets/loading.txt")
+    .then(r => r.text())
+    .then(t => Load(t))
+
+    // allow the user to skip on click
     let skipNode = document.createElement("div");
     skipNode.setAttribute("class", "skip-animation");
     skipNode.setAttribute("onclick", "skipAnimation()");
     document.body.appendChild(skipNode);
 
-    fetch("/assets/loading.txt")
-    .then(r => r.text())
-    .then(t => Load(t))
+    // get rid of shit since we have javascript babyyyyyyy
+    if (matchMedia("(min-width: 430px) and (min-height: 430px").matches) {
+        for (let node of document.getElementsByClassName("nojs")) {
+            node.style.display = "none"
+        }
+        stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
+        stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
+        stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
+        document.querySelectorAll("head style").forEach(style => style.remove());
+        jsDiv = document.getElementsByClassName("js")[0]
+        tui.home()
+    }
 });
 
 // skip animations and shit
@@ -42,3 +69,180 @@ function Load (text) {
     loading.children[1].innerHTML = loadText + ".."
     loading.children[2].innerHTML = loadText + "..."
 }
+
+// beep!
+function beep() {
+    var oscillator = audio.createOscillator()
+
+    oscillator.type = "square"
+    oscillator.frequency.value = "1200"
+    oscillator.connect(audio.destination)
+    oscillator.start()
+
+    setTimeout(() => {
+        oscillator.stop()
+    }, 200)
+}
+
+// here are the functions that create every different section
+const tui = {
+    home: function() {
+        mode = "home"
+
+        const div = document.createElement("div")
+        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
+
+        let buttons = document.createElement("div")
+        buttons.className = "buttons"
+        buttons.innerHTML = `<a onclick="tui.about()" tabindex="0">About</a>
+<a onclick="tui.users()" tabindex="0">Users</a>
+<a onclick="tui.services()" tabindex="0">Services</a>
+<a href="https://linuxposting.xyz/">Linuxposting</a>
+<a onclick="beep()" tabindex="0">Beep</a>`
+        div.appendChild(buttons)
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Linuxposting Tilde~"
+        div.appendChild(title)
+        
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+
+        indexFocus()
+    },
+
+    about: function() {
+        mode = "about"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
+        div.appendChild(document.getElementById("about").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "About"
+        div.appendChild(title)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+
+        indexFocus()
+    },
+
+    users: function() {
+        mode = "users"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementById("users").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Users"
+        div.appendChild(title)
+
+        const div2 = document.createElement("div")
+
+        const title2 = document.createElement("span")
+        title2.className = "title2"
+        title2.innerHTML = "Description"
+        div2.appendChild(document.createElement("div"))
+        div2.appendChild(title2)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+        jsDiv.appendChild(div2)
+
+        indexFocus()
+    },
+
+    services: function() {
+        mode = "services"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementById("services").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Services"
+        div.appendChild(title)
+
+        const div2 = document.createElement("div")
+
+        const title2 = document.createElement("span")
+        title2.className = "title2"
+        title2.innerHTML = "Description"
+        div2.appendChild(document.createElement("div"))
+        div2.appendChild(title2)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+        jsDiv.appendChild(div2)
+
+        indexFocus()
+    },
+
+    updateFocus: function() {
+        const focused = document.activeElement
+        const sibling = focused.nextElementSibling
+        switch(mode) {
+            case "users":
+            case "services":
+                if (sibling && sibling.tagName === "P") {
+                    jsDiv.children[1].children[0].replaceChildren(sibling.cloneNode(true))
+                } else {
+                    jsDiv.children[1].children[0].innerHTML = ""
+                }
+                break
+        }
+    }
+}
+
+function indexFocus() {
+    focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
+    if (jsDiv.children[1]) {
+        focusList = focusList.filter(el => !jsDiv.children[1].contains(el))
+    }
+}
+
+document.addEventListener("mouseover", (e) => {
+  if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
+    e.target.focus()
+    tui.updateFocus()
+  }
+})
+
+document.addEventListener("keydown", (e) => {
+    if (!jsDiv) { return }
+    const currentFocus = focusList.indexOf(document.activeElement)
+    const focused = document.activeElement
+    switch(e.key) {
+        case "Escape":
+            tui.home()
+            break
+        case "ArrowDown":
+        case "ArrowRight":
+            e.preventDefault()
+            focusList[Math.min(currentFocus+1, focusList.length-1)].focus()
+            tui.updateFocus()
+            break
+        case "ArrowUp":
+        case "ArrowLeft":
+            e.preventDefault()
+            focusList[Math.max(0, currentFocus-1)].focus()
+            tui.updateFocus()
+            break
+        case "Enter":
+        case " ":
+            focused.click()
+    }
+})