// Variables
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');

// Functions
function onstart(){
	canvas.width = 600;
	canvas.height = 600;

	ctx.fillStyle="#a0a0a0";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	updateScreen();
}
function updateScreen(){
    console.log(tries);
    ctx.clearRect(0,0,canvas.width, canvas.height);

    /*
    less than 7 wrong - bottom
    less than 6 wrong  - middle
    less than 5 wrong  - top
    less than 4 wrong  - features
    less than 3 wrong  - right arm
    less than 2 wrong  - leftArm
    less than 1 wrong  - hat
    */

	switch(tries){
	case 0:
		bottomSnowBall();
		middleSnowBall();
		topSnowBall();
		features();
		rightArm();
		leftArm();
		hat();
		break;
	case 1:
		bottomSnowBall();
		middleSnowBall();
		topSnowBall();
		features();
		rightArm();
		leftArm();
		break;
	case 2:
		bottomSnowBall();
		middleSnowBall();
		topSnowBall();
		features();
		rightArm();
		break;
	case 3:
		bottomSnowBall();
		middleSnowBall();
		topSnowBall();
		features();
		break;
	case 4:
		bottomSnowBall();
		middleSnowBall();
		topSnowBall();
		break;
	case 5:
		bottomSnowBall();
		middleSnowBall();
		break;
	case 6:
		bottomSnowBall();
		break;
	}
}
function bottomSnowBall(){
	ctx.beginPath();
	ctx.fillStyle = "#f7f7f7";
	ctx.arc(300, 470, 100, 0, Math.PI*2);
	ctx.fill();
}
function middleSnowBall(){
	ctx.beginPath();
	ctx.fillStyle = "#f7f7f7";
	ctx.arc(300,350,85, 0,Math.PI*2);
	ctx.fill();
}
function topSnowBall(){
	ctx.beginPath();
	ctx.fillStyle = "#f7f7f7";
	ctx.arc(300,235,60, 0,Math.PI*2);
	ctx.fill();
}
function hat(){
	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.fillRect(265,105, 75,80);
	ctx.fill();

	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.fillRect(230,185, 145,10);
}
function rightArm(){
	ctx.beginPath();
	ctx.strokeStyle = "brown";
	ctx.lineWidth = 5;
	ctx.moveTo(365,300);
	ctx.lineTo(450,400);
	ctx.stroke();
	ctx.moveTo(450,400);
	ctx.lineTo(470,400);
	ctx.stroke();
	ctx.moveTo(450,400);
	ctx.lineTo(470,420);
	ctx.stroke();
	ctx.moveTo(450,400);
	ctx.lineTo(450,420);
	ctx.stroke();
}
function leftArm(){
	ctx.beginPath();
	ctx.strokeStyle = "brown";
	ctx.lineWidth = 5;
	ctx.moveTo(230,300);
	ctx.lineTo(150,400);
	ctx.stroke();
	ctx.moveTo(150,400);
	ctx.lineTo(130,400);
	ctx.stroke();
	ctx.moveTo(150,400);
	ctx.lineTo(130,420);
	ctx.stroke();
	ctx.moveTo(150,400);
	ctx.lineTo(150,420);
	ctx.stroke();
}

function _drawButtons(){
	for(var i = 0; i < 3; i++){
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.arc(300,300+(i*35),8, 0,Math.PI*2);
		ctx.fill();
	}
}
function _drawEyes(){
	for(var i = 0; i < 2; i++){
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.arc(275+(i*52),220,8, 0,Math.PI*2);
		ctx.fill();
	}
}
function _drawMouth(){
	for(var i = 0; i < 2; i++){
		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.arc(260+(i*80),250,5, 0,Math.PI*2);
		ctx.fill();
	}
	for(var i = 0; i < 3; i++){
		var down=0;
		if(i == 1) {down=1;}

		ctx.beginPath();
		ctx.fillStyle = "black";
		ctx.arc(280+(i*20),260+(down*3),5, 0,Math.PI*2);
		ctx.fill();
	}
}
function _drawCarrot(){
	ctx.beginPath();
	ctx.fillStyle = "orange";
	ctx.arc(300,235,7, 0,Math.PI*2);
	ctx.fill();

	ctx.beginPath();
	ctx.fillStyle = "orange";
	ctx.moveTo(300,228);
	ctx.lineTo(335,239);
	ctx.lineTo(300,240);
	ctx.lineTo(300,230);
	ctx.fill();
}
function features(){
	//eyes
	_drawEyes();
			
	//mouth
	_drawMouth();
	
	//buttons		
	_drawButtons();
	
	//carrot
	_drawCarrot();
}

// Events
window.addEventListener("DOMContentLoaded", onstart);