{{ block title }}Travelling salesperson problem{{ endblock }}

{{ block content }}
<p>{{roundMessage}}</p>
<p><ul>
  Instructions:
  <li>Visit <b>ALL cities</b> with a red marker on the map </li>
  <li>Never repeat a city (except for the starting city) </li>
  <li>Only go back to your starting city <b>at the end</b> of your trip  </li>
  <li>Click on any city to start </li>
  <li> Keep clicking on cities until the only one left is your starting city. Click on the starting city and press 'Submit' </li>
</ul> </p>

Total length: <span id="movesMade"></span>
<center>
<!--<table border="1">-->
<!--    <tr>-->
<!--        <td>-->
<!--        </td>-->
<!--        <td>-->
<!--            <center> totalLength<div id="movesMade"></div></center>-->

<!--        </td>-->
<!--        <td>-->
<!--            <center>timer <div id="stopWatch"></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>-->
<div id="theOtherOne"></div>
</center>

<canvas id="gc" width="1000" height="700">
 

<div id="results"></div>{{ next_button }}
{{ formfield 'noOfCities' }}
{{ formfield 'timeTaken' }}
{{ formfield 'score' }}
{{ formfield 'optimalScore' }}
{{ formfield 'path' }}
  {% 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 =[];
var movesLeft = 0;
var moves = [];
var selected = [];
var completed = false;
let totalLength = 0;
var prevSelected = [];
var first = true;
var startingCity = null;
var currentCity = null;
var selectedNumber = 0;
var timerInSeconds =0;
var noOfCities = 0;
var maxScore = {{maxScore}};
var path =[];
canv=document.getElementById('gc');
ctx=canv.getContext("2d");
window.onload=function() { 
    document.getElementById('gc').style.backgroundImage = "url('/static/travelling_salesman_problem/2.png')";
    $(".otree-btn-next").hide();
    $(".otree-btn-next").text('Submit');
    $("#id_noOfCities").hide(); 
    $("#id_timeTaken").hide();
    $("#id_score").hide();
    $("#id_optimalScore").hide();
    $("#id_path").hide();
    $("#id_path").val('skipped');
    $("#id_noOfCities").val('skipped');
    $("#id_timeTaken").val('skipped');
    $("#id_score").val('skipped');
    $("#id_optimalScore").val('skipped');
    timer(true);
    document.getElementById('movesMade').innerHTML = 0;
    $(".debug-info").hide()
    drawBoard('gc');
    fillBoard('gc');
}
function drawBoard(canvas){
    ctx.clearRect(0, 0, canv.width, canv.height); 
    backgroundImage = new Image();    
    backgroundImage.src = '/static/travelling_salesman_problem/Googlemap_Paris.png';
}

function fillBoard(canvas){
    $.each(board, function(index, value) {
        noOfCities++;
        value.push(false);
        drawPoints(board[index],'red',canvas);
    });
}

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

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

function drawLine(canvas,prev,current){
    ctx.beginPath();
    ctx.moveTo(prev[0],prev[1]);
    ctx.lineTo(current[0],current[1]);
    ctx.closePath();
    ctx.stroke();
    addToLength(prev,current);
}
function drawStart(boardPoints){
    base_image = new Image();    
    base_image.src = '/static/travelling_salesman_problem/start.png';
    var centerX = boardPoints[0]-15;
    var centerY =boardPoints[1]-15;
    base_image.onload = function(){
        ctx.drawImage(base_image, centerX, centerY);
    }
}
function addToLength(prev,current){
    var x =Math.abs( prev[0]-current[0]);
    var y =Math.abs( prev[1]-current[1]);
    if(!totalLength){
        totalLength =  Math.sqrt(x*x+y*y); 
    }else{
        totalLength += Math.sqrt(x*x+y*y);
    }
    document.getElementById('movesMade').innerHTML = Math.floor(totalLength);
}

function checkTraversedAll(){
   var traversed = true;
    $.each(board, function(index, value) {
        if(value[2]==false){
            traversed = false;
        }
    });
    return traversed;
}

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(timerInSeconds);
<!--            $("#stopWatch").html(120-timerInSeconds);-->
            timerInSeconds++;
            results();
        }, 1000);
    }
}

function selectPoint(x,y){ 
    $.each(board, function(index, value) {
        if(x-15 <= value[0]  && x + 15 >= value[0]   && y - 15 <= value[1] && y+15 >= value[1] && value[2]<1){
                currentCity = index;
                prevSelected = selected;                     
                selected = value;
                value[2] =true;
                if(prevSelected){
                    drawLine('gc',prevSelected,selected);
                    path.push(index);
                }
                if(!startingCity && startingCity != 0){
                    drawStart([value[0],value[1]]);
                        startingCity = index;
                        value[2] =false;
                }           
        }
    });
    results();
}

function results(){
    if((checkTraversedAll()) && !completed){
       document.getElementById('theOtherOne').innerHTML = 'Traversed all in ' + timerInSeconds +' seconds <br> Optimal total length: ' + Math.floor(maxScore);
       if(currentCity == startingCity){
        document.getElementById('theOtherOne').innerHTML += '<br>Ended at starting city';
       }else{
        document.getElementById('theOtherOne').innerHTML += '<br>Did not end at starting city';
       }
       $(".otree-btn-next").show();
       completed = true;
       $("#stopWatch").hide();
       $('#retry').show();
       $("#theOtherOne").show();
       $("#id_path").val(path.toString());
        $("#id_noOfCities").val(noOfCities);
        $("#id_timeTaken").val(timerInSeconds);
        $("#id_score").val(totalLength);
        $("#id_optimalScore").val(maxScore);
    }
<!--    if(timerInSeconds > 120){-->
<!--        $('#retry').hide();-->
<!--    }-->
}

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