123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <% layout('main.eta') %>
- <%
- const division_to_class = {
- 'Unranked': 'unranked',
- 'Cardboard': 'cardboard',
- 'Wood': 'wood',
- 'Wood+': 'wood',
- 'Wood++': 'wood',
- 'Bronze': 'bronze',
- 'Bronze+': 'bronze',
- 'Bronze++': 'bronze',
- 'Silver': 'silver',
- 'Silver+': 'silver',
- 'Silver++': 'silver',
- 'Gold': 'gold',
- 'Gold+': 'gold',
- 'Gold++': 'gold',
- 'Platinum': 'platinum',
- 'Platinum+': 'platinum',
- 'Platinum++': 'platinum',
- 'Diamond': 'diamond',
- 'Diamond+': 'diamond',
- 'Diamond++': 'diamond',
- 'Legendary': 'legendary',
- 'The One': 'the-one',
- };
- function gen_chart(elos) {
- if(elos.length == 0) elos.push(1500);
- if(elos.length == 1) elos.push(elos[0]);
- let min = elos.reduce((acc, val) => Math.min(acc, val));
- let max = elos.reduce((acc, val) => Math.max(acc, val));
- let norm = elos.map(x => Math.round((x - min) / (max - min) * 150));
- let imod = (640 / elos.length);
- let d = 'M 0 ' + (175 - norm[0]) + ' S';
- for(let i = 1; i < norm.length; i++) {
- d += ` ${Math.round(i * imod)} ${175 - norm[i]}`;
- }
- return `
- <svg viewBox="0 0 600 200">
- <defs>
- <linearGradient id="gradient" gradientTransform="rotate(90)">
- <stop offset="5%" stop-color="yellow" />
- <stop offset="95%" stop-color="orange" />
- </linearGradient>
- </defs>
- <path fill="none" stroke="url('#gradient')" d="${d}" stroke-width="4" />
- </svg>`;
- }
- let rankup_percent = (it.rank.elo - it.rank.rankup?.floor_elo) / (it.rank.rankup?.ceil_elo - it.rank.rankup?.floor_elo);
- rankup_percent = Math.round(rankup_percent * 100);
- %>
- <div class="flex flex-wrap gap-6 justify-center">
- <div class="w-80">
- <div class="flex">
- <img class="block h-24 rounded-full" src="https://s.ppy.sh/a/<%= it.user.user_id %>" />
- <div class="ml-6 mt-3">
- <h1><%= it.user.username %></h1>
- <h3 class="text-lg"><%~ it.flag + ' ' + it.country_name %></h3>
- </div>
- </div>
- <% if(it.rank.is_ranked) { %>
- <div class="text-center mt-4">
- <span class="text-xl <%= division_to_class[it.rank.text] %>"><%= it.rank.text %></span>
- <% if(it.rank.rankup.floor_name != 'The One') { %>
- <div class="progress bg-gray-300" style="width:100%">
- <div class="bar bg-orange-600" style="width: <%= rankup_percent %>%; height: 20px"></div>
- </div>
- <%= Math.ceil(it.rank.rankup.ceil_elo - it.rank.elo) + ' elo to ' + it.rank.rankup.ceil_name %>
- <% } %>
- </div>
- <div class="p-2">
- <%~ gen_chart(it.elo_evolution) %>
- </div>
- <% } %>
- <div class="mt-4">
- <ul>
- <li><span class="text-lg">Rank #<%= it.rank.rank_nb %></span></li>
- <li><span class="text-lg"><%= it.rank.fancy_elo + ' ' %>elo</span></li>
- <li><span class="text-lg"><%= it.rank.total_scores + ' ' %>games played</span></li>
- <% if(it.rank.s2_division) { %><li><span class="text-lg">Season 2: <span class="<%= division_to_class[it.rank.s2_division] %>"><%= it.rank.s2_division %></span></span></li><% } %>
- <% if(it.rank.s1_division) { %><li><span class="text-lg">Season 1: <span class="<%= division_to_class[it.rank.s1_division] %>"><%= it.rank.s1_division %></span></span></li><% } %>
- <li><span class="text-lg"><a target="_blank" href="https://osu.ppy.sh/users/<%= it.user.user_id %>">osu! profile</a></span></li>
- </ul>
- </div>
- </div>
- <div class="max-w-5xl">
- <h2 class="text-center">Match History</h2>
- <table class="match-history block my-4">
- <thead class="flex flex-col">
- <tr class="inline-flex justify-between">
- <td class="map grow w-40 p-1.5 text-center font-bold">Map</td>
- <td class="w-40 p-1.5 text-center font-bold">Placement</td>
- <td class="w-40 p-1.5 text-center font-bold">Elo change</td>
- <td class="w-40 p-1.5 text-center font-bold">Time</td>
- </tr>
- </thead>
- <tbody class="flex flex-col map-list">
- <% it.matches.matches.forEach((match) => {
- let match_elo = Math.round(match.elo_diff);
- if(match_elo > 0) match_elo = '+' + match_elo;
- %>
- <tr class="inline-flex justify-between">
- <td class="map grow">
- <a href="https://osu.ppy.sh/beatmapsets/<%= match.map.set_id %>#<%= it.osu_ruleset %>/<%= match.map.map_id %>"><%= match.map.name %></a>
- </td>
- <td><%= match.placement %>/<%= match.nb_players %></td>
- <td class="<%= match.elo_diff >= 0 ? 'text-green-500' : 'text-red-500' %>"><%= match_elo %></td>
- <td data-tms="<%= match.tms %>"><%= match.time %></td>
- </tr>
- <% }) %>
- </tbody>
- </table>
- <%~
- include('pagination.eta', {
- page_num: it.matches.page,
- max_pages: it.matches.max_pages,
- url_formatter: (num) => `/u/${it.user.user_id}/page-${num}/`
- })
- %>
- </div>
- </div>
|