{{ block title }}Introduction{{ endblock }}
{{ block content }}
    <!-- {{if treatment == 1}}
       {{include C.INSTRUCTIONS_TEMPLATE_P }}
    {{ endif }}
    {{if treatment == 2}}
      {{ include C.INSTRUCTIONS_TEMPLATE_R }}
    {{ endif }}
    {{if treatment == 3}}
      {{ include C.INSTRUCTIONS_TEMPLATE_PR }}
    {{ endif }}

    {{ next_button }} -->



    <style media="screen">



      #next{

        margin-left : 30px;
      }



      #Social_info{

        display:inline;
        float:left;
        background: #e6fffa;




      }

      #div1{
        margin-bottom : 30px;
        display:inline;
        float:left;
        margin-right : 50px;
      }

      #txt_rule{
        height : 150px;
        readonly : true
      }


      #ws_text{
        margin-left: 400px;
        margin-right: 0px;
      }

      #rules{
        /* margin-top: 100px; */
        margin-left: 400px;
        margin-right: 200px;
        margin-bottom: 300px;
      }

      #div2{
        float:left;
      margin-left: 30px;
      margin-top: 10px;
      margin-right: 0px;
      display:inline;
      }

      .TEXT{
      margin-left: 50px;

      }
      /* #middle{
        width: 10%;
        display:inline;
        float:left;

        margin-right: 100px; */
        /* margin-left: 300px; */
      /* } */

      #Workspace{
        display:inline;
        background: #000;
        margin-right: px;




      }

      #_otree-title{
        display: none;
      }
      .card{

        display: inline;
        float: left;
        margin-left: 500px
      }

      /* input {  font-size : 50px}

      textarea { font-size: 50px; }

      div {font-size: 50px;} */


      #grid_obj{
        display:grid; /* le fameux */
        grid-template-columns: repeat(20, 1px);
        grid-template-rows: repeat(20, 1px);
        /* grid-template-columns:100px 100px 100px; /* 3 colonnes de largeur différente */
        /* grid-template-rows:100px 100px 100px; /* 2 rangées */
        grid-gap:1px; /* gouttière   */
        gap:1px; /* gouttière (mettre les deux lignes)*/
        padding:0;
        margin:1px;
      }

      #grid_init{
        display:grid; /* le fameux */
        grid-template-columns: repeat(20, 1px);
        grid-template-rows: repeat(20, 1px);
        /* grid-template-columns:100px 100px 100px; /* 3 colonnes de largeur différente */
        /* grid-template-rows:100px 100px 100px; /* 2 rangées */
        grid-gap:1px; /* gouttière   */
        gap:1px; /* gouttière (mettre les deux lignes)*/
        padding:0;
        margin:1px;
        margin-right: 0px;
      }

      #moves_time{
        display: inline;
        float: right;
        width : 160px;

      }
      .otree-timer {
        display: inline;
          float: right;
          width: 100px:
          position: sticky;
          top : 0px;
      }

      /* input[type=checkbox] {
          transform: scale(3);
      } */

      .grid>li{
        padding:1px;
        margin:0;
        color:#fff;
        background:#eee;
        margin:0;
        display:block;
      }

      body{
        font-family:sans-serif;
        margin:0;
        line-height:1.5;
        background:#fff;

      }

      .vl {
        border-left: 1px solid black;
        height: 500px;
        display:  inline;
        float: left;
      }



      li.container {

          vertical-align: middle }

      .redcircle_init {
          width: 20px;
          height: 20px;

          border-radius: 10px;
          background: red;
          margin-left: auto;
          margin-right: auto;

        }
        .redcircle_obj {
            width: 20px;
            height: 20px;

            border-radius: 10px;
            background: red;
            margin-left: auto;
            margin-right: auto;



          }
        .bluecircle_init {
          width: 20px;
          height: 20px;

          border-radius: 10px;
            background: blue;
            margin-left: auto;
            margin-right: auto


          }
          .bluecircle_obj {
            width: 20px;
            height: 20px;

            border-radius: 10px;
              background: blue;
              margin-left: auto;
              margin-right: auto;


            }
    </style>
    <div class="card bg-light m-3">
        <div class="card-body">

        <h3>
            Instructions
        </h3>

        <p>

            The goal of this game is to modify the visual aspect of a grid that contains blue and red rocks such as the one below.

            On the next page, you will see a grid that contins blue and red rocks.
            This grid will be similar to the grids below, only much bigger.
            You will have 5 minutes to memorize the position of the blue and red rocks as precisely as possible.
            You will then start with grid that contains the same number of red and blue rocks, but that are not in the same positions.
            Your goal is to move the rocks so as to reproduce the grid you have memorized.
            You can move rocks to empty cells, but you cannot move a rock to a cell where there already is a rock.
            You cannot add or remove any rock.


            On the next page, you will also see a rule.
            You must also memorize this rule as precisely as possible.
            Your goal is to respect this rule as much as possible when trying to reproduce the grid you have memorized.

            You will have 150 moves to perform.
            Your final score will depend on how well you reproduce the grid, and on how well you respected the rule.

        </p>

        <p>
            To check that you understood, please modify the grid on the right to reproduce the grid on the left.
             When modifying the grid, you must follow this rule : <b>"Always move a rock of a different color as the rock you just moved (for example, blue then red then blue then red...)"</b>
        </p>


      </div>


    </div>

    <div id="div1" class="grid_div">
      Reproduce this one

    </div>


    <div id="div2" class="grid_div">
      by modifying this one

    </div>

