// Variables globales. IL N'Y A RIEN À AJOUTER.
let gTableau = ['Bilbo', 'Gandalf', 'Fredo', 'Merry', 'Samwise', 'Pippin'] ;


/* TODO 0
*  init() : Déclaration des évènements nécessaires.
*  IL N'Y A RIEN À AJOUTER. À consulter seulement.
*/
function init(){
    document.getElementById("bouton1").addEventListener("click", ecrireArrakis);
    document.getElementById("bouton2").addEventListener("click", ecrire0a5alamain);
    document.getElementById("bouton3").addEventListener("click", ecrire1a6alamain);
    document.getElementById("bouton4").addEventListener("click", ecrireDune);
    document.getElementById("bouton5").addEventListener("click", ecrire0a5boucle);
    document.getElementById("bouton6").addEventListener("click", ecrire1a6boucle);
    document.getElementById("bouton7").addEventListener("click", ecrireDune1a6alamain);
    document.getElementById("bouton8").addEventListener("click", ecrireDune1a6boucle);
    afficherTableau('string') ;
}


/* TODO 1
*  ecrireArrakis() : Écrit Arrakis dans les cellules et affiche le tableau.
*
*  À faire :
*  1 - Remplacer la valeur de toutes les cellules de gTableau par "Arrakis".
*
*   ATTENTION : il faut le faire sans utiliser de boucle, sur plusieurs lignes de code.
*/
function ecrireArrakis(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('string') ;
}


/* TODO 2
*  ecrireDune() : Écrit Dune dans les cellules et affiche le tableau.
*
*  À faire :
*   1 - Créer une boucle où l'index prend les valeurs de 0 jusqu'à la taille de gTableau moins un.
*       À chaque itération :
*   2 -     Remplacer la valeur des cellules de gTableau par "Dune".
*
*   ATTENTION : il faut utiliser .length
*   ATTENTION : il ne doit y avoir qu'une seule ligne de code dans la boucle.
*/
function ecrireDune(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('string') ;
}


/* TODO 3
*  ecrire0a5alamain() : Écrit 0 à 5 dans les cellules et affiche le tableau.
*
*  À faire :
*  1 - Remplacer la valeur des 6 cellules de gTableau par les valeurs 0 à 5.
*
*   ATTENTION : il faut le faire sans utiliser de boucle, sur plusieurs lignes de code.
*/
function ecrire0a5alamain(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('number') ;
}


/* TODO 4
*  ecrire0a5boucle() : Écrit 0 à 5 dans les cellules et affiche le tableau.
*
*  À faire :
*   1 - Créer une boucle où l'index prend les valeurs de 0 jusqu'à la taille de gTableau moins un.
*       À chaque itération :
*   2 -     Remplacer la valeur des cellules de gTableau par la valeur de l'index.
*
*   ATTENTION : il faut utiliser .length
*   ATTENTION : il ne doit y avoir qu'une seule ligne de code dans la boucle.
*/
function ecrire0a5boucle(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('number') ;
}


/* TODO 5
*  ecrire1a6alamain() : Écrit 1 à 6 dans les cellules et affiche le tableau.
*
*  À faire :
*  1 - Remplacer la valeur des 6 cellules de gTableau par les valeurs 1 à 6.
*
*   ATTENTION : il faut le faire sans utiliser de boucle, sur plusieurs lignes de code.
*/
function ecrire1a6alamain(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('number') ;
}


/* TODO 6
*  ecrire1a6boucle() : Écrit 1 à 6 dans les cellules et affiche le tableau.
*
*  À faire :
*   1 - Créer une boucle où l'index prend les valeurs de 0 jusqu'à la taille de gTableau moins un.
*       À chaque itération :
*   2 -     Remplacer la valeur de la cellule pour que le résultat affiche les valeurs 1 à 6.
*
*   ATTENTION : il faut utiliser .length
*   ATTENTION : il ne doit y avoir qu'une seule ligne de code dans la boucle.
*/
function ecrire1a6boucle(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('number') ;
}


/* TODO 7
*  ecrireDune1a6alamain() : Écrit Dune 1 à Dune 6 dans les cellules et affiche le tableau.
*
*  À faire :
*  1 - Remplacer la valeur des 6 cellules de gTableau par "Dune 1", "Dune 2", ..., jusqu'à "Dune 6".
*
*   ATTENTION : il faut le faire sans utiliser de boucle, sur plusieurs lignes de code.
*/
function ecrireDune1a6alamain(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('string') ;
}


/* TODO 8
*  ecrireDune1a6boucle() : Écrit Dune 1 à Dune 6 dans les cellules et affiche le tableau.
*
*  À faire :
*   1 - Créer une boucle où l'index prend les valeurs de 1 jusqu'à la taille de gTableau.
*       À chaque itération :
*   2 -     Remplacer la valeur de la cellule pour que le résultat affiche les valeurs "Dune 1" à "Dune 6".
*
*   ATTENTION : il faut utiliser .length
*   ATTENTION : il ne doit y avoir qu'une seule ligne de code dans la boucle.
*   ATTENTION ATTENTION : l'index de la boucle commence à 1 mais les indices d'un tableau commencent à 0.
*/
function ecrireDune1a6boucle(){

    // ECRIRE DU CODE ICI


    // NE PAS TOUCHER À CETTE LIGNE DE CODE :
    afficherTableau('string') ;
}


// NE PLUS TOUCHER AU CODE À PARTIR D'ICI

function afficherTableau(type){

    if (gTableau.length > 0 && typeof gTableau[0] != type){
        alert('Mauvais type de valeurs dans le tableau!');
    }

    let texte = '<tr><td class="index" style="background: black; box-shadow: none;">index</td>';
    for (let i = 0 ; i < gTableau.length ; i++){
        texte += '<td class="index">' + i + '</td>';
    }
    texte += '</tr>';

    texte += '<tr><td class="zone" style="color: white; background: black; box-shadow: none;">gTableau</td>';
    for (let j = 0 ; j < gTableau.length ; j++){
        texte += '<td class="zone">' + gTableau[j] + '</td>';
    }
    texte += '</tr>';

    document.getElementById('tableau').innerHTML = texte;
}