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

{% block title %}
    Slider Puzzle
{% endblock %}

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

        .slider_game 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;
        }

    </style>
{% endblock %}

{% block content %}

    <div class="center vspace">
        <p>
            You and another participant sequentially move tiles of the puzzle to solve it.<br>
            The next button appears once the game is solved.<br>
            You have 10 minutes.
        </p>

        <table class="slider_game" id="sgame_table"></table>

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

        {% if player.id_in_group == 1 %}
            <input type="hidden" name="puzzle_solved" id="id_puzzle_solved" value="False">
            <input type="hidden" name="move_history" id="id_move_history">
        {% endif %}

        {% next_button %}
    </div>


{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        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];

                // naive definition of 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) { // assumes symmetric, min 1x1 board
                        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(haystack, needle){
                var i, j, current;
                for(i = 0; i < haystack.length; ++i){
                    if(needle.length === haystack[i].length){
                        current = haystack[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+"])");
                        cell.innerHTML = value;
                    }
                }
            }

            solved() {
                let rows = this.board.length;
                let cols = this.board[0].length;

                if (this.board[rows - 1][cols - 1] != null) {
                    return false
                }

                for (let r = 0; r < rows; r++) {
                    for (let c = 0; c < cols; c++) {
                        if (this.board[r][c] !== (r * this.board[0].length) + (c+1)) {
                            if (r !== rows - 1 && c !== cols - 1) {
                                return false;
                            }
                        }
                    }
                }
                let solved_event = new Event('solved');
                this.table.dispatchEvent(solved_event);
                return true;
            }
        }


        // Websockets
        let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
        let ws = new WebSocket(ws_scheme + '://' + window.location.host + "/slider_puzzle/" + 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) {
                green_message('Your move!');
                sg.enabled = true;
                sg.move(data.text.from, external=true);
                if (fill_form) {
                    history.push(data.text);
                    $('#id_move_history').val(JSON.stringify(history));
                }
            }
        };

        // Show a disconnected message when the WebSocket is closed.
        ws.onclose = function (event) {
            console.log('disconnected from puzzle socket');
        };

        function send(type, message) {
            let msg = {
                type: type,
                text: message,
                player: js_vars.player_id
            };
            ws.send(JSON.stringify(msg));
            sg.enabled = false;
        }

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

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

        // Game
        let board = js_vars.board;
        let sg = new SlidePuzzle('sgame_table', board);
        let fill_form = js_vars.first_player;
        let history = [];

        sg.table.addEventListener('move', function (e) {
            send(e.type, e.detail);
            history.push(e.detail);
            $('#id_move_history').val(JSON.stringify(history));
            orange_message('Wait for the other player!');
        }, false);

        sg.table.addEventListener('solved', function () {
            if (fill_form) {
                $('#id_puzzle_solved').val('True');
            }
            $('.otree-btn-next').show();
            green_message("You have solved the puzzle!");
        }, false);

        if (!js_vars.starting_player) {
            sg.enabled = false;
            orange_message('Wait for the other player!');
        } else {
            green_message('Your move!');
        }

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

    </script>
{% endblock %}