Créer un jeu de création d'avatar en HTML, CSS et JavaScript

/*---NAVIGATION---*/                                
header{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 16px;
}
header nav ul{
    display: flex;
    gap: 16px;
    padding: 8px;
    background-color: white;
    border-radius: 8px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
button{
    padding: 8px;
    border-radius: 8px;
    border: none;
    background-color: #eaeaea;
    color: black;
    cursor: pointer;
    border:solid 2px #eaeaea;
    transition: all ease-in-out 0.5s;
}
button.active,button:hover{
    background-color: #1f1f1f;
    color: white;
}

/*---RESULT---*/
.result {
    overflow: hidden;
    max-width: 100%;
    position: relative;
    background-color: white;
    border-radius: 1rem;
    margin: 1rem 2rem;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    min-height: 80vh;
    min-width: 80vh;
}

.result:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.result img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    object-fit: cover;
    height: auto;
}
#resultFinal{
    display: none;
}

/*---SECTIONS---*/                           
main section{
    display: none;
}
main section.active{
    padding: 16px 0px;
    display: block;
}

/*---VIGNETTES---*/
.vignettes{
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    grid-auto-rows: max-content;
    grid-gap: 16px;
}
.vignette{
    transition: all ease-in-out 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
    transition-duration: 300ms;
    box-shadow: rgba(0,0,0,0.18) 0px 2px 4px;
    border-radius: 16px;
    position: relative;
    background-size: 100%;
    background-color: white;
    overflow: hidden;
}
.vignette:after{
    content: "";
    display: block;
    padding-bottom: 100%;
}
.vignette img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    image-rendering: optimizequality;
}

/*---COULEURS---*/
.colors{
    background-color: white;
    padding:1rem;
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.18) 0px 2px 4px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    grid-gap:8px;
    height:max-content;
    margin-top: 1rem;
}
.color{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    box-shadow:0px 0px 0px 2px rgba(0, 0, 0, .3) inset;
    transition: all ease-in-out 0.5s;
}
.color:active,.color:hover{
    box-shadow:0px 0px 0px 2px rgb(255, 255, 255) inset;
    cursor: pointer;
}

const navigationButtons = document.querySelectorAll('#categories button');
const sections = document.querySelectorAll('main section');
// Fonction qui permet de changer de section en cliquant sur les boutons de navigation
function switchSection() {
    navigationButtons.forEach(button => {
        button.addEventListener('click', function () {
            //Ajout de la classe active au bouton cliqué
            navigationButtons.forEach(button => {
                button.classList.remove("active");
            })
            this.classList.add("active");
            //Ajout de la classe active à la section correspondante
            const dataTarget = this.getAttribute('data-target');
            const sectionTarget = document.getElementById(dataTarget);
            sections.forEach(section => {
                section.classList.remove("active");
            })
            sectionTarget.classList.add("active");
        })
    });
}

switchSection();

let currentGender = "men";
let sectionsWithGender = ['Top'];
let sectionsWithColor = ['Skin','Hair','Top'];

function changeResultURL(sectionName){
    let section = document.getElementById(sectionName);
    let result = document.getElementById('result' + sectionName);
    let url;
    //On récupère la vignette active et on récupère l'attribut data-element
    let activeVignette = section.querySelector('.vignette.active');
    let dataElement = activeVignette.getAttribute('data-element');

    //Si la section est une section avec couleur, on récupère la couleur active et on récupère l'attribut data-color
    if(sectionsWithColor.includes(sectionName)){

        let activeColor = section.querySelector('.color.active');
        let dataColor = activeColor.getAttribute('data-color');
        url = "sections/" + sectionName + "/" + dataElement + "/" + dataColor + ".png";
        if (sectionsWithGender.includes(sectionName)){
            url = "sections/" + sectionName + "/" + currentGender + "/" + dataElement + "/" + dataColor + ".png";
        }
    //Sinon, on récupère l'attribut data-element de la vignette active    
    }else{
        url = "sections/" + sectionName + "/" + dataElement + ".png";
        if (sectionsWithGender.includes(sectionName)){
            url = "sections/" + sectionName + "/" + currentGender + "/" + dataElement + ".png";
        }
    }
    result.setAttribute('src', url);
}

function changeShape() {
    //Pour chacune des sections, on récupère les vignettes et le nom de la section
    for (const section of sections) {
        let vignettes = section.querySelectorAll('.vignette');
        let sectionName = section.getAttribute('id');
        for (const vignette of vignettes) {
            vignette.addEventListener('click', function () {
                //On retire la classe active de toutes les vignettes de la section et on l'ajoute à la vignette cliquée
                for(const vignette of vignettes){
                    vignette.classList.remove("active");
                }
                this.classList.add("active");

                changeResultURL(sectionName);
            });
        }
    }
}
changeShape();

function changeColor() {
    for (const section of sections) {
        let colors = section.querySelectorAll('.color');
        let sectionName = section.getAttribute('id');
        for (const color of colors) {
            color.addEventListener('click', function () {
                //On retire la classe active de toutes les vignettes de la section et on l'ajoute à la vignette cliquée
                for(const color of colors){
                    color.classList.remove("active");
                }
                this.classList.add("active");
                changeResultURL(sectionName);
            });
        }
    }
}

changeColor();