<div>
  <button id = 'next' class="otree-btn-next btn btn-primary" onclick="compare_grids()" style="visibility:hidden;">Next</button>

</div>






{{ endblock }}




{{ block scripts }}




<script type="text/javascript">

var moves = []

grid_size = 3

n_square = grid_size * grid_size

createGrid("grid_init", document.getElementById('div2'), "_init");

pop_matrix_user = [[1, 0, -1], [0, 0, 1], [-1, 1, -1]];

populateFromMatrice(pop_matrix_user, "_init");




createGrid("grid_obj", document.getElementById('div1'), "_obj");

var pop_matrix_obj = [[1, -1, 0], [1, 0, -1], [1, 0, -1]];

populateFromMatrice(pop_matrix_obj, "_obj");




function compare_grids(){



}


function createGrid(id, parent, init_or_obj) {

  grid = document.createElement("ul");
  grid.setAttribute("class", "grid" )
  grid.setAttribute("id", id)
  if (init_or_obj == "_init"){
    grid.style.setProperty("grid-template-columns", "repeat(".concat('', grid_size.toString().concat('', ", 23px)")))
    grid.style.setProperty("grid-template-rows", "repeat(".concat('', grid_size.toString().concat('', ", 23px)")))
}
  else {
    grid.style.setProperty("grid-template-columns", "repeat(".concat('', grid_size.toString().concat('', ", 23px)")))
    grid.style.setProperty("grid-template-rows", "repeat(".concat('', grid_size.toString().concat('', ", 23px)")))



  }

  //console.log(grid);
  parent.appendChild(grid);

  //console.log(init_or_obj);


  for(let i = 0; i <n_square ; i++){
    var row =  '0'.concat('', Math.floor(i/grid_size).toString()).slice(-2);

    var col = '0'.concat('', i % grid_size.toString()).slice(-2);
    let id = row.toString().concat(',', col.toString()).concat('', init_or_obj)
    addSquare(id, grid);
}


}

function addCircle(pos, color, init_or_obj){
  //console.log(init_or_obj);
  id = "square".concat('', pos).concat('', init_or_obj);
  var square = document.getElementById(id);
//console.log(square);

  var classColor = color.concat('', "circle").concat(init_or_obj);
  var newCircle = document.createElement("div");


  newCircle.setAttribute("id", "square".concat('', id).concat('', init_or_obj) );
  newCircle.setAttribute("class", classColor);
  newCircle.setAttribute("ondragstart", "dragstart_handler(event);");
  newCircle.setAttribute("ondragend", "dragend_handler(event);");
  if (init_or_obj == '_init'){
    newCircle.setAttribute('draggable', "true");
  }
  else{
    newCircle.setAttribute('draggable', "false");
  }


  square.appendChild(newCircle);

}

function populateFromMatrice (matrix, init_or_obj){




  // var id = var_id;
  //console.log(id);
  // init_matrix_text = document.getElementById("pop_matrix".concat(init_or_obj)).value;

  //console.log(init_matrix_text);

  // var pop_matrix = init_matrix_text.split('\n').map(function (row) {
  //   return row.split(' ').map(function(item) {
  //     return parseInt(item, 10);
  // });
  // });
  //console.log(pop_matrix);
  //console.log(matrix);
  matrix.forEach(function(item, index, array) {
    var row ='0'.concat('', index.toString()).slice(-2);
    item.forEach(function(item, index, array) {
      var col = '0'.concat('', index.toString()).slice(-2);



      if (item > 0){
        pos = row.toString().concat(',',col.toString())
        color = "blue"
        //console.log(init_or_obj);
        addCircle(pos, color, init_or_obj);


      }
      if (item < 0){
        pos = row.toString().concat(',',col.toString())
        color = "red"

        addCircle(pos, color, init_or_obj);

      }

    });



});
}

