document.getElementById("box").innerHTML = "";
function makeHtml(jsonData) {
    jsonData.forEach(element => {
        console.log(element);
        box = document.createElement("div");
        gameName = document.createElement("p");
        hours = document.createElement("p");
        text = document.createTextNode(element["gamename"]);
        gameName.appendChild(text);
        text = document.createTextNode(element["hours"]);
        hours.appendChild(text);
        box.appendChild(gameName);
        box.appendChild(hours);
        bigbox.appendChild(box);
    });
}
function makeArray(jsonData) {
    document.getElementById("box").innerHTML = "";
    bigbox = document.getElementById("box");
    console.log(jsonData);
    if (jsonData.hasOwnProperty('error')) {
        console.log("error");
        error = document.createElement("div");
        error.id="error";
        text = document.createTextNode(jsonData["error"]);
        error.appendChild(text);
        bigbox.appendChild(error);
    } else {
        document.getElementById("username").innerHTML = "Compte de " + jsonData["username"];
        jsonData["gameWithTime"].sort((a, b) => parseFloat(a.hours) - parseFloat(b.hours));
        makeHtml(jsonData["gameWithTime"]);
        makeHtml(jsonData["gameWithoutTime"]);
    }
 }
function sendData() {
    text = document.createTextNode("Chargement en cours....");
    document.getElementById("box").innerHTML = "";
    loading = document.createElement("div");
    loading.id = "loading";
    loading.appendChild(text);
    document.getElementById("box").appendChild(loading);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "getAchievements.php"); 
    xhr.onload=function(event){ 	
        makeArray(event.target.response);
    }; 
    var formData = new FormData(document.getElementById("myform")); 
    xhr.responseType = 'json';
    xhr.send(formData); 
}