{% extends 'master.twig' %}

{% set title = 'osu! leaderboard' %}

{% block js %}
    <script>
        var osuModes = {{ gamemodes|json_encode|raw }};

        function yuunoOsuFetch(mode) {
            var client = new Sakura.AJAX,
                leaderboard = Sakura.DOM.ID('osu-lb'),
                loader = Sakura.DOM.ID('osu-lb-loading');

            leaderboard.style.display = 'none';
            loader.style.display = null;

            client.SetUrl("{{ route('osu.leaderboard.data') }}?mode=" + mode);

            client.AddCallback(200, function () {
                var result = client.JSON();

                if (result.error) {
                    var diag = new Sakura.Dialogue;
                    diag.Title = "osu! leaderboard";
                    diag.Text = result.error;
                    diag.AddCallback(Sakura.DialogueButton.Ok, function () {
                        yuunoOsuSwitch(osuModes[0]);
                        this.Close();
                    });
                    diag.Display();
                } else {
                    yuunoOsuBuildList(result);
                }
            });

            client.Start(Sakura.HTTPMethod.GET);
        }

        function yuunoOsuBuildList(list) {
            var numberFormat = new Intl.NumberFormat(navigator.language),
                leaderboard = Sakura.DOM.ID('osu-lb'),
                loader = Sakura.DOM.ID('osu-lb-loading');

            leaderboard.innerHTML = '';

            for (var rank in list) {
                var score = list[rank],
                    dispRank = +rank + 1,
                    container = Sakura.DOM.Create('div', 'osu-leaderboard__container', 'osu-lb-ranking-' + rank),
                    ranking = Sakura.DOM.Create('div', 'osu-leaderboard__ranking osu-leaderboard__ranking--rank-' + dispRank),
                    avatar = Sakura.DOM.Create('div', 'avatar avatar--border osu-leaderboard__avatar'),
                    info = Sakura.DOM.Create('div', 'osu-leaderboard__info'),
                    username = Sakura.DOM.Create('a', 'osu-leaderboard__username'),
                    stats = Sakura.DOM.Create('div', 'osu-leaderboard__stats'),
                    scores = Sakura.DOM.Create('div', 'osu-leaderboard__scores'),
                    level = Sakura.DOM.Create('div', 'osu-leaderboard__level');

                ranking.innerText = '#' + numberFormat.format(dispRank);
                Sakura.DOM.Append(container, ranking);

                avatar.style.backgroundImage = "url('https://a.ppy.sh/" + score.osu_user_id + "')";
                Sakura.DOM.Append(container, avatar);

                username.innerText = score.osu_username + (score.osu_username !== score.username ? " (" + score.username + ")" : '');
                username.href = "https://osu.ppy.sh/u/" + score.osu_user_id;
                username.target = "_blank";
                Sakura.DOM.Append(info, username);

                stats.innerHTML = numberFormat.format(Math.round(score.osu_performance)) + "pp"
                    + " #" + numberFormat.format(score.osu_rank) + " (<img src='/images/flags/" + score.osu_country.toLowerCase() + ".png' alt='" + score.osu_country + "'>"
                    + " #" + numberFormat.format(score.osu_rank_country) + ")"
                    + " " + numberFormat.format(Math.round(score.osu_accuracy * 100) / 100) + '%';
                Sakura.DOM.Append(info, stats);

                scores.innerText = "scores // ranked " + numberFormat.format(score.osu_score_ranked) + " // total " + numberFormat.format(score.osu_score_total);
                Sakura.DOM.Append(info, scores);

                level.innerHTML = "level "
                    + numberFormat.format(Math.floor(score.osu_level))
                    + " // <span class='osu-leaderboard__ss'>SS</span> "
                    + numberFormat.format(score.osu_count_ss)
                    + " / <span class='osu-leaderboard__s'>S</span> "
                    + numberFormat.format(score.osu_count_s)
                    + " / <span class='osu-leaderboard__a'>A</span> "
                    + numberFormat.format(score.osu_count_a);
                Sakura.DOM.Append(info, level);

                Sakura.DOM.Append(container, info);
                Sakura.DOM.Append(leaderboard, container);
            }

            loader.style.display = 'none';
            leaderboard.style.display = null;
        }

        function yuunoOsuReload() {
            yuunoOsuFetch(osuModes.indexOf(window.location.hash.substring(1)));
        }

        function yuunoOsuSwitch(mode) {
            window.location.hash = '#' + mode;
        }

        window.addEventListener("hashchange", yuunoOsuReload);

        window.addEventListener("load", function () {
            if (!window.location.hash.substring(1)) {
                yuunoOsuSwitch(osuModes[0]);
            } else {
                yuunoOsuReload();
            }
        });
    </script>
{% endblock %}

{% block content %}
    <div class="content">
        <div class="content__header">osu! leaderboard</div>
        <div style="text-align: center">
            {% for mode in gamemodes %}
                <h1 onclick="yuunoOsuSwitch('{{ mode }}')" style="cursor: pointer; display: inline-block; margin: 20px 10px">{{ mode }}</h1>
            {% endfor %}
        </div>
        <div id="osu-lb-loading" style="text-align: center; margin: 2em 0">
            <h1>Loading...</h1>
            <h1 class="fa fa-spinner fa-spin fa-4x"></h1>
        </div>
        <div id="osu-lb" style="display: none"></div>
    </div>
{% endblock %}