function addSquare (id, grid) {
  // crée un nouvel élément div

  var newSquare = document.createElement("li");
  newSquare.setAttribute("id", "square".concat('', id) );
  newSquare.setAttribute("class", "container");
  newSquare.setAttribute("ondrop", "drop_handler(event);");
  newSquare.setAttribute("ondragover", "dragover_handler(event);");
  newSquare.setAttribute("ondragleave", "dragleave_handler(event);");
  //console.log(newSquare);
//  grid.appendChild(el);

  grid.appendChild(newSquare);

  // ajoute le nouvel élément créé et son contenu dans le DOM

}

function removeCircles() {

  var elements = document.getElementsByClassName('redcircle_init');
      while(elements.length > 0){
          elements[0].parentNode.removeChild(elements[0]);
      }

  var elements = document.getElementsByClassName('bluecircle_init');
      while(elements.length > 0){
          elements[0].parentNode.removeChild(elements[0]);
      }

}

// HANDLER FUNCTIONS

function dragstart_handler(ev) {
 //console.log("dragStart");
 // Change the source element's background color to signify drag has started
 ev.currentTarget.style.opacity = 0.5;

 prev_posx = parseInt(ev.currentTarget.parentNode.id.toString().slice(6,8));
 prev_posy = parseInt(ev.currentTarget.parentNode.id.toString().slice(9,11));

 //pop_matrix_user[posx] = [];
 //console.log(pop_matrix_user[posx]);
 // pop_matrix_user[posx][posy] = 0;
 // console.log(posx);
 // console.log(posy);

 // Add the id of the drag source element to the drag data payload so
 // it is available when the drop event is fired
 ev.dataTransfer.setData("text", ev.target.id);
 // Tell the browser both copy and move are possible
 //ev.effectAllowed = "copyMove";
}
function dragover_handler(ev) {
 //console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 if (!ev.currentTarget.hasChildNodes()){
 ev.currentTarget.style.opacity = 0.5;
 ev.preventDefault();
}
}

function dragleave_handler(ev) {
 //console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 ev.currentTarget.style.opacity = 1;
 ev.preventDefault();
}
function drop_handler(ev) {

  if (!ev.currentTarget.hasChildNodes()){
    pop_matrix_user[prev_posx][prev_posy] = 0;

    //
    // move_count -= 1
    // document.getElementById('move_count').value = move_count.toString();


    var id = ev.dataTransfer.getData("text");

    circle = document.getElementById(id);


    ev.currentTarget.style.opacity = 1;

    posx = parseInt(ev.currentTarget.id.toString().slice(6,8));
    posy = parseInt(ev.currentTarget.id.toString().slice(9,11));
    // liveSend(['move', [prev_posx, prev_posy, posx, posy]]);
    var color = 1;
    //console.log(circle.className);
    if (circle.className == 'redcircle_init'){
    //  console.log('here');
      color = -1}

  //  pop_matrix_user[posx] = [];
    pop_matrix_user[posx][posy] = color;
    ev.currentTarget.appendChild(circle);
    moves.push(color)

    if( moves.length > 1){
      console.log(moves[moves.length-1]);
      console.log(moves[moves.length-2]);

      if (moves[moves.length-1] === moves[moves.length-2]){
        window.alert("You did not follow the rule ! Try again");
        pop_matrix_user = [[1, 0, -1], [0, 0, 1], [-1, 1, -1]];
        moves = [];
        removeCircles();

        populateFromMatrice(pop_matrix_user, "_init");


      }
    }






    if (JSON.stringify(pop_matrix_obj) === JSON.stringify(pop_matrix_user)){
      document.getElementById('next').style.visibility = "visible"
    }


    // arrayToTxtFile(pop_matrix_user, 'grid_obj.txt')




  // Copy the element if the source and destination ids are both "copy"
  // if (id == "src_copy" && ev.target.id == "dest_copy") {
  //  var nodeCopy = document.getElementById(id).cloneNode(true);
  //  nodeCopy.id = "newId";
  //  ev.target.appendChild(nodeCopy);
  }

}



function dragend_handler(ev) {
  //console.log("dragEnd");
  // Restore source's border
  ev.target.style.opacity = 1;
  // Remove all of the drag data
  ev.dataTransfer.clearData();
  // console.log(pop_matrix_user);

}


</script>
{{endblock}}