// Objective: Create a Dice Class that has a flag for if it is selected or not 	<br>
// Start Time: 	0130								<br>
// End Time: 	0340								<hr>
<title> Dice Class </title>
<canvas id="gc" width="1000" height="600"></canvas>
<script>
window.onload=function() {
	

	canv=document.getElementById("gc");
	ctx=canv.getContext("2d");
	canv.addEventListener('mousemove', function(evt){ var mousePos= calculateMousePos(evt);
							mouseY= mousePos.y;
							mouseX= mousePos.x;
							});

	document.addEventListener("keydown", keyPush);

draw();
	//setInterval(function() {
				
				//draw();
				//},
				//1000/60);
	
}





var canv;
var ctx;
var runonce=true; 		// flag to initiate dice
var mydice=[];
var selected=[];		// array to hold selected dice separate;
var mouseX;
var mouseY;
var rollcount=1;		// Keeps track of number of rolls. Re-rolls all dice after 3rd roll. 
var showcard=false;		// true if 3 rolls have been taken. 
var loopcount=0;
var cupx= 600;			// xpos of dice cup
var cupy= 100;			// ypos of dice cup
var cupvel=10;			// change in cup pos




var keyPush = function(evt){
switch(evt.keyCode)
	{
}
	
};


//Function for drawing lines

var line = function (x1, y1, x2, y2)
{
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();


}

function swap(pos1, pos2, bubblearr)
	{
	swappedarr=bubblearr;
	var temp;
	temp = swappedarr[pos1].value;
	swappedarr[pos1].value= swappedarr[pos2].value;
	swappedarr[pos2].value= temp;
	return swappedarr;
	};


function test()
{

colorRect(0,0, canv.width, canv.height,'skyblue');
	ctx.lineWidth=5;
	colorRect(0, 1,  200,canv.height-2), 'skyblue';






colorRect(cupx, cupy, 100,150, 'brown');

cupx+=cupvel;
cupvel*=-1;

}




function draw(){
	
	if (runonce)
	{
	for(i=0; i<5; i++)
	{
	var rnd= Math.floor(Math.random() * (7-1) +1);
	mydice[i]= new dice(300+(i *80),300,75, rnd);
	}
	runonce=false;
	}
	colorRect(0,0, canv.width, canv.height,'skyblue');
	ctx.lineWidth=5;
	colorRect(0, 1,  200,canv.height-2), 'skyblue';
	//ctx.strokeStyle='red';
	//ctx.stroke();
	
	ctx.font = "bold 50px Arial";
	ctx.fillStyle='black'
	ctx.fillText( "KEEP", 50, 50);
	ctx.lineWidth=2;
	for(var i=0; i<mydice.length; i++)
	{
	showDice(mydice[i]);
	}
	
	for(var i=0; i<selected.length; i++)
	{
	showDice(selected[i]);
	}
	if(rollcount<3)
	{
	colorRect(canv.width/4, canv.height-50, 100,49, 'lightgrey');
	ctx.fillStyle='black'
	ctx.font = "bold 20px Arial";
	ctx.fillText( "ROLL", canv.width/4+25, canv.height-15);
	}
	

// if 3 rolls have been made, we move all dice to selected and sort them from lowest to hightest. 
else
	{
	var controllength=mydice.length;
	for(var i=0; i<controllength; i++)
		{
	selected[selected.length]=mydice.pop();
		}
	
	for(i=0; i<selected.length; i++)
	{
		for(j=i; j<selected.length; j++)
		{
		if (selected[i].value > selected[j].value)
			{
			selected=swap(i, j, selected);
			}
		}
	}
		



	for(i=0; i<selected.length; i++)
	{
	selected[i].x=95;
	selected[i].y=90+(i*(selected[i].size+5));
	}
		

{
	colorRect(canv.width/2, canv.height-50, 100,49, 'maroon');
	ctx.fillStyle='black'
	ctx.font = "bold 15px Arial";
	ctx.fillText( "NEW ROLL", canv.width/2+15, canv.height-15);
	}




	}






canv.onclick = function(){
	checkclick();
	}


	
	}




function calculateMousePos(evt){
	var rect= canv.getBoundingClientRect();
	var root= document.documentElement;
	var mouseX = evt.clientX - rect.left - root.scrollLeft;
	var mouseY = evt.clientY - rect.top - root.scrollTop;	
	return{
	x: mouseX, 
	y: mouseY
	}
	};



