{% extends "global/Page.html" %}
{% load otree %}

{% block title %} {% endblock %}

<!-- SCRIPTS -->

{% block scripts %} <script>

	// Pegs
	let degree1 = 0;
	let degree2 = 0;
	let degree3 = 0;
	let degree4 = 0;
	let degree5 = 0;
	let degree6 = 0;
	let degree7 = 0;
	let degree8 = 0;
	let allow = "";
	let total_rotations = 0; // One rotation = one click
	let target_rotations = 8*5;
	// Timer
	var minutes = 5;	// Minutes for timer	
	var distance = 42; 	// Initialize with anything above 0
	
    document.getElementById("replay").style.visibility="hidden";
	document.getElementById("or").style.visibility="hidden";
    document.getElementById("next").style.visibility="hidden";

    // If pegs turn, rotate peg by 90 degrees
	function rotatePeg1(){
		if("peg1" == allow){
			var peg = document.getElementById("peg1");
			degree1 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree1+"deg)";
			allow = "peg2";
			highlightPeg('peg1', 'peg2')
			total_rotations += 1;
		}
	}
	function rotatePeg2(){
		if("peg2" == allow){
			var peg = document.getElementById("peg2");
			degree2 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree2+"deg)";
			allow = "peg3";
			highlightPeg('peg2', 'peg3')
			total_rotations += 1;
		}
	}
	function rotatePeg3(){
		if("peg3" == allow){
			var peg = document.getElementById("peg3");
			degree3 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree3+"deg)";
			allow = "peg4";
			highlightPeg('peg3', 'peg4')
			total_rotations += 1;
		}
	}
	function rotatePeg4(){
		if("peg4" == allow){
			var peg = document.getElementById("peg4");
			degree4 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree4+"deg)";
			allow = "peg5";
			highlightPeg('peg4', 'peg5')
			total_rotations += 1;
		}
	}
	function rotatePeg5(){
		if("peg5" == allow){
			var peg = document.getElementById("peg5");
			degree5 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree5+"deg)";
			allow = "peg6";
			highlightPeg('peg5', 'peg6')
			total_rotations += 1;
		}
	}
	function rotatePeg6(){
		if("peg6" == allow){
			var peg = document.getElementById("peg6");
			degree6 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree6+"deg)";
			allow = "peg7";
			highlightPeg('peg6', 'peg7')
			total_rotations += 1;
		}
	}
	function rotatePeg7(){
		if("peg7" == allow){
			var peg = document.getElementById("peg7");
			degree7 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree7+"deg)";
			allow = "peg8";
			highlightPeg('peg7', 'peg8')
			total_rotations += 1;
		}
	}
	function rotatePeg8(){
		if("peg8" == allow){
			var peg = document.getElementById("peg8");
			degree8 += 90 % 360;
			peg.style.WebkitTransform = "rotate("+degree8+"deg)";
			allow = "peg1";
			highlightPeg('peg8', 'peg1')
			total_rotations += 1;
		}
	}
	
	function highlightPeg(prev_peg, next_peg){
		// Remove current highlight
		var prev_peg = document.getElementById(prev_peg);
		prev_peg.classList.remove("highlight");
		// Highlight next peg
		var next_peg = document.getElementById(next_peg);
		next_peg.classList.add("highlight");
	}

	function timer(){
		// Get timer field
		var timer = document.getElementById("watch")
		// Get target time
		var duration = new Date().getTime() + minutes * 1000 * 60;
		// Run timer
		var x = setInterval(
			function() {
				var now = new Date().getTime();
				distance = duration - now;
				var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
				var seconds = Math.floor((distance % (1000 * 60)) / 1000);
				timer.innerHTML = minutes + "m " + seconds + "s ";
				// When timer ends, display Game over!
				if (distance < 0) {
					clearInterval(x);
					document.getElementById("watch").innerHTML = "Game over!";
					endGame();
				}
			}, 0);
	}
	function startTimer(){
		// Initialize variables
		document.getElementById("start").style.visibility = "hidden"
		// Set highlighted peg
		allow = "peg1"
		document.getElementById("peg1").classList.add("highlight");
		// Start timer
		timer()
	}

	function resetPeg(peg_id){
		// Set peg rotation to zero
		var peg = document.getElementById(peg_id);
		peg.style.WebkitTransform = "rotate(0deg)";
	}

	function resetAllPegs(){
		// Reset all peg rotations but not the total rotations
		degree1 = 0; degree2 = 0; degree3 = 0; degree4 = 0;
		degree5 = 0; degree6 = 0; degree7 = 0; degree8 = 0;
		resetPeg("peg1"); resetPeg("peg2"); resetPeg("peg3"); resetPeg("peg4");
		resetPeg("peg5"); resetPeg("peg6"); resetPeg("peg7"); resetPeg("peg8");
	}

	function restartTimer(){
		// Initialize variables
	    document.getElementById("replay").style.visibility="hidden";
	    document.getElementById("or").style.visibility="hidden";
	    document.getElementById("next").style.visibility="hidden";
		// Set highlighted peg
		allow = "peg1"
		document.getElementById("peg1").classList.add("highlight");
		// Reset game
		resetAllPegs()
		// Start timer
		timer()
	}

	// When game ends:
	// - show next button
	// - remove remaining highlights
	// - deny any further rotation
	function endGame(){
	    document.getElementById("replay").style.visibility="visible";
	    if(total_rotations>=target_rotations){
	    	document.getElementById("or").style.visibility="visible";
	    	document.getElementById("next").style.visibility="visible";
			document.getElementById("next").value=total_rotations
	    }
		document.getElementById(allow).classList.remove("highlight");
		allow = ""
	}



