{% 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: 250px;
            height: 250px;
            color: black;
            background-color: white;
            background-size: 100%;
            font-size: 20px;
            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: 20px;
            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;}


    </style>
{% endblock %}


{% block content %}
<h1>Practice Game</h1>



    <div class="center">

        <script>

            $(function Score() {
                document.querySelector('#score').textContent = score;
            });

        </script>

        <div class="row">

            <div class="column">



                <table class="multitasking"  id="game_table" style="margin-left: 270px;" >
                    <thead>
                        <tr>
                        <th class="first"></th><th class="second" id="col1">{{c.0}}</th><th class="second" id="col2">{{c.1}}</th><th class="second" id="col3">{{c.2}}</th><th class="second" id="col4">{{c.3}}</th><th class="second" id="col5">{{c.4}}</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>
                        </tr>
                        <tr>
                        <td class="first third" id="row2">{{r.1}}</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" id="row3">{{r.2}}</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>
                        </tr>
                        <tr>
                        <td class="first third" id="row4">{{r.3}}</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" id="row5">{{r.4}}</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>
                        </tr>

                    </tbody>
                </table>
            </div>


            <div class="column2" style="margin-left: -150px;">
                <br> <br> <br> <br> <br> <br><br> <br>

                <button type="button" class="green" onclick="myFunction1()" id="green"></button>
                <button type="button" class="gray" onclick="myFunction2()" id="gray"></button>

                <br> <br> <br>
                <!--
                <div><p style="font-size: 30px; color: white; font-weight: bold;text-align:center;">Score: <br>
                        </p> <span id="score" style="font-size: 30px; color: white; font-weight: bold;text-align:center;"></span></div>

                <br>  {% next_button %} <br>
                <p id="display" style="color: black;">000</p>
                -->
            </div>



            <input type="hidden"   name="points"                               id="id_points"               />
            <input type="hidden"   name="total_wrong"                          id="id_total_wrong"          />
            <input type="hidden"   name="total_right"                          id="id_total_right"          />
            <input type="hidden"   name="wrong_green"                          id="id_wrong_green"          />
            <input type="hidden"   name="wrong_gray"                           id="id_wrong_gray"           />
            <input type="hidden"   name="right_green"                          id="id_right_green"          />
            <input type="hidden"   name="right_gray"                           id="id_right_gray"           />
            <input type="hidden"   name="time_between_moves"                   id="id_time_between_moves"   />
            <input type="hidden"   name="board_history"                        id="id_board_history"        />
            <input type="hidden"   name="solve_order"                          id="id_solve_order"          />
            <input type="hidden"   name="total_green"                          id="id_total_green"          />
            <input type="hidden"   name="total_gray"                           id="id_total_gray"           />





            <br>
        </div>
    </div>

{% endblock %}


{% block scripts %}

    <script type="text/javascript">


        var bggreen = -1;
        var bggray = -1;
        var border = 0;
        var score = 0;
        var wrong = 0;
        var right = 0;
        var wrong_green = 0;
        var right_green = 0;
        var wrong_gray = 0;
        var right_gray = 0;
        var start = Date.now();
        var interval = 0;
        var board_history = [];
        var solve_order = [];
        for (var j = 1; j <26; j++) {
                board_history[j] = 0;
                solve_order[j] = 0;
        }

        var order = 1;
        var total_green = js_vars.total_green;
        var total_gray = js_vars.total_gray;


        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"));
        }


        if (sessionStorage.getItem("start")===null){
            start = Date.now();
        }
        else{
            start = JSON.parse(sessionStorage.getItem("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"));
        }


        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_1.0}}, 'pos7' : {{sol_1.1}}, 'pos8' : {{sol_1.2}}, 'pos9' : {{sol_1.3}}, 'pos10' : {{sol_1.4}}, 'pos11' : {{sol_2.0}}, 'pos12' : {{sol_2.1}}, 'pos13' : {{sol_2.2}}, 'pos14' : {{sol_2.3}},  'pos15' : {{sol_2.4}}, 'pos16' : {{sol_3.0}}, 'pos17' : {{sol_3.1}}, 'pos18' : {{sol_3.2}}, 'pos19' : {{sol_3.3}}, 'pos20' : {{sol_3.4}}, 'pos21' : {{sol_4.0}}, 'pos22' : {{sol_4.1}}, 'pos23' : {{sol_4.2}}, 'pos24' : {{sol_4.3}}, 'pos25' : {{sol_4.4}}};


        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 <26; j++) {
                i[j] = document.getElementById('pos' + j);
                gugugaga[j] = "white";
        }


        for (var x = 1; x < 26; 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;
                                //document.getElementById('display').innerHTML = interval ;
                        }

                        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;
                                //document.getElementById('display').innerHTML = interval ;
                        }

                        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;
                                //document.getElementById('display').innerHTML = interval ;
                        }

                        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;
                                //document.getElementById('display').innerHTML = interval ;
                        }


                        gugugaga[x]=i[x].style.backgroundColor;
                        //document.getElementById("score").innerHTML  = score;
                        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));

                        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;

                    });

                }(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 <26; 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 <26; j++) {
                    if (i[j].style.backgroundColor !== "white") {
                        count_non_white = count_non_white +1;
                    }
                }
                if (count_non_white == 25){
                    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("start")===null){
            start = Date.now();
        }
        else{
            start = JSON.parse(sessionStorage.getItem("start"));
        }

        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"));
        }

        document.getElementById('id_total_green').value = total_green;
        document.getElementById('id_total_gray').value = total_gray;

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