function reRoll(){
if(rollcount<=2)
	{
	
	for(var i=0; i<mydice.length; i++)
		{
		var rnd= Math.floor(Math.random() * (7-1) +1);
		mydice[i].value=rnd;
		}
	rollcount++;
	}
else
{
rollcount=1;
mydice.length=0;
selected.length=0;
runonce=true;


}

draw();
}




function checkclick(){
if(rollcount<3)
{
//canv.width/4, canv.height-50, 100,49
if((mouseX>canv.width/4) && (mouseX<100+canv.width/4) && (mouseY>canv.height-50))
	{
	reRoll();

	}


for(i=0; i<mydice.length; i++)
	{
	if((mouseX>mydice[i].x) && (mouseX<mydice[i].x+mydice[i].size) && ( mouseY>mydice[i].y) && (mouseY<mydice[i].y+mydice[i].size))
		{
		mydice[i].selected=true;
		selected[selected.length]= mydice[i];
		mydice.splice(i,1);
		
		}
}







for(i=0; i<mydice.length; i++)
	{
	mydice[i].x=300+(i*80);
	mydice[i].y=300;
	}

for(i=0; i<selected.length; i++)
	{
	selected[i].x=95;
	selected[i].y=90+(i*(selected[i].size+5));
	}

for(i=0; i<selected.length; i++)
	{
	if((mouseX>selected[i].x) && (mouseX<selected[i].x+selected[i].size) && ( mouseY>selected[i].y) && (mouseY<selected[i].y+selected[i].size))
		{
		selected[i].mydice=false;
		mydice[mydice.length]= selected[i];
		selected.splice(i,1);
		
		}

	}

for(i=0; i<mydice.length; i++)
	{
	mydice[i].x=300+(i*80);
	mydice[i].y=300;
	}

for(i=0; i<selected.length; i++)
	{
	selected[i].x=95;
	selected[i].y=90+(i*(selected[i].size+5));
	}




}
else
{

if((mouseX>canv.width/2) && (mouseX<100+canv.width/2) && (mouseY>canv.height-50))
	{
	reRoll();

	}

}




draw();
}




function keyPush(evt) {




}

function colorRect(leftX, TopY, width, height, drawColor)
{
	
	ctx.fillStyle= drawColor;
	ctx.strokeRect(leftX, TopY, width, height);
	ctx.fillRect(leftX, TopY, width, height);
	
}



function colorCircle(centerX, centerY, radius, ballColor)
{
	
	ctx.fillStyle=ballColor;
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius, 0, Math.PI*2, true);
	ctx.fill();
	ctx.stroke();


}


function outlineRect(leftX, TopY, width, height)
{
	
	ctx.fillStyle= 'black';
	ctx.strokeRect(leftX, TopY, width, height);
	ctx.fillStyle= 'ivory';
	ctx.fillRect(leftX, TopY, width, height);
	
}


function showDice(dice)
	{
	
	outlineRect(dice.x, dice.y, dice.size, dice.size);
	switch (dice.value)
		{
		case 1:
			colorCircle(dice.x+(dice.size/2), dice.y+(dice.size/2), dice.size/9, 'black');
		break;
		case 2: 
			colorCircle(dice.x+(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
		break;
		case 3: 
			colorCircle(dice.x+(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/2), dice.y+(dice.size/2), dice.size/9, 'black');
		break;
		case 4:
			colorCircle(dice.x+(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
			
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
		break;
		case 5:
			colorCircle(dice.x+(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/2), dice.y+(dice.size/2), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
		break;
		case 6:
			colorCircle(dice.x+(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');
			
			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+(dice.size/4), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/4), dice.y+dice.size-(dice.size/4), dice.size/9, 'black');


			colorCircle(dice.x+dice.size-(dice.size/4), dice.y+(dice.size/2), dice.size/9, 'black');
			colorCircle(dice.x+(dice.size/4), dice.y+dice.size-(dice.size/2), dice.size/9, 'black');
		break;
		

		}






	}


class dice{
	constructor(x,y, size, value){
	this.x=x;
	this.y=y;
	this.size=size;
	this.value=value;
	this.selected=false;
	}
}






</script>