// Variables globales du projet
let gTour = "X";
let gScoreX = 0;
let gScoreO = 0;

// Écouteurs d'événements
function init(){

    let carres = document.querySelectorAll(".carre"); 
    let i = 0;
    while (i < carres.length){
        carres[i].addEventListener("click", coup);
        i += 1;
    }
    document.querySelector(".reset").addEventListener("click", recommencer);

}

// ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
// TODO 1 : Compléter verifierVictoire()
//
// - Vous pouvez seulement modifier l'intérieur de cette fonction !
// - L'objectif : appeler la fonction victoire() si un joueur
//   vient de gagner en plaçant un symbole qui complète une ligne, et sinon
//   appeler la fonction prochainTour().
// 
// 💡 Indices 💡
// - Des variables locales sont déjà déclarées et elles contiennent soit
//   "X", soit "O", soit "" (rien). Ces variables représentent l'état
//   actuel de la grille.
// - La variable globale gTour contient, en tout temps, soit "X", soit "O".
//   gTour contient le symbole du joueur qui vient de placer un symbole.
//   Donc si gTour contient "X", ça veut dire qu'un symbole "X" vient d'être
//   ajouté dans la grille. La bonne nouvelle : vous avez juste besoin de
//   vérifier s'il y a trois "X" placés en ligne ! (Et si gTour contient
//   "O", vous avez juste besoin de vérifier s'il y a trois "O" placés en 
//   ligne)
//   - N'oubliez pas qu'on peut gagner de 8 manières : les trois rangées,
//   les trois colonnes et les deux diagonales. Si une de ces 8 lignes
//   contient une ligne avec 3 fois le symbole dans gTour, on appelle 
//   victoire(). Sinon, on appelle prochainTour().
//   - Si on concatène gTour + gTour + gTour, cela donnera "XXX" ou "OOO".
// ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
function verifierVictoire(){

    let carre1 = document.querySelector(".carre1").textContent;
    let carre2 = document.querySelector(".carre2").textContent;
    let carre3 = document.querySelector(".carre3").textContent;
    let carre4 = document.querySelector(".carre4").textContent;
    let carre5 = document.querySelector(".carre5").textContent;
    let carre6 = document.querySelector(".carre6").textContent;
    let carre7 = document.querySelector(".carre7").textContent;
    let carre8 = document.querySelector(".carre8").textContent;
    let carre9 = document.querySelector(".carre9").textContent;

    // Code ici
}

// ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
// Ne pas modifier le code à partir d'ici
// ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
function prochainTour(){
    if(gTour == "O"){
        gTour = "X";
        document.querySelector("#joueurX").style.borderColor = "gold";
        document.querySelector("#joueurO").style.borderColor = "black";
    }
    else if(gTour == "X"){
        gTour = "O";
        document.querySelector("#joueurO").style.borderColor = "gold";
        document.querySelector("#joueurX").style.borderColor = "black";
    }
}

function victoire(){
    if(gTour == "X"){
        document.querySelector("#joueurX").style.borderColor = "lime";
        document.querySelector("#joueurO").style.borderColor = "crimson";
        gScoreX += 1;
        document.querySelector("#scoreX").textContent = gScoreX + " point(s)";
    }
    else{
        document.querySelector("#joueurO").style.borderColor = "lime";
        document.querySelector("#joueurX").style.borderColor = "crimson";
        gScoreO += 1;
        document.querySelector("#scoreO").textContent = gScoreO + " point(s)";
    }
    alert("Joueur " + gTour + " gagne !");
    gTour = "";
}

function coup(e){
    if(e.currentTarget.textContent == ""){
        e.currentTarget.textContent = gTour;
        verifierVictoire();
    } 
}

function recommencer(){
    gTour = "X";
    document.querySelector(".carre1").textContent = "";
    document.querySelector(".carre2").textContent = "";
    document.querySelector(".carre3").textContent = "";
    document.querySelector(".carre4").textContent = "";
    document.querySelector(".carre5").textContent = "";
    document.querySelector(".carre6").textContent = "";
    document.querySelector(".carre7").textContent = "";
    document.querySelector(".carre8").textContent = "";
    document.querySelector(".carre9").textContent = "";
    document.querySelector("#joueurX").style.borderColor = "gold";
    document.querySelector("#joueurO").style.borderColor = "black";
}