{% 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: 50%;
          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>Practice Round</h1>

    <div class="center vspace2">
        <script>
            $(function numOfmoves() {
                var numofmoves;

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

                }
                , 10);
            });


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

                        newtime = timeout - event.offset.totalSeconds;
                    });


                    $('#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_time_spent').val(newtime);

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




                }
                , 10);
            });
        </script>




        <div class="row">

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

            <div class="column">
                <p style="margin-Left:40px">  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  %}

            </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="time_spent"             id="id_time_spent"                 >
        <input type="hidden"   name="time_between_moves"     id="id_time_between_moves"         >


       {{ form.errors }}

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


{% block scripts %}
    <script type="text/javascript">
        //Global variables:
        var boardhistory = ""
        var numMoves = 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



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




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

                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_test_practice/" + 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);

                $('#id_num_of_moves').val(numMoves - 1);

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

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

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

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





        sg.table.addEventListener('move', function () {
                setInterval(function () {
                    if (numMoves >= 15){
                        $('.otree-btn-next').show();
                    }

                    //document.querySelector('#numofmoves').style.color = 'orangered';

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

                    $('#id_num_of_moves').val(numMoves - 1 );

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

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

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


                },10);
        }, false);

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