[IMP] website_slides: add an animation when user levels up

PURPOSE

If a user levels up after passing a quiz, we want to clearly show him in the success modal that he
actually passed a level instead of just showing his new rank and xp gauge.

This commit introduces an animation with the progress bar when the user is levelling up.

After reaching the upper bound of the next level:
- The progress bar goes back to 0 ;
- The lower/upper bounds change to reflect the new reached level bounds ;
- The message "Amazing!" becomes "Level Up!" ;
- The motivational phrase changes with a fade out/fade in animation.

LINKS

PR : #39870
Task ID : 2032649

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Co-authored-by: Aurélien Warnon <awa@odoo.com>

1 files changed, 22 insertions, 9 deletions

diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index e937cff43f8..aa52dff794e 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -733,17 +733,15 @@ class WebsiteSlides(WebsiteProfile):
 
         rank_progress = {}
         if not user_bad_answers:
+            rank_progress['previous_rank'] = self._get_rank_values(request.env.user)
             slide._action_set_quiz_done()
             slide.action_set_completed()
-            lower_bound = request.env.user.rank_id.karma_min
-            upper_bound = request.env.user.next_rank_id.karma_min
-            rank_progress = {
-                'lowerBound': lower_bound,
-                'upperBound': upper_bound,
-                'currentKarma': request.env.user.karma,
-                'motivational': request.env.user.next_rank_id.description_motivational,
-                'progress': 100 * ((request.env.user.karma - lower_bound) / (upper_bound - lower_bound))
-            }
+            rank_progress['new_rank'] = self._get_rank_values(request.env.user)
+            rank_progress.update({
+                'description': request.env.user.rank_id.description,
+                'last_rank': not request.env.user._get_next_rank(),
+                'level_up': rank_progress['previous_rank']['lower_bound'] != rank_progress['new_rank']['lower_bound']
+            })
         return {
             'goodAnswers': user_good_answers.ids,
             'badAnswers': user_bad_answers.ids,
@@ -755,6 +753,21 @@ class WebsiteSlides(WebsiteProfile):
             'rankProgress': rank_progress,
         }
 
+    def _get_rank_values(self, user):
+        lower_bound = user.rank_id.karma_min or 0
+        next_rank = user._get_next_rank()
+        upper_bound = next_rank.karma_min
+        progress = 100
+        if next_rank and (upper_bound - lower_bound) != 0:
+            progress = 100 * ((user.karma - lower_bound) / (upper_bound - lower_bound))
+        return {
+            'lower_bound': lower_bound,
+            'upper_bound': upper_bound,
+            'karma': user.karma,
+            'motivational': next_rank.description_motivational,
+            'progress': progress
+        }
+
     # --------------------------------------------------
     # CATEGORY MANAGEMENT
     # --------------------------------------------------