|
|
@@ -3,51 +3,17 @@ const domain_name = 'kiwec.net'; // TODO set this in build step?
|
|
|
// Migrate from old authentication method
|
|
|
const legacy_token = localStorage.getItem('token');
|
|
|
if (legacy_token != null) {
|
|
|
- const last_match_id = localStorage.getItem('last_match_id') || '';
|
|
|
+ const window.last_match_id = localStorage.getItem('window.last_match_id') || '';
|
|
|
|
|
|
localStorage.removeItem('token');
|
|
|
localStorage.removeItem('user_id');
|
|
|
- localStorage.removeItem('last_match_id');
|
|
|
+ localStorage.removeItem('window.last_match_id');
|
|
|
|
|
|
const login_to = encodeURIComponent(location.href);
|
|
|
document.cookie = `login_to=${login_to}; path=/; domain=${domain_name}; secure; SameSite=Strict; Max-Age=30000`;
|
|
|
- document.location = '/auth_migrate?token=' + legacy_token + '&last_match_id=' + last_match_id;
|
|
|
+ document.location = '/auth_migrate?token=' + legacy_token + '&window.last_match_id=' + window.last_match_id;
|
|
|
}
|
|
|
|
|
|
-// Grab info from cookies
|
|
|
-let logged_user_id = null;
|
|
|
-let last_match_id = null;
|
|
|
-const cookies = document.cookie.split(';');
|
|
|
-for (const cookie of cookies) {
|
|
|
- const foo = decodeURIComponent(cookie).trim().split('=');
|
|
|
- const key = foo[0];
|
|
|
- if (key == '') break;
|
|
|
-
|
|
|
- let value = foo[1];
|
|
|
- if (value.substr(0, 2) == 's:') {
|
|
|
- value = value.slice(2, value.lastIndexOf('.'));
|
|
|
- }
|
|
|
-
|
|
|
- if (key == 'user') {
|
|
|
- logged_user_id = parseInt(value, 10);
|
|
|
- } else if (key == 'last_match') {
|
|
|
- last_match_id = parseInt(value, 10);
|
|
|
- } else if (key == 'login_to' && value != '') {
|
|
|
- document.cookie = `login_to=; path=/; domain=${domain_name}; secure; SameSite=Strict; Max-Age=0`;
|
|
|
- document.location = value;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Get current ruleset from hostname (eg. 'mania.kiwec.net')
|
|
|
-const rulesets = ['osu', 'taiko', 'catch', 'mania'];
|
|
|
-const subdomain = location.hostname.split('.')[0];
|
|
|
-let selected_ruleset = rulesets.indexOf(subdomain);
|
|
|
-if (selected_ruleset == -1) {
|
|
|
- console.warn('No ruleset found for subdomain "' + subdomain + '"! Defaulting to standard.');
|
|
|
- selected_ruleset = 0;
|
|
|
-}
|
|
|
-document.querySelector('#toggle-rulesets-dropdown-btn img').src = `/images/mode-${rulesets[selected_ruleset]}.png`;
|
|
|
-
|
|
|
function update_header_highlights() {
|
|
|
const header_links = document.querySelectorAll('header a');
|
|
|
for (const link of header_links) {
|
|
|
@@ -59,17 +25,6 @@ function update_header_highlights() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-function update_header_profile() {
|
|
|
- const a = document.querySelector('.login-btn');
|
|
|
- if (logged_user_id) {
|
|
|
- a.href = `/u/${logged_user_id}/`;
|
|
|
- a.querySelector('img').src = `https://s.ppy.sh/a/${logged_user_id}`;
|
|
|
- } else {
|
|
|
- a.href = '/me/';
|
|
|
- a.querySelector('img').src = `/images/login.png`;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// Returns the color of a given star rating, matching osu!web's color scheme.
|
|
|
function stars_to_color(sr) {
|
|
|
if (sr <= 0.1) {
|
|
|
@@ -94,32 +49,13 @@ function stars_to_color(sr) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-document.addEventListener('click', (event) => {
|
|
|
- const open_ruleset_dropdown_btn = document.querySelector('#toggle-rulesets-dropdown-btn');
|
|
|
- const ruleset_dropdown = document.querySelector('#rulesets-dropdown');
|
|
|
- if (open_ruleset_dropdown_btn.contains(event.target)) {
|
|
|
- ruleset_dropdown.classList.toggle('hidden');
|
|
|
- } else {
|
|
|
- ruleset_dropdown.classList.add('hidden');
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-document.querySelectorAll('.choose-ruleset').forEach((btn) => {
|
|
|
- btn.addEventListener('click', function(event) {
|
|
|
- event.preventDefault();
|
|
|
-
|
|
|
- const subdomains = location.hostname.split('.');
|
|
|
- subdomains[0] = this.dataset.ruleset;
|
|
|
- location.hostname = subdomains.join('.');
|
|
|
- });
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
function click_listener(evt) {
|
|
|
- if (this.pathname == '/me/') {
|
|
|
- document.location = '/me/';
|
|
|
- return;
|
|
|
+ const static_routes = ['/faq/', '/me/', '/u/', '/leaderboard/'];
|
|
|
+ for (const route of static_routes) {
|
|
|
+ if (this.pathname.startsWith(route)) {
|
|
|
+ document.location = this.pathname;
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// Intercept clicks that don't lead to an external domain
|
|
|
@@ -281,7 +217,7 @@ function render_closed_lobby(lobby, user_has_lobby_open) {
|
|
|
lobby_div.querySelector('.go-to-create-lobby').addEventListener('click', (evt) => {
|
|
|
evt.preventDefault();
|
|
|
evt.stopPropagation();
|
|
|
- if (logged_user_id) {
|
|
|
+ if (window.logged_user_id) {
|
|
|
window.history.pushState({}, '', `/reopen-lobby/${lobby.match_id}`);
|
|
|
route(`/reopen-lobby/${lobby.match_id}`);
|
|
|
} else {
|
|
|
@@ -324,7 +260,7 @@ function render_open_lobby(lobby) {
|
|
|
evt.preventDefault();
|
|
|
evt.stopPropagation();
|
|
|
|
|
|
- if (!logged_user_id) {
|
|
|
+ if (!window.logged_user_id) {
|
|
|
const login_to = encodeURIComponent(`${location.origin}/lobbies/`);
|
|
|
document.cookie = `login_to=${login_to}; path=/; domain=${domain_name}; secure; SameSite=Strict; Max-Age=30000`;
|
|
|
document.location = '/osu_login';
|
|
|
@@ -354,14 +290,6 @@ function render_open_lobby(lobby) {
|
|
|
return lobby_div;
|
|
|
}
|
|
|
|
|
|
-async function render_faq() {
|
|
|
- document.title = 'FAQ - o!RL';
|
|
|
- const template = document.querySelector('#FAQ-template').content.cloneNode(true);
|
|
|
- const commands_template = document.querySelector('#command-list-template').content.cloneNode(true);
|
|
|
- template.querySelector('.command-list').appendChild(commands_template);
|
|
|
- document.querySelector('main').appendChild(template);
|
|
|
-}
|
|
|
-
|
|
|
async function render_lobbies() {
|
|
|
document.title = 'Lobbies - o!RL';
|
|
|
const template = document.querySelector('#lobbies-template').content.cloneNode(true);
|
|
|
@@ -378,7 +306,7 @@ async function render_lobbies() {
|
|
|
|
|
|
let user_has_lobby_open = false;
|
|
|
for (const lobby of json.open) {
|
|
|
- if (lobby.creator_id == logged_user_id) {
|
|
|
+ if (lobby.creator_id == window.logged_user_id) {
|
|
|
// User already created a lobby: hide the "Create lobby" button
|
|
|
template.querySelector('.lobby-creation-banner').hidden = true;
|
|
|
user_has_lobby_open = true;
|
|
|
@@ -402,7 +330,7 @@ async function render_lobbies() {
|
|
|
evt.preventDefault();
|
|
|
evt.stopPropagation();
|
|
|
|
|
|
- if (logged_user_id) {
|
|
|
+ if (window.logged_user_id) {
|
|
|
window.history.pushState({}, '', '/create-lobby/');
|
|
|
route('/create-lobby/');
|
|
|
} else {
|
|
|
@@ -433,118 +361,9 @@ function get_country_flag_html(country_code) {
|
|
|
return twemoji.parse(emoji);
|
|
|
}
|
|
|
|
|
|
-async function render_leaderboard(page_num) {
|
|
|
- document.title = 'Leaderboard - o!RL';
|
|
|
- const template = document.querySelector('#leaderboard-template').content.cloneNode(true);
|
|
|
-
|
|
|
- document.querySelector('main').appendChild(document.querySelector('#loading-template').content.cloneNode(true));
|
|
|
- const json = await get(`/api/leaderboard/${page_num}`);
|
|
|
- document.querySelector('main .loading-placeholder').remove();
|
|
|
-
|
|
|
- const lboard = template.querySelector('.leaderboard tbody');
|
|
|
- for (const player of json.players) {
|
|
|
- lboard.innerHTML += `
|
|
|
- <tr class="inline-flex justify-between">
|
|
|
- <td class="border border-transparent border-r-zinc-700 p-1.5 pr-3 w-10 text-right">${player.ranking}</td>
|
|
|
- <td class="pl-3 p-1.5 ${player.ranking == 1 ? 'the-one': ''}"><a href="/u/${player.user_id}/">${get_country_flag_html(player.country_code)} ${player.username}</a></td>
|
|
|
- <td class="p-1.5 ml-auto">${fancy_elo(player.elo)}</td>
|
|
|
- <td class="p-1.5 text-orange-600">ELO</td>
|
|
|
- </tr>`;
|
|
|
- }
|
|
|
-
|
|
|
- const pagi_div = template.querySelector('.pagination');
|
|
|
- render_pagination(pagi_div, json.page, json.max_pages, (num) => `/leaderboard/page-${num}/`);
|
|
|
-
|
|
|
- document.querySelector('main').appendChild(template);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-async function render_user(user_id, page_num) {
|
|
|
- let json = null;
|
|
|
- try {
|
|
|
- document.querySelector('main').appendChild(document.querySelector('#loading-template').content.cloneNode(true));
|
|
|
- json = await get('/api/user/' + user_id);
|
|
|
- document.querySelector('main .loading-placeholder').remove();
|
|
|
- } catch (err) {
|
|
|
- console.error(err);
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- const user_info = json.ranks[selected_ruleset];
|
|
|
- document.title = `${json.username} - o!RL`;
|
|
|
-
|
|
|
- const division_to_class = {
|
|
|
- 'Unranked': 'unranked',
|
|
|
- 'Cardboard': 'cardboard',
|
|
|
- 'Wood': 'wood',
|
|
|
- 'Wood+': 'wood',
|
|
|
- 'Bronze': 'bronze',
|
|
|
- 'Bronze+': 'bronze',
|
|
|
- 'Silver': 'silver',
|
|
|
- 'Silver+': 'silver',
|
|
|
- 'Gold': 'gold',
|
|
|
- 'Gold+': 'gold',
|
|
|
- 'Platinum': 'platinum',
|
|
|
- 'Platinum+': 'platinum',
|
|
|
- 'Diamond': 'diamond',
|
|
|
- 'Diamond+': 'diamond',
|
|
|
- 'Legendary': 'legendary',
|
|
|
- 'The One': 'the-one',
|
|
|
- };
|
|
|
-
|
|
|
- const template = document.querySelector('#user-template').content.cloneNode(true);
|
|
|
- template.querySelector('.heading-left img').src = `https://s.ppy.sh/a/${json.user_id}`;
|
|
|
- template.querySelector('.heading-right h1').innerHTML = get_country_flag_html(json.country_code) + ' ' + json.username;
|
|
|
- template.querySelector('.heading-right h1').classList.add(division_to_class[user_info.text]);
|
|
|
- template.querySelector('.heading-right .subheading').href = `https://osu.ppy.sh/users/${json.user_id}`;
|
|
|
-
|
|
|
- const blocks = template.querySelectorAll('.user-focus-block');
|
|
|
- if (user_info.is_ranked) {
|
|
|
- blocks[0].innerHTML = `<span class="text-3xl ${division_to_class[user_info.text]}">${user_info.text}</span><span class="text-xl p-1">Rank #${user_info.rank_nb}</span>`;
|
|
|
- blocks[1].innerHTML = `<span class="text-orange-600 text-3xl">${user_info.total_scores}</span><span class="text-xl p-1">Games Played</span>`;
|
|
|
- blocks[2].innerHTML = `<span class="text-orange-600 text-3xl">${fancy_elo(user_info.elo)}</span><span class="text-xl p-1">Elo</span>`;
|
|
|
- } else {
|
|
|
- blocks[0].innerHTML = `<span class="text-3xl">Unranked</span><span class="text-xl p-1">Rank #???</span>`;
|
|
|
- blocks[1].innerHTML = `<span class="text-orange-600 text-3xl">${user_info.total_scores}</span><span class="text-xl p-1">Games Played</span>`;
|
|
|
- blocks[2].remove();
|
|
|
- }
|
|
|
- document.querySelector('main').appendChild(template);
|
|
|
-
|
|
|
- document.querySelector('main').appendChild(document.querySelector('#loading-template').content.cloneNode(true));
|
|
|
- const matches_json = await get(`/api/user/${user_id}/matches/${page_num}`);
|
|
|
- document.querySelector('main .loading-placeholder').remove();
|
|
|
-
|
|
|
- const tbody = document.querySelector('.match-history tbody');
|
|
|
- const osu_rulesets = ['osu', 'taiko', 'fruits', 'mania'];
|
|
|
- for (const match of matches_json.matches) {
|
|
|
- const row = document.createElement('tr');
|
|
|
- row.classList.add('inline-flex', 'justify-between');
|
|
|
-
|
|
|
- let fancy_elo = Math.round(match.elo_diff);
|
|
|
- if (fancy_elo > 0) fancy_elo = '+' + fancy_elo;
|
|
|
-
|
|
|
- row.innerHTML = `
|
|
|
- <td class="map grow w-40 p-1.5 text-center border border-transparent border-t-zinc-700">
|
|
|
- <a href="https://osu.ppy.sh/beatmapsets/${match.map.set_id}#${osu_rulesets[selected_ruleset]}/${match.map.map_id}"></a>
|
|
|
- </td>
|
|
|
- <td class="w-40 p-1.5 text-center border border-transparent border-t-zinc-700">
|
|
|
- ${match.placement}/${match.nb_players}
|
|
|
- </td>
|
|
|
- <td class="w-40 p-1.5 text-center border border-transparent border-t-zinc-700 ${match.elo_diff >= 0 ? 'text-green-500' : 'text-red-500'}">${fancy_elo}</td>
|
|
|
- <td class="w-40 p-1.5 text-center border border-transparent border-t-zinc-700" data-tms="${match.tms}">${match.time}</td>`;
|
|
|
- row.querySelector('.map a').innerText = match.map.name;
|
|
|
- tbody.appendChild(row);
|
|
|
- }
|
|
|
-
|
|
|
- const pagi_div = document.querySelector('.pagination');
|
|
|
- render_pagination(pagi_div, matches_json.page, matches_json.max_pages, (num) => `/u/${user_id}/page-${num}/`);
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
async function route(new_url) {
|
|
|
console.info('Loading ' + new_url);
|
|
|
update_header_highlights();
|
|
|
- update_header_profile();
|
|
|
|
|
|
let m;
|
|
|
if (m = new_url.match(/\/create-lobby\//)) {
|
|
|
@@ -697,7 +516,7 @@ async function route(new_url) {
|
|
|
document.querySelector('.lobby-creation-success .info').appendChild(info_template);
|
|
|
document.querySelector('.lobby-creation-success').hidden = false;
|
|
|
|
|
|
- last_match_id = json_res.lobby.tournament_id;
|
|
|
+ window.last_match_id = json_res.lobby.tournament_id;
|
|
|
} catch (err) {
|
|
|
document.querySelector('.lobby-creation-error .error-msg').innerText = err.message;
|
|
|
document.querySelector('.lobby-creation-spinner').hidden = true;
|
|
|
@@ -705,7 +524,7 @@ async function route(new_url) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- if (last_match_id) {
|
|
|
+ if (window.last_match_id) {
|
|
|
const recreate_lobby_div = document.createElement('div');
|
|
|
recreate_lobby_div.className = 'border-2 border-orange-600 rounded-lg p-3 text-center mx-2 mt-4';
|
|
|
recreate_lobby_div.innerHTML = `
|
|
|
@@ -717,11 +536,11 @@ async function route(new_url) {
|
|
|
document.querySelector('.reopen-lobby').addEventListener('click', (evt) => {
|
|
|
evt.preventDefault();
|
|
|
evt.stopPropagation();
|
|
|
- if (logged_user_id) {
|
|
|
- window.history.pushState({}, '', `/reopen-lobby/${last_match_id}`);
|
|
|
- route(`/reopen-lobby/${last_match_id}`);
|
|
|
+ if (window.logged_user_id) {
|
|
|
+ window.history.pushState({}, '', `/reopen-lobby/${window.last_match_id}`);
|
|
|
+ route(`/reopen-lobby/${window.last_match_id}`);
|
|
|
} else {
|
|
|
- const login_to = encodeURIComponent(`${location.origin}/reopen-lobby/${last_match_id}`);
|
|
|
+ const login_to = encodeURIComponent(`${location.origin}/reopen-lobby/${window.last_match_id}`);
|
|
|
document.cookie = `login_to=${login_to}; path=/; domain=${domain_name}; secure; SameSite=Strict; Max-Age=30000`;
|
|
|
document.location = '/osu_login';
|
|
|
}
|
|
|
@@ -828,7 +647,7 @@ async function route(new_url) {
|
|
|
document.querySelector('.lobby-creation-success .info').appendChild(info_template);
|
|
|
document.querySelector('.lobby-creation-success').hidden = false;
|
|
|
|
|
|
- last_match_id = json_res.lobby.tournament_id;
|
|
|
+ window.last_match_id = json_res.lobby.tournament_id;
|
|
|
} catch (err) {
|
|
|
document.querySelector('.lobby-creation-error .error-msg').innerText = err.message;
|
|
|
document.querySelector('.lobby-creation-spinner').hidden = true;
|
|
|
@@ -855,30 +674,9 @@ async function route(new_url) {
|
|
|
});
|
|
|
|
|
|
create_lobby_plz(null);
|
|
|
- } else if (m = new_url.match(/\/faq\//)) {
|
|
|
- document.querySelector('main').innerHTML = '';
|
|
|
- await render_faq();
|
|
|
} else if (m = new_url.match(/\/lobbies\//)) {
|
|
|
document.querySelector('main').innerHTML = '';
|
|
|
await render_lobbies();
|
|
|
- } else if (m = new_url.match(/\/leaderboard\/(page-(\d+)\/)?/)) {
|
|
|
- const page_num = m[2] || 1;
|
|
|
- document.querySelector('main').innerHTML = '';
|
|
|
- await render_leaderboard(page_num);
|
|
|
- } else if (m = new_url.match(/\/u\/(\d+)\/page-(\d+)\/?/)) {
|
|
|
- const user_id = m[1];
|
|
|
- const page_num = m[2] || 1;
|
|
|
- document.querySelector('main').innerHTML = '';
|
|
|
- await render_user(user_id, page_num);
|
|
|
- } else if (m = new_url.match(/\/u\/(\d+)\/?/)) {
|
|
|
- const user_id = m[1];
|
|
|
- document.querySelector('main').innerHTML = '';
|
|
|
- await render_user(user_id, 1);
|
|
|
- } else {
|
|
|
- const main = document.querySelector('main');
|
|
|
- if (main.innerHTML.indexOf('{{ error }}') != -1) {
|
|
|
- main.innerHTML = 'Page not found.';
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
const links = document.querySelectorAll('a');
|
|
|
@@ -897,5 +695,4 @@ async function route(new_url) {
|
|
|
|
|
|
|
|
|
// Load pages and hijack browser browsing
|
|
|
-update_header_profile();
|
|
|
route(location.pathname);
|
Clément Wolf