{{ 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>
            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.
        </p>

        <p>
            To check that you understood, please modify the grid on the right to reproduce the grid on the left.
        </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">

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

}

// 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);

    same = true
    pop_matrix_obj.forEach((line, i) => {


    });

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

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