MANCANA<br><br>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
var log="";var step=0;var player="A";goals=0;msg="";board=0;end=false;var confirm_reply=true;

function tally(player,bd,pocket,action,hand){
	if(bd==0){label="BM";}
	else if(bd<7){label="A"+(bd);}
	else if(bd==7){label="AM";}
	else {label="B"+(bd-7);}
	before=pocket-1;
	if(before<1){before=hand;}
	tally_label="<tr><td>who</td><td>hole</td><td>in hole</td><td>action</td><td> in hand</td></tr>";
	if(log.length==0){log=tally_label;}
	log+="<tr><td>"+player+"</td><td>"+label+"</td><td>"+before+">"+pocket+"</td><td>"+action+"</td><td>"+hand+"</td></tr>";
	$("#log").html("<table>"+log+"</table>");
	if(action=="putdown"&&hand==0){log+=tally_label;}
	step++;
}
/*function placeid(id){
	place=$("#board").find("[id="+id+"]");
	return place;
}*/	
function cell(id){ //returns the pointer
	return $("*").find("[id="+id+"]");
}
function move(){
	board=(board==13?0:parseInt(board)+1);
	if(player=="A" && board==0){board=1;}
	if(player=="B" && board==7){board=8;}
}

$(document).ready(function(){
function restart(){// set board for start
	for(i=0;i<14;i++){  //loop through board
		if(i%7==0){
			cell(i).html(0);  //if goal, no gems
		}
		else{
			cell(i).html(4);  //not goal, 4 gems
			if((player=="A"?i<7:i>7)){cell(i).css("border","2px solid red");}  //ready for choice
		}
	};
	$("#command").html("<br>Player "+player+" choose red-outlined pocket to pick up.")
	$("#restartbtn").hide();
}
//start  --------------------------------------------------------------
restart();
$("#restartbtn").click(function(){restart();});
$(".hole,.hole2").click(function(){
//			hand=$(this).html();  $(this).html(0); 
			board=$(this).attr("id");  //where are we
			if((player=="A"?board>7:board<7)){alert("choose red");return;}
			//
			extended=true;
			while (extended){
//				if(confirm_reply){confirm_reply=confirm("Continue turn");}
				$(".hole,.hole2,.goalA,.goalB").css("background-color","white");  //---------------------------------------------------------
				$(".hole,.hole2").css("border","2px solid black")
				$("#command").html("");
				
				hand=cell(board).html();cell(board).html(0);//pickup gems
				tally(player,board,0,"pickup",hand);
				while(hand>0){
					move();  //sets board, jumps oppo goal
					cell(board).css("background-color","lightblue");  //---------------------------------------------------------
					count=cell(board).html();count++;cell(board).html(count);
					hand--;$("#hand").html(hand); //deposit one gem
					tally(player,board,count,"putdown",hand);
				} 
				extended=(count>1?true:false);  // if pit not empty pick them all up as a new turn
				if((player=="A"?board==7:board==0)){extended=false;} //landed in own goal, get another turn
				if(extended){hand=count;}//alert("still your turn");}
			}
			cell(board).css("background-color","lightblue");
			count=cell(board).html();
				
			if((player=="A"?board==7:board==0)){msg="Landed in own mancana.<br>";} //landed in own goal, get another turn
/*			else if(count==1 && (player=="A"?board>7:board<7)){ //landed on empty hole on own side
				//add current and opposite cnts into store
				cell(board).html(0); //empty final pit
				oppo=cell(14-board).html();cell(14-board).html(0);
				cell(14-board).css('background-color',"lightblue");
				goal=cell(player=="A"?7:0).html();
				cell(player=="A"?7:0).html((goal*1+oppo*1+1));
				msg="Gathered opposite: "+oppo+"<br> ";
				player=(player=="A"?"B":"A");}
*/			else{  // common case - switch players
				player=(player=="A"?"B":"A");msg="";
			}
			// check for end of game
			sumA=sumB=0;
			$(".hole2").each(function(){
				sumA=(sumA+1*($(this).html()));
				});
			$(".hole").each(function(){
				sumB=(sumB+1*($(this).html()));
				});
			if(sumA==0 || sumB==0){
				count=cell(0).html();
				cell(0).html((1*count+sumA));
				count=cell(7).html();
				cell(7).html((1*count+sumB));
				end=true;
				$("td").each(function(){$(this).html(0);});
			}

			// reset board for start
			if(!end){
				if(player=="A"){$(".hole2").each(function(){$(this).css("border","2px solid red");});}
				else{$(".hole").each(function(){$(this).css("border","2px solid red");});}
				$("#command").html("<br>"+msg+" Player "+player+" choose  red pocket.<br><br>")
				log="";}
			else{$("#command").html("<br>"+msg+" GAME OVER.<br>");
//			$("#restartbtn").show();
			$("#log").html("");}
//		}

	});	
});
</script>
<html>
<style>
.goalA,.goalB	{height:90px;width:40px;float:left;border:2px solid black;margin:0px 5px;
	display:flex;justify-content:center;align-items:center;}
.goalB	{clear:left;float:left;}
.hole,.hole2	{height:40px;width:40px;float:left;border:2px solid black;border-radius:20px;
	margin:0px 5px;display:flex;justify-content:center;align-items:center;}
.hole2	{position:relative;top:50px;left:-378px;}
.label2	{height:15px;width:40px;float:left;margin:0px 7px;padding:0px 0px;font-size:10px;text-align:center;color:blue;}
#log td {padding:0px 5px 0px;}
div {border-radius:20px;}
</style>
<div class=label2>BM</div><div class=label2>B6</div><div class=label2>B5</div><div class=label2>B4</div>
	<div class=label2>B3</div><div class=label2>B2</div><div class=label2>B1</div><div class=label2>AM</div>
<div id=board>
<div class="goalB" id=0></div><div class=hole id=13>B6</div><div class=hole id=12></div><div class=hole id=11></div>
	<div class=hole id=10></div><div class=hole id=9></div><div class=hole id=8></div><div class=goalA id=7></div>
<div class=hole2 id=1></div><div class=hole2 id=2></div><div class=hole2 id=3></div>
	<div class=hole2 id=4></div><div class=hole2 id=5></div><div class=hole2 id=6></div>
</div>
<div class=label2 style="clear:left;">BM</div><div class=label2>A1</div><div class=label2>A2</div><div class=label2>A3</div>
	<div class=label2>A4</div><div class=label2>A5</div><div class=label2>A6</div><div class=label2>AM</div>

<div id=command style="clear:left;"></div><div id=btn><button id=restartbtn>RESTART</button></div><div id=log></div><p></p>

</html>