{% extends "global/Page.html" %}
{% load otree static %}

{% block head_title %}

        Study

{% endblock %}


{% block styles %}
    <style type="text/css">
        * {
          box-sizing: border-box;
        }

        table.multitasking {
            width: 500px;
            height: 500px;
            color: black;
            background-color: white;
            background-size: 100%;
            font-size: 15px;
            font-weight: bold;
        }

        .multitasking td {
            background-color: white;
            cursor: pointer;
            border:2px solid black;
        }

        td.first {
            width: 20%;
            border: 0;
            word-spacing: 8px;
            text-align: right;
        }

        .second {
            width: 40px;
            font-size: 15px;
            height: 120px;
            writing-mode: vertical-rl;
            -webkit-writing-mode: vertical-rl;
            -ms-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            text-orientation: upright;
            -webkit-text-orientation: upright;
            text-align: right;
            word-spacing: -8px;
        }

        .third{
            height: 40px;
            width: 40px;
        }

        .center {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        * {
          box-sizing: border-box;
        }

        .column {
          float: none;
          width: 80%;
          padding: 20px;
        }

        .column2 {
          float: none;
          width: 20%;
          padding: 20px;
          align: center;
          text-align: center;
        }

        .row:after {
          content: "";
          clear: both;
          display: table;
        }

        .otree-timer {
            display: none;
        }

        thead {
          display: table-header-group;
          border: 0;
        }

        .green {
          background-color: forestgreen;
          border-color: white;
          color: white;
          outline:none!important;
          width: 45px;
          height: 45px;
          border-width: thick;
          border-style: solid;

        }

        .gray {
          background-color: gray;
          color: white;
          width: 45px;
          height: 45px;
          outline:none!important;
          border-color: white;
          border-width: thick;
          border-style: solid;
        }

        h1 {text-align: center; font-size: 35px;}

         table.adding_numbers {
            width: 300px;
            height: 300px;
            text-align: center;
            color: black;
            background-color: white;
            background-size: 100%;
            font-size: 2em;
            border-color: black;
            margin-left: auto;
            margin-right: auto;
         }

        .adding_numbers td {
            width: 100px;
            height: 100px;
            border-color: white;
            border:2px solid black;
            background-color: white;
            cursor: pointer;
        }


        .column3 {
          float: none;
          width: 33.33%;
          padding: 20px;
        }

        .float-left-child {
          float: left;
        }

    </style>
{% endblock %}


{% block content %}

    <h1>Game</h1>
        <div class="row">
            <div class="column">
                <table class="multitasking"  id="nonogram">
                    <thead>
                        <tr>
                        <th class="first"></th><th class="second" id="col1">{{c.0}}</th><th class="second">{{c.1}}</th><th class="second">{{c.2}}</th><th class="second">{{c.3}}</th><th class="second">{{c.4}}</th><th class="second">{{c.5}}</th><th class="second">{{c.6}}</th><th class="second">{{c.7}}</th><th class="second">{{c.8}}</th><th class="second">{{c.9}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td class="first third" id="row1">{{r.0}}</td> <td class="second third" id="pos1"></td><td class="second third" id="pos2"></td><td class="second third" id="pos3"></td><td class="second third" id="pos4"></td><td class="second third" id="pos5"></td><td class="second third" id="pos6"></td><td class="second third" id="pos7"></td><td class="second third" id="pos8"></td><td class="second third" id="pos9"></td><td class="second third" id="pos10"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.1}}</td><td class="second third" id="pos11"></td><td class="second third" id="pos12"></td><td class="second third" id="pos13"></td><td class="second third" id="pos14"></td><td class="second third" id="pos15"></td><td class="second third" id="pos16"></td><td class="second third" id="pos17"></td><td class="second third" id="pos18"></td><td class="second third" id="pos19"></td><td class="second third" id="pos20"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.2}}</td><td class="second third" id="pos21"></td><td class="second third" id="pos22"></td><td class="second third" id="pos23"></td><td class="second third" id="pos24"></td><td class="second third" id="pos25"></td><td class="second third" id="pos26"></td><td class="second third" id="pos27"></td><td class="second third" id="pos28"></td><td class="second third" id="pos29"></td><td class="second third" id="pos30"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.3}}</td><td class="second third" id="pos31"></td><td class="second third" id="pos32"></td><td class="second third" id="pos33"></td><td class="second third" id="pos34"></td><td class="second third" id="pos35"></td><td class="second third" id="pos36"></td><td class="second third" id="pos37"></td><td class="second third" id="pos38"></td><td class="second third" id="pos39"></td><td class="second third" id="pos40"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.4}}</td><td class="second third" id="pos41"></td><td class="second third" id="pos42"></td><td class="second third" id="pos43"></td><td class="second third" id="pos44"></td><td class="second third" id="pos45"></td><td class="second third" id="pos46"></td><td class="second third" id="pos47"></td><td class="second third" id="pos48"></td><td class="second third" id="pos49"></td><td class="second third" id="pos50"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.5}}</td><td class="second third" id="pos51"></td><td class="second third" id="pos52"></td><td class="second third" id="pos53"></td><td class="second third" id="pos54"></td><td class="second third" id="pos55"></td><td class="second third" id="pos56"></td><td class="second third" id="pos57"></td><td class="second third" id="pos58"></td><td class="second third" id="pos59"></td><td class="second third" id="pos60"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.6}}</td><td class="second third" id="pos61"></td><td class="second third" id="pos62"></td><td class="second third" id="pos63"></td><td class="second third" id="pos64"></td><td class="second third" id="pos65"></td><td class="second third" id="pos66"></td><td class="second third" id="pos67"></td><td class="second third" id="pos68"></td><td class="second third" id="pos69"></td><td class="second third" id="pos70"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.7}}</td><td class="second third" id="pos71"></td><td class="second third" id="pos72"></td><td class="second third" id="pos73"></td><td class="second third" id="pos74"></td><td class="second third" id="pos75"></td><td class="second third" id="pos76"></td><td class="second third" id="pos77"></td><td class="second third" id="pos78"></td><td class="second third" id="pos79"></td><td class="second third" id="pos80"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.8}}</td><td class="second third" id="pos81"></td><td class="second third" id="pos82"></td><td class="second third" id="pos83"></td><td class="second third" id="pos84"></td><td class="second third" id="pos85"></td><td class="second third" id="pos86"></td><td class="second third" id="pos87"></td><td class="second third" id="pos88"></td><td class="second third" id="pos89"></td><td class="second third" id="pos90"></td>
                        </tr>
                        <tr>
                        <td class="first third">{{r.9}}</td><td class="second third" id="pos91"></td><td class="second third" id="pos92"></td><td class="second third" id="pos93"></td><td class="second third" id="pos94"></td><td class="second third" id="pos95"></td><td class="second third" id="pos96"></td><td class="second third" id="pos97"></td><td class="second third" id="pos98"></td><td class="second third" id="pos99"></td><td class="second third" id="pos100"></td>
                        </tr>
                    </tbody>
                </table>

                <table class="adding_numbers" id="adding_numbers">
                      <br>

                        <tr>
                        <td id="add1"></td>
                        <td id="add2"></td>
                        <td id="add3"></td>
                        </tr>
                        <tr>
                        <td id="add4"></td>
                        <td id="add5"></td>
                        <td id="add6"></td>
                        </tr>
                        <tr>
                        <td id="add7"></td>
                        <td id="add8"></td>
                        <td id="add9"></td>
                        </tr>
                </table>
            </div>


            <div class="column2">
                <br> <br> <br> <br> <br> <br>

                <button type="button" class="green float-left-child" style="margin-left: 30px;" onclick="myFunction1()" id="green"></button>
                <button type="button" class="gray float-left-child" onclick="myFunction2()" id="gray"></button>

                <br> <br> <br>

                <div><p style="font-size: 30px; color: black; font-weight: bold;text-align:center;" id="score_name">Score: </p> <span id="score_on_display" style="font-size: 30px; color: black; font-weight: bold;text-align:center;">  </span></div>

                <br>

                <div id="display" style="color:black; font-weight: bold;  text-align:center; font-size: 30px">10:00</div>

                <br> <br> <br>

                <div> <p  style="font-size: 20px; color: black; font-weight: bold;text-align:center; margin-top: -200px;" id="target"> Target Number: </p>  <p  style="font-size: 40px; color: black; font-weight: bold;text-align:center;" id="target_number">  </p> </div>

                <br>

                <div id="adding_numbers_timer" style="color:black; font-weight: bold;  text-align:center; font-size: 30px">1:00</div>

                <!--
                {{ next_button }}
                 <br>
                <button id="pause"  type="button">Pause</button>
                <button id="resume" type="button">Resume</button>
                <p id="testtest" style="color: blue;">0000</p>
                <p id="tt" style="color: blue;">1111</p>
                <p id="aa" style="color: blue;">aaaaaa</p>
                -->
            </div>

            <input type="hidden"   name="score_on_display1"                     id="id_score_on_display"     />
            <input type="hidden"   name="points1"                               id="id_points"               />
            <input type="hidden"   name="total_wrong1"                          id="id_total_wrong"          />
            <input type="hidden"   name="total_right1"                          id="id_total_right"          />
            <input type="hidden"   name="wrong_green1"                          id="id_wrong_green"          />
            <input type="hidden"   name="wrong_gray1"                           id="id_wrong_gray"           />
            <input type="hidden"   name="right_green1"                          id="id_right_green"          />
            <input type="hidden"   name="right_gray1"                           id="id_right_gray"           />
            <input type="hidden"   name="time_between_moves1"                   id="id_time_between_moves"   />
            <input type="hidden"   name="board_history1"                        id="id_board_history"        />
            <input type="hidden"   name="solve_order1"                          id="id_solve_order"          />
            <input type="hidden"   name="gap_history1"                          id="id_gap_history"          />
            <input type="hidden"   name="game1_finished"                        id="id_game1_finished"       />

        </div>
        <!--
        <input id="Button1" type="button" value="button" onclick="window.open('WebForm1.aspx','PoP_Up','directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no, addressbar=0, scrollbars=no,resizable=no,width=1024,height=1024');" />
        -->
{% endblock %}


