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

{% block title %}
    <center>
        Round {{ subsession.round_number }} of {{ Constants.num_rounds }}
    </center>
{% 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;
    }

    </style>
{% endblock %}


{% block content %}
    <div class="" align="center">
        <script>
            $(function () {
                $('.otree-timer__time-left').on('update.countdown', function (event) {
                    if ((event.offset.totalSeconds%10) == 1 || (event.offset.totalSeconds%10) == 2 ||
                        (event.offset.totalSeconds%10) == 3 || (event.offset.totalSeconds%10) == 4 ||
                        (event.offset.totalSeconds%10) == 5) {

                        $('.otree-timer__time-left').css('color', 'red');

                    }
                    else {
                        $('.otree-timer__time-left').css('color', 'black');
                    }
                });
            })
        </script>

        <p style="font-size:30px; color: black; font-weight: bold;">Time Left:
            <span style="font-weight: bold; font-size:30px; color: black">
                <span class="otree-timer__time-left"></span>
            </span>
        </p>
    </div>



    <div class="center vspace2">
        <script>
            $(function numofmoves() {
                $('.otree-timer__time-left').on('update.countdown', function (event) {



                    var numofmoves;

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


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

                        newtime = timeout - event.offset.totalSeconds;

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

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

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

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

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

                        document.querySelector('#pay').textContent  = pay;
                    });
                }
                , 1);
            });
        </script>


        <center>

            <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;">Payoff: &euro; <span id="pay"         style="color:black; font-weight: bold">  </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>-->
        </center>


        <div class="row">
            <div class="column">
                <p> </p> <br><p style="text-align:center; width:100%; height: 15%"> {%  include Constants.instruction_template2  %} </p>
            </div>

            <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">
                <p style="margin-Left:90px">  Final State: </p> <img src="{% static 'circle/finalll.jpg' %}" style="margin-Left:30px"/>
            </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_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"                  >

       {{ form.errors }}

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


{% block scripts %}
    <script type="text/javascript">
        //Global variables:
        var boardhistory = ""
        var numMoves = 0
        var timer = 600
        var endow = js_vars.endowment
        var per_move = js_vars.per_move
        var deduction_per_second = js_vars.per_10sec
        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 onloadcheck  = 0
        var startingtime = Date.now()
        var timeout = js_vars.timeout


        //Images:
        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_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);

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

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

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

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

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


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

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

                    document.querySelector('#pay').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_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_all_seconds').val(deduction_all_seconds);

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

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

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

                },10);
        }, false);

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