Files
metrics/source/templates/classic/partials/achievements.ejs

58 lines
3.9 KiB
Plaintext
Vendored

<% if (plugins.achievements) { %>
<section>
<h2 class="field">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.217 6.962A3.75 3.75 0 010 3.25v-.5C0 1.784.784 1 1.75 1h1.356c.228-.585.796-1 1.462-1h6.864a1.57 1.57 0 011.462 1h1.356c.966 0 1.75.784 1.75 1.75v.5a3.75 3.75 0 01-3.217 3.712 5.014 5.014 0 01-2.771 3.117l.144 1.446c.005.05.03.12.114.204.086.087.217.17.373.227.283.103.618.274.89.568.285.31.467.723.467 1.226v.75h1.25a.75.75 0 110 1.5H2.75a.75.75 0 010-1.5H4v-.75c0-.503.182-.916.468-1.226.27-.294.606-.465.889-.568a1.03 1.03 0 00.373-.227c.084-.085.109-.153.114-.204l.144-1.446a5.014 5.014 0 01-2.77-3.117zM3 2.5H1.75a.25.25 0 00-.25.25v.5c0 .98.626 1.813 1.5 2.122V2.5zm4.457 7.97l-.12 1.204c-.093.925-.858 1.47-1.467 1.691a.764.764 0 00-.3.176c-.037.04-.07.093-.07.21v.75h5v-.75c0-.117-.033-.17-.07-.21a.763.763 0 00-.3-.176c-.609-.221-1.374-.766-1.466-1.69l-.12-1.204a5.052 5.052 0 01-1.087 0zM13 5.373V2.5h1.25a.25.25 0 01.25.25v.5A2.25 2.25 0 0113 5.372zM4.5 1.568c0-.037.03-.068.068-.068h6.864c.037 0 .068.03.068.068V5.5a3.5 3.5 0 11-7 0V1.568z"></path></svg>
Achievements
</h2>
<div class="row">
<section class="achievements <%= plugins.achievements?.display ?? "" %> largeable-flex-wrap">
<% if (plugins.achievements.error) { %>
<div class="field error">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
<%= plugins.achievements.error.message %>
</div>
<% } else { %>
<% for (const {prefix, title, text, icon, rank, value, leaderboard = null, progress = 0, unlock = null} of plugins.achievements.list) { %>
<div class="achievement <%= rank === "$" ? "secret" : rank.charAt(0).toLocaleLowerCase() %> largeable-width-half">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="44" width="44">
<defs>
<mask id="mask">
<circle class="gauge-base" r="25" cx="28" cy="28" fill="white"></circle>
</mask>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" class="gauge info">
<circle class="gauge-base" r="25" cx="28" cy="28"></circle>
<% if ((progress)||(rank !== "X")) { %>
<circle class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" stroke-dasharray="<%= progress * 155 %> 155"></circle>
<% } %>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" mask="url(#mask)"><%- icon %></svg>
</svg>
</div>
<div class="info">
<div class="title">
<span class="prefix"><%= prefix %></span> <%= prefix.length ? title.toLocaleLowerCase() : title %>
<% if (leaderboard) { %>
<span class="gh">
ranked <%= f(leaderboard.user) %> out of <%= f(leaderboard.total) %> <%= leaderboard.type %>
</span>
<% } %>
<% if (plugins.achievements.display === "compact") { %>
<div class="value-wrapper">
<div class="value">
<%= typeof value === "number" ? Math.floor(value) : value ? "☆" : "?" %>
</div>
</div>
<% } %>
</div>
<div class="text"><%= text %></div>
</div>
</div>
<% } %>
<% } %>
</section>
</div>
</section>
<% } %>