<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Eventus">

    <title>Eventus Snake</title>

    <!-- Bootstrap core CSS -->
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="../css/style.css" rel="stylesheet">

</head>

<body class="bg-dark">
<div class="container">
    <div class="row">
        <div class="col-md-4">

            <div class="alert bg-light mb-3 mt-3">
                <h5 class="mb-0">Welcome <strong><span class="username_val"></span></strong></h5>
                <h5 class="mb-0" id="score">Score: 0</h5>
            </div>
            <!--leaderBoard Start-->
            <div class="leaderboard leaderboard-main">
                <div class="wrapper">
                    <div class="wrapper__header p-3">
                        <div class="b_logo">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trophy"
                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                      d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935zM3.504 1c.007.517.026 1.006.056 1.469.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.501.501 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667.03-.463.049-.952.056-1.469H3.504z" />
                            </svg>
                        </div>
                        <div class="b_caption">
                            <p>Top Scores <span>leaderboard</span></p>
                        </div>
                    </div>
                    <div class="wrapper__content topScoreLeaderboard_left">
                        <h5 class="text-white">Loading ..</h5>
                    </div>
                </div>
            </div>
            <!--leaderBoard END-->
        </div>
        <div class="col-md-8">
            <div class="container-game mt-3">
                <section class="overlay card card-body">

                    <div class="overlay-div">
                        <div class="gameOverGrid">
                            <div id="gameOver">
                                <h3 class="text-danger">You lose!</h3>
                                <!--leaderBoard Start-->
                                <div class="leaderboard">
                                    <div class="wrapper">
                                        <div class="wrapper__header p-2">
                                            <div class="b_logo">
                                                <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                     class="bi bi-trophy" fill="currentColor"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd"
                                                          d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935zM3.504 1c.007.517.026 1.006.056 1.469.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.501.501 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864.413-1.12.74-2.64.87-4.667.03-.463.049-.952.056-1.469H3.504z" />
                                                </svg>
                                            </div>
                                            <div class="b_caption">
                                                <p>Score Update <span>leaderboard</span></p>
                                            </div>
                                        </div>
                                        <div class="wrapper__content topScoreLeaderboard_right">
                                            <h4 class="text-white">Loading ..</h4>

                                        </div>
                                    </div>
                                </div>
                                <!--leaderBoard END-->
                            </div>
                        </div>
                        <h5 class="text-white text-center ln-2 mt-3">Click on <strong>Play</strong> button to Start the
                            <strong>Snake Game</strong>
                        </h5>
                        <button class="gameOverGrid start-btn btn btn-warning">Play</button>
                    </div>
                </section>

                <section id="gameBoard"></section>
            </div>

        </div>
    </div>
</div>


<!--userName model-->
<div class="modal fade text-center py-5" id="userModal" tabindex="-1" role="dialog" aria-hidden="true"
     data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content bg-dark shadow">
            <div class="modal-body">
                <div class="top-strip-no"></div>
                <img class="img-fluid rounded" src="../img/banner.png"/>
                <h4 class="text-white mt-4">Welcome to Snake</h4>
                <h5 class="text-white pb-2">Please enter <strong>Display name</strong></h5>

                <form method="POST" action="" name="recipient_username" id="recipient_username"
                      enctype="multipart/form-data">
                    <div class="form-group mb-3 w-75 mx-auto">
                        <input type="hidden" name="eventID" id="eventID" class="form-control">
                        <input type="text" name="username" id="username" class="form-control"
                               placeholder="Display name" value="" aria-label="Recipient's username" required>
                    </div>
                    <button type="submit" class="btn btn-success btn-lg">Submit</button>

                </form>
                <div class="bottom-strip"></div>
            </div>
        </div>
    </div>
</div>

</body>

<!-- Bootstrap core JavaScript -->
<!--js-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<!--bootstrap JS-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="../js/script.js"></script>

<script>
    $(document).ready(function () {
        var url = window.location.href;
        //Create a new link with the url as its href:
        var a = $('<a>', {
            href: url
        });
        <!--        var sResult = '<b>Protocol:</b> ' + a.prop('protocol') + '<br/>'     + '<b>Host name: </b>' + a.prop('hostname') + '<br/>'-->
    <!--        + '<b>Path: </b>' + a.prop('pathname').split('/')[1] + '<br/>'-->
    <!--        + '<b>Query: </b>' + a.prop('search') + '</br>'-->
    <!--        + '<b>Hash: </b>' + a.prop('hash');-->

    var sResult = a.prop('pathname').split('/')[1];
    document.getElementById("eventID").value = sResult;
    });
</script>

<script>

    function custom_gameover(scoreNumber) {
        var username_val = $('.username_val').text();
        var eventID = $('#eventID').val();
        $.post('https://snakeeventusai.herokuapp.com/api/v1/score/add/' + eventID + '/' + username_val + '/' + gamePoints + '/1', function (data) {
            console.log('value added');
            setTimeout(function () {
                load_leaderboard(3, 'right');
                load_leaderboard(6, 'left'); // to update the leaderboard again
            }, 1000);
        });
    }

    function load_leaderboard(displayLimit, placement) {
        var eventID = $('#eventID').val();
        /* Code to call getLeaderboard API */

        var settings = {
            "url": "https://snakeeventusai.herokuapp.com/api/v1/score/getLeaderboard/" + eventID,
            "method": "GET",
            "timeout": 0,
        };

        $.ajax(settings).done(function (data) {
            console.log(data);

            data = data.sort(function (a, b) {
                return parseInt(b.scoreValue, 10) - parseInt(a.scoreValue, 10);
            });
            var leaderBoardHtml = '<ul>';
            $.each(data, function (i, score) {
                if (i < displayLimit) { // The top 5.
                    leaderBoardHtml += '<li>';
                    leaderBoardHtml += '<div class="graphic">' + (i + 1) + '</div>';
                    //leaderBoardHtml += '<div class="name"><h4 class="header">' + score.username + '</h4><div class="num"><span class="stat">Score: ' + score.scoreValue + '</span><span class="level">Level: <span>' + score.level + '</span></span></div></div>';
                    leaderBoardHtml += '<div class="name"><h4 class="header">' + score.username + '</h4><div class="num"><span class="stat">Score: ' + score.scoreValue + '</span></div></div>';
                    leaderBoardHtml += '</li>';
                }

            })
            leaderBoardHtml += '</ul>';
            $('.topScoreLeaderboard_' + placement).html(leaderBoardHtml);

        });
    }

    $(document).ready(function () {
        $('#userModal').modal('show');

        $('.modal-content').on('click', '.btn', function (event) {
            var frm = $('#userModal');
            frm.submit(function (e) {
                e.preventDefault();
                var username = $('#username').val();
                var eventID = $('#eventID').val();
                $.post('https://snakeeventusai.herokuapp.com/api/v1/user/add/' + eventID + '/' + username, function (data) {
                    $('#userModal').modal('hide');
                    $('.username_val').text(data.username);

                    load_leaderboard(6, 'left'); // update leaderboard on start game
                });
            });
        });
    });
</script>
</html>
