Creazione Squadre

by brainsengineering

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Match di Nomi</title>
    <link rel="stylesheet" href="stile.css"> 
  </head>

  <body>
  <button id="createSquad">Genera squadre</button>
    <div id="coppie"></div>

    <script src="script.js"></script> 
  </body>

</html>

CSS

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    background-color: #f0f0f0;
}

.coppia {
    margin: 10px;
    padding: 20px;
    border: 2px solid #007bff;
    border-radius: 5px;
    animation: animazioneCoppia 1s ease, sfondoAnimazione 2s alternate;
    background-color: #fff;
    display:inline-block;
    font-size:26px;
}

@keyframes animazioneCoppia {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sfondoAnimazione {
    0% {
        background-color: #fff;
    }
    50% {
        background-color: #007bff;
        color: #fff;
    }
    100% {
        background-color: #fff;
    }
}

/* Nuova animazione per il testo */
@keyframes testoAnimazione {
    0% {
        letter-spacing: normal;
    }
    50% {
        letter-spacing: 3px;
    }
    100% {
        letter-spacing: normal;
    }
}

.coppia:hover {
    animation: animazioneCoppiaHover 0.5s ease forwards;
}

@keyframes animazioneCoppiaHover {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 0 10px #007bff;
    }
}

JavaScript

const synth = window.speechSynthesis;
let voices = [];

document.addEventListener("DOMContentLoaded", function() {
document.getElementById("createSquad").addEventListener("click", createSquad);
});

function createSquad() {
const nomi = ["Asha Fanella", "Ginevra Giorgi", "Ginevra Mastromatteo", "Maestro Enrico", "Leonardo Nusca", "Vittoria Di Maria",
"Giada Mariuzzo", "Elena Scupola", "Paolo Sergi", "Edoardo Falchetti", "Beatrice Solazzi", "Achille Mei",
"Costanza Belmonte", "Filippo Brannetti", "Cecilia Cervo", "Scarlett Ciervo", "Filippo Di Fant", "Marzio Di Giacomo", "Delfina Di Virgilio", "Leonardo Gualdi",
"Raffaele Mammone", "Carolina Mantovani", "Chiara Mereu", "Camilla Plotti", "Giulia Plotti", "Matilde Rasile", "Arianna Ronconi",
"Filippo Timpano", "Saverio Vitale", "Leonardo Zito"];


    randomizzaArray(nomi);
    const coppie = creaCoppie(nomi);
    
setTimeout(() => {
console.log('a');
		voices = synth.getVoices();
}, 1000);


console.log('b');

setTimeout(() => {

console.log('c');
		//console.log(voices);
    visualizzaCoppieConIntervallo(coppie, 0); // Inizia con l'indice 0
}, 4000);

}

function randomizzaArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

function creaCoppie(nomi) {
    const coppie = [];
    for (let i = 0; i < nomi.length; i += 2) {
        coppie.push([nomi[i], nomi[i + 1]]);
    }
    return coppie;
}

function visualizzaCoppieConIntervallo(coppie, indice) {
    if (indice < coppie.length) {
        const container = document.getElementById('coppie');
        const coppia = coppie[indice];
        const elementoCoppia = document.createElement('div');
				leggiNomi(`${coppia[0]} con ${coppia[1]}`);
        elementoCoppia.classList.add('coppia');
        elementoCoppia.textContent = `${coppia[0]} - ${coppia[1]}`;
        container.appendChild(elementoCoppia);
       //...