Moved website data to /www/

www/main.js

@@ -0,0 +1,156 @@
+const Maths = Math; // Yes, I'm that patriotic.
+const hellos = ['Hewwo!', 'Hello!', 'Awoo!'];
+
+const imaTypingSpeed = 75;
+const imaDeletingSpeed = 50;
+const imaElipsisDelay = 750;
+const imaGapTime = 1500;
+const imaTexts = shuffle([
+    'I\'m a $dumbass$.dog',
+    'I\'m a $network engineer',
+    'I\'m an $Arch Linux user',
+    'I\'m a $programmer',
+    'I\'m a $furry...$ duh',
+    'I\'m a $massive nerd',
+    'I\'m a $Home Assistant addict',
+    'I\'m a $House M.D. enjoyer',
+    'I\'m a $DJ',
+    'I\'m an $ice skater',
+    'I\'m a $masochist'
+]);
+
+function shuffle(array) {
+    return array
+    .map(value => ({ value, sort: Maths.random() }))
+    .sort((a, b) => a.sort - b.sort)
+    .map(({ value }) => value);
+}
+
+function pickRandom(array) {
+    return array[Maths.floor(Maths.random() * array.length)];
+}
+
+function switchTab(tabID, playAnimation=true) {
+    // Get tab ID from button
+    if (typeof(tabID) == 'object') {
+        tabID = tabID.id.split('button-')[1];
+    }
+
+    let tabTransitionTime = Number(getComputedStyle(document.body).getPropertyValue('--tab-transition-time').slice(0, -2));
+    let tabs = document.getElementsByTagName('main')[0].children;
+    let tab = document.getElementById(`tab-${tabID}`);
+    let buttons = document.getElementsByTagName('header')[0].getElementsByTagName('button');
+    let button = document.getElementById(`button-${tabID}`)
+
+    // Error checking
+    if (tab == undefined) {
+        console.error(`Error switching tab: Tab ID "${tabID}" not found.`);
+        return;
+    }
+
+    // Hide all tabs
+    for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i] == tab) { continue; }
+        tabs[i].classList.add('hiddenTab');
+        if (playAnimation) {
+            setTimeout(() => { tabs[i].style.display = 'none'; }, tabTransitionTime);
+        } else {
+            tabs[i].style.display = 'none';
+        }
+
+        if (button != null) {
+            button.classList.remove('buttonHighlight');
+        }
+    }
+
+    // Un-highlight all buttons
+    for (let i = 0; i < buttons.length; i++) {
+        buttons[i].classList.remove('buttonHighlight');
+    }
+
+    // Show selected tab
+    if (playAnimation) {
+        setTimeout(() => { tab.style.display = null; }, tabTransitionTime);
+    } else {
+        tab.style.display = null;
+    }
+    // Required for animation to play
+    let intervalID = setInterval(() => {
+        if (tab.checkVisibility()) {
+            tab.classList.remove('hiddenTab');
+            clearInterval(intervalID);
+        }
+    }, 10);
+
+    // Highlight button
+    button.classList.add('buttonHighlight');
+}
+
+window.addEventListener('load', (e) => {
+    switchTab('home', false);
+
+    // ----- Hellos section -----
+    const helloEl = document.getElementById('helloText');
+    helloEl.innerText = pickRandom(hellos);
+
+    // ----- I'm a text section -----
+    const imaEl = document.getElementById('imaText');
+    let currentEl = document.createElement('span');
+    imaEl.appendChild(currentEl);
+    let imaSelection = 0;
+    let imaCharIdx = 0;
+
+    const typeFunc = () => {
+        let controlChar = imaTexts[imaSelection][imaCharIdx] == '$';
+        if (controlChar) {
+            let highlight = !currentEl.classList.contains('textHighlight');
+            currentEl = document.createElement('span');
+            if (highlight) {
+                currentEl.classList.add('textHighlight');
+            }
+            imaEl.appendChild(currentEl);
+        } else {
+            currentEl.innerText += imaTexts[imaSelection][imaCharIdx];
+        }
+        imaCharIdx++;
+
+        let nextTime = imaTypingSpeed;
+
+        if (imaTexts[imaSelection].slice(imaCharIdx, imaCharIdx+3) == '...') {
+            nextTime = imaElipsisDelay;
+        }
+        
+        nextTime *= !controlChar;
+
+        if (imaCharIdx >= imaTexts[imaSelection].length) {
+            setTimeout(deleteFunc, imaGapTime);
+        } else {
+            setTimeout(typeFunc, nextTime);
+        }
+    };
+
+    const deleteFunc = () => {
+        // This is honestly quite disgusting, but it does work...
+        let textAttrib = imaEl.lastChild.nodeName == '#text' ? 'data' : 'innerText';
+        imaEl.lastChild.innerText = imaEl.lastChild.innerText.slice(0, -1);
+        if (imaEl.lastChild.innerText == '') {
+            imaEl.lastChild.remove();
+        }
+
+        if (imaEl.innerText == '') {
+            currentEl = imaEl;
+            imaCharIdx = 0;
+            imaSelection += 1;
+            if (imaSelection >= imaTexts.length) {
+                imaSelection = 0;
+            }
+            currentEl = document.createElement('span');
+            imaEl.appendChild(currentEl);
+            setTimeout(typeFunc, imaTypingSpeed);
+        } else {
+            setTimeout(deleteFunc, imaDeletingSpeed);
+        }
+    };
+
+    typeFunc();
+});