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

{% block head_title %}

        Study

{% endblock %}


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

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

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

        table.sliding_puzzle_new {
            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;

        }

        .sliding_puzzle_new td {
            width: 100px;
            height: 100px;
            border-color: black;
            border:2px solid black;
        }

        .full {
            background-color: white;
            border-color: black;
            cursor: pointer;
        }

        .empty {
            background-color: white;
            border-color: black;
            cursor: pointer;
        }

        .vspace {
            margin-top: 1em;
        }

        .center {
            text-align: center;
        }

        #message {
            font-weight: bold;
            display: inline-block;
        }

        .green {
            color: forestgreen;
        }

        .orange {
            color: orangered;
        }

    .otree-timer {
        font-weight: bold;
        background-color: White;
        text-align: center;
        border-style:none;
        border-color: coral;
        border-width: thin;
        font-size:30px;
        color: orangered;
        display: none;
    }
    h1 {text-align: center; font-size: 35px;}
    </style>
{% endblock %}


{% block content %}

    <h1>Round {{ roundnumber }} of 9 </h1>

    <div class="center vspace2">
        <script>


            $(function numOfmoves() {
                var numofmoves;

                setInterval(function () {
                    numofmoves = numMoves - 1 ;
                    document.querySelector('#numofmoves').textContent = numofmoves;

                }
                , 10);
            });



            $(function deductiontimer() {
                var seconds, minutes;
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    seconds = event.offset.totalSeconds%10;
                    minutes = 00;
                    seconds = seconds < 10 ? "0" + seconds : seconds;
                    document.querySelector('#deductiontimer').textContent = minutes + ":" + seconds;

                    if ((event.offset.totalSeconds%10) == 1 || (event.offset.totalSeconds%10) == 2 ||
                        (event.offset.totalSeconds%10) == 3 ) {


                        document.querySelector('#deductiontimer').style.backgroundColor = 'orangered';

                    }
                    else {
                        document.querySelector('#deductiontimer').style.backgroundColor = 'white';
                    }
                });
            })



            $(function () {
                var refreshIntervalId = setInterval(function () {


                    $('.otree-timer__time-left').on('update.countdown', function (event) {

                        newtime = timeout - event.offset.totalSeconds;
                        if ((event.offset.totalSeconds%10) == 0) {
                            checkkk = 10;
                        }

                    }
                    );

                    deduction_all_moves = (per_move * (numMoves-1));

                    deduction_all_seconds = (Math.floor(newtime / 10) * deduction_per_second);

                    payyyyyy = endow -  deduction_all_moves - deduction_all_seconds;



                    if ((endow - deduction_all_seconds - deduction_all_moves) > 0) {
                        payyyyyy = ( endow -  deduction_all_moves - deduction_all_seconds);
                    }

                    else {
                        payyyyyy = 0;
                    }

                    pay = payyyyyy.toFixed(2);

                    if (numMoves == 0){
                    $('#id_num_of_moves').val(0);
                    }
                    else{
                    $('#id_num_of_moves').val(numMoves - 1);
                    }

                    $('#id_min_num_of_moves').val(min_num_of_moves);

                    $('#id_board_history').val(JSON.stringify(boardhistory));

                    $('#id_total_payoff').val(payyyyyy);

                    $('#id_time_spent').val(newtime);

                    $('#id_deduction_per_second').val(deduction_per_second);

                    $('#id_deduction_per_move').val(per_move);

                    $('#id_deduction_per_second_cents').val(deduction_per_second_cents);

                    $('#id_deduction_per_move_cents').val(per_move_cents);

                    $('#id_deduction_all_seconds').val(deduction_all_seconds);

                    $('#id_deduction_all_moves').val(deduction_all_moves);

                    $('#id_time_between_moves').val(interval);

                    $('#id_endowment').val(endow);

                    $('#bonus').val(js_vars.bonus);


                    document.querySelector('#pay').textContent  = pay;

                    if (numMoves >= 15){
                        clearInterval(refreshIntervalId);
                        document.querySelector("form").submit();

                    }

                    if ((endow - deduction_all_seconds - deduction_all_moves) <= 0) {
                        clearInterval(refreshIntervalId);
                        document.querySelector("#form").submit();
                    }

                }
                , 10);
            });


            $(function () {
                var refreshIntervalId = setInterval(function () {

                    check = checkkk--;

                    document.querySelector('#check').textContent = check;

                    if ( check > 0) {
                        document.querySelector('#pay').style.backgroundColor = 'orangered'; //red change color for deduction per 10 sec
                    }
                    else {
                        document.querySelector('#pay').style.backgroundColor = 'white';
                    }

                }
                , 100);
            });





        </script>

            <!--<div><p style="font-size:30px; font-weight: bold;">Payoff: &euro; <span id="pay"         style="color:black; font-weight: bold">  </span></p></div>-->
            <!--<div><p style="font-size:30px; font-weight: bold;">Moves Made:   <span id="numofmoves"  style="color:black; font-weight: bold"> 0</span></p></div>-->
            <!-- <div><p style="font-size:30px; font-weight: bold;">Onload check: <span id="onloadcheck"         style="color:orangered; font-weight: bold">  0</span></p></div>-->

        <div class="row">


            <div class="column">
                <p style="margin-Left:30px">Game: </p> <table class="sliding_puzzle_new" id="game_table" style="width:100%"></table>
            </div>

            <div class="column">
                <div><p style="font-size:30px; font-weight: bold; margin-top: 35px; margin-Left:35px; text-align:center;">Countdown: <br>   <span id="deductiontimer"  style="color:black; font-weight: bold;  padding: 10px;text-align:center; font-size: 50px"> </span></p></div>
                <div><p style="font-size:30px; font-weight: bold; margin-Left:25px; text-align:center;">Payoff: <br>  &pound; <span id="pay" style="color:black; font-weight: bold; padding: 10px; text-align:center;">   </span></p></div>
                <div><p style="font-size:30px; font-weight: bold;text-align:center;">Moves Made:  <br> <span id="numofmoves"  style="color:black; font-weight: bold; text-align:center;"> 0</span></p></div>
                <div><p style="font-size:10px; color: white; font-weight: bold; margin-Left:25px">check: <br> <br> <span id="check" style="color:white; font-weight: bold; padding: 10px;">  </span></p></div>

            </div>

            <div class="column">
                <p style="margin-Left:90px">  Solution: </p>

                {% if subsession.round_number == 1 %}
                <img src="{% static 'shapes/final.png' %}" style="margin-Left:30px"/>
                {% endif  %}
                {% if subsession.round_number == 2 %}
                <img src="{% static 'circle/finalll.jpg' %}" style="margin-Left:30px"/>
                {% endif  %}
                {% if subsession.round_number == 3 %}
                <img src="{% static 'shapes/final.png' %}" style="margin-Left:30px"/>
                {% endif  %}
                {% if subsession.round_number == 4 %}
                <img src="{% static 'circle/finalll.jpg' %}" style="margin-Left:30px"/>
                {% endif  %}



            </div>
        </div>


        <p id="message"></p>


        <input type="hidden"   name="puzzle_solved"          id="id_puzzle_solved" value="False">
        <input type="hidden"   name="min_num_of_moves"       id="id_min_num_of_moves"           >
        <input type="hidden"   name="num_of_moves"           id="id_num_of_moves"               >
        <input type="hidden"   name="board_history"          id="id_board_history"              >
        <input type="hidden"   name="total_payoff"           id="id_total_payoff"               >
        <input type="hidden"   name="time_spent"             id="id_time_spent"                 >
        <input type="hidden"   name="deduction_per_second"   id="id_deduction_per_second"       >
        <input type="hidden"   name="deduction_per_move"     id="id_deduction_per_move"         >
        <input type="hidden"   name="deduction_per_second_cents"   id="id_deduction_per_second_cents"       >
        <input type="hidden"   name="deduction_per_move_cents"     id="id_deduction_per_move_cents"         >
        <input type="hidden"   name="deduction_all_seconds"  id="id_deduction_all_seconds"      >
        <input type="hidden"   name="deduction_all_moves"    id="id_deduction_all_moves"        >
        <input type="hidden"   name="time_between_moves"     id="id_time_between_moves"         >
        <input type="hidden"   name="endowment"              id="id_endowment"                  >
        <input type="hidden"   name="bonus"              id="id_bonus"                  >

       {{ form.errors }}

        {% next_button %}
    </div>
{% endblock %}


