{{ block title }}Elithorn's Maze{{ endblock }} {{ block content }}
<p>{{roundMessage}}</p>
<br>
<p>Remember these rules:
<br>
<li>Start by clicking on the bottom vertex (lowest dot).</li>
<li>You can select a path on the left or right by clicking on the connecting dot.</li>
<li>Once selected, a dot cannot be unselected.</li>
<li>The aim is to have the highest cumulative score for your path.</li></p>
<br>
<p> <b></b><font size="+2">Score: <span id="movesMade"></span></p></font></b>
<center>
    <!-- <table border="1">
        <tr>
            <td>
            </td>
            <td>
                <center> score
                    <div id="movesmade"></div>
                </center>
            </td>
            <td>
                <center>timer
                    <div id="stopWatch">120</div>
                </center>
            </td>
        </tr>
    </table> -->

    <br>
    <div id="timeTaken"></div> {{ next_button }}
    <!-- <div style="display:inline-block;color:#444;border:1px solid #CCC;background:#DDD;box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);cursor:pointer;vertical-align:middle;max-width: 100px;padding: 5px;text-align: center;" id="retry" onclick="reset()">reset</div> -->
<!--    <button type="button" onclick="reloadpage()">reset</button>-->
    <div id="theOtherOne"></div>
</center>

<canvas id="gc" width="1000" height="600" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;">
 

