{{ block title }}Tower of London{{ endblock }}

{{ block content }}
<p>{{roundMessage}} </p>
   Please <b> DO NOT refresh </b> any page unless it's not responding. This will bias the results. <br><br>
<p>Remember these rules:</p>
<ul>
    <li>You can only select one ball at a time.</li>
    <li>Once selected, click on the peg where the ball will go.</li>
    <li>Finally, the aim is to have goal pattern in the <b>least number of moves</b>.</li>
</ul>
<table>
<tr>
    <td>
        <center>
            <b>Play here</b>
        </center>
        <canvas id="gc" width="600" height="285">
        </canvas>
    </td>
    <td>
        <center>
            <b>Goal</b>
        </center>
        <canvas id="gz" width="600" height="285">
        </canvas>
    </td>
</tr>
</table>

<br>
<table border="1">
    <tr>
        <td hidden>
            <center>minimum no of moves<br> {{moves}}</center>
        </td>
        <td>
            <center>Number of moves made<div id="movesMade"></div></center>
        </td>
        <td hidden>
            <center>timer <div id="stopWatch">0</div>             
                </center>
        </td>
    </tr>
</table>

<br>
<center>
    <div id="theOtherOne"></div>
    <div id="timeTaken"></div>   
    <br>  {{ next_button }}  
</center>

<div id="results"></div>
{{ formfield 'firstMoveTime' }}
{{ formfield 'boardCompletionTime' }}
{{ formfield 'noOfMoves' }}
  {% block scripts %}
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.1/min/jcanvas.min.js"></script>
<script>
var board = {{board}};
var result = {{result}};
var movesLeft = 0;
var moves = {{moves}};
var selectedNumber = 0;
var boardPoints = [
        [[105,75], [305,75], [505,75]],
        [[105,150], [305,150], [505,150]],
        [[105,225], [305,225], [505,225]]
    ];
var timerInSeconds =0;
window.onload=function() {    $(".debug-info").hide();
    $("#id_firstMoveTime").hide();         
    $("#id_boardCompletionTime").hide();
    $("#id_noOfMoves").hide();
    $("#id_boardCompletionTime").val('skipped');
    $("#id_boardCompletionTime").val('skipped');
    $("#id_noOfMoves").val('skipped');
    timer(true);
    document.getElementById('movesMade').innerHTML =0;
    $(".otree-btn-next").hide();
    canv=document.getElementById('gc');
    ctx=canv.getContext("2d");
    drawBoard('gc');
    fillBoard('gc');
    drawBoard('gz');
    fillBoard('gz');
}

function drawCircle(boardPoints,color,canvas){
    canv=document.getElementById(canvas);
    ctx=canv.getContext("2d");
    var centerX = boardPoints[0];
    var centerY =boardPoints[1];
    const radius = 32;
    ctx.beginPath();
    ctx.fillStyle =color;
    ctx.strokeStyle = '#0077aa47';
    ctx.lineWidth = 2;
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fill();
    ctx.stroke();
}

function drawBoard(canvas){
    canv=document.getElementById(canvas);
    ctx=canv.getContext("2d");
    ctx.clearRect(0, 0, canv.width, canv.height); 
    ctx.fillStyle="black";
    ctx.fillRect(100,20,15,canv.height);
    ctx.fillRect(300,100,15,canv.height);
    ctx.fillRect(500,180,15,canv.height);
    ctx.fillRect(0,canv.height-20,canv.width,20);
}

function fillBoard(canvas){
    canv=document.getElementById(canvas);
    ctx=canv.getContext("2d");
    var create = board;
    if(canvas=='gz'){
        create = result;
    }
    for(let i = 0; i < create.length; i++) {  
        for(let j = 0; j < create[i].length; j++) {
            if(create[i][j] ==1){
                drawCircle(boardPoints[i][j],'red',canvas);
            }
            if(create[i][j] ==2){
                drawCircle(boardPoints[i][j],'blue',canvas);
            }
            if(create[i][j] ==3){
                drawCircle(boardPoints[i][j],'green',canvas);
            }
        }
    }
}

function getMousePosition(canvas, event) {
    let rect = canvas.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;
    let resultText = '';


    if (selectedNumber == 0) {
        selectTower(x,y);
        drawBoard('gc');
        fillBoard('gc');
    }
    else { 
        placeTower(x,y);
        if (movesLeft==1) {
            $("#id_firstMoveTime").val(timerInSeconds);
        }
        drawBoard('gc');
        fillBoard('gc');
        document.getElementById('movesMade').innerHTML =movesLeft;
        if(JSON.stringify(board) === JSON.stringify(result)) {
            timer(false);
            document.getElementById('timeTaken').innerHTML = 'You completed this challenge in: '+timerInSeconds +' seconds, with ' + movesLeft +'  moves. Good job';
            document.getElementById('theOtherOne').innerHTML = '';
            $("#id_boardCompletionTime").val(timerInSeconds);
            $("#id_noOfMoves").val(movesLeft);
            $(".otree-btn-next").html("Next Board");
            $(".otree-btn-next").show();
            resultText = 'win';
        }
    }

    if(movesLeft>moves) {
        document.getElementById('theOtherOne').innerHTML = 'You exceeded the minimum of moves but you may still finish this round nonetheless.';
        resultText = 'loss'
    }

    sendResult(resultText)
}

