Personal-Website/script.js

let currentCard = -1;
const cards = document.getElementsByClassName('card-wrapper');
let idleTime = 0;

function init() {
    for (let i = 0; i < cards.length; i++) {
        const cardListener = cards[i].getElementsByClassName('card-listener')[0];
        cardListener.addEventListener('click', () => openCard(cards, i));
        document.body.addEventListener('mouseover', () => {
            idleTime = Date.now();
            console.log('User active, resetting idle timer.');
        });
    }

}

function openCard(cards, i) {
    for (let j = 0; j < cards.length; j++) {
        if (j === i) {
            cards[j].classList.remove('hidden');
            cards[j].classList.add('active');
            cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
            currentCard = j;
            continue;
        }
        cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
        cards[j].classList.add('hidden');
        cards[j].classList.remove('active');
    }
}

function nextCard() {
    if (currentCard === -1) return;
    const nextIndex = (currentCard + 1) % cards.length;
    openCard(cards, nextIndex);
}

function previousCard() {
    if (currentCard === -1) return;
    const previousIndex = (currentCard - 1 + cards.length) % cards.length;
    openCard(cards, previousIndex);
}

function addInProgress() {
    if (window.location.href.indexOf('127.0.0.1') === -1) {
        const warning = document.createElement('div');
        warning.id = 'under-construction';
        warning.innerHTML = "This website is currently under development. Nothing will work as expected. Click anywhere to dismiss this message.";
        warning.onclick = function() {
            this.style.display = 'none';
        };
        document.body.appendChild(warning);
    }
}

function switchPage() {
    const nextButtons = document.getElementsByClassName('next');
    const backButtons = document.getElementsByClassName('back');

    for (let i = 0; i < nextButtons.length; i++) {
        nextButtons[i].addEventListener('click', function() {

            cards[i + 1].classList.remove('hidden');
            cards[i + 1].classList.add('active');
            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.add('visible');
            currentCard = i + 1;

            cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
            cards[i].classList.add('hidden');
            cards[i].classList.remove('active');
        });
    }

    for(let i = backButtons.length - 1; i >= 0; i--) {
        backButtons[i].addEventListener('click', function() {

            cards[i].classList.remove('hidden');
            cards[i].classList.add('active');
            cards[i].getElementsByClassName('content-wrapper')[0].classList.add('visible');
            currentCard = i;

            cards[i + 1].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
            cards[i + 1].classList.add('hidden');
            cards[i + 1].classList.remove('active');
        });
    }
}

function close() {
    for (let i = 0; i < cards.length; i++) {
        cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
        cards[i].classList.remove('hidden');
        cards[i].classList.remove('active');
    }
    currentCard = -1;
}

function closeEventListeners() {
    const closeButtons = document.getElementsByClassName('close');
    for (let i = 0; i < closeButtons.length; i++) {
        closeButtons[i].addEventListener('click', close);
    }
}

function idle() {
    let cardIndex = 0;
    let lastUpdate = 0;
    setInterval(function() {
        const idleTimeElapsed = (Date.now() - idleTime) / 1000;
        if (idleTimeElapsed > 3) {
            for (let i = 0; i < cards.length; i++) {
                if(cards[i].classList.contains('active')) return;
            }
            const animationTimeElapsed = (Date.now() - lastUpdate) / 1000;
            if (animationTimeElapsed < 2.5) return;
            lastUpdate = Date.now();
            for (let i = 0; i < cards.length; i++) {
                if (i === cardIndex % cards.length) {
                    cards[i].getElementsByClassName('card-image')[0].classList.add('card-image-idle-animation');
                    cards[i].getElementsByClassName('card-label')[0].classList.add('card-label-idle-animation');
                } else {
                    cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
                    cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
                }
            }
            cardIndex++;
        }
        else {
            for (let i = 0; i < cards.length; i++) {
                cards[i].getElementsByClassName('card-image')[0].classList.remove('card-image-idle-animation');
                cards[i].getElementsByClassName('card-label')[0].classList.remove('card-label-idle-animation');
            }
        }
    }, 100);

    document.onclick = document.onm = function() {
        console.log('User active, resetting idle timer.');
        idleTime = 0;
    };
}

document.onkeydown = (event) => {
    idleTime = 0;
    if (event.key === "Escape") {
        close();
        return;
    }
    if (event.key === "ArrowRight") {
        if (currentCard === -1) return;
        if (currentCard === cards.length - 1) return;
        nextCard();
        return;
    }
    if (event.key === "ArrowLeft") {
        if (currentCard <= 0) return;
        previousCard();
        return;
    }
    if (event.key === "1") {
        openCard(cards, 0);
        return;
    }
    if (event.key === "2") {
        openCard(cards, 1);
        return;
    }
    if (event.key === "3") {
        openCard(cards, 2);
        return;
    }
    if (event.key === "4") {
        openCard(cards, 3);
        return;
    }
    if (event.key === "5") {
        openCard(cards, 4);
        return;
    }
}

window.mouseover = () => {
    idleTime = 0;
    console.log('User active, resetting idle timer.');
}

let touchstartX = 0;
let touchstartY = 0;
let touchendX = 0;
let touchendY = 0;

window.addEventListener('touchstart', function (event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
}, false);

window.addEventListener('touchend', function (event) {
    touchendX = event.changedTouches[0].screenX;
    touchendY = event.changedTouches[0].screenY;
    handleGesture();
}, false);


function handleGesture() {
    if (touchendX < touchstartX) {
        if (touchendX - touchstartX < -150) {
            if (currentCard === -1) return;
            if (currentCard === cards.length - 1) return;
            nextCard();
        }
    }

    if (touchendX > touchstartX) {
        if (touchendX - touchstartX > 150) {
            if (currentCard <= 0) return;
            previousCard();
        }
    }

    if (touchendY < touchstartY) {
        if (touchendY - touchstartY < -150) {
            close();
        }
    }
}

addInProgress();
init();
closeEventListeners();
switchPage();
idle();