</script> {% endblock %} 

<!-- STYLES -->

{% block styles %} <style>

	img {
	  padding: 0;
	  display: inline-block;
	  margin-left: auto;
	  margin-right: auto;
	  margin-top: 20px;
	}

	.highlight {
	  -webkit-filter: drop-shadow(0 0 7px blue);
	  filter: drop-shadow(0 0 7px blue);
	}

	.expand:hover { 
	  -ms-transform: scale(1.05); /* IE 9 */
	  -webkit-transform: scale(1.05); /* Safari 3-8 */
	  transform: scale(1.05); 
	}

	table.center {
	  margin-left:auto; 
	  margin-right:auto;
	}

	p, h1 {
	  margin: auto;  
	  padding: 10px;
	  text-align: center;
	}

	.optionsButton button{
	    border: none;
	    outline: 0;
	    padding: 5px;
	    color: white;
	    background-color: black;
	    text-align: center;
	    cursor: pointer;
	    width: 150px;
	    font-size: 15px;
  	}

	.optionsButton button:hover{
		opacity: 0.7;
	}

</style> {% endblock %}

<!-- BODY -->

{% block content %}

	<h1 style="text-align:center;"> Peg Turning </h1>
	<p style="text-align:center;"> Click on the pegs to rotate them 90 degrees clockwise. Each peg can only be rotated once until all pegs point in the same direction. </p>
	<div class="optionsButton">
		<p id="watch"><button id="start" type="button" onclick='startTimer()'>
			Start Game
		</button></p>
	</div>

	<!-- Table with the visuals-->
	<table width="600" height= "150" border="0" cellpadding="5" class="center">
		<!-- Row 1 -->
		<tr>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg1" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg1();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg2" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg2();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg3" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg3();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg4" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg4();'/>
				</div>
			</td>
		</tr>
		<!-- Row 2-->
		<tr>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg5" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg5();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg6" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg6();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg7" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg7();'/>
				</div>
			</td>
			<td align="center" valign="center">
				<div class="expand">
				<img id="peg8" draggable= "false"  src="{% static "peg_turning/peg.png" %}" style="width:128px;height:128px;" class="center" onclick='rotatePeg8();'/>
				</div>
			</td>
		</tr>
	</table>

<div class="optionsButton">
	<p><button type="button" id="replay" onclick='restartTimer()'>
		Play Again
	</button></p>
</div>
<p id="or">OR</p>
 <div class="optionsButton">
	<p><button id="next" name="peg">
		Next
	</button></p>
</div>

{% endblock %}