|
|
@@ -53,68 +53,79 @@
|
|
|
<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 justify-center">
|
|
|
- <img class="block h-16 rounded-full" src="https://s.ppy.sh/a/<%= it.user.user_id %>" />
|
|
|
- <div class="ml-4">
|
|
|
- <h1 class="ml-2"><%~ it.flag %><%= ' ' + it.user.username %></h1>
|
|
|
- <a class="subheading ml-3" target="_blank" href="https://osu.ppy.sh/users/<%= it.user.user_id %>">osu! profile</a>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-<div class="max-w-2xl m-auto">
|
|
|
- <% if(it.rank.is_ranked) { %>
|
|
|
- <div class="flex m-auto p-2">
|
|
|
- <%~ gen_chart([1500, 1600, 1800, 1750, 1400, 1500, 1600, 1500, 1500, 1600, 1800, 1750, 1400, 1500, 1600, 1500]) %>
|
|
|
- <div class="inline-flex flex-col p-2 m-4 whitespace-nowrap">
|
|
|
- <span class="text-lg">Rank #<%= it.rank.rank_nb %></span>
|
|
|
- <span class="text-lg"><%= fancy_elo(it.rank.elo) + ' ' %>elo</span>
|
|
|
- <span class="text-lg"><%= it.rank.total_scores + ' ' %>games played</span>
|
|
|
+<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([1500, 1600, 1800, 1750, 1400, 1500, 1600, 1500, 1500, 1600, 1800, 1750, 1400, 1500, 1600, 1500]) %>
|
|
|
+ </div>
|
|
|
+ <% } %>
|
|
|
+ <div class="mt-4">
|
|
|
+ <ul>
|
|
|
+ <li><span class="text-lg">Rank #<%= it.rank.rank_nb %></span></li>
|
|
|
+ <li><span class="text-lg"><%= fancy_elo(it.rank.elo) + ' ' %>elo</span></li>
|
|
|
+ <li><span class="text-lg"><%= it.rank.total_scores + ' ' %>games played</span></li>
|
|
|
+ <li><a target="_blank" href="https://osu.ppy.sh/users/<%= it.user.user_id %>">osu! profile</a></li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <% } %>
|
|
|
-</div>
|
|
|
-<div class="text-center">
|
|
|
- <span class="text-xl <%= division_to_class[it.rank.text] %>"><%= it.rank.text %></span>
|
|
|
- <div class="progress bg-gray-300" style="width:100%">
|
|
|
- <div class="bar bg-orange-600" style="width: 70%; height: 20px"></div>
|
|
|
- </div>
|
|
|
- 654 elo to Legendary
|
|
|
-</div>
|
|
|
|
|
|
-<div class="max-w-5xl m-auto">
|
|
|
- <h2>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>
|
|
|
+ <div class="max-w-5xl">
|
|
|
+ <h2>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>
|
|
|
|
|
|
- <%~
|
|
|
- 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>
|
Clément Wolf