2281 add badges to user dashboard #2297

jonfroehlich · 2020-10-03T13:21:04Z

Resolves #2281
Resolves #2178

This PR adds badges to the user dashboard. Note that none of the badge tracking or other achievements are implemented yet in the mission screens or mission sidebars. In addition, the backend knows nothing about achievements (not when they were earned, whether we displayed a 'congrats' message to the user, etc.). Finally, I think we should add some additional non-badge related achievements (like based on ranking), which should make mapathons more fun. All of that work is left to future PRs.

To work on this, I originally branched off of this, which I created a PR for here #2289 a few days ago. Note: I just ran a git origin to make sure everything is up to date from that branch and it is:

git pull origin 1680-give-users-more-feedback-on-dashboard
From https://github.com/ProjectSidewalk/SidewalkWebpage
 * branch              1680-give-users-more-feedback-on-dashboard -> FETCH_HEAD
Already up to date.

So, @misaugstad, you can either review this PR (which includes everything from this #2289 PR) or you review #2289 first and then come back to this PR. Not sure what your preferred process will be.

You can see lots of screenshots and discussions for this PR here: #2281

I've tested both English and Spanish translations.

The code is pretty straightforward. The achievement tracking happens in the new AchievementTracker.js. The most complicated part of the code is the language handling, especially for the dynamic language production of encouraging sentences and ensuring proper grammar for singular vs. plural statements. This is done through conditional logic and the use of the i18next library with json files en\dashboard.json and es\dashboard.json

had </img> on a <script>

…dd-badges-to-user-dashboard

…github.com/ProjectSidewalk/SidewalkWebpage into 2281-add-badges-to-user-dashboard

userProfile.scala.html updated to dynamically show badges based on current values (on page load). Now uses AchivementTracker.js

Thanks Gari: #2281 (comment)

#2281 (comment)

…an 0.095 this ensures that first distance badge is earned after first auditing mission

…Webpage into 2281-add-badges-to-user-dashboard

misaugstad

Okay got it all cleaned up! There were a couple small bugs related to conversions/translations. But most of my changes were stylistic.

misaugstad · 2020-10-23T22:30:50Z

public/javascripts/AchievementTracker.js

+        if (badgeType in this.mapBadges) {
+            let mapLevelsToBadge = this.mapBadges[badgeType]
+            let prevBadge = null;
+            for (let level of Object.keys(mapLevelsToBadge)) {


I changed your for..in loops to for..of loops, looping over the keys. I think that with the for..in loops you are supposed to do the hasOwnProperty() check that you don't need to do with this other method. I also think that for..in doesn't guarantee ordering, which it looks like you are relying on here.

misaugstad · 2020-10-23T22:31:18Z

app/views/userProfile.scala.html

+                    <h3>@Messages("dashboard.missions")</h3>
+                    <p id="missions-badge-encouragement" class="achievements-encouraging-statement">Just XX more missions until your next mission achievement.</p>
+                    <div id="missions-badge-grid" class="achievements-badge-grid">
+                        <img id="missions-badge1" src='@routes.Assets.at("images/badges/badge_missions_badge1.png")' alt="@Messages("dashboard.mission.badge", Messages("dashboard.first"))">


I added alt text with translations to the badges

misaugstad · 2020-10-23T22:32:43Z

app/views/userProfile.scala.html

@@ -84,12 +150,15 @@
        }, function(err, t) {
            var difficultRegionIds = @Json.toJson(RegionTable.difficultRegionIds);
            window.progress = Progress(_, $, L, "@user.get.role", difficultRegionIds);
+
+            const achievementTracker = new AchievementTracker();
+            achievementTracker.updateBadgeAchievementGrid(


I removed the measurement system from the list of parameters, because you can get the measurement system in the Javascript using i18next.t('common:measurement-system')

misaugstad · 2020-10-23T22:34:02Z

public/javascripts/AchievementTracker.js

+            } else if (fractionComplete > 0.85) {
+                htmlStatement += i18next.t('dashboard:wow-almost-there') + ' ' + i18next.t('dashboard:just') + ' ';
+            } else if (fractionComplete > 0.1 || curBadgeLevel > 0) {
+                let randStatement = encouragingStatements[Math.floor(Math.random() * encouragingStatements.length)];


I shortened this by choosing randomly from a list instead of having the 10 if cases.

misaugstad · 2020-10-23T22:34:59Z

public/javascripts/AchievementTracker.js

+
+            // Convert to from miles to kilometers if using metric system.
+            const measurementSystem = i18next.t('common:measurement-system');
+            if (badgeType === BadgeTypes.Distance && measurementSystem === 'metric') diffValue *= 1.60934;


You had a bug here because you were dividing by 1.60934 instead of multiplying by it when converting from miles to kilometers.

misaugstad · 2020-10-23T22:36:54Z

public/javascripts/AchievementTracker.js

+
+            // Add translation for how much is left before the next achievement. For example, "1 misión más hasta tu
+            // próximo logro." or "1.3 more miles until your next achievement."
+            htmlStatement += i18next.t('dashboard:more-unit-until-achievement', {


I reorganized this a bit. Instead of building each piece of the sentence up from translated fragments, I put the entire sentence into one translation, and the translation requires some parameters which do what you were doing.

misaugstad · 2020-10-23T22:38:44Z

public/locales/en/dashboard.json

+  "badge-labels-plural": "labels",
+  "badge-validations-singular": "validation",
+  "badge-validations-plural": "validations",
+  "more-unit-until-achievement": "<strong>{{n}} more $t({{unit}})</strong> until your $t({{firstOrNext}}) achievement.",


Here's the sentence where I combined your different fragments of a sentence together. You can reference other translations from within a translation using $t() and you can get the value of a parameter using {{}}. So we can even pass in a translation as a parameter, and then stick that into the current translation using $t({{}}).

jonfroehlich added 25 commits September 28, 2020 11:53

adding initial framework for badges to userProfile

7d2f9de

added mission badges

5fa4dfa

slight updates to css for badge layout

9a6925e

added no cape version of missions badge

edc7d8a

oops. fixed incorrect closing tag

3619920

had </img> on a <script>

added distance and validation badges

fd5b9ca

slight decrease in spacing between achievement blocks

1c300f2

playing around with overlays to obscure not-yet-earned badges

c9d0765

Merge branch '1680-give-users-more-feedback-on-dashboard' into 2281-a…

0a41c0a

…dd-badges-to-user-dashboard

working on translucent overlays

78eeb38

Merge branch '1680-give-users-more-feedback-on-dashboard' of https://…

1ab7a80

…github.com/ProjectSidewalk/SidewalkWebpage into 2281-add-badges-to-user-dashboard

Merge branch '1680-give-users-more-feedback-on-dashboard' of https://…

ff68893

…github.com/ProjectSidewalk/SidewalkWebpage into 2281-add-badges-to-user-dashboard

deleted messed up code as a result of merging

e8a4f3d

Merge branch '1680-give-users-more-feedback-on-dashboard' of https://…

d5f79c8

…github.com/ProjectSidewalk/SidewalkWebpage into 2281-add-badges-to-user-dashboard

temporarily removing badges so i can rename them all lowercase

544798c

added all lowercase named badges

3e98c64

added AchivementTracker.js for badge and other tracking

fd2e220

userProfile.scala.html updated to dynamically show badges based on current values (on page load). Now uses AchivementTracker.js

renamed Exactitud to Precisión

6edeb47

Thanks Gari: #2281 (comment)

added more dynamic encouragement statements

15cd2f6

added updated distance badges (larger text and metric versions)

6fbf8a0

Added dynamic support for badges and text for metric vs. imperial

177a2f3

#2281 (comment)

working on dynamic translations using dashboard.json

cc06f9b

fixed frontend translations for user dashboard using .json

4410d01

slightly reduced first badge threshold for distance to 0.09 rather th…

54f2619

…an 0.095 this ensures that first distance badge is earned after first auditing mission

achievement grid now invisible until content loaded

d40febe

jonfroehlich linked an issue Oct 5, 2020 that may be closed by this pull request

User dashboard: add badges to dashboard #2281

Closed

misaugstad self-requested a review October 13, 2020 20:56

misaugstad assigned jonfroehlich and misaugstad Oct 13, 2020

Merge branch 'develop' of https://github.com/ProjectSidewalk/Sidewalk…

bd38462

…Webpage into 2281-add-badges-to-user-dashboard

misaugstad added 7 commits October 22, 2020 15:27

removes unused icons, moved to Design repo

01a3d84

style updates

fee4063

style updates to achievement trackers

720d12c

various style updates for user dashboard code

6684421

fixes bug in converting miles to km

337a317

switched to consistently using single quotes for strings

07ec717

adds alt-text w/ translations to user dashboard

d384c76

misaugstad approved these changes Oct 23, 2020

View reviewed changes

misaugstad merged commit 04907bc into develop Oct 23, 2020

misaugstad deleted the 2281-add-badges-to-user-dashboard branch October 23, 2020 22:40

This was referenced Oct 24, 2020

v6.12.0 #2334

Merged

Add badge system (gamification) #2178

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2281 add badges to user dashboard #2297

2281 add badges to user dashboard #2297

jonfroehlich commented Oct 3, 2020 •

edited by misaugstad

Loading

misaugstad left a comment

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

misaugstad Oct 23, 2020

2281 add badges to user dashboard #2297

2281 add badges to user dashboard #2297

Conversation

jonfroehlich commented Oct 3, 2020 • edited by misaugstad Loading

misaugstad left a comment

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

misaugstad Oct 23, 2020

Choose a reason for hiding this comment

jonfroehlich commented Oct 3, 2020 •

edited by misaugstad

Loading