

let bille = document.querySelector('.bille');
let infosBille = bille.getBoundingClientRect();
console.log(infosBille);

let cssBille = getComputedStyle(bille);
console.log("cssBille : ", cssBille);

let leftBille = cssBille.left;
let topBille = cssBille.top;

// leftBille et topBille sont en pixels, et il faut enlever le px.
//  stringBetweenTheStartAndEnd= substring(startposition, endposition)
leftBille = leftBille.substring(0, leftBille.length - 2);
topBille = topBille.substring(0, topBille.length - 2);


// un objet JSON ; JavaScript Object Notation
let posBille = { x: leftBille, y: topBille, maxX: 400, maxY: 400 };


// un objet JSON ; JavaScript Object Notation
let action = { bas: false, gauche: false, haut: false, droit: false }

// quand un touche est enfoncée, on recupère le code pour savoir si c'est une flèche de direction.
window.onkeydown = function(e) {
    switch (e.code) {
        case "ArrowDown":
            action.bas = true;
            break;
        case "ArrowUp":
            action.haut = true;
            break;

        case "ArrowRight":
            action.droit = true;
            break;

        case "ArrowLeft":
            action.gauche = true;
            break;

        default:
            break;
    }
}

// Si on relache une touche , on remet le booléen à false.
window.onkeyup = function(e) {
    switch (e.code) {
        case "ArrowDown":
            action.bas = false;
            break;
        case "ArrowUp":
            action.haut = false;
            break;
        case "ArrowRight":
            action.droit = false;
            break;
        case "ArrowLeft":
            action.gauche = false;
            break;
    }
}

// Toutes les 5ms, setInterval appel la fonction bougeBille
setInterval(function() {
    bougeBille();
}, 5);


// selon le booléen à true, la valeur de posBille.x ou posBille.y est mise à jour puis utilisée pour repositionnée la bille.
function bougeBille() {
    if (action.bas) {
        if (posBille.y < posBille.maxY) {
            posBille.y++;
        }
    }
    if (action.haut) {
        if (posBille.y > 0) {
            posBille.y--;
        }
    }
    if (action.droit) {
        if (posBille.x < posBille.maxX) {
            posBille.x++;
        }
    }
    if (action.gauche) {
        if (posBille.x >  0) {
            posBille.x--;
        }
    }

    bille.style.top = posBille.y + "px";
    bille.style.left = posBille.x + "px";
}