{{ 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 rule.
            You must memorize this rule as precisely as possible.
            Once you have memorized, you can move to the next page, where you will see a grid that contains blue and red rocks.
            Your goal is to modify this grid by making 150 moves that respect the rule that you memorized.
            You are free to modify the grid as you like as long as you respect the rule.

            Your final score will depend 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="div2" class="grid_div">
      Make 6 moves while following the rule.

    </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 (moves.length >=6){
      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}}