<%- include("./partials/header.ejs") %>
<%- include("./partials/nav.ejs") %>
<section class="hero is-primary">
    <div class="hero-body">
        <br />
        <div class="container has-text-centered">
            <h1 class="title">
                <span class="icon is-medium iconalign">
            <% if (type === "Error") { %>
                <i aria-hidden="true" class="fad fa-exclamation has-text-danger fa-1x"></i>
            <% } else if (type === "Success") { %>
                <i aria-hidden="true" class="fad fa-check has-text-success fa-1x"></i>
            <% } else if (type === "Information") { %>
                <i aria-hidden="true" class="fad fa-info has-text-info fa-1x"></i>
            <% } else { %>
                <i aria-hidden="true" class="fad fa-question has-text-default fa-1x"></i>
            <% } %>
        </span>
                <br />
                <span><%= title %> (<%= status %>)</span>
            </h1>
            <h2 class="subtitle">
                <%= subtitle %>
            </h2>
        </div>
    </div>
</section>
<div class="container">
<div style="text-align: center;" class="section">
    <% if (!res.locals.mobile) { %>
        <% if (!req.user || req.user.db.preferences.enableGames === true) { %>
            <div id="snake_game">
                <% if (req.user) { %>
                    <p class="is-size-5 has-text-warning"><span><%= __("page.snake.highscore") %></span> <span id="highScore"><%= req.user.db.game.snakes.maxScore %></span></p>
                    <% } %>
                        <p class="is-size-5 has-text-success"><span><%= __("page.snake.score") %> </span><span id="score"></span></p>
                        <p id="lastScore" style="display: none;" class="is-size-5 has-text-info"><span><%= __("page.snake.lastScore") %> </span><span id="lastScoreCount"></span></p>
                        <br />
                        <canvas class="snakeNormal" style="background-color: black;" width="400" height="400" id="game"></canvas>
                        <script>
                            addEventListener("keydown", function(e) {
                                if ([32, 37, 38, 39, 40, 87, 65, 83, 68].indexOf(e.keyCode) > -1) {
                                    e.preventDefault();
                                }
                            }, false);

                            var xhr = new XMLHttpRequest();
                            var url = "/users/profile/game/snakes";
                            var score;
                            var data;

                            var canvas = document.getElementById("game");
                            var context = canvas.getContext("2d");
                            var grid = 16;
                            var count = 0;
                            var changing_direction = false;

                            var snake = {
                                x: 160,
                                y: 160,
                                dx: grid,
                                dy: 0,
                                cells: [],
                                maxCells: 4
                            };

                            var apple = {
                                x: 320,
                                y: 320
                            };

                            function getRandomInt(min, max) {
                                return Math.floor(Math.random() * (max - min)) + min;
                            }

                            function loop() {
                                requestAnimationFrame(loop);
                                if (++count < 4) {
                                    return;
                                }
                                count = 0;
                                changing_direction = false;
                                context.clearRect(0, 0, canvas.width, canvas.height);
                                snake.x += snake.dx;
                                snake.y += snake.dy;

                                if (snake.x < 0) {
                                    snake.x = canvas.width - grid;
                                } else if (snake.x >= canvas.width) {
                                    snake.x = 0;
                                }

                                if (snake.y < 0) {
                                    snake.y = canvas.height - grid;
                                } else if (snake.y >= canvas.height) {
                                    snake.y = 0;
                                }

                                snake.cells.unshift({
                                    x: snake.x,
                                    y: snake.y
                                });

                                if (snake.cells.length > snake.maxCells) {
                                    snake.cells.pop();
                                }

                                context.fillStyle = "red";
                                context.fillRect(apple.x, apple.y, grid - 1, grid - 1);

                                context.fillStyle = "green";

                                for (var i = 4; i < snake.cells.length; i++) {

                                    if (snake.cells[i].x === snake.cells[0].x && snake.cells[i].y === snake.cells[0].y) {
                                        document.getElementById("game").className = "snakeDeath";
                                        document.getElementById("lastScoreCount").innerHTML = `${snake.maxCells - 4}`;
                                        document.getElementById("lastScore").style.display = "block";

                                        snake.x = 160;
                                        snake.y = 160;
                                        snake.cells = [];
                                        snake.maxCells = 4;
                                        snake.dx = grid;
                                        snake.dy = 0;
                                        apple.x = getRandomInt(0, 25) * grid;
                                        apple.y = getRandomInt(0, 25) * grid;

                                        document.getElementById("score").innerHTML = `${snake.maxCells - 4}`;

                                        <% if (req.user) { %>
                                            function highscoreRequest() {
                                                this.get = function(callback) {
                                                    xhr.onreadystatechange = () => {
                                                        if (xhr.readyState === 4 && xhr.status === 200) callback(xhr.responseText);
                                                    }

                                                    xhr.open("GET", url, true);
                                                    xhr.send(null);
                                                }
                                            }

                                            const highscore = new highscoreRequest();

                                            highscore.get(callback => {
                                                console.log(callback);
                                                document.getElementById("highScore").innerHTML = `${JSON.parse(callback).result}`;
                                            });

                                            setTimeout(() => {
                                                document.getElementById("game").className = "snakeNormal";
                                            }, 350);
                                        <% } %>

                                        setTimeout(() => {
                                            document.getElementById("game").className = "snakeNormal";
                                        }, 350);
                                    }
                                }

                                snake.cells.forEach(function(cell) {

                                    context.fillRect(cell.x, cell.y, grid - 1, grid - 1);
                                    if (cell.x === apple.x && cell.y === apple.y) {
                                        snake.maxCells++;
                                        document.getElementById("game").className = "snakePoint";
                                        document.getElementById("score").innerHTML = `${snake.maxCells - 4}`;

                                        xhr.open("POST", url, true);
                                        xhr.setRequestHeader("Content-Type", "application/json");
                                        xhr.onreadystatechange = function() {
                                            if (xhr.readyState === 4 && xhr.status === 200) {
                                                const json = JSON.parse(xhr.responseText);
                                                console.log(json);
                                            }
                                        };

                                        score = snake.maxCells - 4;
                                        data = JSON.stringify({
                                            "score": score
                                        });
                                        xhr.send(data);

                                        apple.x = getRandomInt(0, 25) * grid;
                                        apple.y = getRandomInt(0, 25) * grid;
                                        setTimeout(() => {
                                            document.getElementById("game").className = "snakeNormal";
                                        }, 350);
                                    }
                                });
                            }

                            document.addEventListener("keydown", function(e) {
                                if (changing_direction) return;
                                changing_direction = true;
                                // Go up
                                // Arrow - 38, W - 87
                                if ((e.which === 38 || e.which === 87) && snake.dy === 0) {
                                    snake.dy = -grid;
                                    snake.dx = 0;
                                }
                                // Turn left
                                // Arrow - 37, A - 65
                                else if ((e.which === 37 || e.which === 65) && snake.dx === 0) {
                                    snake.dx = -grid;
                                    snake.dy = 0;
                                }
                                // Go down
                                // Arrow - 40, S - 87
                                else if ((e.which === 40 || e.which === 83) && snake.dy === 0) {
                                    snake.dy = grid;
                                    snake.dx = 0;
                                }
                                // Turn right
                                // Arrow - 39, D - 68
                                else if ((e.which === 39 || e.which === 68) && snake.dx === 0) {
                                    snake.dx = grid;
                                    snake.dy = 0;
                                }
                            });

                            document.addEventListener("touchstart", function(e) {
                                var touches = event.changedTouches;
                                snake._touch_start = [touches[0].pageX, touches[0].pageY];
                            });

                            document.addEventListener("touchend", function(e) {
                                var touches = event.changedTouches;
                                var end_pos = [touches[0].pageX, touches[0].pageY];
                                var dX = end_pos[0] - snake._touch_start[0],
                                    dY = end_pos[1] - snake._touch_start[1],
                                    c = Math.sqrt(dX * dX + dY * dY),
                                    alpha = Math.acos(dX / c);

                                if (alpha < Math.PI * 1 / 4) {
                                    // right swipe
                                    snake.dx = grid;
                                    snake.dy = 0;
                                } else if (alpha > Math.PI * 3 / 4) {
                                    // left swipe
                                    snake.dx = -grid;
                                    snake.dy = 0;
                                } else if (dY > 0) {
                                    // down swipe
                                    snake.dy = grid;
                                    snake.dx = 0;
                                } else {
                                    // up swipe
                                    snake.dy = -grid;
                                    snake.dx = 0;
                                }
                            });

                            document.addEventListener("DOMContentLoaded", () => {
                                document.getElementById("score").innerHTML = `${snake.maxCells - 4}`;
                            });

                            requestAnimationFrame(loop);
                        </script>
                    </div>
                <% } else { %>
                    <h2 class="is-size-4 backdrop">
                        <%= __("page.snake.emptiness") %>
                    </h2>
                <% } %>
            <% } else { %>
                <p class="is-size-5 backdrop">
                    <%= __("page.snake.desktopOnly") %>
                </p>
            <% } %>
<script><% if (type === "Error") { %>document.getElementById("premidPageInfo").innerText="<%= __("premid.error", status)%>";<% } else if (type === "Success") { %>document.getElementById("premidPageInfo").innerText="<%= __("premid.success", status)%>";<% } else if (type === "Information") { %>document.getElementById("premidPageInfo").innerText="<%= __("premid.information", status)%>";<% } %></script>
</div>
<%- include("./partials/footer.ejs") %>
