tilde-site/assets/main.js

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

    // 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
function skipAnimation() {
    for (let node of document.getElementsByClassName("skip")) {
        const animations = node.getAnimations();
        for (let anim of animations) {
            anim.finish();
        }
    }
    for (let node of document.getElementsByClassName("splash")) {
        const animations = node.getAnimations();
        for (let anim of animations) {
            anim.finish();
        }
    }
    document.getElementsByClassName("skip-animation")[0].remove();
}

// this randomizes the loading messages
function Load (text) {
    const loadArray = text.split("\n")
    const loading = document.getElementsByClassName("loading")[0]

    const r = Math.floor(Math.random() * loadArray.length)
    const loadText = loadArray[r]

    loading.children[0].innerHTML = loadText + "."
    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()
    }
})