ou_atterrir_front/background.js

// grain
grained('#grain-bg', {
    animate: true,
    patternWidth: 100,
    patternHeight: 100,
    grainOpacity: 0.5,
    grainDensity: 1,
    grainWidth: 1,
    grainHeight: 1,
    grainChaos: 10,
    grainSpeed: 1
});

/* 
|O couleur prev      O  |
|     couleur d'appoint |
|                       |
|                       |
|                       |
|        couleur next  O|
*/

//  au clic sur le mode suivant :
//  - couleurs prev devient la next précédente (ou inverse si page cliquée < page courante)
//  - couleurs next (ou prev) est une nouvelle couleur
//  - couleur appoint s'adapte en fonction de couleur next


let pageAmount = 0;
let currentPage = 1, prevPage;
let currentProfondeur = "atlas";

document.querySelectorAll('.mode').forEach(function(node, index) {
    pageAmount++;
    node.addEventListener('click', function() {
        document.querySelectorAll('.active').forEach(function(el) {
            el.classList.remove('active');
            if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
        });
        node.classList.toggle('active');
        prevPage = currentPage;
        currentPage = index + 1;

        console.log(currentPage, prevPage);

        if (currentPage != prevPage) {
            if (currentPage > prevPage) {
                couleurs.prev.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage - 1);
                couleurs.next.h = couleurs.next.h + (360 / pageAmount) * (currentPage - prevPage);
            } else {
                couleurs.next.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage + 1);
                couleurs.prev.h = couleurs.prev.h + (360 / pageAmount) * (currentPage - prevPage);
            }
            couleurs.appoint.h = couleurs.next.h + 200;
            console.log(couleurs.prev.h, couleurs.next.h);
    
            let mainContainer = document.getElementById('BG_BG_BG');
            let containerTmp = document.getElementById('BG_BG_BG_tmp');
            containerTmp.style.background = `
            radial-gradient(circle at 0% 14%, 
                    hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
                    rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle at 93% 95%,
                hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
                rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle at 73% 10%,
                hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
                rgba(255, 255, 255, 0) 100%)
            `;
            containerTmp.style.opacity = 1;
            setTimeout(function() {
                mainContainer.style.opacity = 0;
            },100);
    
            setTimeout(function() {
                mainContainer.style.background = `
                radial-gradient(circle at 0% 14%, 
                        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
                        rgba(255, 255, 255, 0) 100%),
                radial-gradient(circle at 93% 95%,
                    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
                    rgba(255, 255, 255, 0) 100%),
                radial-gradient(circle at 73% 10%,
                    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
                    rgba(255, 255, 255, 0) 100%)
                `;
                containerTmp.style.opacity = 0;
                mainContainer.style.opacity = 1;
            }, 500);
        }

    })
});

let couleurs = {
    prev: {
        h: 42,
        s: 40.6,
        l: 44.9 + 20,
    },
    next: {
        h: 0,
        s: 30.5,
        l: 46.3 + 20,
    },
    appoint: {
        h: 0,
        s: 66,
        l: 35.7 + 20,
    }
}

couleurs.next.h = couleurs.prev.h + (360 / pageAmount);
couleurs.appoint.h = couleurs.next.h + 200;
console.log(couleurs.prev.h, couleurs.next.h);

let container = document.getElementById("BG_BG_BG");
container.style.background = `
radial-gradient(circle at 0% 14%, 
        hsl(${couleurs.prev.h} ${couleurs.prev.s}% ${couleurs.prev.l}%) 40%,
        rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 93% 95%,
    hsl(${couleurs.next.h} ${couleurs.next.s}% ${couleurs.next.l}%) 0%,
    rgba(255, 255, 255, 0) 100%),
radial-gradient(circle at 73% 10%,
    hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
    rgba(255, 255, 255, 0) 100%)
`;

// menu
function toggleProfondeur(el) {
    if (el.classList.contains("selected")) {
        return;
    } else {
        for (let sibling of el.parentNode.children) {
            sibling.classList.remove('selected');
        }
    }
    el.classList.add("selected");
    if(el.innerHTML == "L'atlas") {
        currentProfondeur = "atlas";
        document.querySelectorAll('.mode').forEach(function(node) {
            if(node.classList.contains("collapsed")) {
                node.classList.remove("collapsed");
            }
        });
    } else {
        currentProfondeur = "carte";
        document.querySelectorAll('.mode').forEach(function(node) {
            if(!node.classList.contains("active")) {
                node.classList.add("collapsed");
            }
        });
    }
}


// toggle changement de couleur de fond (faire une fonction propr)
// et variable globale du mode dans lequel on est
// loop avec les flèches

function toggleMode(direction) {
    let modes = [];
    let currentIndex;
    document.querySelectorAll('.mode').forEach(function(node, index) {
        modes.push(node);
        if (node.classList.contains("active")) {
            currentIndex = index;
            node.classList.remove("active");
            if (currentProfondeur == "carte") {
                node.classList.add("collapsed");
            }
        }
    });
    if (direction == "next") {
        modes[currentIndex + 1].classList.add('active');
    } else if (direction == "prev") {
        modes[currentIndex - 1].classList.add('active');
    }
}