{% block scripts %}
    <script type="text/javascript">
        //Global variables:
        var boardhistory = ""
        var numMoves = 0
        var endow = js_vars.endowment
        var per_move = js_vars.per_move
        var deduction_per_second = js_vars.per_10sec
        var per_move_cents = js_vars.per_move_cents
        var deduction_per_second_cents = js_vars.per_10sec_cents
        var deduction_all_seconds = 0
        var deduction_all_moves = 0
        var min_num_of_moves = js_vars.min_num_of_moves
        var interval = Date.now()
        var startingtime = Date.now()
        var timeout = js_vars.timeout
        var checkkk = 0;


        let x = js_vars.game_id;

        if (x == 1) {
            var image1 = new Image();
            image1.src = "{% static 'shapes/arrow.png' %}";
            var image2= new Image();
            image2.src = "{% static 'shapes/drop.png' %}";
            var image3= new Image();
            image3.src = "{% static 'shapes/heart.png' %}";
            var image4= new Image();
            image4.src = "{% static 'shapes/moon.png' %}";
            var image5= new Image();
            image5.src = "{% static 'shapes/rhombus.png' %}";
            var image6= new Image();
            image6.src = "{% static 'shapes/shield.png' %}";
            var image7= new Image();
            image7.src = "{% static 'shapes/star.png' %}";
            var image8= new Image();
            image8.src = "{% static 'shapes/triangle.png' %}";
            var image9= new Image();
            image9.src = "{% static '00.png' %}";
            image1.width="100";
            image1.height="100";
            image2.width="100";
            image2.height="100";
            image3.width="100";
            image3.height="100";
            image4.width="100";
            image4.height="100";
            image5.width="100";
            image5.height="100";
            image6.width="100";
            image6.height="100";
            image7.width="100";
            image7.height="100";
            image8.width="100";
            image8.height="100";
            image9.width="100";
            image9.height="100";
        }


        if (x == 2) {
            var image1 = new Image();
            image1.src = "{% static 'circle/001.png' %}";
            var image2= new Image();
            image2.src = "{% static 'circle/002.png' %}";
            var image3= new Image();
            image3.src = "{% static 'circle/003.png' %}";
            var image4= new Image();
            image4.src = "{% static 'circle/004.png' %}";
            var image5= new Image();
            image5.src = "{% static 'circle/005.png' %}";
            var image6= new Image();
            image6.src = "{% static 'circle/006.png' %}";
            var image7= new Image();
            image7.src = "{% static 'circle/007.png' %}";
            var image8= new Image();
            image8.src = "{% static 'circle/008.png' %}";
            var image9= new Image();
            image9.src = "{% static '00.png' %}";
            image1.width="100";
            image1.height="100";
            image2.width="100";
            image2.height="100";
            image3.width="100";
            image3.height="100";
            image4.width="100";
            image4.height="100";
            image5.width="100";
            image5.height="100";
            image6.width="100";
            image6.height="100";
            image7.width="100";
            image7.height="100";
            image8.width="100";
            image8.height="100";
            image9.width="100";
            image9.height="100";
        }

        if (x == 3) {
            var image1 = new Image();
            image1.src = "{% static 'shapes/arrow.png' %}";
            var image2= new Image();
            image2.src = "{% static 'shapes/drop.png' %}";
            var image3= new Image();
            image3.src = "{% static 'shapes/heart.png' %}";
            var image4= new Image();
            image4.src = "{% static 'shapes/moon.png' %}";
            var image5= new Image();
            image5.src = "{% static 'shapes/rhombus.png' %}";
            var image6= new Image();
            image6.src = "{% static 'shapes/shield.png' %}";
            var image7= new Image();
            image7.src = "{% static 'shapes/star.png' %}";
            var image8= new Image();
            image8.src = "{% static 'shapes/triangle.png' %}";
            var image9= new Image();
            image9.src = "{% static '00.png' %}";
            image1.width="100";
            image1.height="100";
            image2.width="100";
            image2.height="100";
            image3.width="100";
            image3.height="100";
            image4.width="100";
            image4.height="100";
            image5.width="100";
            image5.height="100";
            image6.width="100";
            image6.height="100";
            image7.width="100";
            image7.height="100";
            image8.width="100";
            image8.height="100";
            image9.width="100";
            image9.height="100";
        }



        if (x == 4) {
            var image1 = new Image();
            image1.src = "{% static 'circle/001.png' %}";
            var image2= new Image();
            image2.src = "{% static 'circle/002.png' %}";
            var image3= new Image();
            image3.src = "{% static 'circle/003.png' %}";
            var image4= new Image();
            image4.src = "{% static 'circle/004.png' %}";
            var image5= new Image();
            image5.src = "{% static 'circle/005.png' %}";
            var image6= new Image();
            image6.src = "{% static 'circle/006.png' %}";
            var image7= new Image();
            image7.src = "{% static 'circle/007.png' %}";
            var image8= new Image();
            image8.src = "{% static 'circle/008.png' %}";
            var image9= new Image();
            image9.src = "{% static '00.png' %}";
            image1.width="100";
            image1.height="100";
            image2.width="100";
            image2.height="100";
            image3.width="100";
            image3.height="100";
            image4.width="100";
            image4.height="100";
            image5.width="100";
            image5.height="100";
            image6.width="100";
            image6.height="100";
            image7.width="100";
            image7.height="100";
            image8.width="100";
            image8.height="100";
            image9.width="100";
            image9.height="100";
        }







        //Images:


        class SlidePuzzle {
            constructor(table_id, board) {
                this.table = document.getElementById(table_id);
                this.board = board;
                this.enabled = true;
                this.draw();
            }

            get_empty_field() {
                for (let row = 0; row < this.board.length; row++) {
                    for (let col = 0; col < this.board[row].length; col++) {
                        if (this.board[row][col] === null) {
                            return [row, col];
                        }
                    }
                }
            }

            get_movable_blocks() {
                let pos_empty_field = this.get_empty_field();
                let empty_row = pos_empty_field[0];
                let empty_col = pos_empty_field[1];

                // row and col candidates
                let candidate_rows = [empty_row - 1, empty_row + 1];
                let candidate_cols = [empty_col - 1, empty_col + 1];

                let rows = [];
                let cols = [];

                // remove candidates outside of board
                for (let c_row = 0; c_row < candidate_rows.length; c_row++) {
                    if (candidate_rows[c_row] >= 0 && candidate_rows[c_row] < this.board.length) {
                        rows.push(candidate_rows[c_row]);
                    }
                }

                for (let c_col = 0; c_col < candidate_cols.length; c_col++) {
                    if (candidate_cols[c_col] >= 0 && candidate_cols[c_col] < this.board[0].length) {
                        cols.push(candidate_cols[c_col]);
                    }
                }

                // combine candidates with empty columns
                let block_pos = [];
                for (let i = 0; i < rows.length; i++) {
                    block_pos.push([rows[i], empty_col]);
                }

                for (let j = 0; j < cols.length; j++) {
                    block_pos.push([empty_row, cols[j]]);
                }

                return block_pos;
            }

            searchForArray(sea, needle){
                var i, j, current;
                for(i = 0; i < sea.length; ++i){
                    if(needle.length === sea[i].length){
                        current = sea[i];
                        for(j = 0; j < needle.length && needle[j] === current[j]; ++j);
                            if(j === needle.length)
                                return i;
                        }
                    }
                return -1;
            }

            move(pos, external=false) {

                if (!this.enabled) {
                    return false;
                }
                if (this.searchForArray(this.get_movable_blocks(this.board), pos) === -1) {
                    return false;
                }
                let empty = this.get_empty_field(this.board);
                this.board[empty[0]][empty[1]] = this.board[pos[0]][pos[1]];
                this.board[pos[0]][pos[1]] = null;
                this.draw();
                if (!external) {
                    let move_event = new CustomEvent('move', { detail: { from: pos, to: empty } });
                    this.table.dispatchEvent(move_event);
                    //checkkk = 10; //uncomment this if want color change for per move made
                }

                if (this.solved()) {
                    this.enabled = false;
                }
                return true;
            }

            clear() {
                const l = this.table.rows.length;
                for (let r = 0; r < l; r++) {
                    this.table.deleteRow(-1);
                }
            }

            draw() {
                this.clear();
                for (let r = 0; r < this.board.length; r++) {
                    let row = this.table.insertRow(-1);
                    for (let c = 0; c < this.board[0].length; c++) {
                        let cell = row.insertCell(-1);
                        let value;
                        if (this.board[r][c] == null) {
                            value = 9;
                            cell.classList.add('empty');
                        } else {
                            value = this.board[r][c];
                            cell.classList.add('full');
                        }

                        cell.setAttribute('onclick', "sg.move(["+r+","+c+"])");
                        const neeeewwwww = [image1, image2, image3, image4, image5, image6, image7, image8, image9];
                        cell.appendChild(neeeewwwww[value-1]);
                    }
                }


                boardhistory = boardhistory + ";" + this.board;

                numMoves++;

                interval = interval + ";" + Date.now();

                sessionStorage.setItem("autoboard", JSON.stringify(this.board));

                sessionStorage.setItem("autosave", JSON.stringify(numMoves));
            }

            solved() {

                if (this.board[2][2] != null) {
                    return false
                }

                if (this.board[0][0] != 1) {
                    return false
                }

                if (this.board[0][1] != 2) {
                    return false
                }

                if (this.board[0][2] != 3) {
                    return false
                }

                if (this.board[1][0] != 4) {
                    return false
                }

                if (this.board[1][1] != 5) {
                    return false
                }

                if (this.board[1][2] != 6) {
                    return false
                }

                if (this.board[2][0] != 7) {
                    return false
                }

                if (this.board[2][1] != 8) {
                    return false
                }

                let solved_event = new Event('solved');
                this.table.dispatchEvent(solved_event);
                return true;
            }
        }
        // class SlidePuzzle ends here


        // Websockets
        let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
        let ws = new WebSocket(ws_scheme + '://' + window.location.host + "/sliding_puzzle_new/" + js_vars.game_id + "/");

        // Handle any errors that occur.
        ws.onerror = function (error) {
            console.log('WebSocket Error: ' + error);
        };

        // Show a connected message when the WebSocket is opened.
        ws.onopen = function (event) {
            console.log('connected to puzzle socket');
        };

        // handle messages
        ws.onmessage = function (event) {
            data = JSON.parse(event.data);
            if (data.player !== js_vars.player_id) {
                sg.enabled = true;
                sg.move(data.text.from, external=true);
            }
        };
        // Show a disconnected message when the WebSocket is closed.
        ws.onclose = function (event) {
            console.log('disconnected from puzzle socket');
        };

        function green_message(msg) {
            let m = $('#message');
            m.removeClass('orange');
            m.addClass('green');
            m.text(msg);
        }


        // Game
        if (sessionStorage.getItem("autoboard")===null){
            board = js_vars.board;
        }
        else{
            board = JSON.parse(sessionStorage.getItem("autoboard"));
            numMoves = JSON.parse(sessionStorage.getItem("autosave"))-1;
        }

        let sg = new SlidePuzzle('game_table', board);
        let fill_form = js_vars.player_id;

        sg.table.addEventListener('solved', function () {
                $('#id_puzzle_solved').val('True');



                $('.otree-btn-next').show();

                $('.otree-timer__time-left').off();

                var newmessage = "";

                green_message("Puzzle solved!" + newmessage);

                $('#id_min_num_of_moves').val(min_num_of_moves);

                if (numMoves == 0){
                    $('#id_num_of_moves').val(0);
                }
                else{
                $('#id_num_of_moves').val(numMoves - 1);
                }

                $('#id_board_history').val(JSON.stringify(boardhistory));

                $('#id_total_payoff').val(payyyyyy);

                $('#id_time_spent').val(newtime);

                $('#id_deduction_per_second').val(deduction_per_second);

                $('#id_deduction_per_move').val(per_move);

                $('#id_deduction_per_second_cents').val(deduction_per_second_cents);

                $('#id_deduction_per_move_cents').val(per_move_cents);

                $('#id_deduction_all_seconds').val(deduction_all_seconds);

                $('#id_deduction_all_moves').val(deduction_all_moves);

                $('#id_time_between_moves').val(interval);

                $('#id_endowment').val(endow);

                $('#bonus').val(js_vars.bonus);



                document.querySelector("form").submit();
        }, false);


        sg.table.addEventListener('move', function () {
                setInterval(function () {


                    //document.querySelector('#pay').style.backgroundColor = 'orangered';

                    $('#id_min_num_of_moves').val(min_num_of_moves);

                    if (numMoves == 0){
                    $('#id_num_of_moves').val(0);
                    }
                    else{
                    $('#id_num_of_moves').val(numMoves - 1);
                    }

                    $('#id_board_history').val(JSON.stringify(boardhistory));

                    $('#id_total_payoff').val(payyyyyy);

                    $('#id_time_spent').val(newtime);

                    $('#id_deduction_per_second').val(deduction_per_second);

                    $('#id_deduction_per_move').val(per_move);

                    $('#id_deduction_per_second_cents').val(deduction_per_second_cents);

                    $('#id_deduction_per_move_cents').val(per_move_cents);

                    $('#id_deduction_all_seconds').val(deduction_all_seconds);

                    $('#id_deduction_all_moves').val(deduction_all_moves);

                    $('#id_time_between_moves').val(interval);

                    $('#id_endowment').val(endow);

                    $('#bonus').val(js_vars.bonus);



                },10);
        }, false);

       $('.otree-btn-next').hide();
    </script>
{% endblock %}