
// récupération des dimensions de la fenêtre.
let largeurWin = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let hauteurWin = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

let personnage = document.querySelector('#perso');
let numPosition = 1;
let maxNum = 12;
let positionBH = "";
let largeurEtiquetteRouge = 5;
let margeX = 95 + largeurEtiquetteRouge;
let margeY = 160 + largeurEtiquetteRouge;
let posBH = { x: 50, y: 150, maxX: largeurWin - margeX, maxY: hauteurWin - margeY, pasX: 7, pasY: 7 };

let action = { bas: false, gauche: false, haut: false, droit: false }

// evenement RESIZE
// si on redimensionne le navigateur, on récupère la valeur de la largeur.
window.onresize = function () {
    largeurWin = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    hauteurWin = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    posBH.maxX = largeurWin - margeX;
    posBH.maxY = hauteurWin - margeY;

    if (posBH.x > posBH.maxX) {
        posBH.x = posBH.maxX;
    }

    if (posBH.y > posBH.maxY) {
        posBH.y = posBH.maxY;
    }
}

window.onload = function () {

    // pour forcer le personnage à marche au démarrage de la page.
    positionBH = "droite";
    action.droit = true;
    bougePersonnage();
    action.droit = false;

    setInterval(function () {
        bougePersonnage();
    }, 90);
}


//----------------------------------------------- ACTION CLAVIER

// si une touche du clavier est enfoncée, le booléen correspondant sera mis à true.
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;
    }
}

// quand on relache une touche, le booléen est mis à 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;
    }
}

//------------------------------------------------------------ MAIN FUNCTION INSIDE SETINTERVAL
function bougePersonnage() {

    //--------------------------------------------------------
    // Position clavier ... x,y
    //
    if (action.bas) {
        if (posBH.y < posBH.maxY) {
            posBH.y += posBH.pasY;
        }
        positionBH = "face";
    }
    if (action.haut) {
        if (posBH.y > largeurEtiquetteRouge) {
            posBH.y -= posBH.pasY;
        }
        positionBH = "dos";

    }
    if (action.droit) {
        if (posBH.x < posBH.maxX) {
            posBH.x += posBH.pasX;
        }
        positionBH = "droite";

    }
    if (action.gauche) {
        if (posBH.x > 2 * largeurEtiquetteRouge) {
            posBH.x -= posBH.pasX;
        }
        positionBH = "gauche";

    }

    personnage.style.top = posBH.y + "px";
    personnage.style.left = posBH.x + "px";

    //--------------------------------------------------------
    // Position CSS
    //

    // Annuler toutes les positions
    personnage.className = "";

    numPosition++;
    if (numPosition > maxNum) {
        numPosition = 1;
    }

    // ajout de la class correspondant à la postion du personnage.
    personnage.classList.add('position_' + positionBH + '_' + numPosition);

    // permet d'afficher le numPositionéro de l'image via le CSS #perso::before
    personnage.setAttribute("data-imagecle", "" + numPosition);

}
