window.onload = function(){
    var vitesse = 5
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var clavier = new Clavier();

	var fond = new Image();
	var perso = new Image();
    var Item = new Image();
    var Boost = new Image();

    fond.src = "Images/etagere.jpg";
	perso.src = 'Images/spritesheet.png';
    Boost.src = 'Images/boost.png';

    var InventorySquare = [200,90,50,50]
    var LeBoost = [800,90,50,50]
    var Inventory = []

    function MakeInventory(XVALUE,YVALUE) {
        let posx = XVALUE;
        for (let pas = 0; pas < 18; pas++) {
            Inventory.push([posx,YVALUE,InventorySquare[2],InventorySquare[3],""]);
            posx+=InventorySquare[2]+10
        }    
    }
    MakeInventory(200,85)
    MakeInventory(280,220)
    MakeInventory(200,355)
    MakeInventory(280,490)

    var GroundList = [
        [175,140,1150,13],
        [230,275,1150,13],
        [175,410,1150,13],
        [175,545,1210,13],
    ];

    var ObstaclesList = [
        [175,50,5,510],
        [1380,50,5,510],

    ];

    var RedPart = [
        [1325,140,55,13],
        [175,275,55,13],
        [1325,410,55,13],
    ]

    var PosX = 175;
    var PosY = 100;
    var FeetHitBox = [10,37,15,10] // place it just below your feet
    var HeadHitBox = [10,0,15,10] // place it on your head :)
    var BodyRightHitBox = [25,10,10,20]
    var BodyLeftHitBox = [0,10,10,20]
    var BodyHitBox = [13,12,10,20]
    var compt = 0;
    var pas = 0;
    var AnimationPosition = 704;
    var WidthX = 65;
    var WidthY = 65;
    var Hauteur = 0;
    var PositionInitiale = 0;
    var Coin = 0;
    var Code = "";
    fond.onload = function(){setInterval(boucle,20); }

    function ShowHitBox() {
        for (let obs of Inventory) {
            if (obs[4]!="") {
                Item.src = 'Item/'+obs[4]+'.png';
                ctx.drawImage(Item,obs[0],obs[1],obs[2],obs[3]);
            }
        }
        ctx.globalAlpha = 0.5;
        for (let obs of RedPart) {
            ctx.fillStyle = "red"
            ctx.fillRect(obs[0],obs[1],obs[2],obs[3]);
        }
        ctx.fillStyle = "green"
        ctx.fillRect(PosX+FeetHitBox[0],PosY+FeetHitBox[1],FeetHitBox[2],FeetHitBox[3]);
        ctx.fillRect(PosX+FeetHitBox[0],PosY,FeetHitBox[2],FeetHitBox[3]);
        ctx.fillRect(PosX+BodyRightHitBox[0],PosY+BodyRightHitBox[1],BodyRightHitBox[2],BodyRightHitBox[3]);
        ctx.fillRect(PosX+BodyLeftHitBox[0],PosY+BodyLeftHitBox[1],BodyLeftHitBox[2],BodyLeftHitBox[3]);
        ctx.fillRect(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3]);
        ctx.fillStyle = "black"
        ctx.globalAlpha = 1;
        ctx.font = "40px serif";
        ctx.fillText("Coin: "+Coin, 100, 40);
        ctx.fillText("Get 25 coins to see the secret code: "+Code, 300, 40);
        ctx.fillStyle = "red"
        ctx.fillText("Exit",20,40);
    }

    function CheckCollision(Class,Part) {
        var HitBox = []
        var CollisionElement = []
        if (Part=="Ground" || Part=="Stair") {HitBox=FeetHitBox} else {HitBox=HeadHitBox}
        if (Class == "Obstacle") {
            if (Part=="Right") {CollisionElement=ObstaclesList;HitBox=BodyRightHitBox}
            if (Part=="Left") {CollisionElement=ObstaclesList;HitBox=BodyLeftHitBox}
        } else {CollisionElement=GroundList}
        for (let obs of CollisionElement) {
            var sol = new Obstacle(obs[0],obs[1],obs[2],obs[3]);
            if (sol.collision(PosX+HitBox[0],PosY+HitBox[1],HitBox[2],HitBox[3])) {
                if (Part=="Stair") {
                    return obs[1]-37;
                }
                return true;
            } 
        }
        return false;
    }



    function CheckItem() {
        for (let obs of Inventory) {
            var sol = new Obstacle(obs[0],obs[1],obs[2],obs[3]);
            if (sol.collision(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3])&&obs[4]!="") {
                obs[4]="";
                Coin+=1;
            } 
        }
    }

    function CheckBoost() {
        var sol = new Obstacle(LeBoost[0],LeBoost[1],LeBoost[2],LeBoost[3],);
        if (sol.collision(PosX+BodyHitBox[0],PosY+BodyHitBox[1],BodyHitBox[2],BodyHitBox[3])) {
            vitesse = 10;
        } 
    }

    
    function boucle() {
        var moving = false;
        if(clavier.droite){
            if (CheckCollision("Obstacle","Right") == false) {
                PosX=PosX+vitesse;
            }
			if(PosX>1520){PosX=0;}
            if (compt%3==0)pas++;
            AnimationPosition = 704
            moving = true
		}

        if(clavier.gauche){
            if (CheckCollision("Obstacle","Left") == false) {
                PosX=PosX-vitesse;
            }
			if(PosX<0){PosX=1520;}
            if (compt%3==0)pas++;
            AnimationPosition = 576
            moving = true
		}

        if (clavier.espace && CheckCollision("NotObstacle","Ground")==true && Hauteur<=0 && PosY>100){
			PositionInitiale = PosY;
			Hauteur = 40;
		} 

        if (CheckCollision("NotObstacle","Ground")!=true) {PosY=PosY*1.03}
        if (Coin>=25) {Code="Kayakobeme"}
        if (Hauteur>=0){
			if (Hauteur>15){
				PosY=PositionInitiale+(20-Hauteur)*(20-Hauteur)/4*1.5-150;
                if (CheckCollision("here is a text you have to write but useless :)","this one too")==true) {Hauteur=-1}
			}	
        Hauteur--;
		}

        for (let obs of Inventory) {
            var random = Math.random()
            if (random<0.0005) {
                obs[4]="coin";
            }
        }
        if (pas>=9) pas=0;

        ctx.save();
        ctx.drawImage(fond,0,0,1560,680);
        if (moving) {ctx.drawImage(perso,(pas*64)+15,AnimationPosition,50,64,PosX-5,PosY-25,WidthX,WidthY);   
        } else {ctx.drawImage(perso,15,128,50,64,PosX-5,PosY-25,WidthX,WidthY)}
        if (vitesse==5) {
            ctx.drawImage(Boost,LeBoost[0],LeBoost[1],LeBoost[2],LeBoost[3],);
        }
        ShowHitBox();
        CheckBoost();
        CheckItem();
        ctx.restore();
    }
}

window.onclick = function(evt){
    var canvas = document.getElementById('canvas');
    if (0<=evt.clientX-canvas.offsetLeft&&
        evt.clientX-canvas.offsetLeft<=100&&
        evt.clientY-canvas.offsetTop>=0&&
        evt.clientY-canvas.offsetTop<=100)
        window.location.href = "index.htm";
}