function sendResult(result) {
    liveSend(result)
}

let canvasElem = document.querySelector("canvas");
          
canvasElem.addEventListener("mousedown", function(e)
{
    getMousePosition(canvasElem, e);
});
function timer(run){
    
    if(run){
        setInterval(function () {
            $("#stopWatch").html(timerInSeconds);
            timerInSeconds++;
        }, 1000);
    }
}
function selectTower(x,y){
    if(x>=60 && x<=140){
        if(board[0,0] == 0 &&board[1,0] == 0 &&board[2,0] == 0){
            document.getElementById('results').innerHTML ="this tower is empty please select another one";
        }else{
            if(board[0][0] != 0){
                selectedNumber =  board[0][0];
                board[0][0] = 0;
            }else if (board[1][0] != 0){
                selectedNumber =  board[1][0];
                board[1][0] = 0;
            }else{
                selectedNumber =  board[2][0];
                board[2][0] = 0;
            }
        }
    }
    if(x>=255 && x<=351){
        if(board[0,1] == 0 &&board[1,1] == 0 &&board[2,1] == 0){
            document.getElementById('results').innerHTML ="this tower is empty please select another one";
        }else{
            if(board[0][1] != 0){
                selectedNumber =  board[0][1];
                board[0][1] = 0;
            }else if (board[1][1] != 0){
                selectedNumber =  board[1][1];
                board[1][1] = 0;
            }else{
                selectedNumber =  board[2][1];
                board[2][1] = 0;
            }
        }
    }
    if(x>=435 && x<=570){
        if(board[0,2] == 0 &&board[1,2] == 0 &&board[2,2] == 0){
            document.getElementById('results').innerHTML ="this tower is empty please select another one";
        }else{
            if(board[0][2] != 0){
                selectedNumber =  board[0][2];
                board[0][2] = 0;
            }else if (board[1][2] != 0){
                selectedNumber =  board[1][2];
                board[1][2] = 0;
            }else{
                selectedNumber =  board[2][2];
                board[2][2] = 0;
           
            }
        }
    }
}

function placeTower(x,y){
    if(x>=60 && x<=140){
            if(board[2][0] == 0){
                board[2][0] =selectedNumber;
                selectedNumber=0;                
                movesLeft = movesLeft+1;
            }else if (board[1][0] == 0){
                board[1][0] = selectedNumber
                selectedNumber=0;
                movesLeft = movesLeft+1;
            }else{
                 board[0][0] = selectedNumber;
                 selectedNumber=0;
                movesLeft = movesLeft+1;
            }
        }
    
    if(x>=255 && x<=351){
        if(board[2][1] != 0 && board[1][1] != 0 ){
            document.getElementById('results').innerHTML ="you can't place this here";
            }else {
                if(board[2][1] == 0 ){
                    board[2][1] =selectedNumber;
                    selectedNumber=0;
                    movesLeft = movesLeft+1;
                }else{
                    board[1][1] =selectedNumber;
                    selectedNumber=0;
                    movesLeft = movesLeft+1;
                }
            }
        }
    
    if(x>=435 && x<=570){
        if(board[2][2] == 0){
                board[2][2] =selectedNumber;
                selectedNumber=0;
                movesLeft = movesLeft+1;
            }else{
                document.getElementById('results').innerHTML ="you can't place this here";
            }
    }
}

function bootstrapTabControl(){
  var i, items = $('.nav-link'), pane = $('.tab-pane');

  $('.nexttab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i < items.length - 1){

          $(items[i]).removeClass('active');
          $(items[i+1]).addClass('active');

          $(pane[i]).removeClass('show active');
          $(pane[i+1]).addClass('show active');
      }

  });

  $('.prevtab').on('click', function(){
      for(i = 0; i < items.length; i++){
          if($(items[i]).hasClass('active') == true){
              break;
          }
      }
      if(i != 0){

          $(items[i]).removeClass('active');
          $(items[i-1]).addClass('active');

          $(pane[i]).removeClass('show active');
          $(pane[i-1]).addClass('show active');
      }
  });
}
bootstrapTabControl();
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>   
<style>
    table {
      border-collapse: collapse;
      /* table-layout: fixed; */
      /* width:100% */
    }
    table,
    th,
    td {
      border: 1px solid #cccccc;
    }
    thead {
      background-color: #1c87c9;
      color: #ffffff;
    }
    th {
      height: 50px;
      text-align: center;
    }
    td {
      padding: 3px 10px;
    }
  </style>
{% endblock %}

{{ endblock }}