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

{% block title %}
    <center>
        Sliding Puzzle
    </center>
{% endblock %}




{% block styles %}
    <style type="text/css">
        table.sliding_puzzle_new {
            width: 300px;
            height: 300px;
            text-align: center;
            background-color: #000;
            font-size: 2em;
            border-collapse: unset;
            margin-left: auto;
            margin-right: auto;
        }

        .sliding_puzzle_new td {
            width: 100px;
            height: 100px;
        }

        .full {
            background-color: #ccc;
            cursor: pointer;
        }

        .empty {
            background-color: #fff;
        }

        .vspace {
            margin-top: 1em;
        }

        .center {
            text-align: center;
        }

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

        .green {
            color: forestgreen;
        }

        .orange {
            color: orangered;
        }

    .otree-timer {
    display: none;
        }

    </style>


{% endblock %}

{% block content %}



    <div class="center vspace2">


        <script>
            function totalpayoff(timer, display, deduction_per_second) {
                var timer, totalpayoff, deduction_per_second;
                setInterval(function () {

                    int = parseInt((timer-2) / 20, 10);

                    if (timer > 599) {
                        totalpayoff = (endow - per_move * (numMoves - 1)).toFixed(2);
                    }

                    if (2 < timer && timer < 599) {
                        totalpayoff = (endow- deduction_per_second * (600/20-1-int) - per_move * (numMoves - 1)).toFixed(2);
                    }

                    if (--timer < 1) {
                        totalpayoff = (endow- deduction_per_second * 600/20 - per_move * (numMoves - 1)).toFixed(2);
                    }

                    display.textContent = totalpayoff ;


                    document.getElementById("totalpayoff").style.color = 'red';
                }
                , 500);
            }


            function numofmoves(display) {
                var numofmoves;

                setInterval(function () {

                    numofmoves = numMoves - 1;

                    display.textContent = numofmoves;
                }
                , 100);
            }



            function startTimer(timer, display) {
                var timer, minutes, seconds;
                setInterval(function () {

                    ticksToSecond = timer/2
                    minutes = parseInt(ticksToSecond / 60, 10);
                    seconds = parseInt(ticksToSecond % 60, 10);

                    minutes = minutes < 10 ? "0" + minutes : minutes;
                    seconds = seconds < 10 ? "0" + seconds : seconds;

                    timexx = totaal -(minutes*60+seconds);

                    display.textContent = minutes + ":" + seconds;

                    if (timer < 12) {
                        document.getElementById("time").style.color = 'white';
                            }
                    if (timer < 12 && ticksToSecond/seconds >1) {
                        document.getElementById("time").style.color = 'red';
                            }
                    if (12 < timer && timer < 22) {
                        document.getElementById("time").style.color = 'black';
                            }
                    if (12 < timer && timer < 22 && ticksToSecond/seconds >1) {
                        document.getElementById("time").style.color = 'black';
                            }
                    if (22 < timer && timer < 32) {
                        document.getElementById("time").style.color = 'white';
                            }
                    if (22< timer && timer < 32 && ticksToSecond/seconds >1) {
                        document.getElementById("time").style.color = 'red';
                            }
                    if (--timer < 0) {
                        timer = 0;
                        document.getElementById("time").style.color = 'red';
                    }
                }
                , 500);
            }


            window.onload = function () {

                display = document.querySelector('#time');
                startTimer(timer, display);

                display = document.querySelector('#totalpayoff');
                totalpayoff(timer, display, deduction_per_second);

                display = document.querySelector('#numofmoves');
                numofmoves(display);
            };



        </script>


        <center>
            <div><p style="font-size:30px">Time Left: <span id="time" style="color:red">05:00</span></p></div>
            <div><p style="font-size:30px">Moves Made: <span id="numofmoves" style="color:red"> 0</span></p></div>
            <div><p style="font-size:30px">Your Payoff: &euro; <span id="totalpayoff" style="color:red"> 10.0 </span></p></div>
        </center>



        <table class="sliding_puzzle_new" id="game_table"></table>



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


        <input type="hidden"   name="puzzle_solved"          id="id_puzzle_solved" value="False">
        <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 timexx = 0
        var boardhistory = ""
        var numMoves = 0
        var payoff_display = 10
        var totaal = 300
        var timer = totaal*2
        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





        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 = "";
                            cell.classList.add('empty');
                        } else {
                            value = this.board[r][c];
                            cell.classList.add('full');
                        }
                        cell.setAttribute('onclick', "sg.move(["+r+","+c+"])");  //"sg.move("0","1")"
                        cell.innerHTML = value;
                    }
                }

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

                numMoves++;

                payoff_display = (10 - per_move * (numMoves - 1) - Math.floor(timexx / 10) * deduction_per_second);

                deduction_all_seconds = (Math.floor(timexx / 10) * deduction_per_second).toFixed(2);

                deduction_all_moves = (per_move * (numMoves - 1)).toFixed(2);

            }








            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
        let board = js_vars.board;
        let sg = new SlidePuzzle('game_table', board);
        let fill_form = js_vars.player_id;


        sg.table.addEventListener('solved', function () {
            if (fill_form) {
                $('#id_puzzle_solved').val('True');
            }
            $('.otree-btn-next').show();

            //var newmessage = payoff_display;
            //green_message("Puzzle solved!" + newmessage);

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

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

            $('#id_total_payoff').val(JSON.stringify(payoff_display));

            $('#id_time_spent').val(JSON.stringify(timexx));

            $('#id_deduction_per_second').val(JSON.stringify(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(deduction_all_moves);

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

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




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