{% block scripts %}
    <script type="text/javascript">
        var game1_finished = 0;
        var n = js_vars.n;
        var timer_in_seconds = 10*60;
        var interruption_time = js_vars.interruption_time;
        var paused = false;
        var current_gap;
        var score = 0;
        var score_on_display = score;
        var gap_history = [0];
        var sum_of_candidates = 0;
        var total_Red = 0;
        var add = [];
        for (var i = 1; i <10; i++) {
            add[i-1] = document.getElementById('add' + i);
        }
        var adding_numbers_timer_in_seconds = 60;

        document.getElementById('id_gap_history').value = gap_history;

        document.getElementById('nonogram').style.display = "block";
        document.getElementById('green').style.display = "block";
        document.getElementById('gray').style.display = "block";
        document.getElementById('score_on_display').style.display = "block";
        document.getElementById('score_name').style.display = "block";
        $('.otree-btn-next').show();
        document.getElementById('display').style.display = "block";
        document.getElementById('adding_numbers').style.display = "none";
        document.getElementById('target').style.display = "none";
        document.getElementById('target_number').style.display = "none";
        document.getElementById('adding_numbers_timer').style.display = "none";

        function display_clock(){
            seconds = Math.floor(timer_in_seconds % 60);
            minutes = Math.floor((timer_in_seconds/60) % 60);
            seconds = seconds < 10 ? "0" + seconds : seconds;
            document.getElementById('display').innerHTML = minutes + ':' + seconds;
            timer_in_seconds = timer_in_seconds - 0.5;
            if(timer_in_seconds<=0){
                clearInterval(run_timer);
                document.querySelector("form").submit();
            }
        }

        function adding_numbers_clock(){
            seconds = Math.floor(adding_numbers_timer_in_seconds % 60);
            minutes = Math.floor((adding_numbers_timer_in_seconds/60) % 60);
            seconds = seconds < 10 ? "0" + seconds : seconds;
            document.getElementById('adding_numbers_timer').innerHTML = minutes + ':' + seconds;
            adding_numbers_timer_in_seconds = adding_numbers_timer_in_seconds - 0.5;
            if(adding_numbers_timer_in_seconds<=0){
                clearInterval(run_adding_numbers_timer);
                resume_clock();
            }
        }


        //start timer at the beginning:
        run_timer = setInterval(display_clock, 500);
        //document.getElementById('tt').innerHTML = gap_history;

        function pause_clock(){
            if (!paused){
                paused = true;
                sessionStorage.setItem('time_paused', Date.parse(new Date()));
                if (run_timer) clearInterval(run_timer);
                run_timer = null;
                timer_in_seconds = timer_in_seconds - 0.5;
                document.getElementById('nonogram').style.display = "none";
                document.getElementById('green').style.display = "none";
                document.getElementById('gray').style.display = "none";
                document.getElementById('score_on_display').style.display = "none";
                document.getElementById('score_name').style.display = "none";
                $('.otree-btn-next').hide();
                document.getElementById('display').style.display = "none";
                document.getElementById('adding_numbers').style.display = "block";
                document.getElementById('target').style.display = "block";
                document.getElementById('target_number').style.display = "block";
                document.getElementById('adding_numbers_timer').style.display = "block";
            }
        }



        function resume_clock(){
            if (paused){
                clearInterval(run_adding_numbers_timer);
                adding_numbers_timer_in_seconds = 60;
                paused = false;
                sessionStorage.setItem('time_resumed', Date.parse(new Date()));
                time_resumed = sessionStorage.getItem('time_resumed');
                time_paused = sessionStorage.getItem('time_paused');
                current_gap = (1*time_resumed - 1*time_paused)/1000;
                gap_history.push(current_gap);
                run_timer = setInterval(display_clock, 500);
                //document.getElementById('tt').innerHTML = gap_history;
                document.getElementById('id_gap_history').value = gap_history;
                //document.getElementById('testtest').innerHTML = timer_in_seconds;
                document.getElementById('nonogram').style.display = "block";
                document.getElementById('green').style.display = "block";
                document.getElementById('gray').style.display = "block";
                document.getElementById('score_on_display').style.display = "block";
                document.getElementById('score_name').style.display = "block";
                $('.otree-btn-next').show();
                document.getElementById('display').style.display = "block";
                document.getElementById('adding_numbers').style.display = "none";
                document.getElementById('target').style.display = "none";
                document.getElementById('target_number').style.display = "none";
                document.getElementById('adding_numbers_timer').style.display = "none";
            }
        }



        function auto(){
            for (var j = 0; j <9; j++) {
                if (timer_in_seconds == interruption_time[j]){
                    for (var k = 1; k <10; k++) {
                        add[k-1].innerHTML  = js_vars.n[j][k];
                        document.getElementById('target_number').innerHTML =js_vars.n[j][0];
                    }
                    pause_clock();
                    run_adding_numbers_timer = setInterval(adding_numbers_clock, 500);
                }
            }
        }

        auto_pause = setInterval(auto, 500);



        //Adding numbers:
        add.forEach(function(a){
            a.addEventListener("click", function(b) {

                a.clicks=(a.clicks || 1) + 1;

                if (a.clicks%2 == 1 && a.style.backgroundColor=="forestgreen") {
                    a.style.backgroundColor="white";
                    total_Red=total_Red-1;
                    sum_of_candidates =sum_of_candidates - parseInt(a.innerHTML);
                }

                if (a.clicks%2 == 0 && total_Red<2) {
                    a.style.backgroundColor="forestgreen";
                    total_Red=total_Red+1;
                    sum_of_candidates =sum_of_candidates + parseInt(a.innerHTML);
                }

                for (var j = 0; j <9; j++) {
                    if (timer_in_seconds == interruption_time[j]-0.5){
                        if (sum_of_candidates == js_vars.n[j][0]) {
                            add.forEach(function (item) {
                                item.style.backgroundColor="white";
                                item.clicks = 0;
                            });
                            sum_of_candidates=0;
                            total_Red=0;
                            document.getElementById('adding_numbers_timer').innerHTML = 1 + ':' + '00';
                            resume_clock();

                        }
                    }
                }
            });
        });
        //document.getElementById('pause').addEventListener("click", pause_clock);
        //document.getElementById('resume').addEventListener("click", resume_clock);
    </script>



    <script type="text/javascript">
        //Nonogram:
        var bggreen = -1;
        var bggray = -1;
        var border = 0;
        var previous = js_vars.score;
        var score = 0;
        var score_on_display = score + previous;
        var wrong = 0;
        var right = 0;
        var wrong_green = 0;
        var right_green = 0;
        var wrong_gray = 0;
        var right_gray = 0;


        var interval = 0;
        var board_history = [];
        var solve_order = [];
        for (var j = 1; j <101; j++) {
                board_history[j] = 0;
                solve_order[j] = 0;
        }
        var order = 1;
        document.getElementById('score_on_display').innerHTML = score_on_display;
        document.getElementById('id_game1_finished').value = game1_finished;


        if (sessionStorage.getItem("score")===null){
            document.getElementById('id_points').value  = 0;
        }
        else{
            document.getElementById('id_points').value  = JSON.parse(sessionStorage.getItem("score"));
        }

        if (sessionStorage.getItem("wrong")===null){
            document.getElementById('id_total_wrong').value = 0;
        }
        else{
            document.getElementById('id_total_wrong').value = JSON.parse(sessionStorage.getItem("wrong"));
        }

        if (sessionStorage.getItem("right")===null){
            document.getElementById('id_total_right').value = 0;
        }
        else{
            document.getElementById('id_total_right').value = JSON.parse(sessionStorage.getItem("right"));
        }

        if (sessionStorage.getItem("wrong_green")===null){
            document.getElementById('id_wrong_green').value = 0;
        }
        else{
            document.getElementById('id_wrong_green').value = JSON.parse(sessionStorage.getItem("wrong_green"));
        }

        if (sessionStorage.getItem("right_green")===null){
            document.getElementById('id_right_green').value = 0;
        }
        else{
            document.getElementById('id_right_green').value = JSON.parse(sessionStorage.getItem("right_green"));
        }

        if (sessionStorage.getItem("wrong_gray")===null){
            document.getElementById('id_wrong_gray').value = 0;
        }
        else{
            document.getElementById('id_wrong_gray').value = JSON.parse(sessionStorage.getItem("wrong_gray"));
        }

        if (sessionStorage.getItem("right_gray")===null){
            document.getElementById('id_right_gray').value = 0;
        }
        else{
            document.getElementById('id_right_gray').value = JSON.parse(sessionStorage.getItem("right_gray"));
        }

        if (sessionStorage.getItem("interval")===null){
            document.getElementById('id_time_between_moves').value = 0;
        }
        else{
            document.getElementById('id_time_between_moves').value = JSON.parse(sessionStorage.getItem("interval"));
        }


        let start = sessionStorage.getItem('start');
        if (start === null) {
          start = new Date();
          sessionStorage.setItem('start', start);
        }
        else{
          start = new Date(start);
        }

        if (sessionStorage.getItem("boardhistory")===null){
            document.getElementById('id_board_history').value = board_history;
        }
        else{
            document.getElementById('id_board_history').value = JSON.parse(sessionStorage.getItem("boardhistory"));
        }

        if (sessionStorage.getItem("solveorder")===null){
            document.getElementById('id_solve_order').value = solve_order;
        }
        else{
            document.getElementById('id_solve_order').value = JSON.parse(sessionStorage.getItem("solveorder"));
        }

        if (sessionStorage.getItem("order")===null){
            order = 1;
        }
        else{
            order = JSON.parse(sessionStorage.getItem("order"));
        }

        if (sessionStorage.getItem("score_on_display")===null){
            document.getElementById('id_score_on_display').value = score_on_display;
        }
        else{
            document.getElementById('id_score_on_display').value = JSON.parse(sessionStorage.getItem("score_on_display"));
        }


        function myFunction1() {
              bggreen = 1;
              bggray = 0;
              document.getElementById("green").style.removeProperty("border");
              document.getElementById("green").style.borderColor = "black";
              if (document.getElementById("gray").style.borderColor == "black") {
                    document.getElementById("gray").style.borderColor = "white";
              }
        }

        function myFunction2() {
              bggray = 1;
              bggreen = 0;
              document.getElementById("gray").style.removeProperty("border");
              document.getElementById("gray").style.borderColor = "black";
              if (document.getElementById("green").style.borderColor == "black") {
                    document.getElementById("green").style.borderColor = "white";
              }
        }

        var data = {'pos1' : {{sol_0.0}},  'pos2' : {{sol_0.1}},  'pos3' : {{sol_0.2}},  'pos4' : {{sol_0.3}},  'pos5' : {{sol_0.4}}, 'pos6' : {{sol_0.5}},  'pos7' : {{sol_0.6}},  'pos8' : {{sol_0.7}},  'pos9' : {{sol_0.8}},  'pos10' : {{sol_0.9}}, 'pos11' : {{sol_1.0}}, 'pos12' : {{sol_1.1}}, 'pos13' : {{sol_1.2}}, 'pos14' : {{sol_1.3}}, 'pos15' : {{sol_1.4}},'pos16' : {{sol_1.5}}, 'pos17' : {{sol_1.6}}, 'pos18' : {{sol_1.7}}, 'pos19' : {{sol_1.8}}, 'pos20' : {{sol_1.9}}, 'pos21' : {{sol_2.0}}, 'pos22' : {{sol_2.1}}, 'pos23' : {{sol_2.2}}, 'pos24' : {{sol_2.3}}, 'pos25' : {{sol_2.4}}, 'pos26' : {{sol_2.5}}, 'pos27' : {{sol_2.6}}, 'pos28' : {{sol_2.7}}, 'pos29' : {{sol_2.8}}, 'pos30' : {{sol_2.9}}, 'pos31' : {{sol_3.0}}, 'pos32' : {{sol_3.1}}, 'pos33' : {{sol_3.2}}, 'pos34' : {{sol_3.3}}, 'pos35' : {{sol_3.4}}, 'pos36' : {{sol_3.5}}, 'pos37' : {{sol_3.6}}, 'pos38' : {{sol_3.7}}, 'pos39' : {{sol_3.8}}, 'pos40' : {{sol_3.9}}, 'pos41' : {{sol_4.0}}, 'pos42' : {{sol_4.1}}, 'pos43' : {{sol_4.2}}, 'pos44' : {{sol_4.3}}, 'pos45' : {{sol_4.4}}, 'pos46' : {{sol_4.5}}, 'pos47' : {{sol_4.6}}, 'pos48' : {{sol_4.7}}, 'pos49' : {{sol_4.8}}, 'pos50' : {{sol_4.9}}, 'pos51' : {{sol_5.0}}, 'pos52' : {{sol_5.1}}, 'pos53' : {{sol_5.2}}, 'pos54' : {{sol_5.3}}, 'pos55' : {{sol_5.4}}, 'pos56' : {{sol_5.5}}, 'pos57' : {{sol_5.6}}, 'pos58' : {{sol_5.7}}, 'pos59' : {{sol_5.8}}, 'pos60' : {{sol_5.9}}, 'pos61' : {{sol_6.0}}, 'pos62' : {{sol_6.1}}, 'pos63' : {{sol_6.2}}, 'pos64' : {{sol_6.3}}, 'pos65' : {{sol_6.4}}, 'pos66' : {{sol_6.5}}, 'pos67' : {{sol_6.6}}, 'pos68' : {{sol_6.7}}, 'pos69' : {{sol_6.8}}, 'pos70' :{{sol_6.9}}, 'pos71' : {{sol_7.0}}, 'pos72' : {{sol_7.1}}, 'pos73' : {{sol_7.2}}, 'pos74' : {{sol_7.3}}, 'pos75' : {{sol_7.4}}, 'pos76' : {{sol_7.5}}, 'pos77' : {{sol_7.6}}, 'pos78' : {{sol_7.7}}, 'pos79' : {{sol_7.8}}, 'pos80' : {{sol_7.9}}, 'pos81' : {{sol_8.0}}, 'pos82' : {{sol_8.1}}, 'pos83' : {{sol_8.2}}, 'pos84' : {{sol_8.3}}, 'pos85' : {{sol_8.4}}, 'pos86' : {{sol_8.5}}, 'pos87' : {{sol_8.6}}, 'pos88' : {{sol_8.7}}, 'pos89' : {{sol_8.8}}, 'pos90' : {{sol_8.9}}, 'pos91' : {{sol_9.0}}, 'pos92' : {{sol_9.1}}, 'pos93' : {{sol_9.2}}, 'pos94' : {{sol_9.3}}, 'pos95' : {{sol_9.4}}, 'pos96' : {{sol_9.5}}, 'pos97' : {{sol_9.6}}, 'pos98' : {{sol_9.7}}, 'pos99' : {{sol_9.8}}, 'pos100' : {{sol_9.9}}};

        class Nonogram {
            constructor(table_id) {
                this.table = document.getElementById(table_id);
            }
        }

        let sg = new Nonogram('game_table');

        var i = [];
        var gugugaga = [];
        for (var j = 1; j <101; j++) {
                i[j] = document.getElementById('pos' + j);
                gugugaga[j] = "white";
        }


        for (var x = 1; x < 101; x++){

                i[x].style.backgroundColor="white";

                (function(x){

                    i[x].addEventListener("click", function(e) {

                        if (1 == data['pos' + x] && (bggreen == 1 || bggray == 0) && i[x].style.backgroundColor=="white"){
                                i[x].style.backgroundColor="forestgreen";
                                score = score + 1;
                                right = right + 1;
                                right_green = right_green + 1;
                                board_history[x] = 1;
                                solve_order[x] = order;
                                order = order + 1;
                                between = (Date.now() - start)/1000;
                                interval = interval + "," + between;
                                score_on_display = previous + score;
                                document.getElementById('score_on_display').innerHTML = score_on_display;
                        }

                        if (1 == data['pos' + x] && (bggreen == 0 || bggray == 1) && i[x].style.backgroundColor=="white"){
                                i[x].style.backgroundColor="red";
                                setTimeout(
                                    function() {
                                        i[x].style.backgroundColor="forestgreen";
                                    },
                                400);
                                score=score-5;
                                wrong=wrong+1;
                                wrong_green=wrong_green+1;
                                board_history[x]=0;
                                solve_order[x] = order;
                                order = order + 1;
                                between = (Date.now() - start)/1000;
                                interval = interval + "," + between;
                                score_on_display = previous + score;
                                document.getElementById('score_on_display').innerHTML = score_on_display;
                        }

                        if (1 != data['pos' + x] && (bggray == 1 || bggreen == 0) && i[x].style.backgroundColor=="white"){
                                i[x].style.backgroundColor="Gray";
                                score=score+1;
                                right=right+1;
                                right_gray=right_gray+1;
                                board_history[x]=1;
                                solve_order[x] = order;
                                order = order + 1;
                                between = (Date.now() - start)/1000;
                                interval = interval + "," + between;
                                score_on_display = previous + score;
                                document.getElementById('score_on_display').innerHTML = score_on_display;
                        }

                        if (1 != data['pos' + x] && (bggray == 0 || bggreen == 1) && i[x].style.backgroundColor=="white"){
                                i[x].style.backgroundColor="red";
                                setTimeout(
                                    function() {
                                        i[x].style.backgroundColor="gray";
                                    },
                                400);
                                score=score-5;
                                wrong=wrong+1;
                                wrong_gray=wrong_gray+1;
                                board_history[x]=0;
                                solve_order[x] = order;
                                order = order + 1;
                                between = (Date.now() - start)/1000;
                                interval = interval + "," + between;
                                score_on_display = previous + score;
                                document.getElementById('score_on_display').innerHTML = score_on_display;
                        }

                        gugugaga[x]=i[x].style.backgroundColor;
                        sessionStorage.setItem("pipipi", JSON.stringify(gugugaga));
                        sessionStorage.setItem("score", JSON.stringify(score));
                        sessionStorage.setItem("wrong", JSON.stringify(wrong));
                        sessionStorage.setItem("right", JSON.stringify(right));
                        sessionStorage.setItem("wrong_green", JSON.stringify(wrong_green));
                        sessionStorage.setItem("right_green", JSON.stringify(right_green));
                        sessionStorage.setItem("wrong_gray", JSON.stringify(wrong_gray));
                        sessionStorage.setItem("right_gray", JSON.stringify(right_gray));
                        sessionStorage.setItem("interval", JSON.stringify(interval));
                        //sessionStorage.setItem("start", JSON.stringify(start));
                        sessionStorage.setItem("boardhistory", JSON.stringify(board_history));
                        sessionStorage.setItem("solveorder", JSON.stringify(solve_order));
                        sessionStorage.setItem("order", JSON.stringify(order));
                        sessionStorage.setItem("score_on_display", JSON.stringify(score_on_display));

                        document.getElementById('id_points').value = score;
                        document.getElementById('id_total_wrong').value = wrong;
                        document.getElementById('id_total_right').value = right;
                        document.getElementById('id_wrong_green').value = wrong_green;
                        document.getElementById('id_right_green').value = right_green;
                        document.getElementById('id_wrong_gray').value = wrong_gray;
                        document.getElementById('id_right_gray').value = right_gray;
                        document.getElementById('id_time_between_moves').value = interval;
                        document.getElementById('id_board_history').value = board_history;
                        document.getElementById('id_solve_order').value = solve_order;
                        document.getElementById('id_score_on_display').value = score_on_display;
                        document.getElementById('id_game1_finished').value = game1_finished;



                    });
                }(x));
        }

        if (sessionStorage.getItem("score")===null){
            score = 0;
        }
        else{
            score = JSON.parse(sessionStorage.getItem("score"));
            gugugaga = JSON.parse(sessionStorage.getItem("pipipi"));

            for (var j = 1; j <101; j++) {

                i[j].style.backgroundColor=gugugaga[j];
                if (i[j].style.backgroundColor=="red" && 1 == data['pos' + j]){
                    i[j].style.backgroundColor="forestgreen";
                }

                if (i[j].style.backgroundColor=="red" && 1 != data['pos' + j]){
                    i[j].style.backgroundColor="gray";
                }
            }
        }


        function submit_form(){
                var count_non_white = 0;
                for (var j = 1; j <101; j++) {
                    if (i[j].style.backgroundColor !== "white") {
                        count_non_white = count_non_white +1;
                    }
                }
                if (count_non_white == 100){
                    game1_finished = 1;
                    document.getElementById('id_game1_finished').value = game1_finished;
                    document.querySelector("form").submit();
                }
        }

        auto_submit_form = setInterval(submit_form, 500);



        if (sessionStorage.getItem("wrong")===null){
            wrong = 0;
        }
        else{
            wrong = JSON.parse(sessionStorage.getItem("wrong"));
        }

        if (sessionStorage.getItem("right")===null){
            right = 0;
        }
        else{
            right = JSON.parse(sessionStorage.getItem("right"));
        }

        if (sessionStorage.getItem("wrong_green")===null){
            wrong_green = 0;
        }
        else{
            wrong_green = JSON.parse(sessionStorage.getItem("wrong_green"));
        }

        if (sessionStorage.getItem("right_green")===null){
            right_green = 0;
        }
        else{
            right_green = JSON.parse(sessionStorage.getItem("right_green"));
        }

        if (sessionStorage.getItem("wrong_gray")===null){
            wrong_gray = 0;
        }
        else{
            wrong_gray = JSON.parse(sessionStorage.getItem("wrong_gray"));
        }

        if (sessionStorage.getItem("right_gray")===null){
            right_gray = 0;
        }
        else{
            right_gray = JSON.parse(sessionStorage.getItem("right_gray"));
        }

        if (sessionStorage.getItem("interval")===null){
            interval = 0;
        }
        else{
            interval = JSON.parse(sessionStorage.getItem("interval"));
        }


        if (sessionStorage.getItem("boardhistory")===null){
            board_history = board_history;
        }
        else{
            board_history = JSON.parse(sessionStorage.getItem("boardhistory"));
        }

        if (sessionStorage.getItem("order")===null){
            order = 1;
        }
        else{
            order = JSON.parse(sessionStorage.getItem("order"));
        }

        if (sessionStorage.getItem("solveorder")===null){
            solve_order = solve_order;
        }
        else{
            solve_order = JSON.parse(sessionStorage.getItem("solveorder"));
        }


        if (sessionStorage.getItem("score_on_display")===null){
            score_on_display = score_on_display;
        }
        else{
            score_on_display = JSON.parse(sessionStorage.getItem("score_on_display"));
        }

    </script>


    <script type="text/javascript">
        // Disable right click on web page
        $("html").on("contextmenu",function(e){
            return false;
        });
        // Disable cut, copy and paste on web page
        $('html').bind('cut copy paste', function (e) {
             e.preventDefault();
        });
    </script>

{% endblock %}