Achievements plugin: add option to change display style (#473)

source/templates/classic/partials/achievements.ejs

@@ -5,14 +5,14 @@
       Achievements
     </h2>
     <div class="row">
-      <section class="largeable-flex-wrap">
+      <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 {title, text, icon, rank, leaderboard = null, progress = 0, unlock = null} of plugins.achievements.list) { %>
+          <% 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">
@@ -32,12 +32,19 @@
               </div>
               <div class="info">
                 <div class="title">
-                  <%= 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>

source/templates/classic/style.css

@@ -1004,37 +1004,55 @@
   .achievement .gauge.info {
     color: #58A6FF;
   }
+  .achievement .value {
+    background-color: #58A6FF26;
+  }
   .achievement.x .title {
     color: #666666;
   }
   .achievement.x .gauge.info {
     color: #B0B0B0;
   }
+  .achievement.x .value {
+    background-color: #B0B0B026;
+  }
   .achievement.b .title {
     color: #9D8FFF;
   }
   .achievement.b .gauge.info {
     color: #9E91FF;
   }
+  .achievement.b .value {
+    background-color: #9E91FF26;
+  }
   .achievement.a .title {
     color: #D79533;
   }
   .achievement.a .gauge.info {
     color: #E7BD69;
   }
+  .achievement.a .value {
+    background-color: #E7BD6926;
+  }
   .achievement.s .title {
     color: #EB355E;
   }
   .achievement.s .gauge.info {
     color: #EB355E;
   }
+  .achievement.s .value {
+    background-color: #EB355E26;
+  }
   .achievement.secret .title{
     color: #FF76CD;
   }
   .achievement.secret .gauge.info {
     color: #FF79D1;
   }
-  .achievement .gh {
+  .achievement.secret .value {
+    background-color: #FF79D126;
+  }
+  .achievement .gh, .achievement .value {
     border: 1px solid currentColor;
     border-radius: 16px;
     font-size: 10px;
@@ -1044,6 +1062,44 @@
   .achievement .gauge-base, .achievement .gauge-arc {
     stroke-width: 6;
   }
+  .achievement .value-wrapper {
+    margin-bottom: -50px;
+    margin-top: 36px;
+    display: none;
+    position: relative;
+  }
+  .achievement .value {
+    margin-left: 46px;
+  }
+  .achievements.compact {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .achievements.compact .achievement {
+    flex-direction: column-reverse;
+    align-items: center;
+    width: 80px;
+  }
+  .achievements.compact .info {
+    width: 100%;
+  }
+  .achievements.compact .achievement .title {
+    margin-bottom: 2px;
+    text-transform: capitalize;
+    text-align: center;
+  }
+  .achievements.compact .achievement .title .prefix {
+    min-height: 13px;
+    font-size: 10px;
+    display: block;
+    margin-bottom: -.25rem;
+  }
+  .achievements.compact .achievement .value-wrapper {
+    display: flex;
+  }
+  .achievements.compact .achievement .text, .achievements.compact .achievement .gh {
+    display: none;
+  }
 
 /* RSS feed */
   .rss {