document.addEventListener('DOMContentLoaded', chargementPage);
var listeChiffreView = [];
var listeChiffre = [];
var listeChiffreTriee = [];
var start;
var end;
var listeEnd;
var score = 0;

function chargementPage(){
	listeChiffreView = document.getElementsByClassName("drag");
	start = document.getElementById("start");
	end = document.getElementById("end");
	listeEnd = end.getElementsByClassName("slot");

	start.addEventListener("dragstart", drag);
    end.addEventListener("dragover", allowDrop);
    end.addEventListener("drop", drop);

	remplirChiffre(0,100);
	trierChiffre();
}

function remplirChiffre(min,max){
	for (let i=0; i<listeChiffreView.length; i++){
		listeChiffre[i] = getRandomInt(min, max);
		listeChiffreView[i].textContent = listeChiffre[i];
	}
}
function trierChiffre(){
	listeChiffreTriee = listeChiffre.slice().sort((a,b) => (a-b));
}

function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min
}

function findIndex(tableau, element){
	for (var i = 0; i < tableau.length; i++) {
        if (tableau[i] === element) {
            return i;
        }
    }
    return null;
}

function allowDrop(event) {
	event.preventDefault();
  }
  
  function drag(event) {
	event.dataTransfer.setData("objet", event.target.id);
  }
  
  function drop(event) {
	var numSlot = findIndex(listeEnd, event.target);
	if (numSlot !== null){
		event.preventDefault();
		var idObjet = event.dataTransfer.getData("objet");
		var objet = document.getElementById(idObjet);
		event.target.appendChild(objet);
		if (objet.textContent !== ""+listeChiffreTriee[numSlot]){
			score --;
		}
		if (score < 0){
			end.classList.replace("good", "normal")
			if (score < -3){
				end.classList.replace("normal", "wrong")
			}
		}
	}
  }