From 8c241b81cd841adc74f99706c58cc5a0619719ce Mon Sep 17 00:00:00 2001 From: Simon Lecoq <22963968+lowlighter@users.noreply.github.com> Date: Thu, 12 Aug 2021 19:09:13 +0200 Subject: [PATCH] Achievements plugin: add option to change display style (#473) --- source/app/web/statics/about/index.html | 8 +-- source/app/web/statics/app.placeholder.js | 1 + source/plugins/achievements/README.md | 4 ++ source/plugins/achievements/index.mjs | 7 ++- source/plugins/achievements/metadata.yml | 9 +++ .../classic/partials/achievements.ejs | 13 ++++- source/templates/classic/style.css | 58 ++++++++++++++++++- 7 files changed, 89 insertions(+), 11 deletions(-) diff --git a/source/app/web/statics/about/index.html b/source/app/web/statics/about/index.html index 5fd14633..9bd6e3fd 100644 --- a/source/app/web/statics/about/index.html +++ b/source/app/web/statics/about/index.html @@ -81,7 +81,7 @@
-
+
@@ -99,7 +99,7 @@
{{ format("number", leaderboard.user) }}{{ {1:"st", 2:"nd", 3:"rd"}[leaderboard.user%10] ?? "th" }}
/ {{ format("number", leaderboard.total, {notation:"compact", compactDisplay:"long"}) }} {{ leaderboard.type }}
-
{{ title }}
+
{{ prefix }} {{ prefix.length ? title.toLocaleLowerCase() : title }}
{{ text }}
@@ -124,7 +124,7 @@ Highlights
-
+
@@ -140,7 +140,7 @@
-
{{ title }}
+
{{ prefix }} {{ prefix.length ? title.toLocaleLowerCase() : title }}
{{ text }}
diff --git a/source/app/web/statics/app.placeholder.js b/source/app/web/statics/app.placeholder.js index 462a7dca..1882cfde 100644 --- a/source/app/web/statics/app.placeholder.js +++ b/source/app/web/statics/app.placeholder.js @@ -304,6 +304,7 @@ ? ({ achievements: { list: new Array(8).fill(null).map(_ => ({ + prefix: "", title: faker.lorem.word(), unlock: null, text: faker.lorem.sentence(), diff --git a/source/plugins/achievements/README.md b/source/plugins/achievements/README.md index 249e0fcb..6dea2abf 100644 --- a/source/plugins/achievements/README.md +++ b/source/plugins/achievements/README.md @@ -5,6 +5,9 @@ The *achievements* plugin displays several highlights about what you achieved on
+
Compact display + +
@@ -35,4 +38,5 @@ It also lets you quickly see at a glance what this user primarly use GitHub for, plugin_achievements_secrets: yes # Display unlocked secrets achievements plugin_achievements_ignored: octonaut # Hide octonaut achievement plugin_achievements_limit: 0 # Display all unlocked achievement matching threshold and secrets params + plugin_achievements_display: compact # Use compact display ``` diff --git a/source/plugins/achievements/index.mjs b/source/plugins/achievements/index.mjs index cf432b3d..1f36c40c 100644 --- a/source/plugins/achievements/index.mjs +++ b/source/plugins/achievements/index.mjs @@ -10,7 +10,7 @@ export default async function({login, q, imports, data, computed, graphql, queri return null //Load inputs - let {threshold, secrets, only, ignored, limit} = imports.metadata.plugins.achievements.inputs({data, q, account}) + let {threshold, secrets, only, ignored, limit, display} = imports.metadata.plugins.achievements.inputs({data, q, account}) //Initialization const list = [] @@ -26,13 +26,14 @@ export default async function({login, q, imports, data, computed, graphql, queri .filter(a => !ignored.includes(a.title.toLocaleLowerCase())) .sort((a, b) => (order[b.rank] + b.progress * 0.99) - (order[a.rank] + a.progress * 0.99)) .map(({title, unlock, ...achievement}) => ({ - title:({S:`Master ${title.toLocaleLowerCase()}`, A:`Super ${title.toLocaleLowerCase()}`, B:`Great ${title.toLocaleLowerCase()}`}[achievement.rank] ?? title), + prefix:({S:"Master", A:"Super", B:"Great"}[achievement.rank] ?? ""), + title, unlock:!/invalid date/i.test(unlock) ? `${imports.format.date(unlock, {timeStyle:"short"})} on ${imports.format.date(unlock, {dateStyle:"short"})}` : null, ...achievement, })) .map(({icon, ...achievement}) => ({icon:icon.replace(/#primary/g, colors[achievement.rank][0]).replace(/#secondary/g, colors[achievement.rank][1]), ...achievement})) .slice(0, limit || Infinity) - return {list:achievements} + return {list:achievements, display} } //Handle errors catch (error) { diff --git a/source/plugins/achievements/metadata.yml b/source/plugins/achievements/metadata.yml index 12713e2d..4434466b 100644 --- a/source/plugins/achievements/metadata.yml +++ b/source/plugins/achievements/metadata.yml @@ -31,6 +31,15 @@ inputs: type: boolean default: yes + # Achievements display style + plugin_achievements_display: + description: Achievements display style + type: string + default: normal + values: + - normal # Normal display + - compact # Compact display (only icon, name and value are displayed) + # Number of achievements events to display # Set to 0 to disable limitations plugin_achievements_limit: diff --git a/source/templates/classic/partials/achievements.ejs b/source/templates/classic/partials/achievements.ejs index 09b72f14..1d860706 100644 --- a/source/templates/classic/partials/achievements.ejs +++ b/source/templates/classic/partials/achievements.ejs @@ -5,14 +5,14 @@ Achievements
-
+
largeable-flex-wrap"> <% if (plugins.achievements.error) { %>
<%= plugins.achievements.error.message %>
<% } 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) { %>
largeable-width-half">
@@ -32,12 +32,19 @@
- <%= title %> + <%= prefix %> <%= prefix.length ? title.toLocaleLowerCase() : title %> <% if (leaderboard) { %> ranked <%= f(leaderboard.user) %> out of <%= f(leaderboard.total) %> <%= leaderboard.type %> <% } %> + <% if (plugins.achievements.display === "compact") { %> +
+
+ <%= typeof value === "number" ? Math.floor(value) : value ? "☆" : "?" %> +
+
+ <% } %>
<%= text %>
diff --git a/source/templates/classic/style.css b/source/templates/classic/style.css index 3707769f..6eb5c9df 100644 --- a/source/templates/classic/style.css +++ b/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 {