Creazione Squadre (BKP)

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"> <!-- Assicurati di avere il file stile.css nella stessa cartella -->
  </head>

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

    <script src="script.js"></script> <!-- Assicurati di avere il file script.js nella stessa cartella -->
  </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;
}

@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", "Leonardo CirinnĂ ", "Leonardo Nusca", "Vittoria Di Maria",
"Giada Mariuzzo", "Elena Scupola", "Paolo Sergi", "Gianmaria Pecorari", "Francesco Casciaro Gentili", "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
}, 3000);

}

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');
        elementoCoppia.classList.add('coppia');
        elementoCoppia.textContent = `${coppia[0]} - ${coppia[1]}`;
        container.appendChild(elementoCoppia);
				leggiNomi(`${coppia[0]} con...