<div id="results"></div>{{ next_button }}
{{ formfield 'timeTaken' }}
{{ formfield 'longestScore' }}
{{ formfield 'myopicScore' }}
{{ formfield 'path' }}
{{ formfield 'score' }}
{{ formfield 'weightsId'}}
{{ formfield 'numLayers'}}
  {% 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 boardPlacements = {{boardPlacements}};
var lineWeights = {{lineWeights}};
var result =[];
var movesLeft = 0;
var moves = [];
var selected = [];
var completed = false;
let totalLength = 0;
var prevSelected = [];
var first = true;
var currentRowIndex = null;
var previousRowIndex = -1;
var previousPointIndex = -1;
var startingCity = null;
var currentCity = null;
var selectedNumber = 0;
var timerInSeconds =0;
var noOfCities = 0;
var longestScore = {{longestScore}};
var myopicScore = {{myopicScore}};
var path =[];
var weightsId = {{weightsId}};
var numLayers = {{numLayers}};
canv=document.getElementById('gc');
ctx=canv.getContext("2d");
window.onload=function() { 
    $(".otree-btn-next").hide();
    $(".otree-btn-next").text('Next');
    $("#id_timeTaken").hide();
    $("#id_timeTaken").val('skipped');
    $("#id_score").hide();
    $("#id_score").val('skipped');
    $("#id_path").hide();
    $("#id_path").val('skipped');
    timer(true);
    document.getElementById('movesMade').innerHTML =0;
    $(".debug-info").hide()
    fillPoints('gc');
}

function fillPoints(canvas){
  $.each(boardPlacements, function(index, boards) {
        $.each(boards, function(index2, value) {
        drawPoints(boards[index2],canvas); 
        if(index!=boardPlacements.length-1){
            var point_line_start = boardPlacements[index][index2]
            var point_left_line_end = boardPlacements[index+1][index2]
            var point_right_line_end = boardPlacements[index+1][index2+1]

            drawLine('gc', point_line_start, point_left_line_end);
            drawLine('gc', point_line_start, point_right_line_end);

            labelLineWithWeight('gc', point_line_start, point_left_line_end, lineWeights[index][index2][0], 'left');
            labelLineWithWeight('gc', point_line_start, point_right_line_end, lineWeights[index][index2][1], 'right');
        }
    });
  });
}


function drawPoints(boardPoints,canvas){
  base_image = new Image();    
      base_image.src = '/static/elithorns_maze/point.png';
      var centerX = boardPoints[0]-5;
      var centerY =boardPoints[1]-5;
      base_image.onload = function(){
          ctx.drawImage(base_image, centerX, centerY);
      }
}

function drawLine(canvas,prev,current,count){
  var  stroke =  'black';
  if (count ==1 ){
    stroke = 'red';
  }
  if (count ==2 ){
    stroke = 'green';
  }
  if (count ==3 ){
    stroke = 'yellow';
  }
  if (count ==4 ){
    stroke = 'blue';
  }
  if(prev && current){
    ctx.beginPath();
    ctx.moveTo(prev[0],prev[1]);
    ctx.lineTo(current[0],current[1]);
    ctx.closePath();
    ctx.strokeStyle = stroke;
    ctx.stroke();
    }
}

function labelLineWithWeight(canvas, prev, current, val, side){
    var label_offset = 0
    if(side == 'left'){
        label_offset = 4;
    }
    else{
        label_offset = 8;
    }
    var location_x = prev[0] + (current[0]-prev[0])/2 + label_offset;
    var location_y = prev[1] + (current[1]-prev[1])/2;

    ctx.font = "14px Arial";
    ctx.fillText(val, location_x, location_y);

}

function reloadpage(){
    location.reload();
    // boardPlacements={{boardPlacements}}; 
    // canv=document.getElementById('gc');
    // ctx=canv.getContext("2d");
    // ctx.clearRect(0, 0, canv.width, canv.height);
    // totalLength = 0;
    // path =[];
    // prevSelected = [];
    // selected = [];
    // startingCity = null;
    // currentCity = null;
    // completed = false;
    // $("#theOtherOne").hide();
    // $("#stopWatch").show();
    // document.getElementById('movesMade').innerHTML =totalLength;
    // $(".otree-btn-next").hide();
}


function drawStart(boardPoints){
    base_image = new Image();    
    base_image.src = '/static/elithorns_maze/point_black.png';
    var centerX = boardPoints[0]-4;
    var centerY =boardPoints[1]-4;
    base_image.onload = function(){
        ctx.drawImage(base_image, centerX, centerY);
    }
}

function addToPathScore(currentWeight){
    totalLength += currentWeight
    document.getElementById('movesMade').innerHTML =totalLength;
}

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

let canvasElem = document.querySelector("canvas");
          
canvasElem.addEventListener("mousedown", function(e)
{
    getMousePosition(canvasElem, e)
});

function timer(run){    
    if(run){
        setInterval(function () {
            $("#stopWatch").html(120-timerInSeconds);
            timerInSeconds++;
            results();
        }, 1000);
    }
}

function selectPoint(x,y){
    $.each(boardPlacements, function(rowIndex, boards) {
        $.each(boards, function(index2, value) {
            if(x-15 <= value[0] && x + 15 >= value[0] && y - 15 <= value[1] && y+15 >= value[1] && previousRowIndex+1 == rowIndex){        
                
                    
                    prevSelected = selected;                     
                    selected = value;
                   
                    if(prevSelected){
                        drawLine('gc',prevSelected,selected, 3);
                        path.push(index2);
                        
                        var lineValueRowIndex = rowIndex-1
                        var lineValueColIndex =  index2 + previousPointIndex

                        if(lineValueRowIndex >= 0 && lineValueColIndex>=0){
                            addToPathScore(lineWeights[lineValueRowIndex].flat()[lineValueColIndex]);
                        }
                       
                    }
                    
                    drawStart([value[0],value[1]])
                    if(!startingCity && startingCity != 0){
                        drawStart([value[0],value[1]]);
                            startingCity = rowIndex;
                            
                    }
                    
                    previousRowIndex = rowIndex;
                    previousPointIndex = index2;           
            }
        });
    });
    results();
}

function checkFinishedMaze(){
    var finished = false
    if(previousRowIndex==boardPlacements.length-1){
        finished = true;
    } 
    return finished;
}

function results(){
    if((checkFinishedMaze()) && !completed){
        document.getElementById('theOtherOne').innerHTML = 'traversed all in ' + timerInSeconds +' seconds';
       document.getElementById('theOtherOne').innerHTML = 'Traversed all in ' + timerInSeconds +' seconds <br> Optimal Score: ' + {{longestScore}};
        $(".otree-btn-next").show();
        completed = true;
        $("#stopWatch").hide();
        // $('#retry').show();
        $("#theOtherOne").show();
        $("#id_path").val(path.toString());
        $("#id_timeTaken").val(timerInSeconds);
        $("#id_score").val(totalLength);
        $("#id_longestScore").val(longestScore);
        $("#id_myopicScore").val(myopicScore);
        $("#id_weightsId").val(weightsId);
        $("#id_numLayers").val(numLayers);
    }
    // if(timerInSeconds > 120){
    //     $('#retry').hide();
    // }
}

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,
    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 }}