mumuki-laboratory 7.12.1 → 7.12.3

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_kindergarten.scss

@@ -87,155 +87,69 @@ $modal-footer-height: 95px;
   }
 }
 
-.mu-kindergarten-context {
+.modal-content.kindergarten {
+  $width-lg: 800px;
+  $height-lg: $width-lg * 0.625;
 
-  .modal-dialog {
+  width: $width-lg;
+  height: $height-lg;
 
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
+  top: calc(50vh - #{$height-lg} / 2);
 
-    .modal-content {
-      position: absolute;
-
-      $width-lg: 800px;
-      $height-lg: $width-lg * 0.625;
-
-      width: $width-lg;
-      height: $height-lg;
-
-      top: calc(50vh - #{$height-lg} / 2);
-      left: calc(50vw - #{$width-lg} / 2);
-
-      @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
-        $height-sm: 85vh;
-        $width-sm: $height-sm / 0.625;
+  @media (orientation: landscape)  and (max-height: $height-lg + 50px) {
+    $height-sm: 85vh;
+    $width-sm: $height-sm / 0.625;
 
-        width: $width-sm;
-        height: $height-sm;
+    width: $width-sm;
+    height: $height-sm;
 
-        top: calc(50vh - #{$height-sm} / 2);
-        left: calc(50vw - #{$width-sm} / 2);
-      }
-
-      @media (orientation: portrait) {
-        $height-sm: 85vh;
-        $width-sm: 85vw;
-
-        width: $width-sm;
-        height: $height-sm;
-
-        top: calc(50vh - #{$height-sm} / 2);
-        left: calc(50vw - #{$width-sm} / 2);
-      }
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
 
-      $border-width: 16px;
-      border-width: $border-width;
-      border-style: solid;
-      border-color: $mu-color-link;
-      border-radius: $border-width;
-      box-shadow: none;
+  @media (orientation: portrait) {
+    $height-sm: 85vh;
+    $width-sm: 85vw;
 
-      .modal-header,
-      .modal-footer {
-        text-align: center;
-        text-transform: uppercase;
-      }
+    width: $width-sm;
+    height: $height-sm;
 
-      .modal-body {
-        height: 100%;
-        div, p {
-          height: 100%;
-          .mu-kindergarten-context-image-slides {
-            img:not(.active) {
-              display: none;
-            }
-          }
-          img {
-            width: 100%;
-            height: 100%;
-            object-position: center;
-            object-fit: contain;
-          }
-        }
-      }
+    top: calc(50vh - #{$height-sm} / 2);
+    left: calc(50vw - #{$width-sm} / 2);
+  }
 
-      .mu-kindergarten-modal-button {
-        $diameter: 64px;
-        position: absolute;
-        border-radius: 50%;
-        height: $diameter;
-        width: $diameter;
-        color: white;
-        font-weight: bold;
-        border: none;
-        padding: 0;
-        background: $mu-color-link;
-        &.mu-next,
-        &.mu-close {
-          top: - $diameter / 2 - $border-width / 2;
-          right: - $diameter / 2 - $border-width / 2;
-        }
-        &.mu-previous {
-          top: - $diameter / 2 - $border-width / 2;
-          left: - $diameter / 2 - $border-width / 2;
-        }
-      }
+  .modal-header,
+  .modal-footer {
+    text-align: center;
+    text-transform: uppercase;
+  }
 
-      $mu-statuses-colors: (
-        'broken': $mu-color-broken,
-        'danger': $mu-color-danger,
-        'success': $mu-color-success,
-        'warning': $mu-color-warning,
-        'passed': $mu-color-success,
-        'passed-with-warnings': $mu-color-warning,
-        'failed': $mu-color-danger,
-        'errored': $mu-color-broken,
-        'aborted': $mu-color-broken,
-        'pending': $mu-color-info
-      );
-
-      @each $class, $color in $mu-statuses-colors {
-        &.#{$class} {
-          border-color: $color;
-          .mu-kindergarten-modal-button {
-            background: $color;
-          }
-        }
-        .submission-results {
-          width: 100%;
-          height: 100%;
-          .mu-kids-callout-#{$class},
-          p {
-            display: none;
-          }
-          .mu-kids-default-#{$class} {
-            width: 100%;
-            height: 100%;
-            img {
-              width: 100%;
-              height: 100%;
-              object-position: center;
-              object-fit: contain;
-            }
-          }
-        }
-      }
+  .modal-body.mu-kids-context-body {
+    height: 100%;
+    div img, p img {
+      width: 100%;
+      height: 100%;
+      object-position: center;
+      object-fit: contain;
     }
   }
 }
 
-#kids-results.mu-kindergarten-context {
+#kids-results.mu-kids-modal-border {
   .modal-body{
     height: calc(100% - #{$modal-header-height} - #{$modal-footer-height});
   }
 }
-#kids-results-aborted.mu-kindergarten-context {
-  .modal-body{
-    height: calc(100% - #{$modal-header-height});
-  }
-  h4.modal-header {
-    margin: 0;
+
+#kids-results-aborted.mu-kids-modal-border {
+  .modal-content.kindergarten {
+    .modal-body {
+      height: calc(100% - #{$modal-header-height});
+    }
+
+    h4.modal-header {
+      margin: 0;
+    }
   }
 }
 

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_user_profile.scss

@@ -31,7 +31,37 @@
   }
 }
 
-.mu-profile-info {
+.mu-profile-info-left {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  .mu-level-progress {
+    position: relative;
+    top: -275px;
+    margin-bottom: -275px;
+  }
+}
+
+.mu-level {
+  .mu-level-number {
+    position: absolute;
+    margin-top: 11px;
+    margin-left: -86px;
+    width: 87px;
+
+    text-align: center;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: white;
+
+    user-select: none;
+    pointer-events: none;
+  }
+}
+
+.mu-profile-info-right {
   font-size: 20px;
   margin-top: 5px;
   div {
@@ -40,6 +70,4 @@
       font-style: italic;
     }
   }
-
-
 }

data/app/helpers/gamification_helper.rb

@@ -0,0 +1,5 @@
+module GamificationHelper
+  def in_gamified_context?
+    Organization.current.gamification_enabled?
+  end
+end

data/app/views/exercise_solutions/_contextualization_results_container.html.erb

@@ -1,4 +1,13 @@
 <div class="<%= "bs-callout bs-callout-#{icon_class_for contextualization.submission_status}" %>">
   <%= render partial: 'exercise_solutions/results_title', locals: {contextualization: contextualization} %>
+
+  <% if in_gamified_context? %>
+    <div id="mu-exp-earned-message" class="hidden">
+      <span><%= t(:you_earned) %></span>
+      <strong><span id="mu-exp-points"></span></strong>
+      <span><%= t(:exp_points) %></span>
+    </div>
+  <% end %>
+
   <%= yield %>
 </div>

data/app/views/exercise_solutions/_kids_level_up.html.erb

@@ -0,0 +1,11 @@
+<div>
+  <h3 class="text-center">
+    <%= t :level_up %>
+  </h3>
+  <div class="text-center mu-level">
+    <i class="fa fa-star fa-fw fa-4x"></i>
+    <span class="mu-level-number"></span>
+    <p></p>
+    <p id="mu-solve-more-exercises"> <%= (t :solve_more_exercises_to_level_up).html_safe %></p>
+  </div>
+</div>

data/app/views/exercise_solutions/_results_title.html.erb

@@ -1,3 +1,8 @@
 <h4 class="text-<%= icon_class_for(contextualization.submission_status) %>">
   <strong><%= fa_icon icon_type_for(contextualization.submission_status) %> <%= t_contextualization_status contextualization %></strong>
+  <% if in_gamified_context? %>
+    <strong><small class="text-success">
+      <span class="mu-experience"></span>
+    </small></strong>
+  <% end %>
 </h4>

data/app/views/exercises/show.html.erb

@@ -48,7 +48,6 @@
 <%= hidden_field_tag "mu-exercise-id", @exercise.id %>
 <%= hidden_field_tag "mu-exercise-layout", @exercise.layout %>
 <%= hidden_field_tag "mu-exercise-settings", @exercise.settings.to_json %>
-<%= hidden_field_tag "mu-current-exp", UserStats.exp_for(@current_user) %>
 
 <div style="display: none" id="processing-template">
   <div class="bs-callout bs-callout-info">
@@ -62,6 +61,10 @@
     <%= render partial: 'layouts/exercise_skipped' %>
   <% end %>
 
+  <% if in_gamified_context? %>
+    <%= render partial: 'layouts/modals/level_up' %>
+  <% end %>
+
   <%= render partial: 'layouts/modals/guide_corollary', locals: {guide: @guide} %>
   <%= render partial: 'layouts/modals/new_message', locals: {exercise: @exercise} if should_render_message_input?(@exercise) %>
 <% end if current_user? %>

data/app/views/layouts/_kindergarten.html.erb

@@ -4,7 +4,7 @@
     <div class="mu-kindergarten-character-speech-bubble">
       <span class="mu-kindergarten-exercise-description"><%= exercise.description_task %></span>
       <div class="mu-kindergarten-buttons">
-        <button class="mu-kindergarten-show-context" onclick="mumuki.kids.context.showContext()">
+        <button class="mu-kindergarten-show-context" onclick="mumuki.kids.context.show()">
           <img class="mu-kindergarten-button-image" src="https://mumuki.io/static/show-context.svg" alt="">
         </button>
         <button class="mu-kindergarten-play-description" onclick="mumuki.kids.speech.click('.mu-kindergarten-exercise-description', '<%= exercise.locale %>')">

data/app/views/layouts/application.html.erb

@@ -1,4 +1,5 @@
 <%= content_for :navbar do %>
+  <%= hidden_field_tag("mu-current-exp", UserStats.exp_for(@current_user)) if in_gamified_context? %>
   <div class="<%= exercise_container_type %>">
     <nav class="mu-navbar">
       <div class="mu-navbar-breadcrumb hidden-xs">
@@ -18,16 +19,20 @@
       </div>
       <div class="mu-navbar-avatar">
         <% if current_logged_user? %>
+          <% if in_gamified_context? %>
+            <i class="fa fa-star fa-fw fa-2x navbar-icon mu-level-tooltip" data-toggle="tooltip" data-placement="bottom" title="<%= t(:level) %>"></i>
+            <span class="mu-level-number"></span>
+          <% end %>
           <div class="dropdown">
             <span>
               <a class="notifications-box <%= has_notifications? ? '' : 'notifications-box-empty' %>" href=<%= "#{user_notifications_path}" %>>
-                <i class="fa fa-bell fa-fw fa-lg"></i>
+                <i class="fa fa-bell fa-fw fa-2x navbar-icon"></i>
                   <span class="badge badge-notifications"><%= notifications_count %></span>
               </a>
             </span>
           </div>
           <div class="dropdown">
-            <div id="profileDropdown" class="profile-dropdown" data-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
+            <div id="profileDropdown" class="profile-dropdown navbar-icon" data-toggle="dropdown" aria-label="<%= t(:user) %>" role="menu" tabindex="0">
               <%= profile_picture_for current_user %>
               <span class="caret"></span>
             </div>
@@ -76,3 +81,4 @@
 <% end %>
 
 <%= render partial: 'layouts/main' %>
+

data/app/views/layouts/modals/_guide_corollary.html.erb

@@ -1,4 +1,4 @@
-<div class="modal fade guide-corollary" id="guide-done" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade guide-corollary mu-kids-modal-border" id="guide-done" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">

data/app/views/layouts/modals/_kids_context.html.erb

@@ -1,4 +1,4 @@
-<div class="modal fade mu-kids-context" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-context mu-kids-modal-border" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">

data/app/views/layouts/modals/_kids_results.html.erb

@@ -1,17 +1,27 @@
-<div class="modal fade mu-kids-results" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results mu-kids-modal-border" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
+    <div class="modal-content success">
+      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-left fa-3x"></i>
+        </span>
+      </button>
+      <button type="button" class="mu-kids-modal-button mu-next" onclick="mumuki.kids.resultsCarrousel.nextSlide()" aria-label="Next">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-right fa-3x"></i>
+        </span>
+      </button>
+      <div class="modal-header text-center">
       </div>
       <div class="modal-body">
         <div class="container-fluid">
           <div class="row">
             <div class="col-md-12">
-              <div class="row">
-                <div class="col-md-12 submission-results">
+              <div class="mu-kids-results-carrousel">
+                <div class="active submission-results">
                   <% if current_user? && @assignment.solved? %>
                     <%= render partial: 'exercise_solutions/kids_results',
-                                 locals: {assignment: @assignment, guide_finished_by_solution: false} %>
+                               locals: {assignment: @assignment, guide_finished_by_solution: false} %>
                   <% end %>
                 </div>
               </div>

data/app/views/layouts/modals/_kindergarten_context.html.erb

@@ -1,22 +1,22 @@
-<div class="modal fade mu-kindergarten-context" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-modal-border" id="mu-kids-context" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
-    <div class="modal-content">
-      <button type="button" class="mu-kindergarten-modal-button mu-close" data-waiting="" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">
-              <i class="fa fa-fw fa-times fa-3x"></i>
-            </span>
+    <div class="modal-content kindergarten">
+      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-times fa-3x"></i>
+        </span>
       </button>
-      <button type="button" class="mu-kindergarten-modal-button mu-previous hidden" onclick="mumuki.kids.context.prevSlide()" aria-label="Previous">
-            <span aria-hidden="true">
-              <i class="fa fa-fw fa-arrow-left fa-3x"></i>
-            </span>
+      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.context.prevSlide()" aria-label="Previous">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-left fa-3x"></i>
+        </span>
       </button>
-      <button type="button" class="mu-kindergarten-modal-button mu-next" onclick="mumuki.kids.context.nextSlide()" aria-label="Next">
-            <span aria-hidden="true">
-              <i class="fa fa-fw fa-arrow-right fa-3x"></i>
-            </span>
+      <button type="button" class="mu-kids-modal-button mu-next" onclick="mumuki.kids.context.nextSlide()" aria-label="Next">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-right fa-3x"></i>
+        </span>
       </button>
-      <div class="modal-body">
+      <div class="modal-body mu-kids-context-body">
         <div class="container-fluid">
           <div class="row">
             <div class="col-md-12">

data/app/views/layouts/modals/_kindergarten_results.html.erb

@@ -1,17 +1,30 @@
-<div class="modal fade mu-kids-results mu-kindergarten-context" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="modal fade mu-kids-results mu-kids-modal-border" id="kids-results" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
-    <div class="modal-content">
-      <button type="button" class="mu-kindergarten-modal-button mu-close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true">
-              <i class="fa fa-fw fa-times fa-3x"></i>
-            </span>
+    <div class="modal-content kindergarten">
+      <button type="button" class="mu-kids-modal-button mu-close" data-waiting="" data-dismiss="modal" aria-label="Close">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-times fa-3x"></i>
+        </span>
+      </button>
+      <button type="button" class="mu-kids-modal-button mu-previous hidden" onclick="mumuki.kids.resultsCarrousel.prevSlide()" aria-label="Previous">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-left fa-3x"></i>
+        </span>
+      </button>
+      <button type="button" class="mu-kids-modal-button mu-next" onclick="mumuki.kids.resultsCarrousel.nextSlide()" aria-label="Next">
+        <span aria-hidden="true">
+          <i class="fa fa-fw fa-arrow-right fa-3x"></i>
+        </span>
       </button>
       <div class="modal-header">
       </div>
       <div class="modal-body">
         <div class="container-fluid">
           <div class="row">
-            <div class="col-md-12 submission-results">
+            <div class="col-md-12">
+              <div class="mu-kids-results-carrousel">
+                <div class="active submission-results kindergarten"></div>
+              </div>
             </div>
           </div>
         </div>