let hiScores = [];

let tableHTMLHiScores;

var tableBodyHTMLHiScores;

​

window.onload = init;

​

function init() {

  // appelée quand la page est chargée

  tableHTMLHiScores=document.querySelector("#tableHiScores");

  tableBodyHTMLHiScores=document.querySelector("#tableHiScoresBody");

}

​

function genereHiScore() {

  // 1 - On génère un score

  const tabJoueurs = ["Michel", "Emmanuelle", "Fabrice"];

​

  let score = {

    nom:tabJoueurs[Math.floor(Math.random()*3)],

    score: Math.floor(100 + Math.random()*20000),

    level: Math.floor(Math.random()*8)

  }

  // On ajoute le nouveau score au tableau JavaScript des hi scores

  hiScores.push(score);

  // On affiche une ligne supplémentaire dans le tableau

  ajouteScoreDansTable(score)

}

​

function ajouteScoreDansTable(score) {

  // 2 - On l'insère comme une ligne du tableau,

  // attention on insère dans le <tbody> !

  let row = tableBodyHTMLHiScores.insertRow();

  // Une manière de faire est d'utiliser un template JS, pratique, on

  // peut l'écrire sur plusieurs lignes. On aurait pu utiliser l'API

  // des tables HTML5 avec row.insertCell() etc. Ou tout faire avec 

  // innerHTML sans utiliser du tout les inserRow/Cell...

  row.innerHTML=`

      <td>${score.nom}</td>

      <td>${score.score}</td>

      <td>${score.level}</td>

  `;

}

​

function afficheHiScoresDansTable() {

  // On remet à zéro la table HTML

  tableBodyHTMLHiScores.innerHTML = "";

  hiScores.forEach(s => {

    ajouteScoreDansTable(s);

  })

}

​

function sauveHiScores() {

  localStorage.hiScores = JSON.stringify(hiScores);

}

​

function chargeHiScores() {

  if(localStorage.hiScores) {

    hiScores = JSON.parse(localStorage.hiScores);

    afficheHiScoresDansTable();

  }

}

​

function resetHiScores() {

  hiScores = [];

  // efface toutes les données dans localStorage

  localStorage.clear();

  // Si on voulait juste effacer les hi scores

  //localStorage.hiScores = []; 

  // Pour effacer le tableau affiché

  // On remet à zéro la table HTML

  tableBodyHTMLHiScores.innerHTML = "";

}