This repository has been archived on 2024-06-26. You can view files and clone it, but cannot push or open issues or pull requests.
sakura/resources/views/yuuno/osu/leaderboard.twig

131 lines
5.5 KiB
Twig
Raw Normal View History

2016-12-11 18:51:45 +00:00
{% 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 %}