show level rank on completion

public/stylesheets/learn.css

@@ -35,7 +35,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-flow: row wrap;
+  flex-flow: column wrap;
   border: 1px solid #ccc;
   border-top: none;
   text-align: center;
@@ -60,6 +60,12 @@
     transform: scale(1.05);
   }
 }
+#learn_app .result .stars {
+  margin-top: 4px;
+}
+#learn_app .result .stars i {
+  margin: 3px;
+}
 #learn_app .result button {
   margin: 15px auto 15px auto;
   font-size: 30px;
@@ -226,7 +232,7 @@
 #learn_app .screen .stars {
   margin-bottom: 20px;
 }
-@keyframes appear {
+@keyframes star-appear {
   0% {
     -webkit-filter: saturate(1); opacity: 0.5; transform: scale(0) rotate(-360deg);
   }
@@ -264,7 +270,7 @@
   width: 55px;
   height: 55px;
   opacity: 0;
-  animation: appear 2.5s ease-in-out;
+  animation: star-appear 2.5s ease-in-out;
   animation-delay: 0.1s;
   animation-fill-mode: forwards;
 }

ui/learn/src/progress.js

@@ -7,7 +7,7 @@ function makeStars(level, score) {
   var rank = scoring.getLevelRank(level, score);
   var stars = [];
   for (var i = 3; i >= rank; i--) stars.push(star);
-  return stars;
+  return m('span.stars.st' + stars.length, stars);
 }
 
 module.exports = {
@@ -25,11 +25,7 @@ module.exports = {
       ctrl.stage.levels.map(function(level, i) {
         var score = ctrl.score(level);
         var status = level.id === ctrl.level.blueprint.id ? 'active' : (score ? 'done' : 'future');
-        var label;
-        if (score) {
-          var stars = makeStars(level, score);
-          label = m('span.st' + stars.length, stars);
-        } else label = m('span.id', level.id);
+        var label = score ? makeStars(level, score) : m('span.id', level.id);
         return m('a', {
           href: '/' + ctrl.stage.id + '/' + level.id,
           config: m.route,
@@ -37,5 +33,6 @@ module.exports = {
         }, label);
       })
     );
-  }
+  },
+  makeStars: makeStars
 };

ui/learn/src/run/runView.js

@@ -8,6 +8,7 @@ var stageStarting = require('./stageStarting');
 var stageComplete = require('./stageComplete');
 var renderPromotion = require('../promotion').view;
 var renderProgress = require('../progress').view;
+var makeStars = require('../progress').makeStars;
 
 function renderFailed(ctrl) {
   return m('div.result.failed', {
@@ -24,7 +25,7 @@ function renderCompleted(level) {
     onclick: level.onComplete
   }, [
     m('h2', congrats()),
-    level.blueprint.nextButton ? m('button', 'Next') : null
+    level.blueprint.nextButton ? m('button', 'Next') : makeStars(level.blueprint, level.vm.score)
   ]);
 }